Build Your Mobile App with Ionic 5— Getting Started
Build Your Mobile App with Ionic 5— Getting Started
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 frontend 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:
- 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.
- 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
- 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.
- 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.
- Loads of Cordova plugins — Ionic has prebuilt library of APIs and plugins. Ionic Native makes it easy to add native device functionality to any Ionic app leveraging Cordova or Capacitor.
- 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.
- 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.
- 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:
Install Node
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 Ionic
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 starter 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:
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
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.