Quick Start – Build a Simple CyberTracker Photo Notes App

Getting Started with CyberTracker Online

Find Google Translate at the bottom of this website page.

Customise your own application on a desktop computer and then install your app onto an Android or iPhone smartphone.

Quick Start

On your desktop PC or Mac, Register and Login to CyberTracker Online at  https://online.cybertracker.org/

  • Register on CyberTracker Online
  • Click in your registration email to confirm your new account (check your junk folder)
  • Log in to CyberTracker Online
  • Fill in your profile (your name, and the name of your organisation)
  • You are ready to get started building apps, deploying them, and viewing your data!

Build and Deploy a Simple Photo Notes App

In this 6-page tutorial we will look at:

In CyberTracker Online (CTO)

  • Add a project.
  • Build your application.
  • Add screens.
  • Add a save button.
  • Publish your application.

On CyberTracker Mobile

  • Deploy your application to a mobile device using the Mobile app link or QR Scan.
  • Collect data on the mobile.
  • Submit data from the mobile.

Back in CyberTracker Online (CTO)

  • View data

Step 1: (CTO) Add a Project

  • In the menu at top right, click on Projects.
  • In the Organisation | Projects tab, click on Add Project.
  • Select a name for your project and click Save.

Step 2: (CTO) Build your App

  • In the menu at top right, click on Applications.
  • Select your project from the dropdown.

Step 3: (CTO) Add Screens

We will build a simple Photo Notes app consisting of three screens.

Simple Photo App

Screen 1: Start Screen

  • On the Screens tab for your project, click on Add Screen.
  • Under Label enter the name of your app. It can be the same or different to your project name.
  • Select Start from the Template dropdown.
  • Click Save.
  • You are now on the Edit Screen page for your start screen.
  • At this point you can optionally add an Image for your start screen. Click Save if you do so.
  • Save will take you back to the Screens list, and you will see your new start screen listed.
  • If you didn’t add an image and Save, then use the Back to Screens button to get back to the Screens list.

Screen 2: Photo Screen

  • Click on Add Screen.
  • Under Label enter “Photo”.
  • Select Photo from the Template dropdown.
  • Click Save.
  • You are now on the Edit Screen page for your Photo screen.
  • Choose the Maximum number of images you want to capture for one observation.
  • Click Save to save your changes and return to the Screen list.

Screen 3: Note Screen

  • Click on Add Screen.
  • Under Label enter the type of Note, for example “Field Notes”.
  • Select Note from the Template dropdown.
  • Click Save.
  • You are now on the Edit Screen page for your Note screen.
  • Under the Navigation Buttons section, check the checkbox for Save button.
  • Click Save to save your changes and return to the Screen list.

You should now see three screens listed in your Screens list. On your mobile device the screens in your app will be displayed in the order in which they are displayed in this list.
You can hover over the various icons in the screen list to get a tooltip with extra information about the screen.

Step 4: (CTO) Publish your App

  • Go to the Publish tab and click the Publish button.
  • A message will confirm when your app has been published.
  • A CyberTracker Mobile App Link and a CyberTracker Mobile App QR Code image will appear.
  • The App Link is used to install your app onto mobile phones using email or WhatsApp. Use the Copy to clipboard link to copy the app link to your clipboard.
  • Or you can scan the Mobile App QR Code to install your app onto mobile phones.

Step 5: (Mobile) Deploy your App to mobile phones

To deploy app to mobile phones you can use the QR Scanner in CyberTracker Mobile to scan the Mobile App QR Code OR send the Mobile App Link to the phones.

Mobile App QR Code:

  • Download CyberTracker Mobile from the Apple App Store onto your iPhone or from Google Play onto your Android phone.
  • Use the QR Scanner in CyberTracker Mobile to scan the Mobile App QR Code on your desktop computer where you published your app.

OR Mobile App Link:

  • Download CyberTracker Mobile from the Apple App Store onto your iPhone or from Google Play onto your Android phone.
  • Paste the app link from your clipboard into an email and email it to yourself.
  • Or paste it into a WhatsApp Group message. The link should be very long. The copy to clipboard function will copy the full link for you.
  • Then on your phone, open your email or WhatsApp message and touch the app link. You will need to have an internet connection on your phone when you do this.

Step 6: (Mobile) Collect Data

Navigation Buttons

The Navigation Buttons on the screens allows you to move from one screen to the next, Save your observations and loop back to a Target Screen.

From left to right they are:

  • Back: takes you back to the previous screen within your app
  • Projects: takes you to the list of Projects in CyberTracker Mobile
  • Map: takes you to the Map screen in CyberTracker Mobile
  • Save: saves the data you have entered so far, and records the time, date and a GPS co-ordinate; by default, returns you to the Start Screen of the app, or you can select a Save Target screen
  • Next: takes you to the next screen in the app

  • On the mobile device, in CyberTracker App, select the Projects button and then Settings. Enter your name under Collect as in the CyberTracker Settings on the mobile device. Your name will be attached to every observation.
  • Collect a few observations on your mobile device, making choices and entering data.
  • Advance to the next screen using the Next button.
  • On the last screen, touch the Save button. It will record your GPS co-ordinates.
  • You may be prompted to allow CyberTracker Mobile to use your phone’s GPS co-ordinates, or you may need to switch on the Location function on your phone. Wait for the satellites to be acquired.

Step 7: (Mobile) Submit Data

  • On the start screen of the app on your mobile, touch the Submit Data button.
  • If there is data that you have not yet submitted, the icon shows an Upload Arrow.

  • Once all data has been submitted, the icon shows a tick in a cloud.
  • Your data is now uploaded and saved in CyberTracker Online.

Step 8: (CTO) View Data

  • Go to View Data using the link in the header to see the Map view.
  • You can also view your data in Table view by clicking the link.

To collect more complex data, see our 12-page tutorial Build CyberTracker Apps for Complex Data.