Quick Start – Build a Simple CyberTracker Photo Notes App

Getting Started with CyberTracker Online

LOGIN

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 organization)
  • 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 CyberTracker Mobile 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 Organization | 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.

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 QR Code image will appear.
  • The QR Code is used to install your app onto mobile phones.

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

  • 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 laptop or desktop computer where you published your app.

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 if you need to make a correction.
  • Projects: Takes you to the list of Projects in CyberTracker Mobile if you need to switch to another Project.
  • 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.

Depending on what is required, screens may not display all the Navigation Buttons.

  • On the mobile device, in CyberTracker App, select the Projects button and then go to 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.