How To Install Ionic – Getting Started
A resource for Ionic developers and those who want to get started in mobile hybrid development.
Getting Started with Ionic
Ionic 1 is based on Cordova and Angular 1. It provides bricks that will allow you to create an application close to the native one. Drifty teams have made every effort to facilitate the life of the hybrid mobile developer by providing a simple and practical framework environment. Their framework has done so much feeling that they have raised a million dollars in 2014, while the startup was only 2 years old. This allowed their teams to rethink their creation, learning from their mistakes, requests from the community and updating the bricks on which the framework is based.
Version 2 is still in alpha version, we will focus in the continuation of this presentation to Ionic 1 which is the stable version currently.
It’s time to get to the heart of the matter and create our first Ionic application!
Let’s start by installing our work environment.
- Install node.js ;
- And the command line tools (CLI) for Cordova and Ionic:
$ npm install -g ionic cordova
To start an application with Ionic, just use the CLI. Let’s try the following command:
$ ionic templates
This command lists some of the available official templates. Know that there are several findable including Github.
To get a good overview of what the framework proposes, we will start from a quite complete template:
$ ionic start myApp tabs
At this point, we have a directory containing the minimum boss of our future application.
$ tree myApp -L 2 . ├── bower.json ├── config.xml ├── gulpfile.js ├── hooks ├ ├── after_prepare └ └── README.md ├── ionic.project ├── package.json ├── plugins ├ ├── cordova-plugin-console ├ ├── cordova-plugin-device ├ ├── cordova-plugin-splashscreen ├ ├── cordova-plugin-statusbar ├ ├── cordova-plugin-whitelist ├ ├── fetch.json └ └── ionic-plugin-keyboard ├── scss └ └── ionic.app.scss └── www ├── css ├── img ├── index.html ├── js ├── lib └── templates
If you have already done web projects, you should find your kids:
- Configuration files for tools: bower.json , gulpfile.js , package.json ;
- Configuration files for Cordova: config.xml , ionic.project .
We will return later on directories
plugins So it only remains to see the source files in the directories
scss and above
It is in this last that we will develop the web application that will become thanks to Ionic and Cordova a hybrid application for Android or iOS. For an overview, after all, it remains the web, we can run the command from the directory suviante
$ cd myApp $ ionic serve -l
A page in our browser will open to present two versions of executives dedicated to each platform (
-l for option lab, which allows you to observe the two versions simultaneously).
There you go! We can already interact with our new application. One of the great benefits of this feature is that the page updates automatically with live reload when we make changes to our templates, scripts, or style sheets.
Returning to the directory
plugins. The latter stores, you guessed it, the plugins of our application. These elements will allow us an interaction between the smartphone and the web application. It rotates in a web view and plugins will link this web view and APIs of the various tools available in the SDK your smartphone users. Therefore launching
ionic pluginfor a list of plugins already installed:
$ ionic plugin cordova-plugin-console 1.0.1 "Console" cordova-plugin-device 1.0.1 "Device" cordova-plugin-splashscreen 2.1.0 "Splashscreen" cordova-plugin-statusbar 1.0.1 "StatusBar" cordova-plugin-whitelist 1.0.0 "Whitelist" ionic-plugin-keyboard 1.0.8 "Keyboard"
Taking the last item as an example,
ionic-plugin-keyboard here is what the README found in
cordova.plugins.Keyboardobject Provides functions to make interacting with the keyboard Easier, and fires events to indicate indication que le keyboard will hide / show.
cordova.plugins.Keyboardprovides functions for easier interaction with the keyboard, and sends events to indicate that the keyboard is shown / hidden.
cordova-plugin-whitelist, here is what explains his file
This plugin implements a whitelist policy for browsing the webview application on Cordova 4.0.
This plugin implements a whitelist policy for browsing the webview under Cordova 4.0.
That is the principle. The plugins allow us to access what is managed outside the web view. And if we need to access the camera of the smartphone, we can use the command:
$ Ionic plugin add cordova-plugin-camera
We can now write and improve our application. Ionic uses AngularJS as its main base, making it almost indispensable to use it. But, no panic, it’s not so complicated to do simple things with; If you discover the framework, you will learn lots of things fast enough, and learn is good!
There is already enough to easily create the basis of your application, and it is more at the level of customization that you will have to spend time. Finally, it is important to note that the management of navigation and the tree is managed by the library IU-Router , a popular extension of all AngularJS developers.
What would an application for the smartphone if it does not run in a smartphone? Here we enter the world of Cordova, but as Ionic is a nice tool, it takes back most of the controls so as not to have to ask the question: is it Ionic or Cordova?
Here and as on smartphones, there are two worlds: Android and iOS. For each of these two worlds, it is necessary to install the development tools specific to each one before being able to emulate or compile the application.
To install the iOS tools, you have to be in the Apple sphere and therefore have a machine with OSX and XCode.
To install the Android tools is a little more open because based on java, so we have the option to use either Windows, OSX or Linux distribution.
Once the environment is ready, we can generate the necessary files for the desired platform:
$ Ionic platform add android $ Ionic platform add ios
You can then package your application to test it either on an emulator or on an actual device. Generally it is always better to test on real smartphones and tablets, especially because of the slowness and imperfection of emulators provided.
$ ionic build android $ ionic build ios
$ ionic emulate android $ ionic emulate ios
To deploy on a test device, this differs depending on the platform:
$ ionic run android
This command will launch the debug version of our application on the first device found, and if none is found on an emulator.
For iOS, you have two solutions:
- Open XCode generated file in the folder
platforms/ioswith XCode itself, then select the desired device via the interface and click the button
- Npm install the packet ios-deploy global in order to directly launch the application on the device using the command:
ionic run ios --device
It is important to note that the APK generated by Android packaging can be sent to anyone to be tested on its own mobile device. This APK is in
platforms/android/build/outputs/apk/android-debug.apkversion iOS to when it can be shared easily. It is necessary to prepare a beta version via iTunes Connect and to register Apple accounts registered with the testing machines.
AngularJS offers different ways to do the same. It is never easy to find oneself. This is why we recommend that you use the regular code in your code. John Papa (expert developer at Google) and Todd Motto (co-founder of voux.io) have long discussed the best practices and patterns to apply when code with AngularJS before proposing recommendations and other rules to follow .
Ionic is based largely on the use of Sass, and in particular makes many things configurable via variables. For this reason, and many others (including the organization of css classes), we recommend you to activate the outset Sass on your project via the command:
$ ionic setup sass
In addition to official documentation, there is a large community willing to contribute to the Ionic world. You will find many resources on Github . Andrew McGivery offers section listing more than 230 ionic resources ( a kind of awesome -ionic )!
Using ngCordova is strongly recommended. It is a set of plugins chosen and maintained by the Ionic team, and therefore always compatible with the framework.
Ionic also offers a service for generating very quickly all formats of icons and splash screens required to deploy on both platforms. For this they simply place two images, one for the icon and one for the splashscreen in the directory
resources. The images can be
.aiand must be at least 192 × 192 px for the launch icon and 2208 × 2208 px with the image centered. A template and more information is available in an article Drifty . Finally, to generate resources:
$ ionic resources
Attention however, the tool does not yet allow the generation of 9-patch format for Android splashscreens.
Compatibility with old Android devices can be a real problem. To Ionic problem we propose to use Crosswalk , and embark in the application a recent version of Chrome to ensure rendering and performance. Be careful though, this is only useful if your goal and touch the older versions of Android. Because this addition has a not insignificant blow: it adds several tens of Mo to your application. To do this, simply enter the command:
$ ionic browser add crosswalk
To facilitate this process, we developers have graced the application Ionic View (available on the Play Store and the App Store ) that can send and manage versions of tests on multiple devices. This allows us to simply share the application whatever the platform you wish to test.
Ionic just released version 1.2 . It should be available by default with the basic templates by next week. This version fixes over 100 bugs and improves application performance. Among others, the Ionic applications use the default scroll native ( native scrolling ) on all platforms. The user experience will be much more enjoyable especially on Android. In addition, the Windows 10 platform is now available, and an application can now be deployed as a website. With this version, Ionic wants to integrate little by little Ionic 2 (stable version planned for 2016) so that the change is simpler in the future.
For more information, and see the full update: http://blog.ionic.io/announcing-ionic-1-2/ .