Max Katz

This tutorial uses Tiggr, a Web-based Mobile Apps Builder. If you don’t have an account, sign up for one. It’s fast and easy.

Creating New Project

1. Enter a new project name: AndroidHelloWorld
   

2. From the Native App tab, select Blank Mobile Application:
   
3. Click OK to create a new project. Once the app builder editor is loaded, you will see the following:
   

   Now that we got the project, we are ready to build the UI. 

Building the UI

1. Find the Input component and drag and drop it into the phone. Delete its default Input label. 
2. Find the Button component and drag and drop into the phone. Change the button label to Hello Android. 
3. Double click on Caption label and change it to Android Hello World, for example. 
4. Select the screen (you can click outside the phone) and in Properties, pick one of the available themes. We are going to use Blue. 
5. Once you completed all the steps, the result will look like this:
   
6. Before we build a second page, let’s make a few minor updates. First, select the screen again and in Properties changes its name to Start. Then, select the Input component and change its name to input (in Properties). We are going to refer to these elements in just a few steps and giving them names will make it simpler for us to find them. 
7. Switch to Projects view, then select Add > Screen. 
8. With Mobile screen template selected, click OK to create a new screen
9. In Properties, rename the screen to Hello. Then, change its Theme to Blue to match the first screen. 
10. Change its label to Hello, for example.  
11. Switch to Palette view
12. From the Mobile palette, drag and drop Grid component. The Grid component has 2 columns by default. 
13. Select Label component and drag and drop it into the first grid column. 
14. Change its label to Hello.
15. Then, drag and drop another Label component into the second grid column. Delete its default label.  
16. Lastly, change the component name to enteredName. Once you are done, your screen should look like this:
    

Setting Up Variables, Events and Navigation

1. Open Start page
2. Select the screen (you can click outside the phone area) and open Events view on the right-hand side. 
3. Select Add Event > Load. Load event will be listed in the box below. 
4. Select the button component, in Events view select Add Event > Click. 
5. Click the + button on the right and add Set Variable action and set the following values:
1. Variable name: name
2. Check: Bind to component
3. Target component: input
4. Property name: Text
5. Click OK
6. Click the + button on the right and select Navigate to Page action
1. Select Hello page and click OK
7. Open Hello page
8. Select the screen, then Events > Add Event > Load
9. Click the + button on the right and add Set Property action and set the following values
1. Component name: nameEntered
2. Property name: Text
3. Check: Is Variable
4. Variable: name
5. Click OK

Testing the App

You may now test the app. Open Start page and click Test. A new browser window will open where you can try the app.

One More UI Update

Let’s make it easy to go back to our first page from the second. 

1. Open Hello page
2. Drag and drop a Button component and place it in the header, on the left side of the label
3. Change the button label to Back. It should look like this:
   
   
4. Click the button, then Events > Add Event > Click. 
5. Click + and add Navigate to Page action. 
6. Select Start page, click OK. 
7. You may test the app again.  

Testing the App on Android Device

There are two ways to test this app on your Android device

1. Tiggr Mobile Tester

Install Tiggr Mobile Test app on your device. From this app, you can launch and test any app in your account. What you will run is a native app. You can install Tiggr Mobile Tester from here. We recommend this approach as this is the easiest way to test and app without having to update and install it each time.

Once Tiggr Mobile Tester is installed, login with your username/password. You will see a list of all mobile projects. Click the project, click Preview and after a few seconds, the app will launch. Tiggr Mobile Tester look like this:

2. Export the App as Android Binary

In Tiggr, select Export > Android binary. Save the file and upload it to your device. One easy way is to email it to your device. Install the .apk file. Tiggr uses PhoneGap to build a native app. 

Getting Native, Really. 

You have just built (your first) real Android app. Still hesitant? Let’s add some native code with PhoneGap API.   

1. Add a button on the Hello page, change its label A Fun Button. 
   
   
2. Select the button, then Events > Add Event > Click
3. Add Run Custom JavaScript action. Enter the following JavaScript:

   alert('Device name: '+ device.name+'nPhoneGap: '+device.phonegap+'n
      Platform: '+device.platform+'nVersion: '+device.version);
   

4. Run the app again on your Android device. 

Note: because JavaScript calls native API, this will not work in browser.  You can learn more about PhoneGap device API here.

Looking for more? Try Tiggr help site: http://help.gotiggr.com, Tiggr blog or follow Tiggr on Twitter @gotiggr.