34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5, SCSS, and Angular. Ionic also makes app development easier, faster, and more fun.
This hands-on guide will help you understand the Ionic framework and how you can leverage it to create amazing real-time applications. We begin by covering the essential features of Angular 2, and then dive straight into how Ionic fits in today’s world of hybrid app development and give you a better understanding of the mobile hybrid architecture along the way.
Further on, you will learn how to work with Ionic decorators, services, and components, which will allow you to build complex apps using the Ionic framework. We will take a look at theming Ionic apps using the built-in SCSS setup. After that, we will explore Ionic Native, and you will learn how to integrate device-specific features, such as notifications, with the Ionic app. To complete our learning, we will be building a Rider app, using Ionic and Uber API, to book a ride.
Next, you will learn how to unit test, end-to-end test, monkey test, and execute device testing on AWS Device farm. Then, we will take a look at migrating the existing Ionic 1 apps to Ionic 2 and deploy them to the App Store. The final chapter on Ionic 3 wraps up this book by explaining the new features of Ionic 3 at the time of writing this book.
By the end of this book, you will be able to develop, deploy, and manage hybrid mobile applications built with Cordova, Ionic, and Angular.
All the examples in this book are valid for both Ionic 2 and Ionic 3.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 253
Veröffentlichungsjahr: 2017
Ähnliche
Title Page
Second Edition
Copyright
Learning Ionic
Second Edition
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: July 2015 Second edition: April 2017
Production reference: 1260417
ISBN 978-1-78646-605-1
www.packtpub.com
Credits
Author
Arvind Ravulavaru
Copy Editor
Safis Editing
Reviewer
Mike Hartington
Project Coordinator
Ritika Manoj
Commissioning Editor
Amarabha Banerjee
Proofreader
Safis Editing
Acquisition Editor
Reshma Raman
Indexer
Tejal Daruwale Soni
Content Development Editors
Divij Kotian Johann Barretto
Graphics
Jason Monteiro
Technical Editor
Rashil Shah
Production Coordinator
Melwyn Dsa
About the Author
Arvind Ravulavaru is a full stack consultant having over 8 years of experience in software development. For the last 4 years, Arvind has been working extensively on JavaScript, both on the server- and the client-side. Before that, Arvind worked on big data analytics, cloud provisioning, and orchestration. Arvind has good exposure on various databases and has also developed and architected applications built using Node.js.
For the past 2 years, Arvind has been working on his own startup, named The IoT Suitcasehttp://theiotsuitcase.com. With his experience in software development and his passion for building products, Arvind has architected and developed an end-to-end platform for rapidly building IoT products and solutions. The IoT Suitcase provides all the pieces needed to build an IoT solution, right from hardware to a mobile app with analytics and IFTTT as add-ons.
Apart from that, Arvind provides training, empowering companies with the latest and greatest technology in the market. He also conducts startup workshops, where he teaches rapid prototyping with today's amazing tooling stack and how to take ideas to the market in a very short time.
Arvind always looks for ways to contribute to the open source community in making this world a better place for developers. As an architect/consultant, he always tries to power amazing business ideas with awesome technology solutions (he is language agnostic), moving the human race up the technology evolution chain.
You can reach Arvind on his blog at http://thejackalofjavascript.com. Arvind has written a book named Learning Ionic, which talks about building Mobile Hybrid applications using Ionic Framework v1. He has also signed the contract for his next book, named Advanced IoT with JavaScript, where he plans to show how to build IoT solutions using JavaScript.
Acknowledgements
First off, I would like to thank all the people who have purchased my Learning Ionic book. The support from you guys was tremendous; I really appreciate it. I would like to thank the Packt team for doing an amazing job in releasing the books on time.
Since the book was released, I have been busy building The IoT Suitcase. Thanks to Udaykanth Rapeti for spending a good year with me bringing this to the position it is now. I would like to take a moment to thank Surya Narayana Murthy for being part of this start up. He has given me tremendous support and invaluable advice in taking things to the next level. I would like to give special thanks to Murthy Prakki for everything he has done for the team and me.
Thanks to the awesome team at The IoT Suitcase, who would kept asking me about the status of the book frequently, and have been eagerly waiting for its release.
Last but not least, thanks to the entire team of Packt for supporting me. I sincerely thank my content editors Divij Kotian (and team), Sachin Karnani, and Merwyn D’souza. Thanks to Reshma Raman and the production team for taking the book to press.
Special thanks to my family for bearing me every day and going through all my shenanigans without complaining. Thank you.
About the Reviewer
Mike Hartington is a developer for the Ionic Framework with years of experience in mobile development with hybrid technologies. Within Ionic, Mike works with the framework team and the community members, helping to ensure that the code being shipped is well documented, tested, and easy to understand. Along with working on Ionic for his day to day, Mike is also a Google Developer Expert and an Egghead.io author, helping people learn new technologies with both.
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/1786466058.
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!
Dedication
Dedication2
Table of Contents
Preface
What this book covers
What you need for this book
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
Angular - A Primer
What is new in Angular?
TypeScript primer
Variable typing
Defining types
Classes
Interface
Modules and imports
Angular
Components
Zones
Templates
Giphy app
Architecture
API
Angular CLI
Installing software
Text editors
Scaffolding an Angular 2 app
Building the Giphy app
Summary
Welcome to Ionic
Mobile Hybrid architecture
What is Apache Cordova?
What is Ionic 2?
Ionic 3
Software setup
Installing Node.js
Installing Git
Text editors
Installing TypeScript
Installing Cordova and Ionic CLI
The platform guide
Hello Ionic
The browser developer tools setup
Google Chrome
Mozilla Firefox
The Ionic project structure
The config.xml file
The src folder
Scaffolding the tabs template
Scaffolding the side menu template
Summary
Ionic Components and Navigation
Core components
The Ionic Grid system
Ionic components
Buttons
Lists
Cards
Ionic icons
Modals
Segment
Ionic navigation
Basic navigation
Ionic CLI Sub-Generator
Multi page navigation
Summary
Ionic Decorators and Services
Decorators
Ionic module
Component decorator
Navigation
Passing data between pages
Config service
Platform service
Storage service
Summary
Ionic and SCSS
What is Sass?
Ionic and SCSS
Page-level overrides
Platform-level overrides
Component-level overrides
Theme a sample component
Summary
Ionic Native
Setting up a platform-specific SDK
The Android setup
The iOS setup
Testing the setup
Testing for Android
Testing for iOS
Getting started with Cordova plugins
The Ionic plugin API
Add a plugin
Remove a plugin
List added plugins
Search plugins
Ionic Native
Ionic Native test drive
The Cordova whitelist plugin
Working with Cordova plugins using Ionic Native
Device
Toast
Dialogs
Local notifications
Geolocation
Summary
Building the Riderr App
App overview
Uber APIs
Authentication
Registering with Uber
API
Building Riderr
Scaffolding the app
Uber API service
Integration
Installing dependencies
Testing the app
Summary
Ionic 2 Migration Guide
Why migration?
Todo app - Ionic v1
Building the app
Migration plan
Summary
Testing an Ionic 2 App
Testing methodologies
Setting up the unit testing environment
Setting up the project
Writing unit tests
Executing unit tests
driftyco/ionic-unit-testing-example
E2E testing
Setting up the project
Writing E2E tests
Executing E2E tests
Code coverage
AWS Device Farm
Setting up AWS Device Farm
Setting up Todo app
Monkey testing the Todo app
Manually testing the Todo app on various devices
Automation testing
Summary
Releasing the Ionic App
Preparing the app for distribution
Setting up Icons & Splash screens
Updating the config.xml
The PhoneGap build service
Generating Installers using Cordova CLI
Android installer
iOS installer
Ionic package
Uploading a project to Ionic cloud
Generating the required keys
Summary
Ionic 3
Angular 4
Ionic 3
Ionic 3 updates
TypeScript update
Ionic Page decorator
Lazy Loading
Ionic 2 versus Ionic 3
Summary
Appendix
Ionic CLI
Ionic login
Ionic start
No Cordova
Initializing a project with SCSS support
Listing all Ionic templates
App ID
Ionic link
Ionic info
Ionic state
Ionic resources
Ionic server, emulate, and run
Ionic upload and share
Ionic help and docs
Ionic Creator
Ionic Cloud
Auth
IonicDB
Deploy
Push
Package
Summary
Preface
This book explains how to build Mobile Hybrid applications with ease using Ionic. Be it simple apps that integrate with REST APIs or complex apps that involves native features, Ionic provides a simple API to work with them. With a basic knowledge of web development and TypeScript, and a decent knowledge of Angular, one can easily convert a million-dollar idea into an app with a few lines of code. In this book we will explore how you can do this.
What this book covers
Chapter 1, Angular - A Primer, introduces you to the power of all-new Angular. We will look at the basics of TypeScript and the concepts to understand Angular. We will be looking at Angular Modules, Components, and Services. We will conclude the chapter by building an app using Angular.
Chapter 2, Welcome to Ionic, talks about the Mobile Hybrid framework called Cordova. It shows how Ionic fits into the bigger picture of MobileHybrid application development. This chapter also walks through the software needed for application development using Ionic.
Chapter 3, Ionic Components and Navigation, walks you through the various components of Ionic, right from Header to a Navbar. We also take a look at navigation between pages using the Ionic Framework.
Chapter 4, Ionic Decorators and Services, explores the decorators that we use for initializing various ES6 classes. We will also be looking at the Platform Service, Config Service, and a couple more to get a better understanding of Ionic.
Chapter 5, Ionic and SCSS, talks about theming Ionic apps with the help of the built-in SCSS support.
Chapter 6, Ionic Native, shows how an Ionic app can interface with device features such as Camera, and the Battery using Ionic Native.
Chapter 7, Building Riderr App, shows how the book can be able to build an end-to-end application that interfaces with Device APIs as well as REST APIs using the knowledge gained so far in this book. The app we are going to build is going to be a frontend for the Uber API. Using this app, a user can book a Uber ride.
Chapter 8, Ionic 2 Migration Guide, shows how an Ionic app built using v1 of the Ionic Framework can be migrated to Ionic 2, and how the same approach can be used for Ionic 3 as well.
Chapter 9, Testing an Ionic 2 App, walks you through the various of testing an Ionic app. We are going to look at Unit Testing, end-to-end testing, monkey testing, and device testing using AWS Device Farm.
Chapter 10, Releasing the Ionic App, shows how you can generate installers for the apps that you have built with Cordova and Ionic using the Ionic CLI and PhoneGap Build as well.Chapter 11, Ionic 3, talks about the upgrades to Angular 4 and Ionic 3. We will look at a couple of new features of Ionic 3 as well.
Appendix, shows how you can efficiently use the Ionic CLI and Ionic cloud services to build, deploy, and manage your Ionic applications
What you need for this book
To start building Ionic apps, you need to have a basic knowledge of Web Technologies, TypeScript, and Angular. A good knowledge of mobile application development, device native features, and Cordova is optional. You need Node.js, Cordova CLI, and Ionic CLI installed to work with Ionic framework. If you want to work with device features such as the Camera or Bluetooth you need have the mobile OS setup on your machines. This book is intended for those who want to learn how to build Mobile Hybrid applications using Ionic. It is also ideal for people who want to work with theming Ionic apps, integrating with the REST API, and learning more about device features such as Camera, Bluetooth using Ionic Native. Prior knowledge of Angular is essential to complete this book successfully.
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/Learning-Ionic-Second-Edition. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
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.
Angular - A Primer
When Sir Timothy Berners-Lee invented the Internet, he never anticipated that the Internet would be used to publish selfies, share cat videos, or bomb web page with ads. His main intention (guessing) was to create a web of documents so a user on the Internet can access these hypertexts from anywhere and make use of it.
An interesting article published by Craig Buckler at Sitepoint titled, The Web Runs Out of Disk Space (http://www.sitepoint.com/web-runs-disk-space/), shows how the content on the Internet is spread out:
28.65% pictures of cats
16.80% vain selfies
14.82% pointless social media chatter
12.73% inane vlogger videos
9.76% advertising/clickbait pages
8.70% scams and cons
4.79% articles soliciting spurious statistics
3.79% new JavaScript tools/libraries
0.76% documents for the betterment of human knowledge
You can see, since the invention of the Internet to the present day, how we have evolved. Better evolution needs better frameworks to build and manage such apps that need to be scalable, maintainable, and testable. This is where Angular stepped in back in 2010 to fill the gap and it has been evolving quite well since then.
We are going to start our journey by understanding the new changes to Angular, the importance of TypeScript, and see how Ionic 2 has adapted itself with Angular to help build performance-efficient and modern Mobile Hybrid apps.
In this chapter, we will take a quick peek at new topics added as part of Angular with the help of an example. The main changes that have taken place in Angular (2) are primarily on the lines of performance and componentization, apart from the language update. We will be going through the following topics in this chapter:
What is new in Angular?
TypeScript and Angular
Building a Giphy app
What is new in Angular?
Angular 2 is one of the most anticipated and dramatic version upgrades I have seen for any software. Angular 1 was a boon to web/mobile web/hybrid app developers, where managing a lot of things was made easy. Not only did Angular 1 help restructure client-side app development, but it also provided a platform to build applications; not websites, but applications. Though the first release suffered performance issues when dealing with large datasets, the Angular team bounced back quite well with the later releases of Angular 1, that is, Angular 1.4.x and above, and fixed these performance issues by releasing a more stable version in the form of Angular (2).
Some of the new changes that have accompanied with Angular (2) are:
Speed and performance improvements.
Component based (not the typical MV*).
Angular CLI.
Simple and expressive syntax.
Progressive Web Apps (PWA).
Cross-platform app development, which includes desktops, mobile, and web.
Cordova-based Hybrid app development.
Angular Universal provider for the server side for fast initial views.
Upgrades to better animation, internationalization, and accessibility.
Angular can be written on ES5, ES6, TypeScript, and Dart are based on the user's comfort with the JavaScript flavor.
With these new updates, developing apps has never been easier, be it on the desktop, mobile, or Mobile Hybrid environments.
Note: The latest version of Angular is going to be called just Angular, not Angular 2, or AngularJS 4, or NG4. So throughout this book, I will refer to Angular version 2 as Angular.
The current latest version of Angular is 4. Do checkout Chapter 11, Ionic 3, to know a bit more about Angular 4 and how it improves Ionic.
Note: If you are new to Angular, you can refer to these books:
https://www.packtpub.com/web-development/learning-angular-2
https://www.packtpub.com/web-development/mastering-angular-2-components
https://www.packtpub.com/web-development/mastering-angular-2
https://www.packtpub.com/web-development/angular-2-example
Or these videos:
https://www.packtpub.com/web-development/angular-2-projects-video
https://www.packtpub.com/web-development/web-development-angular-2-and-bootstrap-video
https://www.packtpub.com/web-development/angular-2-web-development-TypeScript-video
TypeScript primer
Angular uses TypeScript extensively for app development. Hence as part of the Angular primer, we will refresh the necessary TypeScript concepts as well.
If you are new to TypeScript, TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript provides static typing, classes, and interfaces and supports almost all features of ES6 and ES7 before they land in the browser.
A TypeScript file is saved with a .ts extension.
The main advantage of adding typings to an untyped language (JavaScript) is to make IDEs understand what we are trying to do and better assist us while coding; in other words, Intellisense.
Having said that, here is what we can do with TypeScript.
Interface
As we start building complex apps, there will be a common need for a certain type of structure to be repeated throughout the app, which follows certain rules. This is where an interface comes into the picture. Interfaces provide structural subtyping or ducktyping to check the type and shape of entities.
For instance, if we are working with an app that deals with cars, every car will have a certain common structure that needs to be adhered to when used within the app. Hence we create an interface named ICar. Any class working with cars will implement this interface as follows:
Interface ICar { engine : String; color: String; price : Number; } class CarInfo implements ICar{ engine : String; color: String; price : Number; constructor(){ /* ... */} }
Angular
Angular (2) has added a bunch of new features and updated existing features and removed a few over Angular 1.x. In this section, we will go through some of the essential features of Angular.
