Create a mobile app to facilitate community collaboration

Note: This tutorial uses the classic Watson Assistant experience. After October 8, 2021, all instances (except the standard plan) can switch between the classic and new Watson Assistant experiences by going to the upper-right corner of the Watson Assistant screen and clicking the Manage icon.

There is a growing interest in enabling communities to cooperate among themselves to solve problems in times of crisis, whether it be to advertise where supplies are held, offer assistance for collections, or other local services like volunteer deliveries.

For example, with the 2020 SARS-COV-2 (COVID-19 or “Novel Coronavirus”) crisis, federal and local governments may be rolling out broad programs, but cooperation at the local level is usually the most effective way of getting help to where it is most needed as quickly as possible. Traditional social media is one way of communicating within a community, but this is often not sufficiently structured to enable rapid discovery of help needed.

In the current crisis, we have already seen shortages of local food, medical equipment, and other supplies. In addition, the recommended (or required) self-isolation and social distancing measures can compound the problem by preventing people from easily getting to locations with the best stocks of supplies.

What is needed is a solution that empowers communities to easily connect and provide this information to each other.

Learning objectives

In this tutorial, you’ll learn how to connect a React Native front end and Node.js backend with Watson Assistant, a Cloudant database and HERE Location Services via IBM Cloud. This gives developers a launchpad to quickly get started building an integrated solution for community cooperation.

Prerequisites

• Register for an IBM Cloud account.
• Install and configure IBM Cloud CLI.
• Register for a HERE account.
• Install React Native CLI dependencies (for iOS).
  • Node.js
  • Watchman
  • Xcode
  • CocoaPods
• Clone the repository.

Note: This application runs in both iOS and Android. See the README file for instructions for both types of devices.

Estimated time

Completing this tutorial should take about 20 – 30 minutes.

How it works

A Supplier can be a regular resident, a small business, a voluntary organization, etc. If they can provide food, supplies, resources, or other essentials, they can use the mobile application and fill out a brief form that indicates what they have and available quantities. This information is then stored in a database in the IBM Cloud.

A Recipient, who is in need of food, supplies, resources, or other essentials, opens the mobile application and can use the chat interface to locate supplies near them. For instance, they might type “Where can I find bread?” or “Can someone collect my shopping for me?” The mobile application then accesses the database (after first understanding the question via Watson Assistant) and then displays a map showing locally where they can find what they need.

Flow

This solution starter idea combines a chat interface (Watson Assistant), data storage to hold the status of supplies available, and location services with real-time information to get users the information they need.

1. The Recipient user launches the mobile app and can access information across multiple services.
2. The Recipient user can ask questions to Watson Assistant and get answers on food/service availability questions.
3. The Supplier user can post the availability of resources they can provide, as well as locate the items they need.
4. The Recipient user can obtain geolocation data to plot routes to collect (or drop off) supplies using HERE Location Services.

Steps

1. Set up an instance of Watson Assistant.
2. Provision a CouchDB instance using Cloudant.
3. Generate an API Key from the HERE Developer Portal.
4. Run the server.
5. Run the mobile application.

1. Set up an instance of Watson Assistant

Log in to IBM Cloud and provision a Watson Assistant instance.

1. Provision an instance of Watson Assistant from the IBM Cloud catalog.
2. Launch the Watson Assistant service.
3. Create an Assistant.
4. Add a dialog skill to the Assistant by importing the starter-kit-cooperation-dialog-skill.json file.
5. Go back to All Assistants page, open Settings from the action menu ( ⋮ ) and click on API Details.

6. Note the Assistant ID, API Key, and Assistant URL. For Assistant URL, make note of the base URL/domain (e.g., https://api.us-south.assistant.watson.cloud.ibm.com or https://api.eu-gb.assistant.watson.cloud.ibm.com) and not the full directory/path. You will need all three of these values in Step 4 below.

7. Go to Preview Link to get a link to test and verify the dialog skill.

2. Provision a CouchDB instance using Cloudant

Log into the IBM Cloud and provision a CouchDB instance using Cloudant.

1. From the catalog, select Databases and then the Cloudant panel.
2. Once selected, you can choose your Cloudant plan. You should choose an appropriate region, give the service a name, and it is recommended you choose Use only IAM under Available authentication methods. You can leave the other settings with their defaults. Click the blue Create button when ready.
3. Once your Cloudant instance has been created, you need to create a service credential that the CIR API Server can use to communicate with it. By selecting your running Cloudant instance, you can choose Service credentials from the left-hand menu. Create a new service credential and give it a name (it doesn’t matter what you call it).
4. Once created, you can display the credentials by selecting view service credentials, and then copy the credential, so you are ready to paste it into the code of the API server in Step 4.

3. Generate an API Key from the HERE Developer Portal

The application uses HERE Location Services for maps, searching, and routing.

To access these services, you’ll need an API key. Follow the instructions outlined in the HERE Developer Portal to generate a JavaScript API key.

4. Run the server

To set up and launch the server application:

1. Go to the starter-kit/server-app directory of the cloned repo.
2. Copy the .env.example file in the starter-kit/server-app directory, and create a new file named .env.
3. Edit the newly created .env file and update the ASSISTANT_URL, ASSISTANT_ID, and ASSISTANT_IAM_APIKEY with the values from the dialog skill’s API Detail page in Watson Assistant, from Step 1. Also, update the CLOUDANT_ID and CLOUDANT_IAM_APIKEY with the values from the service credential you created in Step 2. (Note that the username from the credential is what should be used for the CLOUDANT_ID.)
4. Edit the name value in the manifest.yml file to your application name (for example, my-app-name).
5. From a terminal:
   1. Go to the starter-kit/server-app directory of the cloned repo.
   2. Install the dependencies: npm install.
   3. Launch the server application locally or deploy to IBM Cloud:
      • To run locally:
        1. Start the application: npm start.
        2. The server can be accessed at http://localhost:3000.
      • To deploy to IBM Cloud:
        1. Log in to your IBM Cloud account using the IBM Cloud CLI: ibmcloud login.
        2. Target a Cloud Foundry org and space: ibmcloud target --cf.
        3. Push the app to IBM Cloud: ibmcloud app push.
        4. The server can be accessed at a URL using the name given in the manifest.yml file (for example, https://my-app-name.bluemix.net).

5. Run the mobile application

To run the mobile application (using the Xcode iOS Simulator):

1. Go to the starter-kit/mobile-app directory of the cloned repo.
2. Copy the .env.example file in the starter-kit/mobile-app directory, and create a file named .env.
3. Edit the newly created .env file.
   • Update the STARTER_KIT_SERVER_URL with the URL to the server app launched in the previous step.
   • Update the HERE_APIKEY with the API Key generated in the HERE Developer Portal.
4. From a terminal:
   1. Go to the starter-kit/mobile-app directory.
   2. Install the dependencies: npm install.
   3. Go to the ios directory: cd ios.
   4. Install pod dependencies: pod install.
   5. Return to the mobile-app directory: cd ../.
   6. Launch the app in the simulator: npm run ios. You should be running at least iOS 13.0.
   7. The first time you launch the simulator, you should ensure that you set a Location in the Features menu.

With the application running in the simulator, you should be able to navigate through the various screens, as follows:

Summary

Congratulations! You have built a Call for Code solution to help communities get the critical resources they need, by helping to identify suppliers with available resources. You can now create a chatbot and database in IBM Cloud to make a meaningful difference in the lives of many. You can change the code to create a new solution for your community or to build on this tutorial to create a new application.

Acknowledgements: The following IBMers also contributed to the development of this starter kit and tutorial: Omer Arad, Robert Loredo, Debbie Kestin Schildkraut, John Swanson, and Bruce Weed.