IBM Cloud Satellite: Run and manage services anywhere Learn more

Develop a health tracker app and chatbot

To develop a mobile, web, or PWA (progressive web app) multi-channel application, with minimal coding required, using open source technologies such as Cordova, Ionic, or Angular, you can use the IBM Digital App Builder. In addition to leveraging IBM Mobile Foundation features for security, backend connectivity, and analytics, IBM Digital App Builder integrates with Watson services.

In this tutorial, we focus on building mobile apps with a tool offered by IBM called IBM Digital App Builder. You’ll use this tool to build a React Native Health Tracking app, which suggests meal plans and lets users scan food items and get caloric information. Through the videos in this tutorial, you’ll learn how simple it is to integrate AI features like visual recognition and chatbots with just a few clicks and very minimal code. By the end of this tutorial, you should have enough knowledge to build a simple yet powerful app with an expressive UI, with the least amount of code imaginable.

Prerequisites

Estimated time

Completing this tutorial should take about 1 hour.

Steps

Our health tracker app has 6 pages, as our wireframe shows:

Wireframe of a health tracker app

The JSON file and code files used in this tutorial can be found in our GitHub repo.

In this first video, we introduce our app and the tool we’ll use to build it. We will review the wireframe for the app and describe the pages and functionalities in the app.

Step 1. Creating a project

In this video, you’ll learn how to create an app using IBM Digital App Builder. We’ll dive deep into the functions of Digital App Builder and the various features it offers that enable you to build apps quickly. We’ll also go through the assets we’re going to use for this app. We’ll talk about the server, plugin, assets, and font manager.

Step 2. Running the app and adding the first page

In this video, you’ll create the very first page of the app and run the app on an emulator. We’ll also explore how the live-reload mechanism works efficiently with React Native apps in Digital App Builder. We’ll explain more about the structure of our app, its navigation, and how React Native files work. We’ll add an intro page, setup the navigation, and learn about various page templates.

Step 3. Setting up the login page

In this video, we’ll create the login page from Digital App Builder templates and set up the login logic. You’ll learn about the adapter files and how to use a login adapter file with IBM Mobile Foundation Server to authenticate users in our app. You’ll apply the login logic and configure the login with just one simple line of code. You’ll learn about the react-native-mobilefirst package that helps us with authentication.

Step 4. Adding pages and setting up the navigation

In this video, we move on and create all the pages that we need for the app. You’ll add a chatbot, list, and VR page, and by creating those pages, you’ll see the diverse templates that are available from Digital App Builder. You’ll learn how to create the home page and set up the navigation to all the different pages from this one page. You’ll gain a complete understanding of how stack navigation works in React Native.

Step 5. Setting up the VR page (calorie tracker page)

In previous steps, we created all the pages. In this video, we’ll put the VR page to work. You’ll learn about IBM Watson services. You’ll use the Watson Assistant service and integrate it seamlessly with Digital App Builder to use as our chatbot in the app. You’ll create, train, and use the Visual Recognition service to recognize food items and help get caloric information for those food items.

Step 6. Setting up the chatbot

Now that you’re familiar with the IBM Cloud catalog and Watson Services from the previous step, you’ll extend the use of Watson Assistant with just three simple credentials, one single page, and no coding – literally no coding at all! You’ll learn how to train the chatbot, and then verify it is working all from within the Digital App Builder tool itself.

Step 7. Setting up the meals page

In this final video, you’ll learn how to use the List templates from Digital App Builder and how easily the template lets you build a beautiful looking list for the app. With just a little bit coding, you’ll build a list of food items for meal plans.

Summary and next steps

In this tutorial, we showed you how to set up a basic mobile app using React Native with very little coding. We left a few things out so that you could extend the app and continue to learn how to build mobile apps quickly and easily with the IBM Digital App Builder tool.