days
-1
0
hours
-2
-1
minutes
-4
-6
seconds
0
-2
search

Setting up a smart forum app using Google Cloud AI [Tutorial]

Melisha Dsouza
google cloud
© Shutterstock / rezen

Are you ready to use Google Cloud AI? This tutorial is based off a book by Arvind Ravulavaru called Google Cloud AI Services Quick Start Guide. Melisha Dsouza explains how you can utilize the power of Google Cloud AI to set up a project, installi dependencies, go through the code, and run the app.

Google Cloud seems to be using artificial intelligence as a strategy to unlock more customers in the ever increasing race to conquer the hyper-competitive cloud infrastructure landscape. It is fast, scalable, and easy to use. In this article, users will harness the power of Google Cloud AI to set up a base project called ‘Smart Forum App’.

This tutorial is an excerpt from a book written by Arvind Ravulavaru titled Google Cloud AI Services Quick Start Guide.

Technical requirements

You will be required to have Node.js 6.13.1 installed on a system. Finally, to use the Git repository of this book, the user needs to install Git.

The code files of this chapter can be found on GitHub.

Check out this video to see the code in action.

SmartExchange architecture

The application we are going to build in is named  SmartExchange. SmartExchange is a forum application, where registered users can create threads or topics of discussions and other users can like or reply to it. SmartExchange is not a full-fledged forum application but has all the key pieces needed to showcase the idea. We are going to work with the following Cloud AI services:

  • Cloud vision
  • Video intelligence
  • Speech recognition
  • Cloud language processing
  • Cloud translation

SmartExchange demo

Before getting started, you can take a look at the SmartExchange demo here.

SEE ALSO: Pick a serverless fight: A comparative research of AWS Lambda, Azure Functions & Google Cloud Functions

Database design

We will take a look at the database design. We are going to have three collections; namely, user, thread and message. Any visitor to our forum will be able to view the threads and replies. But they cannot post a reply or create a thread or like a reply/thread till they log in. The user collection will have the following schema:

  • Name
  • Email
  • Password
  • Role: Will have two values, user and admin. The default value is user.

 The thread collection will have the following schema:

  • Title: The title of the thread.
  • Description: The description of the thread.
  • Tags: The searchable tags for the thread.
  • Is Pinned: The boolean values that pins this thread on top of other threads. Default is false.
  • Likes: The number of likes on this thread. Default zero.
  • Created By: The MongoDB Object ID of the user who has created this thread.
  • Created At: The time at which the record was created.
  • Last Update By: The MongoDB Object ID of the user who has updated this thread.
  • Last Update At: The time at which the record was updated.

 The message collection will have the following schema:

  • Thread: The MongoDB Object ID of the thread to which this message belongs to.
  • Description: The message contents.
  • Likes: The number of likes on this thread. Default zero.
  • Created By: The MongoDB Object ID of the user who has created this message.
  • Created At: The time at which the record was created
  • Last Update By: The MongoDB Object ID of the user who has updated this message.
  • Last Update At: The time at which the record was updated.
  • We will be updating the message schema as we keep working with various Google Cloud AI services. This concludes the database schema walk-through. In the next section, we are going to look at the APIs exposed by SmartExchange

SEE ALSO: Google Cloud Next ’18: Everything cloud developers have hoped for

Setting up the project

Now that we are aware of the high-level architecture, let’s get started by setting up the environment to develop the project. To develop and run the application locally, we need to have the following dependencies installed:

  1. Git
  2. js
  3. MongoDB (optional)
  4. Angular CLI
  5. Yarn (optional)
  6. Heroku Toolbelt (optional)

Check out the book Google Cloud AI Services Quick Start Guide for a detailed explanation on how to install these dependencies.

Setting up mLab

Now that we have set up all our local dependencies, we are going to set up mLab account.

Check out the book Google Cloud AI Services Quick Start Guide for a detailed explanation to set up mLab.

Test connection

Now that we have set up our database and the database user, let’s test the connection. On the mLab database page, you should see the section shown in the below screenshot:

Google Cloud

This is our connection string, using which we can connect to the database from our application or from mongo shell or from a GUI tool like Robo 3T. If you have MongoDB installed locally, you can test the connection from the mongo shell using the command as shown. Open a new Terminal/Prompt and run:

$ mongo ds211309.mlab.com:11309/smart-exchange -u admin -p admin123

We should see that the connection succeeded as shown in the following screenshot:

Google Cloud

This concludes our connection test.

Update the connection string above with your connection string; otherwise, you will be connecting to my database.

SEE ALSO: GitLab migration: See you later Azure; hello Google Cloud Platform

Setting up an authentication

When working with any Google Cloud AI service, we need to have either an API key or a service account key set up. In this section, we are going to set up both, so you can use any approach to explore. Before we set up the API key or a service account, we need to have a Google Cloud project. If you already have a project, you can skip this section.

Creating the project

To create a new project, follow the below steps:

  1. Navigate to Google Platform Console
  2. Create a new project using the project selector menu form the top navigation bar of the page
  3. I have created a new project for this book named as SmartExchange and have given a custom project ID as smart-exchange-b10882, you can pick which ever you are comfortable with

This is the project we are going to use for this book and we are going to enable all the required keys and APIs on this project.

Setting up API key

Now that we have a project, let’s set up an API key first. Follow these steps:

  1. Navigate to Google Platform Console
  2. Select the project we have created
  3. From the menu on the left-hand side, select APIs & Services
  4. Once you are on APIs & Services page, from the menu on the left-hand side, select Credentials
  5. Using the Create Credentials drop down on the page, select API key
  6. This will generate an API key, copy that key and protect it as you would a secure password

We will be using this key soon to explore the Vision API.

SEE ALSO: AppSec at the speed of DevOps in the age of open source

Setting up service account key

Now that we have a project and an API key, let’s set up a Service Account Key as well.

Follow these steps:

  1. Navigate to Google Platform Console
  2. Select the project we have created
  3. From the menu on the left-hand side, select APIs & Services
  4. Once you are on APIs & Services page, from the menu on the left-hand side, select Credentials
  5. Using the Create Credentials dropdown on the page, select Service account key
  6. Under Service account dropdown, select New service account and fill it as below
    1. Service account name: smart-exchange-service-account
    2. Role: Project| Owner (do not use this role in production, provide access to only the required services)
  7. Leave the auto generated Service account ID as is
  8. Under key type, select JSON
  9. Click on Create and you should be prompted to download a JSON file.
  10. Download and save this file securely and protect it as you would a secure password.

We will be using a service account key when we make a service call from our application using the SDK. The SDK expects this JSON file’s path to be exposed using a environment variable named GOOGLE_APPLICATION_CREDENTIALS and the value as the path to the JSON file. If you are using an *nix-based OS, you can set this value from the Command

Prompt as follows:

export GOOGLE_APPLICATION_CREDENTIALS=/Users/arvindravulavaru/Downloads/ SmartExchange-29e9aed0a8aa.json

Or you can add the same to bashrc or profile or zshrc file.

On Windows, you can use:

setx GOOGLE_APPLICATION_CREDENTIALS "C:/Users/arvindravulavaru/Downloads/ SmartExchange-29e9aed0a8aa.json"

For more help on setting environment variables, refer here. We will be using this later on when we are integrating the API with our application.

SEE ALSO: Cettia: A Java server for building real-time web apps

Setting up code

Now that we have all the tools needed to start developing the application, we will go through the list of technology pre-requisites:

  • SmartExchange application is completely written in TypeScript.
  • On the server side, we are going to use Mongoose to interface with the MongoDB.
  • Express is going to be our service side MVC framework.
  • Finally, on the client side, we are going to use Angular framework, Version 5.2.0.

To get the combined knowledge of an entire MEAN stack application, take a look at the video entitled Setting up a MEAN4+ App (MongoDB, Express.js, Nodejs, Angular)Make sure you have at least a basic understanding of the above before you continue.

Downloading base code

Let’s get started with the actual code now. On your machine where you have installed all your dependencies, create a new folder named SmartExchange. Open Command Prompt or Terminal inside that folder. Navigate to the Quick Start guide on GitHub and you should find a folder in this repository named Chapter 2\code\smart-exchange-base.

If you would like, you can download the entire repository that consists of completed code chapter by chapter, or you can explicitly download the code of one folder using a service such as GitZip. To use GitZip, head over to here and paste https://github.com/PacktPublishing/Getting-Started-with-Google-Cloud-AI-Services/tree/master/Chapter%202/code/smart-exchange-base%20 in the text box at the top right-hand corner. This will download only the smart-exchange-base folder.

Once you have successfully downloaded the smart-exchange-base folder, cd into the smart-exchange-base folder from your Command Prompt / Terminal.  We have a package.json file at the root of the smart-exchange-base folder. This file has all the required dependencies listed. We would need to install them to get started. Run the following command:

$ npm install 

or

$ yarn install

This will install all the dependencies listed. Next, open the entire application in your favorite editor, and then open README.md. This file gives you a quick overview of this app.

As it states here, the base template is created by Davide Violante and I have customized it for this book. The original repository can be found here. This is one of the latest repositories I have found that has all the key ingredients for developing a production grade application. I have added a bunch of things on top of it to make it a bit more robust.

SEE ALSO: Progressive Web Apps and how they can increase engagement

Once the installation is completed, let’s actually set up the Database connection URL. Open .env file present at the root of the folder and update the MONGODB_URI value to the connection string that you have created, the one from mLab. We will walk-through the code in a few moments, which will explain where which value is used. If you leave the connection string as is, you will see an error, as my database no longer exists.

Once you have updated the connection, head back to Command Prompt / Terminal and run the following:

$ npm run dev

or

$ yarn dev

This will concurrently start the Angular CLI server with a proxy to 3000 port on the same machine, which is where our Express server is running, run the TypeScript compiler on the server folder, and execute the app.js present in the dist/server folder on port 3000.

Once the command has finished executing, it will launch the application on your default browser at http://localhost:4200/ and will serve the home page. If everything goes well, we should see something such as this:

Google Cloud

Note, if you would like to use a local instance of MongoDB instead of mLab, you can update MongoDB URI as follows:

MONGODB_URI=mongodb://localhost:27017/smart-exchange

Use the following command:

$ npm run dev:local

or

$ yarn dev:local

This script will start the local MongoDB instance as well, along with other initializations.

Server code walk-through and client code walkthrough, visit the book Google Cloud AI Services Quick Start Guide.

SEE ALSO: Nuxt.js 1.0: Make web apps faster than ever with this Vue-based framework

Components

The final entity we are going to look at is the components. For this section, instead of pointing to the code in the text editor, I will refer to the hosted documentation. The hosted documentation has additional information that we are going to see in a moment. You can read more about these components, under the Components section, here. Here is the list of key components on the client site.

Running the app

Now that we have a good understanding of the code base, lets go back to the Command Prompt or Terminal and run the application, if it is not already running. You can use the following command to run the application:

$ npm run dev

or

$ yarn dev

This will launch the default browser and navigate you to http://localhost:4200/. Let’s register with the application and, to do that, navigate to the register page using the menu link. Create a new account with your details.

If everything goes well, you should see a success message and be redirected to the login page. Log in with the newly created credentials, and if everything goes well, we will be logged into the application and we should see a screen as shown in the following screenshot:

Google Cloud

Before we go further, lets take a quick peek at the database. You can use either mongo shell or Robo 3T or mLab interface itself to view this data. I have used mongo shell and here is the user’s collection:

Google Cloud

Next, let’s create a thread. Click on Create New Thread button and fill the form as shown in the following screenshot:

Google Cloud

SEE ALSO: Putting Angular and progressive web apps to work in 2018

Click on Create. The database snapshot of the same would be as follows:

Google Cloud

Click on the thread title on the home page and it will take you to the view thread page. Click on the heart to add a like to this thread. You can click as many times as you want and the likes increase. This is the way I have designed it— unconditional love. You are free to redesign the application as you please. To pin the thread, you can click on edit thread icon and check the Pin this thread checkbox and Save.

Your thread list on the home page should look like this:

Google Cloud

The database snapshot would be as follows:

Google Cloud

SEE ALSO: Google Cloud Container Builder is here for all of your Docker builds

Now, lets add reply to thread. Click on thread title and navigate to the view thread page. Under the comments section, fill the form with your reply and post it. This will add a new reply to the thread and a new document to the message collection as shown in the following screenshot:

Google Cloud

On the view thread page, the thread as well as the replies can be found and it should look something like this:

Google Cloud

Simple, right! Now, the goal of our book is to make this application smarter while adding content to this forum. We will go through each of the Google Cloud AI services and then add one feature at a time to this application and make this forum app a smart forum app. Now that we have gone through the application, let’s conclude this chapter by deploying the application to Heroku, so you can show off you new app!

SEE ALSO: No code shall remain unfound – Google announces beta availability of Cloud Source Repositories

In conclusion

In this tutorial, we have understood the smart forum app architecture and the technology involved in creating the app. We also learned to install the required dependencies and downloaded the base application. We then walked through the code and ran the application.

In order to leverage the power of various Google Cloud AI Services to build a smart web application using MEAN Stack, check out this book – Google Cloud AI Services Quick Start Guide by Packt.  Get the eBook for just $10 (limited period offer).

Author

Melisha Dsouza

Melisha Dsouza is Technical Writer at Packt. Pizza lover by heart who enjoys reading, writing, and talking!


Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of