Before you go with the Ionic framework, let’s understand how it works and about the whole scenario of the application.
Actually, we don’t need the Ionic framework to develop a cross-platform hybrid app, Ionic is just like a front end framework like bootstrap, and it’s mainly focusing only on UI interaction that handles the overall look and feel of the application. Cordova is a master key behind the whole scenario of the Ionic framework, Cordova framework is enough for building a hybrid application.
What is the Cordova framework and role of the Cordova in the Ionic application:
Native WebView is used to render your web content with the help of Cordova. WebView is an application component or web browser which shows your web content within a native application or mobile device. Before developing the mobile application using the Ionic and Cordova framework, we need to understand the hybrid and native terminology and its difference.
How to configure the Ionic framework in windows:
Now, we are going to understand how we can set up an environment for building hybrid app development of the Ionic application. Before we set up the environment, you will have to download and pre-install below software:
- NodeJs and NPM
- Android Studio (Android SDK)
- Java JDK
- Code Editor (recommended visual studio code)
After installing the Java JDK, you need to set up the JDK path in the windows environment variable. Similarly, after installing the Android studio you need to set up the path and install the latest Android SDK using the IDE. Now, we going setup the ionic and Cordova framework and run following commands:
- Run the following in the command line terminal to install the Ionic CLI (ionic):
- npm install -g @ionic/cli
- For using the angular library in the ionic platform you need to add ionic CLI by using the following command:
- npm install @ionic/angular@latest –save
- To add Ionic to an already existing React project, install the @ionic/react and @ionic/react-router package using the following commands:
- npm install @ionic/react
- npm install @ionic/react-router
- To install the native run and supporting native libraries, we need to install the cordova CLI:
- npm install -g cordova ionic
- For checking the version of all the installed software, please run below commands:
- npm -v
- node -v
- Ionic -v
- cordova -v
How to create and deploy the Ionic application:
- To create a new project, use –
- ionic start ProjectName template
- To run it in a browser, use –
- ionic serve
- To run it on a device, use –
- ionic cordova run android –device
- Inside the project folder, you’ll add Android/iOS platform supported your development using the command –
- ionic cordova platform add android
- ionic cordova platform add ios
- After these code changes are done, you can use below the respective command for generating the build according to the platform –
- ionic cordova build android
- ionic cordova build ios
- Once the build is generated successfully, you can install the file on your mobile device or run it as a web application using a browser and perform the testing.
Although, Ionic is a new age framework strongly supported by Angular. You can simply develop a mobile application for both Android and IOS platforms using web technologies without any use of native language or any native compiler.
In my upcoming blog, we will see how to create a desktop application using the mobile app code that means a single code that runs on Android, IOS, and desktop as well.