Hybrid Mobile Development with Ionic E-Book

Gaurav Saini

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 222

Veröffentlichungsjahr: 2017

Beschreibung

Ionic is an open source, front-end framework that allows you to develop hybrid mobile apps without any native-language hassle for each platform. It offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive mobile apps.
This book will help you to develop a complete, professional and quality mobile application with Ionic Framework. You will start the journey by learning to configure, customize, and migrate Ionic 1x to 3x. Then, you will move on to Ionic 3 components and see how you can customize them according to your applications. You will also implement various native plugins and integrate them with Ionic and Ionic Cloud services to use them optimally in your application. By this time, you will be able to create a full-fledged e-commerce application. Next, you will master authorization, authentication, and security techniques in Ionic 3 to ensure that your application and data are secure. Further, you will integrate the backend services such as Firebase and the Cordova iBeacon plugin in your application. Lastly, you will be looking into Progressive Web Applications and its support with Ionic, with a demonstration of an offline-first application.
By the end of the book, you will not only have built a professional, hybrid mobile application, but will also have ensured that your app is secure and performance driven.

Leseprobe

Title Page

Hybrid Mobile Development with Ionic

Build high performance hybrid applications with HTML, CSS, and JavaScript

Gaurav Saini

BIRMINGHAM - MUMBAI

Copyright

Hybrid Mobile Development with Ionic

Copyright © 2017 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2017

Production reference: 1250417

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-78528-605-6

www.packtpub.com

Credits

Author

Gaurav Saini

Copy Editor

Safis Editing

Reviewers

Nitish Sinha

Project Coordinator

Kinjal Bari

Commissioning Editor

Dipika Gaonkar

Proofreader

Safis Editing

Acquisition Editor

Reshma Raman

Indexer

Mariammal Chettiyar

Content Development Editor

Trusha Shriyan

Graphics

Kirk D'Penha

Technical Editor

Varsha Shivhare

Production Coordinator

Deepika Naik

About the Author

Open-source enthusiastic, Javascript full stack developer with Node.js, AngularJS, electron and Ionic. Currently working on IOT projects with BLE Beacons. Gaurav have been researching on VOIP technologies, IOT and material design whenever he get time from his daily activities. Gaurav is also associated with Apache software foundation where he is contributor and committer to Apache Roller, Apache Fineract and Apache OFBiz projects. He was selected and invited as speaker at multiple conferences Mifos Techdays, ApacheCON, Mifos Summit and also into many local colleges/institutions. Gaurav was a student intern Google Summer of Code Student in 2014 and Mentored in 2016 with Mifos Initiative worked on AngularJs based community-app. He was selected as delegate for GSOC Summit in 2014 and 2016 San Fransico. He had worked on Google Adwords and analytics in past and was semi-finalist in Google Online Marketing Challenge in 2012.

I would like to thank my parents and my late uncle Raj, without them it would be really difficult for me to reach to here and write a book. Also, at difficult times my best friend Seema came with full support to continue working hard. A special thanks also goes to my interns and content editor as they have been helping alot during the course of the book. It was pleasure to work with great minds around you. Lastly, I want to thank you all for showing interest in this book and I hope that I can pass my enthusiasm to join Ionic community and take your exciting journey to new heights.

About the Reviewer

Nitish Sinha is a techie from Jharkhand, and is believer of Steve Jobs words:

The only way to do great work is to love what you do.

Nitish have managed to complete various projects as a freelancer and had the good fortune to be able to channel this obsession into something productive.

He joined TERI, India Habitat Centre, New Delhi as software developer, dealing with Angular.js and Ionic based hybrid apps along with PHP based web applications.

I would like to thanks all my mentors at each and every stage, whose golden words are inspiration for me.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Customer Feedback

Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/1785286056.

If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!

Preface

This book teaches you how to master in hybrid mobile development using Ionic. Ionic is an open source, front-end framework that allows you to develop hybrid mobile apps without any native-language hassle for each platform. It offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive mobile apps.

Initial idea to write this book is to help understand developers what is the building blocks and necessary points to look for while you are developing an enterprise level or highly scalable Ionic application. Also, in the later half of the book we will target some latest features in Ionic such as IOT and PWA support. We have made sure that every concept addressed in this book is explained in easy language, and also with a technical example.

What you need for this book

You’ll need Sublime or Visual Studio Code for code editing. Both of these are available free for download. For BLE demo you will need a laptop with Bluetooth 4 supported or Bluetooth BLE beacon.

Who this book is for

This book is for intermediate-level application developers who have some basic knowledge of Ionic. Those who want to migrate their applications from Ionic 1 to Ionic 3 this book will be very helpful and who want to get latest technology updates such as PWA support with Ionic.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

Log in or register to our website using your e-mail address and password.

Hover the mouse pointer on the

SUPPORT

tab at the top.

Click on

Code Downloads & Errata

.

Enter the name of the book in the

Search

box.

Select the book for which you're looking to download the code files.

Choose from the drop-down menu where you purchased this book from.

Click on

Code Download

.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR / 7-Zip for Windows

Zipeg / iZip / UnRarX for Mac

7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Hybrid-Mobile-Development-with-Ionic. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/HybridMobileDevelopmentwithIonic_ColorImages.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.

Getting Started with Ionic 3

Ionic has been evolving a lot over the years; ever since Ionic v1 has launched there has been continuous development and improvement going on with the framework. One of the smartest moves was to launch Ionic v2, which is based on Angular 2 by the Ionic team. Recently, Ionic 3 was launched, which is based on Angular 4 and TypeScript 2.2. Here in this book we will mainly be going through Ionic 2 and 3 and their advanced concepts. We will cover topics such as building an e-commerce app with Bluetooth beacons support for malls, integration with Firebase, and PWA support with Ionic applications. We will start with support for all three platforms: iOS, Android, and Windows, and will be demonstrating applications based on Internet of Things, which will be really exciting. In this chapter, we will be going through all the essentials of Ionic, which will help to build large scale and enterprise grade applications. We have been working on Ionic 1x for the last 2-3 years and during that journey we have seen so much improvement in the framework and multiple features developed. After Angular 2 was released, a lot more improvement came in the framework and then the Ionic team planned on developing Ionic 2, which is based on Angular 2. Ionic 3 and Angular 4 are on similar lines and do not have major framework changes such as we had when we shifted from Ionic v1 to v2. With Ionic 3 you will now see improved performance, reduced code complexity, and the ability to build scalable applications has increased. Ionic is now targeting mobile web and desktop applications, which helps developers running same codebase everywhere. Ionic Native is another example of how the Ionic team is improving the product day by day and making developers' lives easier. We will initially look into some of the basics of Angular and Ionic, also how TypeScript can be a big asset for building enterprise applications. Ionic CLI and Ionic Cloud products are as well as improving regularly, which we can use to speed up our development time and efficiently test or share our applications. In this chapter, we will cover:

Angular 4, Ionic 3, and TypeScript

Installation and setup

Directory structure and modularity

Theming with SASS

Ionic CLI

Angular 4, Ionic 3, and TypeScript

Many of us coming from the Angular 1 world to Angular 2 or 4 will surely see that it's an entire rewrite of the application and a steep learning curve. I felt the same when I initially started Ionic and Angular, but gradually as I read about the concepts of Angular, many of the problems we used to face in Angular 1 were automatically solved without any effort. Initially you will miss the old controllers, services, filters, and other concepts in Angular 1 and most importantly the navigation and routing. But when you dive deep into the topics you will find that corresponding modules such as component, providers, and pipe are available and that they can be used in similar ways. Navigation and router are also now used as push and pop mechanisms for navigating from one page to another page. In the initial beta versions of Ionic 2, we don't have proper URL-based routing as users can't land on a specific page in the application. But after a stable Angular-router is released it has been added to Ionic 2, which has opened the path for better support for progressive web apps, which will allow the same Ionic apps to be shipped as mobile web applications. Ionic 3 also added support for responsive grids, which will help when we will be building desktop applications. Lazy Loading is another important feature added, which reduces the initial loading time of the application. Still, as Ionic 3 is in initial days, we can expect these features to become a lot more stable. As, we know Ionic 2 and 3 did not have any major framework changes, so initially we will be comparing Angular 1 and 2 in this chapter so it helps users understand the difference and how they can migrate to the latest Ionic versions.

Angular and Ionic myths

As you go forward, you will hear many myths that are not true in respect to Angular 2 or upgrading to Angular 4. One of the most common is the Angular 4 doesn't support two-way data binding, which is not true. The Angular team has made sure that we use forms as simple as we use in Angular 4, they just have a new syntax:

[(property-name)]="expression"

<input type="text" [(ngMmodel)]="model.name" />

We still have two-way data binding. Although, to improve the Angular digest cycle and performance by default, we don't use two-way data binding. It uses a unidirectional binding that we can extend to two-way binding when we require it. You can refer to Angular template syntax to demystify all other syntax's and their uses available with Angular 4.Ionic lack URL navigationis another discussion going on at the Ionic forum. Again this is also partially correct; because Angular-router was not stable enough, the Ionic team decided to remove it in the initial beta version. As of now, Angular-router is stable and will be in Ionic. The Ionic team understands how critical it is to have a proper routing mechanism and to make a developer feel at home while moving towards Ionic 3.Upgradation is entirely rewritten: Angular 2 is itself rewritten, but you don't have to rewrite your app also. Initially when I started I felt the same and thought that we had to redevelop our current application. But there are many tools and documentation (http://ionicframework.com/files/Ionic2Migration.pdf ) available for a smooth upgrade from Ionic 1 to Ionic 2 or 3. You just have to be careful as if you have a complex application then you might have to do many things manually. But one thing is for sure that upgrading the application will surely not take that much time when you build the same application from scratch if you have proper expertise and a concept of Angular 2. One of the reasons behind this is that you already have a running application where you just have to assemble the moving parts in different ways, as most of the application logic will be same. Personally, my learning process with Ionic didn't think too much about I upgrading to a new version. Rather I took it as new improved concepts that came in new Angular versions, designed to ease the learning and understanding.

Mapping Ionic 1 to Ionic 3

Life will be really easy for any developer who can easily understand the mapping of different concepts that were in Angular 1 and how they are catered to in Angular 4. Also, I am sure that most of the questions will be answered automatically.

Filters match pipes

Angular 4 pipes are similar to what we use Filters for in Angular 1. Pipes provide the same formatting and transformation for data in the template. Almost all of the inbuilt filters that Angular 1 has correspond to pipes in Angular 4:

// Filter - Angular 1 <td>{{movie.price | currency}}</td> // Pipes in Angular 4 <td>{{movie.price | currency:'USD':true}} </td>

Due to performance reasons, filter and orderBy filters have been removed from Pipes, although you can at anytime build a custom pipe if similar code is reused in multiple templates.