Build Your Mobile App with Ionic 5— Getting Started

Olutunmbi Banto
Mar 30 · 4 min read
Image for post
Image for post

Introduction

Developing mobile applications have been made easy and seamless with Ionic. Over the years, Ionic has greatly improved their framework in allowing users to build mobile applications that are platform-independent using your favorite front-end framework. Now with your existing HTML/CSS, Angular, React, or Vue knowledge, you can build cross-platform mobile applications with native features and beautiful user interface.

What is Ionic

Ionic is a free and opensource framework used in building cross-platform mobile applications for Android and iOS platforms. Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps.

Ionic was built with the Angular framework but you can also build Ionic apps with React and Vue. Ionic allows you to build reusable components that can be imported into other components for speedy app development

Advantages of using the Ionic Framework

Ionic has several advantages and some of them are:

  1. One codebase, multiple platforms — Ionic allows you to build your apps with HTML, CSS, Angular/React/Vue, and run it on Android and iOS platforms.
  2. Native look and feel — Ionic’s UI components display beautifully on all mobile devices and platforms. Start with ready-made components, typography, and a gorgeous base theme that adapts to each platform
  3. Tons of Native API to integrate with — Ionic allows you to make use of geolocation, contact, keyboard, camera, identity vault, biometrics, firebase, couchbase APIs and many more APIs to build whatever application feature you desire.
  4. Ready-made and customizable reusable components — Ionic provides loads of components that can be imported into any other component. It also uses Stencil and allows you to create custom reusable components within Ionic and external apps.
  5. Loads of Cordova plugins — Ionic has a prebuilt library of APIs and plugins. Ionic Native makes it easy to add native device functionality to any Ionic app leveraging Cordova or Capacitor.
  6. A huge community of developers use it and are ready to support — Ionic has a large developer base who can support in your development. Learning from others makes you build better applications.
  7. High-speed performance- Ionic is built to perform and run fast on all of the latest mobile devices. It performs faster and can achieve 100% PWA on Lighthouse.
  8. Rich and easy to use documentation — Ionic documentation has been, by far, one of the best, detailed and self-explicit documentation I have encountered. It also contains boilerplate codes that you can copy, modify and paste to suit your needs.

Getting Started

Since Ionic uses the Javascript language, to start building Ionic apps, you need to:

If you don't have Node installed on your computer, visit nodejs.org and install Node. If you are not sure, run:

node -v

If it returns a version number, then you already have it.

Install the Cordova and Ionic command-line tools by running this command in your terminal:

npm install -g cordova ionic

Let's Build Our Ionic App

Ionic provides basic starter templates to get started with building any ionic app of your choice and they are:

  • Blank — A blank starter project
  • Tabs — A starting project with a simple tabbed interface
  • Sidemenu — A starting project with a side menu with navigation in the content area
  • List — A starting project with a list

The format to start a new project is:

ionic start <app-name> <starter-theme>

We will be using the List starter templates, hence, run the command:

ionic start demolist list

It will ask you to choose what framework you would like to use. Angular or React. Use your mouse, select Angular and press Enter.

You will also be asked: “Integrate your new app with Capacitor to target native iOS and Android?” Press n for No and press the Enter key.

The process of bootstrapping your app begins followed by the installation of necessary npm modules. It might take a while depending on your internet speed.

Run Your App

Once installation and setup is done, cd into the demolist folder and run:

ionic serve

This opens the app in your default browser at URL: http://localhost:8100 and looks like the image below:

Image for post
Image for post
Image for post
Image for post
Demo Ionic app with List template. Master and Detail pages

Boom! There we have it. Our sparkling Ionic app with a good angle to start building from.

Conclusion

In this tutorial, we have been able to start up a simple Ionic 5 mobile app that can be run on Android and iOS. An app that behaves natively on both platforms.

Following this article, I will be writing on advancing our app. If you learned a thing or 2 and would like to read more from me, Like and Subscribe to my Medium channel.

You can follow me on on Twitter or connect with me on LinkedIn

Resources

Ionic Official Documentation

Ionic GitHub Account

Stencil GitHub repository

If you found this article helpful and would like to read more and know when I publish related articles, do subscribe to my newsletter. I promise not to spam you.

Subscribe To My Newsletter

Weekly Webtips

Explore the world of web technologies through a series of tutorials

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Olutunmbi Banto

Written by

Software Engineer and UX Developer — #Node, #React, #Angular, #PHP #UX | ALC Mentor and Facilitator at Andela | Tech Writer at @itnex_io

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Olutunmbi Banto

Written by

Software Engineer and UX Developer — #Node, #React, #Angular, #PHP #UX | ALC Mentor and Facilitator at Andela | Tech Writer at @itnex_io

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store