Creating cross platform mobile applications is common place in 2017. There are more frameworks and technologies than ever that allow you to take advantage of a multi-platform approach. Ionic Framework is up there with the top five cross platform frameworks and in this article, we're going to look at getting started with Ionic.
If you prefer to watch a video of this article, here it is:
Prerequisites
To get started with Ionic, we'll need to have a few prerequisites. The first is NodeJS, a JavaScript runtime based on Google's V8 JavaScript Engine. The installation process for Windows and Mac is different and we'll look at this below:
Windows
Installing Node for Windows is as simple as visiting https://nodejs.org and downloading the latest installer. You can also use Chocolatey if you prefer a package manager approach. Ensure that when following the installation steps, “Add to PATH” is selected as this will allow us to access node within our command prompt.
Once you’ve done that, check your Node installation works by typing node -v and npm -v. If you get two version numbers back (i.e. one for each), then you can be confident you've installed Node correctly.
Mac
Installing Node for Mac involves a little more work than simply downloading the installer from the Node website. Whilst it is possible to use the installer from https://nodejs.org it is not advised due to the requirement of sudo.
If we did it this way, we’d have to prefix all of our npm commands with sudo and this can leave our system vulnerable to potential scripting attacks, as well as causing compatability issues. Instead, we can install Node via the Homebrew package manager and we can then interact with npm without worrying about having to run things as sudo.
The quickest way to get Homebrew is to visit http://brew.sh/ and get hold of the installation script. It should look a little something like this:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
Simply paste that into your terminal and it’ll download the Homebrew package manager to your Mac. We can then use brew install node to install Node on our system without any worries.
Once you’ve done that, check your Node installation works by typing node -v and npm -v . If you get two version numbers back (i.e. one for each), then you can be confident you've installed Node correctly.
Installing the Ionic CLI
Now that we've got an appropriate Node installation, we can install the Ionic CLI by typing the following in our terminal:
$ npm install ionic -g
We're using the npm package manager to install the Ionic package from the npm package library globally. You should then be able to use the Ionic CLI to make awesome projects!
New Project
Let's start by creating our first Ionic project:
$ ionic start MyFirstProject blank
This creates us a new Ionic project named MyFirstProject based on the blank template. As you might imagine, a blank template is simply a standard application without any custom features (i.e. no side-menu, tabs, or anything else). It's a great starting point as we don't have to be concerned about any extra complexities.
Now we can navigate to our newly created directory and investigate the contents:
$ cd MyFirstProject
Package Contents
If we take a look at the directory structure of our new project, we're given the following files and folders:
Folders
Each folder serves a unique purpose, but we'll be doing the overwhelming majority of our work inside of src. Here's a run down:
| Folder Name | Use |
| hooks | Specific build process functionality resides here. If we wanted to execute particular hooks at before_build, after_build, after_prepare (and much more), we'd do it here. |
| node_modules | All of our project dependencies reside in this folder. Any time we install a dependency via npm, the files are added here. |
| resources | Project specific icon and splash screen are in this folder. With initial project creation, the default Ionic application splash and icon resides here. We can generate a new one with the Ionic CLI. |
| src | This is where we'll spend the majority of our time as it contains the source code for our application. Any changes to the source will be transpiled into the www folder during the build process. |
| www | Built web files reside here. This folder can be deployed to the web and you'll rarely need to work with this folder specifically. |
Files
The generated files inside of our project are similar to any other Node and TypeScript project with a few extras:
| File Name | Use |
| config.xml | Standard Cordova based config.xml. Contains application specific configuration with things like application name, version, OS preferences, plugin definitions, and more. |
| ionic.config.json | Ionic configuration file. Contains the application name, application id and project type. |
| package.lock.json & package.json | Project specific icon and splash screen are in this folder. With initial project creation, the default Ionic application splash and icon resides here. We can generate a new one with the Ionic CLI. |
| tsconfig.json & tslint.json | Both of these files are TypeScript specific configuration files. Both can be used to make changes to the way TypeScript operates within the project. |
Run in Browser
The quickest way to get something on screen is to run this inside of our browser. Going forward, I strongly recommend the use of Google Chrome as it offers a great development experience with thorough tooling.
There are two key ways to run our project inside of the browser, the first way is done by executing the $ ionic serve command. This is used to simply display the project on screen without any device size in mind.
As you can see, the application is stretched out to the width of our screen. In this circumstance it doesn't make much difference to the viewing experience, but ideally we should be looking at our application in the same dimensions as our device(s).
To simulate this in device mode (don't confuse this with emulation), start off by opening the Chrome Developer Tools by hitting CTRL + SHIFT + I on Windows or CMD + SHIFT + C on Mac. We can then toggle Device Mode by pressing CMD + SHIFT + M on Mac or `CTRL + SHIFT + M on Windows and Linux.
This then gives us a dropdown in which we can select from a variety of device sizes and user agents.
As Ionic is able to change appearance based on operating system, simply changing our selected device will allow us to see the appropriately styled elements.
If we swap between the iPhone 6 Plus and the Nexus 6, we're able to see these differences when refreshing the page. Another way to view our application inside of the browser is by the use of Ionic Lab. If we cancel the $ ionic serve command with CTRL + C, we can instead type $ ionic lab.
NOTE: We could also simply append /ionic-lab as a URL parameter (becoming https://localhost:8100/ionic-lab) whilst running $ ionic serve.
Notice that Ionic Lab allows us to view our application in all three operating system styles at once. Devices can be toggled on or off by selecting from the 'Platforms' dropdown at the top right. Once again, this is not a natively emulated version of our application and is still simply a web page.
Theming
Let's start off by making some basic changes to our HomePage template. Inside of home.html (src/pages/home/home.html), we can change the title and navigation bar colour:
An ion-header is added to each one of our pages and it acts as a wrapper for the nav bar and other elements above the main body content.
Our navigation bar is now blue due to the color="primary" attribute. This comes from (src/theme/variables.scss) and each can be customised with different colours, and new colours can even be added in a similar fashion.
Any other content should be added inside of ion-content or ion-footer. Let's continue our customisation by adding a text input and button to our HomePage. We can then display a toast as a 'greeting' to the named user.
Greeting
To display a greeting to a person, we'll need an input box for the user to type into. Inside of our ion-content, we can add a new ion-item that contains a label and text input:
We've also created a button with the ion-button, block, and clear attributes. Whenever we're creating a button with Ionic and want to style it appropriately, ion-button should be added. Other attributes such as block makes our button take up 100% width, and clear gets rid of the background colour.
The click event added to this button is assigned to a function named showGreeting(). Inside of our home.ts I've created a class variable named name which is attached to our ngModel, this means any changes to the ion-input will allow us to create a toast to greet said person.
To show the toast, we've imported the ToastController from ionic-angular and injected it inside our constructor as toastController. This gives us the ability to create a new toast with this.toastController.create() using the message and duration as parameters.
The resulting project therefore looks like this:
Interested in more Ionic tutorials and training? Why not check out my course Learn Ionic 3 From Scratch with the coupon code HALF for 20% off! :)
Or if you prefer free stuff... I recently created a FREE Ionic 3 and Firebase course.