Category: ionic

Ionic – Cordova Camera ”; Previous Next The Cordova camera plugin uses the native camera for taking pictures or getting images from the image gallery. Using Camera Open your project root folder in command prompt, then download and install the Cordova camera plugin with the following command. C:UsersUsernameDesktopMyApp> cordova plugin add org.apache.cordova.camera Now, we will create a service for using a camera plugin. We will use the AngularJS factory and promise object $q that needs to be injected to the factory. services.js Code .factory(”Camera”, function($q) { return { getPicture: function(options) { var q = $q.defer(); navigator.camera.getPicture(function(result) { q.resolve(result); }, function(err) { q.reject(err); }, options); return q.promise; } } }); To use this service in the app, we need to inject it to a controller as a dependency. Cordova camera API provides the getPicture method, which is used for taking photos using a native camera. The native camera settings can be additionally customized by passing the options parameter to the takePicture function. Copy the above-mentioned code sample to your controller to trigger this behavior. It will open the camera application and return a success callback function with the image data or error callback function with an error message. We will also need two buttons that will call the functions we are about to create and we need to show the image on the screen. HTML Code <button class = “button” ng-click = “takePicture()”>Take Picture</button> <button class = “button” ng-click = “getPicture()”>Open Gallery</button> <img ng-src = “{{user.picture}}”> Controller Code .controller(”MyCtrl”, function($scope, Camera) { $scope.takePicture = function (options) { var options = { quality : 75, targetWidth: 200, targetHeight: 200, sourceType: 1 }; Camera.getPicture(options).then(function(imageData) { $scope.picture = imageData;; }, function(err) { console.log(err); }); }; }) The output will look as shown in the following screenshot. If you want to use images from your gallery, the only thing you need to change is the sourceType method from your options parameter. This change will open a dialog popup instead of camera and allow you to choose the image you want from the device. You can see the following code, where the sourceType option is changed to 0. Now, when you tap the second button, it will open the file menu from the device. Controller Code .controller(”MyCtrl”, function($scope, Camera) { $scope.getPicture = function (options) { var options = { quality : 75, targetWidth: 200, targetHeight: 200, sourceType: 0 }; Camera.getPicture(options).then(function(imageData) { $scope.picture = imageData;; }, function(err) { console.log(err); }); }; }) The output will look as shown in the following screenshot. When you save the image you took, it will appear on the screen. You can style it the way you want. Several other options can be used as well, some of which are given in the following table. Parameter Type Details quality Number The quality of the image, range 0-100 destinationType Number Format of the image. sourceType Number Used for setting the source of the picture. allowEdit boolean Used for allowing editing of the image. encodingType Number Value 0 will set JPEG, and value 1 will set PNG. targetWidth Number Used for scaling image width. targetHeight Number Used for scaling image height. mediaType string Used for setting the media type. cameraDirection Number Value 0 will set the back camera, and value 1 will set the front camera. popoverOptions string IOS-only options that specify popover location in iPad. saveToPhotoAlbum boolean Used for saving image to photo album. correctOrientation boolean Used for correcting orientation of the captured images. Print Page Previous Next Advertisements ”;

Ionic – Javascript Popover ”; Previous Next This is a view that will appear above the regular view. Using Popover A Popover can be created by using ion-popover-view element. This element should be added to the HTML template and the $ionicPopover service needs to be injected into the controller. There are three ways of adding popover. The first one is the fromTemplate method, which allows using the inline template. The second and the third way of adding popover is to use the fromTemplateUrl method. Let us understand the fromtemplate method as explained below. Controller Code for Fromtemplate Method .controller(”DashCtrl”, function($scope, $ionicLoading, $ionicPopover) { // .fromTemplate() method var template = ”<ion-popover-view>” + ”<ion-header-bar>” + ”<h1 class = “title”>Popover Title</h1>” + ”</ion-header-bar>”+ ”<ion-content>” + ”Popover Content!” + ”</ion-content>” + ”</ion-popover-view>”; $scope.popover = $ionicPopover.fromTemplate(template, { scope: $scope }); $scope.openPopover = function($event) { $scope.popover.show($event); }; $scope.closePopover = function() { $scope.popover.hide(); }; //Cleanup the popover when we”re done with it! $scope.$on(”$destroy”, function() { $scope.popover.remove(); }); // Execute action on hide popover $scope.$on(”popover.hidden”, function() { // Execute action }); // Execute action on remove popover $scope.$on(”popover.removed”, function() { // Execute action }); }) As discussed above, the second and the third way of adding popover is to use fromTemplateUrl method. The controller code will be the same for both ways except the fromTemplateUrl value. If the HTML is added to an existing template, the URL will be the popover.html. If we want to place the HTML into the templates folder, then the URL will change to templates/popover.html. Both examples have been explained below. Controller Code for the fromTemplateUrl .controller(”MyCtrl”, function($scope, $ionicPopover) { $ionicPopover.fromTemplateUrl(”popover.html”, { scope: $scope }).then(function(popover) { $scope.popover = popover; }); $scope.openPopover = function($event) { $scope.popover.show($event); }; $scope.closePopover = function() { $scope.popover.hide(); }; //Cleanup the popover when we”re done with it! $scope.$on(”$destroy”, function() { $scope.popover.remove(); }); // Execute action on hide popover $scope.$on(”popover.hidden”, function() { // Execute action }); // Execute action on remove popover $scope.$on(”popover.removed”, function() { // Execute action }); }) Now, we will add the script with template to the HTML file, which we are using for calling the popover function. HTML code from the Existing HTML file <script id = “popover.html” type = “text/ng-template”> <ion-popover-view> <ion-header-bar> <h1 class = “title”>Popover Title</h1> </ion-header-bar> <ion-content> Popover Content! </ion-content> </ion-popover-view> </script> If we want to create an HTML as a separate file, we can create a new HTML file in the templates folder and use the same code as we used in the above-mentioned example without the script tags. The newly created HTML file is as follows. <ion-popover-view> <ion-header-bar> <h1 class = “title”>Popover Title</h1> </ion-header-bar> <ion-content> Popover Content! </ion-content> </ion-popover-view> The last thing we need is to create a button that will be clicked to show the popover. <button class = “button” ng-click = “openPopover($event)”>Add Popover</button> Whatever way we choose from above examples, the output will always be the same. The following table shows the $ionicPopover methods that can be used. Method Option Type Detail initialize(options) scope, focusFirst, backdropClickToClose, hardwareBackButtonClose object, boolean, boolean, boolean Scope is used to pass custom scope to popover. Default is the $rootScope. focusFirstInput is used to auto focus the first input of the popover. backdropClickToClose is used to close popover when clicking the backdrop. hardwareBackButtonClose is used to close popover when hardware back button is pressed. show($event) $event promise Resolved when popover is finished showing. hide() / promise Resolved when popover is finished hiding. remove() / promise Resolved when popover is finished removing. isShown() / Boolean Returns true if popover is shown or false if it is not. Print Page Previous Next Advertisements ”;

Ionic – Buttons ”; Previous Next There are several types of buttons in the Ionic Framework and these buttons are subtly animated, which further enhances the user experience when using the app. The main class for all the button types is button. This class will always be applied to our buttons, and we will use it as a prefix when working with sub classes. Block Buttons Block buttons will always have 100% width of their parent container. They will also have a small padding applied. You will use button-block class for adding block buttons. If you want to remove padding but keep the full width, you can use the button-full class. Following is an example to show the usage of both classes − <button class = “button button-block”> button-block </button> <button class = “button button-full”> button-full </button> The above code will produce the following screen − Button Size There are two Ionic classes for changing the button size − button-small and button-large. Following is an example to show their usage − <button class = “button button-small”> button-small </button> <button class = “button button-large”> button-large </button> The above code will produce the following screen − Button Colors If you want to style your button, you just need to add appropriate color class to it. When you style your elements, you need to add your main element class as a prefix to your color class. Since we are styling the footer bar, the prefix class will be a bar and the color class that we want to use in this example is assertive (red). <button class = “button button-assertive”> button-assertive </button> The above code will produce the following screen − You can use any of the following nine classes to give a color of your choice to your app buttons − Color Class Description Result button-light To be used for white color   button-stable To be used for light grey color   button-positive To be used for blue color   button-calm To be used for light blue color   button-balanced To be used for green color   button-energized To be used for yellow color   button-assertive To be used for red color   button-royal To be used for violet color   button-dark To be used for black color   Button Outline If you want your buttons transparent, you can apply button-outline class. Buttons with this class will have an outline border and a transparent background. To remove the border from the button, you can use the button-clear class. The following example shows how to use these two classes. <button class = “button button-assertive button-outline”> button-outline </button> <button class = “button button-assertive button-clear”> button-clear </button> The above code will produce the following screen − Adding Icons When you want to add Icons to your buttons, the best way is to use the icon class. You can place the icon on one side of the button by using the icon-left or the icon-right. You will usually want to move your icon to one side when you have some text on top of your button as explained below. <button class = “button icon ion-home”> </button> <button class = “button icon icon-left ion-home”> Home </button> <button class = “button icon icon-right ion-home”> Home </button> The above code will produce the following screen − Button Bar If you want to group a couple of buttons together, you can use the button-bar class. The buttons will have equal size by default. <div class = “button-bar”> <a class = “button button-positive”>1</a> <a class = “button button-assertive”>2</a> <a class = “button button-energized”>3</a> <a class = “button”>4</a> </div> The above code will produce the following screen − Print Page Previous Next Advertisements ”;

Ionic – Cordova Facebook ”; Previous Next This plugin is used for connecting to Facebook API. Before you start integrating Facebook, you need to create a Facebook app here. You will create a web app and then skip the quick start screen. Then, you need to add the website platform on the settings page. You can use the following code snippet for the site URL while in development. http://localhost:8100/ After that, you need to add Valid OAuth redirect URIs on the settings/advanced page. Just copy the following two URLs. https://www.facebook.com/connect/login_success.html http://localhost:8100/oauthcallback.html Installing Facebook Plugin We did all the steps above to tackle some issues that often appear when using this plugin. This plugin is hard to set up because there are a lot of steps involved and documentation doesn”t cover all of them. There are also some known compatibility issues with other Cordova plugins, so we will use Teleric verified plugin version in our app. We will start by installing browser platform to our app from the command prompt. C:UsersUsernameDesktopMyApp>ionic platform add browser Next, what we need to do is to add the root element on top of the body tag in index.html. index.html <div id = “fb-root”></div> Now we will add Cordova Facebook plugin to our app. You need to change APP_ID and APP_NAME to match the Facebook app you created before. C:UsersUsernameDesktopMyApp>cordova -d plugin add https://github.com/Telerik-Verified-Plugins/Facebook/ –variable APP_ID = “123456789” –variable APP_NAME = “FbAppName” Now open index.html and add the following code after your body tag. Again you need to make sure that the appId and version are matching the Facebook app you created. This will ensure that Facebook SDK is loaded asynchronously without blocking the rest of the app. index.html <script> window.fbAsyncInit = function() { FB.init({ appId : ”123456789”, xfbml : true, version : ”v2.4” }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/en_US/sdk.js”; fjs.parentNode.insertBefore(js, fjs); }(document, ”script”, ”facebook-jssdk”)); </script> Angular Service Since we installed everything, we need to create service that will be our connection to the Facebook. These things can be done with less code inside the controller, but we try to follow the best practices, so we will use Angular service. The following code shows the entire service. We will explain it later. services.js .service(”Auth”, function($q, $ionicLoading) { this.getLoginStatus = function() { var defer = $q.defer(); FB.getLoginStatus(function(response) { if (response.status === “connected”) { console.log(JSON.stringify(response)); } else { console.log(“Not logged in”); } }); return defer.promise; } this.loginFacebook = function() { var defer = $q.defer(); FB.login(function(response) { if (response.status === “connected”) { console.log(JSON.stringify(response)); } else { console.log(“Not logged in!”); } }); return defer.promise; } this.logoutFacebook = function() { var defer = $q.defer(); FB.logout(function(response) { console.log(”You are logged out!”); }); return defer.promise; } this.getFacebookApi = function() { var defer = $q.defer(); FB.api(“me/?fields = id,email”, [], function(response) { if (response.error) { console.log(JSON.stringify(response.error)); } else { console.log(JSON.stringify(response)); } }); return defer.promise; } }); In the above service, we are creating four functions. First three are self-explanatory. The fourth function is used for connecting to Facebook graph API. It will return the id and email from the Facebook user. We are creating promise objects to handle asynchronic JavaScript functions. Now we need to write our controller that will call those functions. We will call each function separately for better understanding, but you will probably need to mix some of them together to get the desired effect. Controller Code .controller(”MyCtrl”, function($scope, Auth, $ionicLoading) { $scope.checkLoginStatus = function() { getLoginUserStatus(); } $scope.loginFacebook = function(userData) { loginFacebookUser(); }; $scope.facebookAPI = function() { getFacebookUserApi(); } $scope.logoutFacebook = function() { logoutFacebookUser(); }; function loginFacebookUser() { return Auth.loginFacebook(); } function logoutFacebookUser() { return Auth.logoutFacebook(); } function getFacebookUserApi() { return Auth.getFacebookApi(); } function getLoginUserStatus() { return Auth.getLoginStatus(); } }) You are probably wondering why didn”t we returned Auth service directly from the function expressions (first four functions). The reason for this is that you will probably want to add some more behavior after the Auth function is returned. You might send some data to your database, change the route after login, etc. This can be easily done by using JavaScript then() method to handle all the asynchronous operations instead of callbacks. Now we need to allow users to interact with the app. Our HTML will contain four buttons for calling the four functions we created. HTML Code <button class = “button” ng-click = “loginFacebook()”>LOG IN</button> <button class = “button” ng-click = “logoutFacebook()”>LOG OUT</button> <button class = “button” ng-click = “checkLoginStatus()”>CHECK</button> <button class = “button” ng-click = “facebookAPI()”>API</button> When the user taps the LOG IN button, the Facebook screen will appear. The user will be redirected to the app after the login is successful. Print Page Previous Next Advertisements ”;

Ionic – Cordova Geolocation ”; Previous Next This plugin is used for adding a geolocation plugin to the Ionic app. Using Geolocation There is a simple way to use the geolocation plugin. We need to install this plugin from the command prompt window. C:UsersUsernameDesktopMyApp>cordova plugin add cordova-plugin-geolocation The following controller code is using two methods. The first one is the getCurrentPosition method and it will show us the current latitude and longitude of the user’s device. The second one is the watchCurrentPosition method that will return the current position of the device when the position is changed. Controller Code .controller(”MyCtrl”, function($scope, $cordovaGeolocation) { var posOptions = {timeout: 10000, enableHighAccuracy: false}; $cordovaGeolocation .getCurrentPosition(posOptions) .then(function (position) { var lat = position.coords.latitude var long = position.coords.longitude console.log(lat + ” ” + long) }, function(err) { console.log(err) }); var watchOptions = {timeout : 3000, enableHighAccuracy: false}; var watch = $cordovaGeolocation.watchPosition(watchOptions); watch.then( null, function(err) { console.log(err) }, function(position) { var lat = position.coords.latitude var long = position.coords.longitude console.log(lat + ”” + long) } ); watch.clearWatch(); }) You might have also noticed the posOptions and watchOptions objects. We are using timeout to adjust maximum length of time that is allowed to pass in milliseconds and enableHighAccuracy is set to false. It can be set to true to get the best possible results, but sometimes it can lead to some errors. There is also a maximumAge option that can be used to show how an old position is accepted. It is using milliseconds, the same as timeout option. When we start our app and open the console, it will log the latitude and longitude of the device. When our position is changed, the lat and long values will change. Print Page Previous Next Advertisements ”;

Ionic – Cordova Icon and Splash Screen ”; Previous Next Every mobile app needs an icon and splash screen. Ionic provides excellent solution for adding it and requires minimum work for the developers. Cropping and resizing is automated on the Ionic server. Adding Splash Screen and Icon In the earlier chapters, we have discussed how to add different platforms for the Ionic app. By adding a platform, Ionic will install Cordova splash screen plugin for that platform so we do not need to install anything afterwards. All we need to do is to find two images. The images should be png, psd or ai files. The minimum dimension should be 192×192 for icon image and 2208×2208 for the splash screen image. This dimensions will cover all the devices. In our example, we will use the same image for both. The images need to be saved to resources folder instead of the default ones. After we are done with it, all we need is to run the following in the command prompt window. C:UsersUsernameDesktopMyApp>ionic resources Now, if you check resources/android or resources/ios folders, you will see that the images we added before are resized and cropped to accommodate different screen sizes. When we run our app on the device, we will see a splash screen before the app is started and we will see that a default Ionic icon is changed. NOTE − If you want to use different images for Android and iOS, you can add it to resources/android and resources/ios instead of the resources folder. Print Page Previous Next Advertisements ”;

Ionic – JavaScript Popup ”; Previous Next This service is used for creating a popup window on top of the regular view, which will be used for interaction with the users. There are four types of popups namely − show, confirm, alert and prompt. Using Show Popup This popup is the most complex of all. To trigger popups, we need to inject the $ionicPopup service to our controller and then just add a method that will trigger the popup we want to use, in this case $ionicPopup.show(). The onTap(e) function can be used for adding e.preventDefault() method, which will keep the popup open, if there is no change applied to the input. When the popup is closed, the promised object will be resolved. Controller Code .controller(”MyCtrl”, function($scope, $ionicPopup) { // When button is clicked, the popup will be shown… $scope.showPopup = function() { $scope.data = {} // Custom popup var myPopup = $ionicPopup.show({ template: ”<input type = “text” ng-model = “data.model”>”, title: ”Title”, subTitle: ”Subtitle”, scope: $scope, buttons: [ { text: ”Cancel” }, { text: ”<b>Save</b>”, type: ”button-positive”, onTap: function(e) { if (!$scope.data.model) { //don”t allow the user to close unless he enters model… e.preventDefault(); } else { return $scope.data.model; } } } ] }); myPopup.then(function(res) { console.log(”Tapped!”, res); }); }; }) HTML Code <button class = “button” ng-click = “showPopup()”>Add Popup Show</button> You probably noticed in the above-mentioned example some new options were used. The following table will explain all of those options and their use case. Show Popup Options Option Type Details template string Inline HTML template of the popup. templateUrl string URL of the HTML template. title string The title of the popup. subTitle string The subtitle of the popup. cssClass string The CSS class name of the popup. scope Scope A scope of the popup. buttons Array[Object] Buttons that will be placed in footer of the popup. They can use their own properties and methods. text is displayed on top of the button, type is the Ionic class used for the button, onTap is function that will be triggered when the button is tapped. Returning a value will cause the promise to resolve with the given value. Using Confirm Popup A Confirm Popup is the simpler version of Ionic popup. It contains Cancel and OK buttons that users can press to trigger the corresponding functionality. It returns the promised object that is resolved when one of the buttons are pressed. Controller Code .controller(”MyCtrl”, function($scope, $ionicPopup) { // When button is clicked, the popup will be shown… $scope.showConfirm = function() { var confirmPopup = $ionicPopup.confirm({ title: ”Title”, template: ”Are you sure?” }); confirmPopup.then(function(res) { if(res) { console.log(”Sure!”); } else { console.log(”Not sure!”); } }); }; }) HTML Code <button class = “button” ng-click = “showConfirm()”>Add Popup Confirm</button> The following table explains the options that can be used for this popup. Confirm Popup Options Option Type Details template string Inline HTML template of the popup. templateUrl string URL of the HTML template. title string The title of the popup. subTitle string The subtitle of the popup. cssClass string The CSS class name of the popup. cancelText string The text for the Cancel button. cancelType string The Ionic button type of the Cancel button. okText string The text for the OK button. okType string The Ionic button type of the OK button. Using Alert Popup An Alert is a simple popup that is used for displaying the alert information to the user. It has only one button that is used to close the popup and resolve the popups’ promised object. Controller Code .controller(”MyCtrl”, function($scope, $ionicPopup) { $scope.showAlert = function() { var alertPopup = $ionicPopup.alert({ title: ”Title”, template: ”Alert message” }); alertPopup.then(function(res) { // Custom functionality…. }); }; }) HTML Code <button class = “button” ng-click = “showAlert()”>Add Popup Alert</button> It will produce the following screen − The following table shows the options that can be used for an alert popup. Alert Popup Options Option Type Details template string Inline HTML template of the popup. templateUrl string URL of the HTML template. title string The title of the popup. subTitle string The subtitle of the popup. cssClass string The CSS class name of the popup. okText string The text for the OK button. okType string The Ionic button type of the OK button. Using Prompt Popup The last Ionic popup that can be created using Ionic is prompt. It has an OK button that resolves promise with value from the input and Cancel button that resolves with undefined value. Controller Code .controller(”MyCtrl”, function($scope, $ionicPopup) { $scope.showPrompt = function() { var promptPopup = $ionicPopup.prompt({ title: ”Title”, template: ”Template text”, inputType: ”text”, inputPlaceholder: ”Placeholder” }); promptPopup.then(function(res) { console.log(res); }); }; }) HTML Code <button class = “button” ng-click = “showPrompt()”>Add Popup Prompt</button> It will produce the following screen − The following table shows options that can be used for a prompt popup. Prompt Popup Options Option Type Details template string Inline HTML template of the popup. templateUrl string URL of the HTML template. title string The title of the popup. subTitle string The subtitle of the popup. cssClass string The CSS class name of the popup. inputType string The type for the input. inputPlaceholder string A placeholder for the input. cancelText string The text for the Cancel button. cancelType string The Ionic button type of the Cancel button. okText string The text for the OK button. okType string The Ionic button type of the OK button. Print Page Previous Next Advertisements ”;

Ionic – Javascript Content ”; Previous Next Almost every mobile app contains some fundamental elements. Usually these elements include a header and a footer, which will cover the top and the bottom part of the screen. All the other elements will be placed between these two. Ionic provide ion-content element that serves as a container, which will wrap all the other elements that we want to create. Let us consider the following example − <div class = “bar bar-header”> <h1 class = “title”>Header</h1> </div> <div class = “list”> <label class = “item item-input”> <input type = “text” placeholder = “Placeholder 1” /> </label> <label class = “item item-input”> <input type = “text” placeholder = “Placeholder 2” /> </label> </div> <div class = “bar bar-footer”> <h1 class = “title”>Footer</h1> </div> Print Page Previous Next Advertisements ”;

Ionic – Content ”; Previous Next Almost every mobile app contains some fundamental elements. Usually those elements include a header and a footer that will cover the top and the bottom part of the screen. All the other elements will be placed between these two. Ionic provides ion-content element that serves as a container that will wrap all the other elements that we want to create. This container has some unique characteristics, but since this is a JavaScript based component which we will cover in the later part of this tutorial. <div class = “bar bar-header”> <h1 class = “title”>Header</h1> </div> <div class = “list”> <label class = “item item-input”> <input type = “text” placeholder = “Placeholder 1” /> </label> <label class = “item item-input”> <input type = “text” placeholder = “Placeholder 2” /> </label> </div> <div class = “bar bar-footer”> <h1 class = “title”>Footer</h1> </div> Print Page Previous Next Advertisements ”;

Ionic – Quick Guide ”; Previous Next Ionic – Overview Ionic is a front-end HTML framework built on top of AngularJS and Cordova. As per their official document, the definition of this Ionic Open Source Framework is as follows − Ionic is an HTML5 Mobile App Development Framework targeted at building hybrid mobile apps. Think of Ionic as the front-end UI framework that handles all the look and feel and UI interactions your app needs to be compelling. Kind of like “Bootstrap for Native”, but with the support for a broad range of common native mobile components, slick animations and a beautiful design. Ionic Framework Features Following are the most important features of Ionic − AngularJS − Ionic is using AngularJS MVC architecture for building rich single page applications optimized for mobile devices. CSS components − With the native look and feel, these components offer almost all elements that a mobile application needs. The components’ default styling can be easily overridden to accommodate your own designs. JavaScript components − These components are extending CSS components with JavaScript functionalities to cover all mobile elements that cannot be done only with HTML and CSS. Cordova Plugins − Apache Cordova plugins offer API needed for using native device functions with JavaScript code. Ionic CLI − This is NodeJS utility powered with commands for starting, building, running and emulating Ionic applications. Ionic View − Very useful platform for uploading, sharing and testing your application on native devices. Licence − Ionic is released under MIT license. Ionic Framework Advantages Following are some of the most commonly known 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 you a lot of working time. Starting your app is very easy since Ionic provides useful pre-generated app setup with simple layouts. The apps are built in a very clean and modular way, so it is very maintainable and easy to update. Ionic Developers Team have a very good relationship with the Google Developers Team and they are working together to improve the framework. The updates are coming out regularly and Ionic support group is always willing to help when needed. Ionic Framework Limitations Following are some of the most important Ionic Framework Limitations − Testing can be tricky since the browser does not always give you the right information about the phone environment. There are so many different devices as well as platforms and you usually need to cover most of them. It can be hard to combine different native functionalities. There will be many instances where you would run into plugin compatibility issues, which leads to build errors that are hard to debug. Hybrid apps tend to be slower than the native ones. However, since the mobile technologies are improving fast this will not be an issue in the future. In the next chapter, we will understand the environment setup of the Ionic Open Source Framework. Ionic – Environment Setup This chapter will show you how to start with Ionic Framework. The following table contains the list of components needed to start with Ionic. Sr.No. Software & Description 1 NodeJS This is the base platform needed to create Mobile Apps using Ionic. You can find detail on the NodeJS installation in our NodeJS Environment Setup. Make sure you also install npm while installing NodeJS. 2 Android SDK If you are going to work on a Windows platform and are developing your apps for the Android platform, then you should have Android SDK setup on your machine. The following link has detailed information on the Android Environment Setup. 3 XCode If you are going to work on the Mac platform and are developing your apps for the iOS platform, then you should have XCode setup on your machine. The following link has detailed information on the iOS Environment Setup. 4 cordova and Ionic These are the main SDKs which is needed to start working with Ionic. This chapter explains how to setup Ionic in simple step assuming you already have the required setup as explained in the table above. Installing Cordova and Ionic We will use the Windows command prompt for this tutorial. The same steps can be applied to the OSX terminal. Open your command window to install Cordova and Ionic − C:UsersUsername> npm install -g cordova ionic Creating Apps While creating apps in Ionic, you can choose from the following three options to start with − Tabs App Blank App Side menu app In your command window, open the folder where you want to create the app and try one of the options mentioned below. Tabs App If you want to use the Ionic tabs template, the app will be built with the tab menu, header and a couple of useful screens and functionalities. This is the default Ionic template. Open your command window and choose where you want to create your app. C:UsersUsername> cd Desktop This command will change the working directory. The app will be created on the Desktop. C:UsersUsernameDesktop> ionic start myApp tabs Ionic Start command will create a folder named myApp and setup Ionic files and folders. C:UsersUsernameDesktop> cd myApp Now, we want to access the myApp folder that we just created. This is our root folder. Let us now add the Cordova project for the Android Platform and install the basic Cordova plugins as well. The following code allows us to run the app on the Android emulator or a device. C:UsersUsernameDesktopmyApp> ionic platform add android The next step is to build the app. If you have building errors after running the following command, you probably did not install the Android SDK and its dependencies. C:UsersUsernameDesktopmyApp> ionic build android The last step of the installation process is to run your app, which will start the mobile device, if connected, or the default emulator, if there is no device connected. Android Default Emulator is slow, so I