The following tutorial will take you through creating a mobile app that identifies restaurants in the downtown Palo Alto region. Importantly, you’ll learn how to create button actions and display locations as placemarkers inside a realtime Google Map.

You will need the following two files to complete this tutorial. Download them before proceeding with this tutorial.

Step 1

Create a new project. Click on the ‘From Scratch’ link on the right hand side.

Click the ‘Media’ button at the top of the screen. The Media Repository window will appear.

Uploading media into the Media Repository

Click ‘Choose File’ to upload a new media item. The File Open window will appear.

Select the ‘university_avenue_palo_alto.jpg’. Click choose.

Once the file is selected, click on ‘Upload’.

Previewing items in the Media Repository

The new media item will appear in the Media Repository window.

Close the Media Repository window by clicking on the ‘x’ in the top right hand corner. The Media Repository window will close.

 

Step 2

In the left column window of the MobileNation builder, click on the ‘Default View’ link to select the first screen in the application. The ‘Default View’ will become highlighted/selected.

Modifying the screen title

In the ‘Inspector’ window on the right hand side, click into the name field and change ‘Default View’ to ‘Home Screen’. You’ll note that the ‘Default View’ link in the left column will dynamically update to display itself as ‘Home Screen’.

Click the ‘Media’ button at the top of the screen. The Media Repository window will appear.

Dragging and dropping media items from the repository onto the phone stage

Click and hold on the ‘university_avenue_palo_alto.jpg’ and drag the image to the phone stage. Close the Media Repository window by clicking on the ‘x’ in the top right hand corner.

The selected image will appear on the phone stage.

Selecting the media item on the phone stage

Click on the image on the phone stage.

Resizing the media item

Expand the ‘Geometry’ tab within the Inspector window. Click on the ‘Fullscreen’ icon. The selected image will expand to cover the entire phone stage.

 

Step 3

Within the Tool Palette window, click and hold on the ‘Label’ widget, and drag it to the phone stage. A new Label widget will appear on the phone stage.

Dragging and dropping a label item onto the phone stage
Within the Inspector window, enter ‘Restaurants in Palo Alto’ into the ‘Text’ field.

Select white (#FFFFFF) from the ‘Text Color’ dropdown menu.

Select ‘Helvetica’ from the ‘Font’ dropdown menu.

Select ‘22’ from the ‘Font Size’ dropdown menu.

A new text label with ‘Restaurants in Palo Alto’ will appear on the phone stage.

Editing a label item on the phone stage

Click on the text label on the phone stage, and resize the text box by dragging in the bottom right corner. Click, hold and drag the text label to center it on the phone stage. The new text label should be centered below the main image.

 

Step 4

Within the Tool Palette window, click and hold on the ‘Button’ widget, and drag it to the phone stage. Position it below the new text label. A new Button widget will appear on the phone stage, below the text label.

Dragging and dropping a button item onto the phone stage

Within the Inspector window, enter ‘View Map’ into the ‘Text’ field.

Select black (#000000) from the ‘Background Color’ dropdown menu.

Select white (#FFFFFF) from the ‘Text Color’ dropdown menu.

Select ‘Helvetica-Bold’ from the ‘Font’ dropdown menu.

Select ‘19’ from the ‘Font Size’ dropdown menu.

Click the button on the phone stage, and center below the new text label.

A new button with ‘View Map’ will appear on the phone stage, below the text label.

Edit the button item

 

Step 5

Click on the green ‘+’ icon in the bottom left corner of the screen.

A new screen labeled ‘New View’ will appear in the left hand window.

In the left window, click on the ‘New View’ link to select the second screen in the application.

The ‘New View’ will become highlighted/selected.

Creating a new screen within MobileNation

In the ‘Inspector’ window on the right hand side, click into the name field and change ‘New View’ to ‘Map View’.

The ‘New View’ link in the left window will dynamically update to display itself as ‘Map View’.

Enter ‘Map View’ into the ‘Caption field.

Check the ‘Navigation Bar’ check box.

Check the ‘Show Back Button’ check box.

The phone stage view will update to show a top navigation bar labeled as ‘Map View’, including a ‘Back’ button.

Modifying the attributes of the new screen

 

Step 6

Within the Tool Palette window, click and hold on the ‘Map View’ widget, and drag it to the phone stage.

A new Google Map will appear on the phone stage.

Dragging and dropping a map view item onto the phone stage

Resizing the Google Map on the phone stage

Click on the ‘Geometry’ tab within the ‘Inspector’ window. Click on the ‘Fullscreen’ icon.

The selected google map will expand to cover the entire phone stage.

Click on the ‘Unlock Map’ tab within the middle of the google map.

Click Unlock Map and then you can move around inside the Google Map

 

Step 7

Click on the ‘-‘ icon to zoom out of the google map, until you have a full view of California within America.

Click and drag the google map until it’s over San Francisco.

The google map will display the general San Francisco area.

Zoom out and head north. You'll need to find Palo Alto in Silicon Valley

Click the ‘+’ icon to zoom into the google map, until you are looking at the general area of San Francisco in California.

Zoom into University Ave, Palo Alto CA. Once you've found it, click on Lock Map

Click on the ‘Lock Map’ tab in the middle of the google map.

 

Step 8

Click the ‘Data’ button at the top of the screen. The Data Repository window will appear.


Click on the Data button at the top of the screen to open the Data Source Repository

Click the ‘Add Datasource’ button at the bottom of the screen.

Select From a google maps KML file to import the KML file that you've downloaded

Choose the ‘From a google maps KML file’ from the dropdown menu.

Click the ‘Next’ button at the bottom right of the window.

Click the ‘Choose File’ button to upload a new data sources file.

From the popup window, select the ‘palo alto restaurants’ .KML file.

Click ‘Next’ to upload the selected .KML file.

The imported .KML file will be displayed. Click on the ‘Location’ tab (highlighted in yellow) and choose the ‘Column Type’ dropdown to ‘Location’.

Click the ‘Next’ button in the lower right of the window.

The ‘Location’ column will be mapped to the ‘Column Type’ selected from the dropdown menu.

Enter ‘Palo Alto Restaurants’ for the ‘Name’ field. Enter ‘Restaurants in Pal Alto’ for the ‘Description’ field.

Click the ‘Next’ button in the lower right of the window.

Click ‘Finish’.

 

Step 9

Click on the ‘Pal Alto Restaurants’ item within the Data Source repository.

The KML file is successfully imported

The selected data source becomes highlighted in yellow.

Data contained within the imported .KML file will become listed below the ‘Sample Data’ title within the Data Source repository window.

To add the KML data directly onto the Google Map, drag the Name column and drop onto the map

Click, hold and drag the ‘Name’ column to the google map on the phone stage.

Close the Data Source repository window by clicking on the ‘x’ in the top right hand corner.

 

Step 10

Click the ‘Save’ button at the top of the screen.

The ‘Save Project’ popup window will be displayed.

Click on the Save button to save your project

Enter ‘Restaurant App’ and click the ‘Save’ button. Your new restaurant app will be saved.

Link the button to the Map View screen through the creation of an action link

Now we need to wire up the button on the Home Screen so that when you tap the View Map button, the Map View screen will load. Click on the View Map button, and expand the Actions panel within the Inspector panel. Click on the Touch Down icon, hold and drag the wire to the Map View screen as displayed above.

Select the Load View option to complete the wiring between the View Map button and the Map View screen.

Select the Load View option to complete the wiring between the View Map button and the Map View screen.

Choose from the list of transition effects.

From the value dropdown menu, select your favourite transition effect. When you tap the View Map button, the chosen transition effect will occur.

Click Publish to transfer the app to your phone

Click the Publish button and take a shot of the QR code to view the new app on your phone.

You’ve completed the Restaurant Locator mobile app!