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 look like this:

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 a new 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 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 app Screen1 page.
  2. Click the header (check that ToolbarTitle1 is shown in the Breadcrumbs line) then, in the PROPERTIES tab, change the Text property to Welcome Ionic 5.
  3. Now, locate the Card component (on the PALETTE) and drag and drop it inside the phone area.
  4. Click the Card Item Title and in the PROPERTIES tab, change its Title Text property to Hello World:
  1. Then, select the Card item and change its 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 dropdown, 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 toolbar.

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

Testing the App

Testing the app is fast and simple. All you need to do is simply click the TEST button in the top 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.


What’s Next

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