Create a Speech Enabled Quiz Application and Dashboard using Cloudant and IBM Watson

Description

This is an application meant for taking quizzes and monitoring them using a web interface based. The application is based on Android and the web interface is based on PHP. The entire system uses Cloudant NoSQL Database for the storage. This can be used to create, take and manage quizzes which can be used at multiple areas such as workshops, schools, webinars etc.

Learning Objectives

This guide shows you how can you deploy a PHP web application on IBM Cloud. This also shows how to create, connect and manage a Cloudant database instance on IBM Cloud. You will also learn how to fetch the required data from cloudant using search index queries. Moreover, you will get to know the integration of IBM Cloudant DB and IBM Watson Speech to Text using Java SDK.

Prerequisites

An IBM Cloud Account. (You can create one here, and get 30 days free trial)
IBM Cloud Command Line Interface
GIT Command Line Interface
Android Studio(3.1 and above)

Estimated Time

These steps will take you approximately 90 minutes.This does not include creating an IBM Cloud account(if you don’t have one) or downloading the IBM Cloud CLI. It includes 10 minutes for creating cloudant service and generating credentials. Creating and the initial starting of PHP Service instance takes 10 minutes. Cloning the sample codes and doing the modifications can take you around 30 minutes. Deploying the code to the PHP Service using IBM Cloud CLI can take 10 minutes. Deploying the app locally can take upto 10 minutes.

Steps

In this guide you will perform following steps:

Creating a PHP Service on IBM Cloud.
Create a Cloudant Service on IBM Cloud and generate credentials.
Creating Database and Search Index in Cloudant DB
Cloning the two sample codes from GitHub.
Making necessary modifications in the PHP sample code before deployment.
Deploying local code to the PHP service using IBM Cloud CLI.
Modifying Android Sample Code.
Running the application.

1. Create a PHP Service

Go to Catalog from IBM Cloud homepage.
Select Compute.
Scroll down to PHP Service.
After giving suitable app name and hostname click Create button to create a PHP Service.
Once the service is running you can access it by clicking Visit App URL.

2. Create Cloudant Service and Generating Credentials

Go to Catalog from IBM Cloud homepage.
Select Databases.
Click Cloudant tile.
After giving suitable Service Name, in available authentication methods select Use both legacy credentials and IAM and then click Create button below to create the DB instance.
Once the service is created you can access the Cloudant Dashboard by clicking LAUNCH CLOUDANT DASHBOARD button.
For creating service credentials select Service Credentials.
Click on New Credentials Button.
After giving the suitable name to credentials, click Add button. This will generate credentials with the given name which will be used later to communicate with the DB.

3. Creating Database and Search Index in Cloudant DB

Go to Manage and Launch Cloudant Dashboard, this will take you to Cloudant dashboard. From here you can completely manage your database instance.
Go to Databases.
- You will not be able to see any databases there when you open it for the first time.
- For this application we will be creating following two databases:
  - Quizzes - This will be used to store all the details of quizzes that will be created by the admin.
  - User_responses - This will be used to store the quiz submissions by users for all quizzes.
Click Create Database.
After giving suitable name for the first database(for storing quizzes) click Create button.
Click on the first database which you have created to open the database
Go to Plus Icon near Design Documents and Click New Search Index
After giving suitable name to design document and search index, create following function definition in Search index Function:

function (doc) {
  index("quizid", doc.quizid);
}

This creates a search index for the database. We will be using this search index to check if the username already exists in the DB or not.

Scroll down and click Create Document and Build Index
Now go back to cloudant dashboard and create the second database( Follow the same procedure of step 11 and 12). After creating the second database, open the database by clicking the database name.
After creating the second database, open the database by clicking the database name.
Now we will create a search index for this database also. To create a search index go to Plus Icon near Design Documents and Click New Search Index

After giving suitable name to design document and search index, create following function definition in Search index Function:

function (doc) {
  index("email", doc.email);
}

This creates a search index for the database. We will be using this search index to search with the email to check if the username already exists in the DB or not.

Scroll down and click Create Document and Build Index

4. Cloning Sample Repositories

Accessing Git CLI

For windows Users: Open Git CMD
For Linux and Mac Users: Open Terminal

Use the following command to clone the PHP Web Interface sample repository

$ git clone https://github.com/Ritwikjoshi/ibmquizsample

Use the following command to clone the Android Application sample code repository

$ git clone https://github.com/bdbhavyadave/ibmquizsampleandroid

5. Modifying PHP Sample Code(repository cloned in the previous step2 of cloning sample repositories)

Open Credentials.php file in the cloned folder.
Replace Username, Password, Host, Database and Search Index Names in the file.

Note - dbname1, designdocument1, searchindex1 are for the database which will store the quizzes(the database we created first) and dbname2, designdocument2, searchindex2 are for the database which will store the user submissions(the database we created later).

Now, open the manifest.yml file located in the cloned folder and replace with your application name ( Name of the PHP Service you created in the beginning i.e “ibmsample”).

6. Deploying Application to IBM Cloud

Accessing IBM Cloud CLI

For Windows Users: Open Windows Command Prompt
For Linux and Mac Users: Open Terminal

For Confirming the installation of Ibmcloud cli use the following command:

$ ibmcloud -v

Login to IBM Cloud $ ibmcloud login
- Authenticate using IBM Cloud Username and Password.
Switch to the directory having sample code and run the following command there:

$ ibmcloud app push

This uses the manifest.yml file in the folder to target the application and the organisation.
If you get an error saying “No CF API endpoint set” use the following command to correct it: $ ibmcloud target --cf
After setting the API Endpoint repeat step 4.

Once the Pushing is complete you’ll see app status as running on your command line.
You can check access the running application through the endpoint shown in the status.

7. Modifying Android Sample Code(repository cloned in the previous step 3 of cloning sample repositories)

Open Android Studio.
Open the cloned project inside the android studio.
Locate the strings.xml file at the given location : your android directory > apps > res > values > strings.xml
Replace Username, Password, Host, Database and Search Index Names in the file.

Note - cloudant_client_db1, cloudant_client_index1 are for the database which will store the quizzes(the database we created first) and cloudant_client_db2, cloudant_client_index2 are for the database which will store the user submissions(the database we created later).

Build the project.

There are multiple ways of building project in android studio. You can click Green Hammer Icon to build it directly.
If the build is successful, you can check it out on the Build Window.
In case the build is unsuccessful, it could be because of any kind of errors in the code which you might have caused during code modifications. Please check the code very carefully and after correcting the errors try rebuilding the project.
Note - In case if you encounter ‘Failed to resolve:’ error in the build window
- To resolve this error click on the File in upper left corner, go to settings
- Then navigate to the following path: Build, Execution, Deployment > Gradle and uncheck the Offline work check box

8. Running the Application

Before moving to the below steps, please make sure that you have successfully built the project.
There are multiple ways of running the built application. You can simply click Green Triangle on the toolbar to run the application.
As soon as you click the green triangle, Select Deployment Target window will appear on your screen. Here, you can select the device on which you want to run the application.

You can either select a device from the simulated devices of android studio(if you don’t have one you can create a new virtual device) or you can run the application on a physical device connected to the system via USB(There are also some other ways of running the application on the physical device, if you are comfortable with them you are free to use any method to run the application).
In case of an USB connection, if you are not able to connect with the physical device then make sure your device is connected properly and USB Debugging is enabled in the device settings.(Refer this link for turning on USB Debugging in Android Devices)

Summary

In this how-to guide you learned how to:

Creating PHP and Cloudant Services on IBM Cloud.
Creating Database and Querying Cloudant DB using Search Index.
Deploying application using IBM Cloud CLI.

Ritwikjoshi/ibmquizsample