Building Your First Ionic 5 Mobile App: Hello World

In this tutorial, you are going to build a Hello World app with Ionic 5 in Appery.io.

The app is going to behave like this (try clicking Hello World to see the welcome message):

And you should finish this tutorial in less than 5 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 5. This means it's very easy and fast to build applications.

Creating Ionic 5 App

Let's now create a new Ionic 5 app. This is going to be a basic Hello World app.

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

That was easy, wasn't it?

Designing 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 app Screen1 page.
  2. Select the Page component from the breadcrumbs (you can also use the OUTLINE view to locate the needed component) and set the page Footer property to False as we will not use it in the app (you will also be asked to confirm changing the property):
  1. Click the Header (check that Toolbar title1 is shown in the Breadcrumbs line) then, in the PROPERTIES panel, change the Common > Text property to Welcome Ionic 5:
  1. Now, locate the Card component (on the PALETTE) and drag & drop it inside the phone area.
  2. Click the Card Item Title and in the PROPERTIES panel, change its Common > Title Text property to Hello World:
  1. Then, select the Card item and change its Common > Text property to {{message}}:

That's all you need to do here for the app UI.

Setting up App Logic

Now, you are going to set up the logic for the app. This is also going to be simple and very easy to do.

  1. Switch to the CODE panel.
  2. You will now create one variable. Select the Variables tab and enter a new variable called message and click the Add button. Its type should be String (the default value):
  1. Now, go back to the DESIGN panel and unfold the EVENTS tab from the bottom; for the CardItem1 component, select the Click event from the drop-down, then select the Set variable action and set the message variable that has been just created.
  2. For the Value, insert 'Meet my first Ionic 5 app :)'.
  3. Click Save:
  1. Lastly, click the SAVE button in the App Builder Toolbar.

Good. The next step is testing our first Ionic 5 app.

Testing App

Testing the app is fast and simple. All you need to do is simply click the TEST button in the top App Builder Toolbar.
The browser will launch with the app that you have just built. A click on the Hello World button opens the greeting text:

🚧

If you are launching the project for the first time, please allow some time for the app preview to load.

Testing on Device

When your app version is ready, you might also like to test it on the device.

👍

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.


What’s Next

Check this link for more Ionic 5 step-by-step Tutorials

Did this page help you?