Introduction
Before reading this article, please go through the article's link, mentioned below.
Apache Cordova
Apache Cordova is an open-source project, which aims at allowing mobile developers to build applications for all major mobile platforms, using HTML, CSS, and JavaScript technologies.
What is Ionic Framework?
Ionic is a powerful HTML5 SDK, which helps you to build native-feeling mobile apps, using Web technologies like HTML, CSS, and JavaScript.
Ionic is a popular front-end JavaScript framework to develop cross-platform mobile apps, using Apache Cordova. It’s an open-source framework, which is used to develop mobile applications. It provides tools and services to build mobile UI with native look and feel.
Ionic framework needs native wrapper to be able to run on the mobile devices. You can use the Ionic Framework in Visual Studio 2015 to easily create and debug cross-platform Ionic apps.
Why use the Ionic Framework?
With Ionic, we wanted to build an HTML5 mobile development framework, which was focused on native or hybrid apps instead of mobile Websites.
Ionic is an open-source having a permissive open source license that can be used in both commercial and open-source apps, but by cultivating a strong community around the project.
Ionic Icon
Ionic Framework Features
The important features of Ionic are listed below.
- AngularJS
Ionic is using AngularJS MVC architecture to build rich single page Applications, which are optimized for mobile devices.
- CSS components
With native look and feel, these components offer almost all the elements, which mobile Application needs. Components' default styling can be easily overridden to accommodate your own design.
- JavaScript components
These components are extending CSS components with JavaScript functionalities to cover all the mobile elements, which can't be done only with HTML and CSS.
- Cordova Plugins
Apache Cordova plugins offer API, required for using native device functions with JavaScript code.
- Ionic CLI
This is NodeJS utility, which is powered with the commands for starting, building, running, and emulating Ionic Applications.
- Ionic View
Very useful platform for uploading, sharing, and testing your application on the native devices.
Ionic Framework Advantages
- Ionic is used for hybrid app development. This means that you can package your applications for IOS, Android, Windows Phone, and Firefox OS, which can save a lot of working time.
- Starting your app is very easy since Ionic provides a useful pre-generated app setup with simple layouts.
- The apps are built in a very clean and modular way, so it's maintainable and easy to update.
Ionic Framework Limitations
- Testing can be tricky since the Browser doesn't always give you the right information about the phone environment. There are so many different devices and platforms and you usually need to cover most of them.
- It can be hard to combine different native functionalities. You will run into plugin compatibility issues several times, which leads to building errors, which are hard to debug.
- Hybrid apps tend to be slower than native ones, but mobile technologies are improving fast. Thus, it will not be an issue in the near future.
Building Hybrid Apps with Ionic
Now, you must have got an understanding of what Ionic is and why it exists. Now, you are ready to start building your first app with it. Let’s see how to install and start building with Ionic.
Prerequisites
- Visual Studio 2015.
- Visual Studio Tools for Apache Cordova.
Follow the steps, mentioned below to build an Ionic Blank App, using Ionic Framework.
Step 1 Install the Ionic Framework
Prior to installing the Ionic Framework, we must Install the most recent version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app.
In Visual Studio, click on Tools menu, choose Extension and Updates option.
Step 2 Search for Install
Now, Extension and Update Window will open. Go to the Search Bar and search the keyword Ionic. It will search the Ionic templates for Visual Studio, click on the Download button, and Install.
Now, it's downloading.
Now, click on the install button.
Step 3 Create an Ionic App
Let’s be ready to create a New Project. Open Visual Studio 2015 and click File -> New -> Project Option for New Apache Cordova App, using Ionic Framework.
Step 4 Give the Project Name
New Project Window will open. Subsequently, you can select an Installed -> Template -> Java Script -> Apache Cordova Apps ->Ionic JavaScript Blank.
Type Project name as ionic-App1 and click OK button.
Step 5 Solution Bar
Afterward, we create a project. Our solution should resemble, as shown below.
This table gives the basic idea of how we might use each one.
| File |
Why is it in your project? |
| bower.json |
This file manages the Bower packages dependencies of our app. |
| build.json |
This file contains parameters that Visual Studio uses to build a signed Android package. |
| config.xml |
Contains the settings of our app. |
| taco.json |
Defines which version of the Cordova CLI Visual Studio uses to build the project. |
Step 6 Run the Application
Now, we are ready to run our Project. Thus, click the Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).
Output
Conclusion
I hope, you understood how to start the Ionic blank app, using Visual Studio 2015 and how to run it.