Building a Hello World App With Ionic

In this tutorial you are going to build a Hello World app with Ionic in Appery.io. This is how the app is going to look:

You should finish this tutorial in about 10 minutes.

Appery.io Account

The first step is to sign up for an Appery.io free trial account. If you already have an account then you can skip this step. Appery.io provides a visual App Builder for building apps with Ionic. This means it’s very easy and fast to build Ionic apps.

Creating a New Ionic App

Let’s now create a new Ionic app.

1. Inside the platform, go to Apps tab (if you are not there already).
2. Click Create new app.
3. For app name enter: ionic-hellworld.
4. Select Ionic AngularJS app and click Create. In a few seconds the App Builder for Ionic will load.

That was easy.

Designing the Page

Now let’s work on the app UI. As this is a Hello World app, the UI will be pretty simple.

1. First, open the index page.
2. Click the header, then in Properties change Text property to Hello Ionic.
3. Now open Screen1.
4. Select the Card component (from the Palette) and drag and drop it inside the phone area.
5. Click the header and in Properties change the Text property to Hello World.

That’s all you need to do here for now. You will change the Item text label in a few minutes. Your page should look like this:

Setting Up Page Scope

Now you are going to set up the scope for the page. This is also going to be very easy.

1. Switch to Scope tab.
2. You will now create one variable. At the top of the Scope editor enter a new variable called message and click the Add button. Its type should be String (the default value).
3. Now open the init function by clicking the Edit button.
4. Enter the following code:

   $scope.message = "My first Ionic app. That was easy.";

5. Click the Save button in the toolbar. You can also click Hide to close the function editor.

Good. The next step is to bind this scope variable (message) to the page.

Also, as you put the code inside the init() function, the function will be automatically invoked when the page loads. You don’t have to add any events to invoke this function in this example.

Setting Up Binding

In order to display the message in the page you need to bind it to the scope variable. Here is how to do it.

1. Go back to Design tab.
2. Select the card item area (where it says Item text).
3. Go to Properties for the Text property set: {{message}}.
   • You can also try using code assist. Type {{}} and place the cursor in the center and click Ctrl-Space to invoke code assist.

You are actually done and ready to test the app.

Testing the App

Testing the app is fast and simple. Simply click the Test button in the toolbar. A new browser will launch with the app that you just built.

Testing the App On the Device

You can also test the app on the device. To test on the device first download and install the Appery.io Tester app for iOS or Android. Then use your Appery.io username/password to sign in. You will see the app you just created. Tap the app and it will be launched on the device as a hybrid mobile app.

What’s Next?

Check out the Appery.io YouTube channel for videos on building hybrid mobile apps with backend services.