Getting started with Ionic: framework for cross-platform apps

Wants to develop mobile application? And you don’t have any experience on Android or iOS development?

Reference: https://online.maryville.edu/

Don’t worry! Ionic provide a framework for the developers to implement the mobile cross platform applications using web technologies. Yes, using HTML, CSS and JavaScript, you can make android and iOS app’s.

Outcome of this article:

1. Familiar with the Ionic framework
2. Setting-up the environment
3. Create first iconic application
4. Run the application on browser
5. Run and test the application on Android studio emulator
6. Run and test the application on iOS simulator

The purpose of this article is to start implementing the small Mart application named ‘Mart-24’ where user can login and sign-up the account and check grocery items.

What is Ionic?

Ionic is a platform for building mobile experiences with the web. Ionic is primarily known for its open source mobile SDK. The Ionic SDK allows web developers to build native iOS and Android applications, and mobile-ready Progressive Web Apps, using familiar web tools, frameworks, and languages.
Reference: https://ionic.io/resources/articles/what-is-ionic

In other words, ionic framework allows you to build mobile applications for android, iOS and windows. Ionic framework helps you to write your code using web technologies like HTML, CSS and JavaScript and gives you native mobile applications. Ionic framework have support of all front-end web frameworks like Vue, React, Angular and Vanilla JS.

Ionic: Image taken from Google

Setting-up the environment:

1. Download the NodeJS installer from the official site NodeJS according to your operating system. Please verify it with following commands:

$ node -v
$ npm -v

2. Download Visual Studio(VS) code w.r.t your operating system.

3. Install the Ionic package using node package manager(npm) with the command:

$ npm install ionic -g

Here ‘g’ represent that the ionic package is installed globally and have access throughout the system.

4. Cordova: Apache Cordova is an open-source mobile development framework and provide platform for building hybrid mobile applications using HTML, CSS and JavaScript.

$ npm install cordova -g

Create new project:

1. Run the below command to create the project. Here ‘Mart-24’ is the project/app name. It will prompt the option to pick the framework. I select the angular.

$ ionic start Mart-24 blank

2. After installing some dependencies, the project ‘Mart-24’ is created.

3. Move to the project directory:

$ cd Mart-24

4. Open the project on VS code by,

$ code .

Run the application:

Let’s run the application and test it on browser by executing the command:

$ ionic serve

It will redirect to the browser and open the application like,

Figure-1: Blank app overview

Change the layout from the browser inspect element and switch to mobile view as,

Figure-2: Mobile view of the application

Hurry!!! Your first ionic app is Up.

Wants to change the title of the app?

Open the file in ‘src\app\home\home.page.html’ and change the title here from ‘Blank’ to ‘Mart-24’. Save the file, it will show the updated title on the app as shown in figure-3,

Figure-3: App view with updated title

Run & test the application on Android Emulator:

1. Download the android studio from the official site.
   https://developer.android.com/studio
2. Run the installer on the system.
3. Open the android studio.
4. Go into the ‘File’, select ‘New’ and create ‘New Project’.
5. Select ‘Empty project’ and click on ‘Next’ button.
6. Enter project name and click on ‘Finish’ button.

After successfully create the project, click the ‘Device Manager’ as highlighted in below image,

Figure-4: Android Studio

It will open the Device Manager prompt where you can create the device. When the virtual device is created, it will show as shown in figure 5. Click the run button to start the virtual android device called ‘android emulator’ as shown in figure 6.

Figure-5: Overview of Device Manager

Figure-6: Android Emulator

Now, we have to connect the android emulator with our ionic application.

Go to VS code and run the command,

$ ionic cordova platform add android

This command will download cordova android and create new folder named ‘platform’ in your project directory where you will find android project. The next step is to build this android project by executing the command:

$ ionic cordova run android

It takes some time to build and setting up the environment and show ‘Build Successful’ as shown in figure 7.

Figure-7: Successful Build logs

Open the Android Studio and deployed application appears on the emulator as shown in figure 8.

Figure-8: App on Android Studio Emulator

Also the console logs shown in figure-7 shows that the build create the .apk file in ‘Mart-24\platforms\android\app\build\outputs\apk\debug\app-debug.apk’ directory. You can use this .apk file to install the app on your mobile phone.

Run & test the application on iOS Simulator:

To run and test on the iOS simulator, you require a MAC book. You can not do it on Windows machine.

Similar to the Android Studio for android app, the iOS require Xcode install on the Mac book. You don’t need to launch the simulator beforehand.

Run the below command, it will create the ‘ios’ folder inside the ‘platform’ folder of the project directory.

$ ionic cordova platform add ios

Now build and run the ios application with the following command that initiate the ios simulator automatically and start your application.

$ ionic cordova run ios

In my next article, I will continue this application and modify it with login and signup functionality of Mart-24 app. Follow the next series of articles to successful completion of Mart-24 app.

If you like an article, applause by 👏 button and share it in your circle! Feel free to give the feedback.
Thank you, happy reading !