In this article we shall get our hands dirty with the ionic framework. As suggested in the title, it is clear that it is to be used to create powerful web apps and deployed into native environment being Android or iOS.
Now the basic question that some of the minds may get struck with is that how can an app being designed in web technology can be run on native environment like Android or iOS. This question is answered by Apache Cordova(also called as PhoneGap). It is mobile application development framework or simply it is used to deploy web apps in such way that they fit into the native environment which we want out of it as the end product.
The sample image below clearly indicates the working of cordova
For more details please read about it here
- Download and Install Iconic : The first step is to download and install the ionic on your system. Be clear here that since is ionic is npm module so therefore it can only be installed through npm i.e node package manager. In other words, you must have already nodejs installed on your system. Download nodejs from here.. I would recommend to install the LTS version since it is stable.A fter installing nodejs your can install ionic since npm will be installed automatically. Here I will show the installation process.
I have used ubuntu but if you are on Windows then don’t worry I will guide the windows fans as well :). For only linux users, write the below the command on your terminal to update the repositories below installing ionic.Windows users do not need to do anything.
sudo apt-get update
Then install the ionic by using the commands which are different in linux or windows. For linux users
sudo apt-get -g install ionic
Since it is global installation so you need to write the -g and sudo
For Windows users follow the command below.You may need to run the command prompt as admin
npm install ionic
- After installation run the following command :
This is basically to test whether ionic has been successfully installed on your system
Next step is to make your ionic app by using the following command
ionic start name_of_project template_name
The command is the basic syntax to follow. It is same for both windows as well as linux users. The image below clearly depicts the process :
Let me explain the above command. Start here, basically tells to create a new ionic app, next is the name of the app and then followed by the starter template. There are various other template being provided by ionic depending upon the requirement like tab, sidemenu, blank etc. It is the basic layout of the app that is going to be built further. After running the command it will also ask whether you want to integrate the app with cordova you can simply type yes
- Project Directory : The last step is to move through the project directory by typing the following command
You can also install ionic pro sdk by signing up into the ionic official website enjoy the cool environment.You can also set up SSH or can skip for now if you don’t want
Next type the following command
Voila!! You have created your first app.
Pros and Cons of Ionic framework
The advantages are described briefly:
- Develop once deploy anywhere
- As it is being built over it is very useful in creating powerful and robust applications.
- Quick development, low cost of maintenance
Don’t ignore the disadvantages as well.These are:
My Personal Notes arrow_drop_up
- Bad Performance as compared to native app.(Don’t misunderstand here it is a comparison)
- High skills requirement for complex apps
- Built-in navigation can be complex
- Benefits of Using Modern Learning Apps
- Hybrid Apps vs Native Apps | Which one to choose?
- Use of Shopify Apps
- The New Era of App - Intelligent Apps
- Why Serverless Apps?
- Top 10 Django Apps And Why Companies Are Using it?
- Best Vault Apps For Android and iOS
- General Introduction to Progressive Web Apps(PWA)
- How to Add App to Home Screen : Progressive Web Apps
- Building Apps with Apache Cordova
- Node.js | Securing Apps with Helmet.js
- Top 10 Apps Using Machine Learning in 2020
- Top 20 Adobe Creative Cloud Desktop Apps
- Sending Push Notifications : Progressive Web Apps
- Android Launcher Apps Users Must Watch
- Why You Should Switch to Kotlin from Java to Develop Android Apps?
- 7 Famous Apps Built on NodeJS: Reasons and Benefits
- 7 Essential Mobile Apps for Computer Science(CS) Students
- Top 8 Video Call Apps That Become Popular During Covid19 Pandemic
- Google Play Protect : How it Detects and Removes Malicious Apps?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.