Build a Simple Linear Sequence of Screens with Icons

Screen Templates

The basic components of a CyberTracker app are the Screen Templates. You select a Screen Template and fill in the List Items where appropriate.

• The first screen of every app must be a Start Screen. The Start Screen initiates the Timer Track GPS points when you start recording observations. The Start Screen also enables you to submit your data to the CyberTracker Online server. You can also select another Project from the Start Screen.
• The Note Screen allows you to write a text field note.
• The Photo Screen allows you to select how many photos can be taken.
• The Audio Recording Screen allows you to record a voice note or a sound.
• The Single Select List Screen allows you to choose one List Item.
• The Multiple Select List Screen allows you to select more than one List Item.
• The Number Keypad allows you to enter a single number.
• The Number List Screen allows you to enter a number for each of the List Items.

Screen Flow Diagrams

In the Quick Start guide we built a CyberTracker Photo Notes app that consists of a simple linear sequence of three screens. To build an app to collect more complex data we can visualise the Screen Flow diagrams using colours to represent different functions.

Simple Linear Sequence with Icons

• In Edit Application, Screens the first screen must be a Start Screen (Red).

Text or Icons

• A Single-select List Screen can either display Text, Icons, or both.
• If you would like to add Icons, then:
• Download the Kalahari Demo Icons for this tutorial at Kalahari Demo Icons
• You can also create your own icons, search for icons online, or use thumbnail photos as icons.
• Icon and image file types include JPG, PNG, GIF, BMP, and SVG files.

Add a Single-select List Screen

• Click on Add Screen.
• Under Label enter a name for your screen: This could be the type of observation or the category of a list of observations.
• Select Single select list from the Template dropdown.
• Click Save.
• You are now on the Edit Screen page for your single select list screen.

Add a few List Items:

• Click on the Add List Item button.
• Under Label enter a name for your List Item.
• To add an Icon, click Browse and select an Icon that you downloaded and saved on your desktop computer.
• Click Save. You will be returned to the Edit Screen page for your list screen.

Add a couple more list items. You can drag and drop the list items in their list to change the order and use the pencil and bin icons to edit or delete list items if necessary.

• Under Screen Settings, in the Appearance dropdown, choose Text Only, Text beside icon, or Icon Only (if you added Icons).
• Click Save to save your changes and get back to the Screen list.

Add a Number Keypad Screen

• Click on Add Screen.
• Under Label enter the type of observation for which you need to record a number.
• Select Number keypad from the Template dropdown.
• Click Save.
• You are now on the Edit Screen page for your Number keypad screen.
• Use the Back to Screens button to get back to the Screens list.

Add a 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.

Order of Screens

• For a Simple Linear Sequence, you create a sequence of screens which follow each other in the order that you created them in the Main Flow (Blue) of screens. On your mobile device the screens in your app will be displayed in the order in which they are displayed in this list.
• In Edit Application, Screens you can change the order of the screens by simply moving them up or down in the list of Screens.
• By default, the Save button will take you back to the Start Screen.
• You should now see four screens listed in your Screens list. You can hover over the various icons in the screen list to get a tooltip with extra information about the screen.

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.
• Scan the Mobile App QR Code to install your app onto mobile phones.

Deploy your App to Mobile Phones

To deploy app to mobile phones use the QR Scanner in CyberTracker Mobile to scan the 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.
• Scan the Mobile App QR Code on your desktop computer where you published your app.

Share your App with Other Users:

• In the Publish tab, Download the QR code to email the Mobile App QR Code.
• For a Community Science project you can also share QR Code via a WhatsApp Group and receivers can then scan the QR Code (if it is received on a phone, it must be scanned from the phone of another member of your group or from desktop WhatsApp on a PC, Mac or laptop).
• You can also post the Mobile App QR Code on your project Facebook page or your project website if you want members of the public to scan and use your app to collect Community Science data.
• You can also print out the Mobile App QR Code and distribute pamphlets to people who want to use your app for Community Science projects.
• Another way is to long-press on a project (on the mobile device) and click “QR code”. Then there is a button on the bottom left called “Share link”. This way you can share the link via email or WhatsApp, etc. On the receiver’s phone, touch the link to install the app.

Enter Your Name in the CyberTracker App on your Mobile Device:

• On the mobile device, in CyberTracker App, select the Projects button and then Settings. Enter your name under Collect as. Your name will be attached to every observation.

Update App

• You can make changes to your app, like adding more screens or more list items, or re-ordering items.
• Re-publish (select the Publish button again).
• There is no need to resend the app link to your mobile users. The mobile phone will detect that there is a new version available and show the refresh icon in the Projects list.
• Touch the refresh icon to update to the new version of the app.

Set up Observation Filters

In View Data, Settings, select any of the Single Select List Screens as Observation filters to filter your data in the Map views.

View and Filter data

• Go to View Data to see the Map view.
• You can filter your data using the Observation Filters on the left.
• You can also view your data in the Observations Table or Photos table, or select Audio table, by clicking the Map View drop-down menu.

Export Data

• You can Export data as a CSV file.
• We will be adding more export file formats.