Building applications that store information in IBM Cloudant

Create an IBM Cloudant service instance and database

Your first step is to create an IBM Cloudant service instance and then create a database. You can create one from the console or by using CLI commands. In addition, create service credentials that you can pass to your application.

1. Create an IBM Cloudant service instance, follow the steps in Getting started with IBM Cloudant. Name your instance CloudantFruitCounter. Be sure to complete the task by creating your service credentials.
2. Open the IBM Cloudant dashboard for your instance and click Create database.
3. In the Create database window, enter the database name fruitcounter.
4. Do not select the Partitioned option, and click Create.

Test your application locally

Before you create your code as an application in Code Engine, test your code locally to make sure that it is functioning correctly.

1. Retrieve the IBM Cloudant service credentials from the IBM Cloudant dashboard. For more information about retrieving credentials, see Creating service credentials.

2. Set environment variables with the values from the service credentials.

   export CLOUDANT_URL=<your_url>
   

   export CLOUDANT_APIKEY=<your_key>
   

   export DBNAME="fruitcounter"
   

3. Clone the fruit-counter repository, change to this directory, and then install and start the dependencies.

   git clone https://github.com/IBM/CodeEngine
   cd CodeEngine/fruit-counter
   npm install
   npm run start
   

4. Open a browser and go to http://localhost:8080.

5. Pick your favorite fruit and submit your choice. The app accepts your choice and displays a running total of picks.

You can verify that your fruit choice was registered in the Cloudant by going to your IBM Cloudant database dashboard.

Let's look at how this program works.

This application is a simple Node.js application that uses two main packages.

• @ibm-cloud/cloudant to connect to IBM Cloudant and to read and write data.
• Express to create a web server that allows users to submit their choice of fruit and see a running total of our data.

This application is made up of two main files.

server.js

The server.js file is used to run the web server and communicates with Cloudant. After a user selects a fruit choice, the front end page submits the value to the /fruit route (see below), the app.route function stores a new document in Cloudant with the fruit choice, and then reads back the running total to return to the front end page.

The read operation uses a Cloudant design document and a MapReduce view to aggregate documents. For more information about views and design documents, see Creating Views (MapReduce).

index.html

The index.html file is the web page of the application that uses the Vue.js framework. When this page loads, it displays the available fruit options.

After you submit your choice, the framework makes an HTTP POST request with your fruit selection to the /fruit route of the application. The application return contains the running total of fruit choices, which is then displayed.

Deploying your application to Code Engine

Now that you understand how this application works, you can deploy it to Code Engine. You can follow the steps to deploy an application from a public repository, specifying CODEENGINEREPO as your image repository. Be sure to include the environment variables that you gathered and set locally in step 2.

Because you cloned the repository when you tested your application locally, you can use the app create command to both build an image from your local source and deploy your application that references this built image.

1. Run the app create command. You must provide a name for your application and the location of the source code. The following example creates an application called myfruitcounter that uses the docker strategy and provides the location for the source code in the current directory (.). You must also set the environment variables to connect to Cloudant.

   ibmcloud ce app create --name myfruitcounter --build-source . --strategy dockerfile --env CLOUDANT_URL=<your_url> --env CLOUDANT_APIKEY=<your_key> --env DBNAME=fruitcounter  
   

   Example output

   Creating application 'myfruitcounter'...
   Packaging files to upload from source path '.'...
   Submitting build run 'myfruitcounter-run-220727-142949868'...
   Creating image 'private.us.icr.io/ce--6ef04-n2lgvg2l59v/app-myfruitcounter:220727-1929-y8ej0'...
   Waiting for build run to complete...
   Build run status: 'Running'
   Build run completed successfully.
   Run 'ibmcloud ce buildrun get -n myfruitcounter-run-220727-142949868' to check the build run status.
   Waiting for application 'myfruitcounter' to become ready.
   Configuration 'myfruitcounter' is waiting for a Revision to become ready.
   Ingress has not yet been reconciled.
   Waiting for load balancer to be ready.
   Run 'ibmcloud ce application get -n myfruitcounter' to check the application status.
   OK                                                
   
   https://myfruitcounter.n2lfrg2876v.us-south.codeengine.appdomain.cloud
   

2. Test the app by opening the provided URL for the fruit picker app. Pick your favorite fruit and submit. The running total of fruit choices is displayed. You can refresh the application and choose another fruit. The addition is displayed in the running total.