Back to blog home

An introduction to Ionic development: creating an Ionic app

Ionic is an open-source SDK framework that allows you to build hybrid mobile apps for all the main mobile platforms, including iOS, Android, and Windows. In this tutorial we guide you through the task of creating your first Ionic app. 

Firstly, a quick word on why we love Ionic development here at Inviqa. What’s great about Ionic is that you can get started straight away, because you can use the web technologies you’re already familiar with, including HTML, CSS, and Javascript.

Ionic also allows you to access native mobile functionality via Apache Cordova. In other words, it’s possible for your Ionic app to access the phone’s camera, storage, GPS, accelerometer, and much more! Before you dive into the task of creating your app, head here to find out all the native functionality you can access with Ionic and Cordova.

Creating a hybrid app with Ionic

Ionic uses a few technologies bundled together to create a hybrid app. But for the purposes of this tutorial, we’re going to focus on just a couple of elements.

Ionic is built using Angular (2/4/5) and is typically updated when a new version of Angular is released, so the two technologies are intrinsically linked. Any Angular application can be converted into an Ionic app, however it’s best to start your mobile app development with Ionic as you can access a number of user interface components.

Ionic user interface components provide you with access to a phone’s native functionality and speed-up development by giving you a number of pre-built solutions to commonly-needed parts of your application (a carousel, for example). 

You can of course style and modify these components to meet you needs, but it certainly helps for rapidly prototyping your app and creating a minimum viable product, or MVP.

Native apps vs. Ionic apps

Ionic (hybrid) apps have a number of advantages over native apps, the main one being that it’s easy to get started on creating a mobile app using the technologies you’re already working with every day.

But Ionic offers much more than a convenient way to develop applications. With extensive user interface components and a great set of developer tools, developing Ionic apps is a breeze. 
Take the ‘lab’ developer mode, for example, which allows you to instantly see your app changes in a phone emulator. This is a real plus, and getting such rapid feedback is a massive advantage when you need to quickly develop an MVP.

Of course, like anything else, there are some drawbacks to using Ionic; there are some performance issues, and Ionic won’t be the right choice for some projects where a native app might be more suitable (a mobile game, for example).

For a large portion of apps, however, a tool like Ionic allows you to test out your ideas quickly on multiple platforms and validate your app before you commit to building something natively for each mobileOS – something that can be costly and time-consuming, and can reduce your market exposure if you’re only targetting one platform.

Now that you know what Ionic is and what it can offer, let’s jump into a quick example.

Getting started with Ionic development

To use Ionic, you will need to install a few things, the first being Node.js (head here to download the latest version). You’ll also need to ensure you install the Node Package Manager (npm) as part of your Node.js installation process, so that you’re able to install Node.js modules.

Installing Ionic

So now you have everything you need for set-up, let’s move onto installing Ionic itself. 

Open up your console or terminal. On Mac / Linux you can just use the standard terminal; on Windows I’d recommend using Cmder:

npm install -g ionic cordova

You will only need to run this command once because we have used the -g flag. This means the modules are installed globally. Once the command has finished running, both Ionic and Cordova should be ready to use. 

Now let’s move onto creating your first basic Ionic App!

Creating your first Ionic app

Next type the following command into your console:

ionic start myIonicApp blank

You can also create different ‘starter’ apps using this command by changing the blankparameter. There are three other options – tabs or sidemenu and tutorial – however we are just going to keep things simple here and use the blank ready-made app.

You can also check-out the Ionic Market for more starter app templates.

Once we have created the app we need to move into our newly-created project which matches the name of the string you gave after start. In our case, that’s myIonicApp, so let’s type the following command in the console:

cd myIonicApp

Seeing your Ionic app in action

There are a few ways to develop and see your newly-created project in action. The easiest way to get started is to simply type the following command:

ionic serve

This will start a local server and run various webpack commands in order to compress and optimise your application, launching a new window in your default browser so you can view it. 

It should look something like this:

Ionic development

This version of your application is of course still just using HTML / CSS and JS (Angular), and so on, so feel free to open up your debugger (for example, Chrome Dev Tools) so you can watch for JS errors during development to make it easier to catch issues.

The server will also watch for changes you make to your source code and rebuild the app (just the changes), refreshing your screen with those changes automatically.

Remember I also mentioned lab mode earlier in this tutorial? To access this you’ll need to quit the current server by pressing Ctrl-C in our original console window. Then run the following:

ionic serve -l 

This will now run the app in lab mode, which gives you emulated versions of the app in the three main mobile OSs (Android, iOS, and Windows). Again, this works in the same way, in that it’s always watching for changes in the file system. A change will trigger an app rebuild and an automatic refresh of each emulator you are running so you can get instant feedback on the changes you’re making. 

Lab mode also gives you handy links to the API documentation on the left-hand side of the page.

Your project layout

Below you can see the layout of a project (using Angular 4 and Ionic 3 in this case). This example closely follows the same layout as a standard Angular application. There is a src / app folder which contains the main app.module.ts file for managing dependencies and the core of your ionic application. 

Most of your work will be done within the src directory. The main difference from a standard Angular application is that you have a pages, themes and assets folder, but really it’s just a different way of organising components within Ionic.

So let’s dive in and make a couple of small changes so you can see your app in action!

Working with templates

To make our initial changes we can work in the following file: myIonicApp\src\pages\home\home.html

First we can take a quick look at the grid system offered by Ionic. This works exactly the same as something like the Bootstrap or Foundation frameworks, and can help you make great layouts within your mobile application without too much effort. So let’s go ahead and look at the <ion-grid> component.

In your home.phtml file let’s change Ionic Blank to My First Ionic App. Hit save and your browser should reload and display your new title!

Next within <ion-content> we can replace the code with our new Grid component, so it should look something like this.

<ion-content padding>
 <ion-grid>
   <ion-row>
     <ion-col col-6>
       Our first piece of content within a grid
     </ion-col>
     <ion-col col-6>
       Our second piece of content next to our first
     </ion-col>
   </ion-row>
 </ion-grid>
</ion-content>

The page should refresh and you should see these two pieces of text next to each other in the grid. You can also add additional styles to change the breakpoints within the grid and how many columns are taken up at these various breakpoints. For example, you could change the code to the following:

<ion-col col-12 col-md-6>
       Our first piece of content within a grid
     </ion-col>
     <ion-col col-12 col-md-6>
       Our second piece of content next to our first
     </ion-col>

In lab mode you should now see them one under the other. However if you click the ‘Open fullscreen’ button  at the top of the page it will open this in a new browser window. Try resizing this window and you should see the two pieces of text move from side to side and under each other depending on the screen size, just like a standard responsive site.

People view apps in multiple orientations and across much bigger devices (e.g. tablets) and screen resolutions, so you should always try and give the best experience for any screen size, regardless of the platform.

Using the Ionic CLI

Now we’ve had a basic look at editing a page, we can now look at using the Ionic CLI to create a new page and navigate to it.

Since your server will be running, let’s open up a new terminal window and navigate to the directory you installed the app to, entering the following command:

ionic generate page icons

This will generate a new page for us called 'icons'. If we go back to our code editor we should see an extra folder added to the ‘pages’ folder, called ‘icons’.

Looking at components

So now we have created a new page, how do we navigate to it? There are a few ways of doing this, however for the purpose of this demo we will create a simple button that will navigate to our new page.

First we need to add a new button to our page. To do this we can use the ion-button component. So in home.html let’s add the following code after the last </ion-col>:

 <ion-col col-12 col-md-6>
       <button ion-button color="secondary" (click)="goToIconsPage()">Go to Icons Page</button>
     </ion-col>

A button should now appear and it should look something like this:

Ionic developers

So if we go ahead and click on this an error should appear within the emulator, telling you that the function goToIconsPage doesn’t exist. So next we need to add this.

To do this we need to edit our home.ts component file located here: src\pages\home\home.ts.

Underneath the constructor, we need to add the function that’s missing; in this case the goToIconsPage function:

goToIconsPage () {
   this.navCtrl.push(IconsPage);
 }

Ionic has its own navigation controller which handles navigation so this .navCtrl.push simply pushes a new page to the controller and takes us there. However, we first need to import the IconsPage into our HomePage component. So at the top of the file, under NavController import, we need to add the following:

import { IconsPage } from '../../pages/icons/icons';

So now what happens when we click the button?

We still get another error. This time it’s because we haven’t told Angular about the new component – in this case, our new page – so we need to tell Angular about it. It’s a shame the CLI doesn’t currently do this for us, but we now need to go to app.module.ts in /src/app and do this.

At the bottom of the list of imports we need to add this line:

import { IconsPage } from '../pages/icons/icons';

This actually imports the new page component. 

We next need to add it to the declarations and entryComponents arrays below:

declarations: [
   MyApp,
   HomePage,
   IconsPage
 ],....
 entryComponents: [
   MyApp,
   HomePage,
   IconsPage
 ],.....

Once these two lines have been added, you should now get taken to an empty page entitled 'Icons!’ when you click on your new button. Once on this page, Ionic already provides us with a back button in the header to return to the previous page.

Wrapping up

I hope this mini introduction to Ionic development has give you the tools you need to make your first Ionic application. 

Do be sure to check-out all the components you have access to here via the Ionic website, and take advantage of tools like Ionic Pro to deploy your application to a real device and see it in action. The latter is a paid service for now, there is a free kickstarter version you can use to get up and running.

Good luck!

Learn more about Ionic development and mobile app development at Inviqa.com. Get in touch to explore how we can support your digital journey.