Build Your First App in 15 Minutes
Here are 5 basic steps that will teach you how to build your first mobile application in CommCare in less than 15-minutes!
Step 1: Sign into CommCareHQ
Visit our website, www.commcarehq.org. Sign-in if you already have an account. Otherwise, sign-up for free!
Step 2: Choose your App
Once you have confirmed your account, you’ll see the “Applications” page. If you logged in, click on the “Applications” tile or “Applications" -> "New Application” in the top navigation. You will be brought into the Application Builder where you can begin setting up your application!
To get started, select the '+Add' button located on the left hand side of the screen. This will open a window where you can select the menu type you would like to add.
“Survey” menus are good for simple data collection projects, while “Case List” menus are intended for projects that need to track data over time. For this set of instructions, lets get started with a simple "Survey" menu.
Step 3: Build your first form
You’re now in the form builder. It should look something like this:
Give your form a name:
Select the pencil icon that appears near the name of the form in the center of the screen.
A window should pop up, giving you the option to add a Form Name and a Comment. Let's call the form "My First Form." Be sure to click "Save" to keep any changes you make.
You can now start adding or editing questions!
Add a new question using the '+Add Question' button in the question tree. Selecting this button will open a drop down menu that will display all of the various question types you can choose from.
Let’s add a text question that asks “What is your name?” Start by clicking the “text” question button.
You’ll see the question appear on the left, and properties of the question on the right: Question ID and Display Text. Question ID is a unique tag for the data, while Display text is the text that will appear in the application. In the Display Text field, enter 'What is your name?' By default, CommCare will add a Question ID based on what you enter as the Display text. This can be changed to whatever you would like. For now, let's change it to 'name.'
You can read more details about the form builder at https://dimagi.atlassian.net/wiki/x/PDHKfw. Feel free to add more questions to your form, or move to the next step!
Step 4: Save your form
Finished making changes? Click the “Save” button to save your hard work!
Before we proceed, let's change the name of our application:
In the upper left hand corner, you should see a bar that contains the current application name.
To the left of this name is a gear icon. Select this icon:
Now select the title name in the center of the screen and update the name!
Step 5: Check out your App!
You’ve done all the heavy lifting – now it’s time to see what your app looks like! Check out our easy app preview, or if you have an Android tablet or phone handy, install the app to get the full mobile experience.
Option 1 - Preview your app:
On the left hand side of the screen, there is a teal bar. Clicking this bar will open what is referred to as the "Application Preview"
You’re now viewing your application as if it were on a device – select 'Start' to begin filling out questions and exploring your app!
Option 2 - Install your App on your phone/tablet:
Make sure you downloaded the CommCare application from the Google Play Store
Then, you must first create a “Mobile Worker” by creating a username/password for an application user.
Click on “Users” in the top navigation and choose “Mobile Workers."
Click “Create New Mobile Worker” to make your first Mobile Worker, and enter in the Basic Information. Then Click “Create."
Now that you’ve created a Mobile Worker, let’s deploy the app to your Android.
Go back to “Applications” and choose the app you just made. You will be brought to the "Publish Page." You can access the public page from other areas of the application builder by selecting your application name in the upper left hand corner.
Click “Make New Version” to get to the installation page for this application. Here you can manage your deployments and release different versions of your application.
Now select the 'Publish' button next to the new version you just made.
You’ll see instructions for downloading your app to an Android on https://dimagi.atlassian.net/wiki/x/BQrKfw. For now, let's use the barcode installation method by selecting "Scan Application Barcode.”
Congratulations on building your first app!
We hope you enjoyed building your first mini-app in less than 15 minutes! Now that you know understand how a CommCare app works, you should now go back to your application to take it to the next level. Here are some next steps:
Check out our app building tutorials at https://dimagi.atlassian.net/wiki/x/_xDKfw.
Add logic to your questions in your forms.
Add more forms to your app, and group them in modules.
Start using case management to connect data across forms, personalize forms for different cases, or target messages to your beneficiaries/clients based on the data gathered in a case.
Upload icons and multimedia to give a nicer look to your application.
Explore our available features here.