A resource for Ionic developers and those who want to get started in mobile hybrid development.
Getting Started with Ionic
Historical
Ionic will allow you to develop a web application that will look like a native application. It will also share some capabilities such as access to system elements. This is called a hybrid application. Most of its code is in web technology (javascript / HTML / CSS) and for everything else, there are plugins that make the interface between the smartphone and your application.
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.
Ionic 2 is notably increased from 1 to Angular Angular 2 and now uses webpack instead of bower and gulp. Ionic 2 also allows you to use javascript developments with syntaxes SS6 / ES2015 and SS7. A presentation was made to the Angular Connect who made a good impression as the performance has been improved, especially on entertainment.
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.
Tutorial
It’s time to get to the heart of the matter and create our first Ionic application!
Installing Ionic
Let’s start by installing our work environment.
Install node.js ;
And the command line tools (CLI) for Cordova and Ionic:
Create an Ionic project
To start an application with Ionic, just use the CLI. Let’s try the following command:
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:
At this point, we have a directory containing the minimum boss of our future application.
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 hooks and plugins So it only remains to see the source files in the directories scss and above www.
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 myApp:
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.
Add plugins with Ionic
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:
Taking the last item as an example, ionic-plugin-keyboard here is what the README found in ./plugins/ionic-plugin-keyboard/README.md:
The cordova.plugins.Keyboardobject Provides functions to make interacting with the keyboard Easier, and fires events to indicate indication que le keyboard will hide / show.
The object cordova.plugins.Keyboardprovides functions for easier interaction with the keyboard, and sends events to indicate that the keyboard is shown / hidden.
Concerning cordova-plugin-whitelist, here is what explains his file README.md:
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:
Developing the application
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!
In addition, the developers of this wonderful tool we have prepared a list of important components and elements ready to use and documented!
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.
Deploying an Ionic application
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:
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.
For packager:
To emulate:
To deploy on a test device, this differs depending on the platform:
For 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 Play.
Npm install the packet ios-deploy global in order to directly launch the application on the device using the command:
Testing an Ionic application
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.
Ionic Tips
AngularJS
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 .
Sheets
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:
Community
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 )!
Plugins
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.
Symbols and icons
Ionic base embarks Ionicons , an extensive icon library with variations by platform. Do not forget to use it! This is the font-awesome to Ionic.
Splash screens and application icons
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 .png, .psdor .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:
Attention however, the tool does not yet allow the generation of 9-patch format for Android splashscreens.
Compatibility
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:
Tests
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 1.2
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/ .
The post How To Install Ionic – Getting Started appeared first on LucidKit.