Getting Started with Ionic
By Khanna Rahat
()
About this ebook
About This Book
- Develop engaging mobile experiences with a native-looking UI in Ionic and AngularJS
- Build mobile applications with a native UI and interactions with device APIs using popular web technologies such as HTML, CSS, and JavaScript
- Create an e-commerce mobile app using tutorials and code samples
Who This Book Is For
This book is ideal for any web developer who wants to enter into the world of mobile app development but has no clue where to start. Ionic is an ideal starting point and provides a smooth learning curve to help you build hybrid apps using web technologies and to develop native apps for iOS and Android, you do not need to know multiple languages. This book will also be useful for Hybrid App developers who have not found the perfect framework to ensure users get a rich experience from your apps.
What You Will Learn
- Get to know about Hybrid Apps and AngularJS
- Set up a development environment to build Hybrid Apps
- Navigate around the components and routing in Ionic
- Use different Ionic directives for a mobile-specific experience
- Integrate an Ionic App with backend web services
- Work with plugins to include native functionality in your hybrid apps
- Test your apps on real devices
- Build an e-commerce app for iOS and Android from scratch
In Detail
Hybrid Apps are a promising choice in mobile app development to achieve cost effectiveness and rapid development. However, they were not preferred over native apps until few years back due to a poor performance and bad user experience, but everything has changed with the release of Ionic. It has evolved as the most popular choice for Hybrid Mobile App development as it tends to match the native experience and provides robust components/tools to build apps.
Getting Started with Ionic equips any web developer with the basic knowledge needed to use modern web technologies to build amazing hybrid mobile apps using Ionic.
This fast-paced, practical book explains all the important concepts of AngularJS and Cordova Framework required to develop apps, then gives you a brief introduction to hybrid mobile applications. It will guide you through setting up the environment to develop mobile apps, and through the multiple options and features available in Ionic so you can use them in your mobile apps. Features such as the Side Menu, Tabs, Touch Interactions, and native features such as Bar Code, Camera, and Geolocations are all covered.. Finally, we’ll show you how to use Cordova plugins and publish your apps.
Style and approach
Getting started with Ionic is a compact, easy-to-follow guide to developing hybrid mobile apps using Ionic with real world examples of building an e-commerce app.
Related to Getting Started with Ionic
Related ebooks
Ionic Framework By Example Rating: 2 out of 5 stars2/5Ionic 2 Cookbook - Second Edition Rating: 0 out of 5 stars0 ratingsLearning Ionic Rating: 0 out of 5 stars0 ratingsLearning Node.js for Mobile Application Development Rating: 0 out of 5 stars0 ratingsJasmine JavaScript Testing - Second Edition Rating: 0 out of 5 stars0 ratingsAngular Services Rating: 0 out of 5 stars0 ratingsAngularJS Web Application Development Blueprints Rating: 0 out of 5 stars0 ratingsModern JavaScript Applications Rating: 0 out of 5 stars0 ratingsASP.NET Core 3 and React: Hands-On full stack web development using ASP.NET Core, React, and TypeScript 3 Rating: 0 out of 5 stars0 ratingsNode Web Development, Second Edition Rating: 0 out of 5 stars0 ratingsGetting Started with NativeScript Rating: 0 out of 5 stars0 ratingsReactive State for Angular with NgRx Rating: 0 out of 5 stars0 ratingsAngular 2 Components Rating: 0 out of 5 stars0 ratingsBuilding Impressive Presentations with Impress.js Rating: 4 out of 5 stars4/5Web Development with MongoDB and Node.js Rating: 0 out of 5 stars0 ratingsAngularJS Deployment Essentials Rating: 0 out of 5 stars0 ratingsWebRTC Blueprints Rating: 0 out of 5 stars0 ratingsHybrid Mobile Development with Ionic Rating: 0 out of 5 stars0 ratingsMobile Application Development: JavaScript Frameworks Rating: 0 out of 5 stars0 ratingsOpa Application Development Rating: 0 out of 5 stars0 ratingsMongoDB High Availability Rating: 5 out of 5 stars5/5AngularJS Complete Self-Assessment Guide Rating: 0 out of 5 stars0 ratingsOpenJDK Cookbook Rating: 0 out of 5 stars0 ratingsDesign Patterns in C#: A Hands-on Guide with Real-world Examples Rating: 0 out of 5 stars0 ratingsLisp (programming language) Complete Self-Assessment Guide Rating: 1 out of 5 stars1/5WebSocket Essentials – Building Apps with HTML5 WebSockets Rating: 0 out of 5 stars0 ratingsIonic in Action: Hybrid Mobile Apps with Ionic and AngularJS Rating: 0 out of 5 stars0 ratingsContinuous Integration in .NET Rating: 0 out of 5 stars0 ratings
Programming For You
Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Python: Learn Python in 24 Hours Rating: 4 out of 5 stars4/5Python: For Beginners A Crash Course Guide To Learn Python in 1 Week Rating: 4 out of 5 stars4/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5Excel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5Python Machine Learning By Example Rating: 4 out of 5 stars4/5Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5A Slackers Guide to Coding with Python: Ultimate Beginners Guide to Learning Python Quick Rating: 0 out of 5 stars0 ratingsSQL: For Beginners: Your Guide To Easily Learn SQL Programming in 7 Days Rating: 5 out of 5 stars5/5Python Data Structures and Algorithms Rating: 5 out of 5 stars5/5Java for Beginners: A Crash Course to Learn Java Programming in 1 Week Rating: 5 out of 5 stars5/5Programming Arduino: Getting Started with Sketches Rating: 4 out of 5 stars4/5Learn SQL in 24 Hours Rating: 5 out of 5 stars5/5Learn JavaScript in 24 Hours Rating: 3 out of 5 stars3/5HTML in 30 Pages Rating: 5 out of 5 stars5/5Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5PYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsHTML & CSS: Learn the Fundaments in 7 Days Rating: 4 out of 5 stars4/5The Unofficial Guide to Open Broadcaster Software: OBS: The World's Most Popular Free Live-Streaming Application Rating: 0 out of 5 stars0 ratingsCoding All-in-One For Dummies Rating: 4 out of 5 stars4/5The Little SAS Book: A Primer, Sixth Edition Rating: 5 out of 5 stars5/5Python for Beginners: Learn the Fundamentals of Computer Programming Rating: 0 out of 5 stars0 ratingsLearn PowerShell in a Month of Lunches, Fourth Edition: Covers Windows, Linux, and macOS Rating: 0 out of 5 stars0 ratings
Reviews for Getting Started with Ionic
0 ratings0 reviews
Book preview
Getting Started with Ionic - Khanna Rahat
Table of Contents
Getting Started with Ionic
Credits
Foreword
About the Author
About the Reviewer
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Running the example code
Downloading the color images of this book
Errata
Piracy
Questions
1. All About Hybrid Mobile Apps and Ionic Framework
Introducing a Hybrid Mobile Application
Types of Hybrid Mobile Apps
WebView-based Hybrid Apps
Cross-compiled Hybrid Apps
Anatomy of a Hybrid Mobile App
Custom WebView
Native library
Native to JS Bridge
Using web technologies to develop for mobile
What is AngularJS?
Important concepts in AngularJS
Modules
Directives
Controllers
Services
Templates
Expressions
Filters
Why use Apache Cordova?
Introducing Ionic Framework
Summary
2. Setting up the Environment the Right Way
Setting up Native Mobile development environments
For iOS
Installing and running simulators for testing
For Android
Download links
Setting the environment variables
For Windows
For Linux/Mac OS
Managing Android SDK and emulators
Alternative to Android emulators – Genymotion
Ionic development environment
Installing NodeJS
Basic npm commands
Installing Cordova CLI and Ionic CLI
Installation command for Cordova CLI
Basic Ionic CLI commands
Building a dummy app
Popular issues faced and solutions
Alternative to installation fuss – Ionic Playground
Using Ionic Framework with different Code Editors
Brackets
Sublime Text
Visual Studio
Summary
3. Start Building Your First Ionic App
Starting a new project
Multiple ways to start a project
Method 1 – using CDN-hosted library files
Method 2 – using Ionic Creator to design a prototype and start a project
Method 3 – using Ionic CLI locally
The anatomy of Ionic Project
Project folder structure and important files
Main components
The index.html file
App.js and the root module
Simple content directives – ion-content and ion-pane
ion-content
ion-pane
The Ionic starter template
The blank template
The tabs template
The sidemenu template
The maps template
E-commerce sample app – BookStore
Features
Architecture and design
Summary
4. Navigation and Routing in an Ionic App
Introduction to Angular UI Router
States and URLs
Nested states and views
Using the dot notation
Using the parent property
Using object-based states
Views for nested views
Ways to transition to a state
Abstract state
Multiple and named views
View names – relative versus abstract
State parameters
Basic parameters
Regex parameters
Query parameters
Single parameter
Multiple parameters
The $stateParams service
State events and resolve
Resolve
Ionic header and footer
The
The
Ionic Tabs
The
The
Ionic side menu
The
The
The
Other important directives
Navigation and back menus
Navigation and layout to be used in BookStore
Summary
5. Accessorizing Your App with Ionic Components
Ionic CSS components
Header
Footer
Buttons
Icon buttons
Button bar
Lists
List dividers
List icons
List buttons
Item avatars or thumbnails
Cards
Forms
Input elements
Checkbox
Radio button list
Toggle
Range
Tabs
Grid
Utility
Ionic JS components
Actionsheet – $ionicActionSheet
Backdrop - $ionicBackdrop
Form inputs
The
The
The
Gestures and events
The $ionicGesture service
The on method
The off method
Gesture events
Lists
The
Loading – $ionicLoading
Modal – $ionicModal
The IonicModal controller
initialize(options)
Popover – $ionicPopover
Spinner – ion-spinner
Miscellaneous components
$ionicPosition
$ionicConfigProvider
Summary
6. Integrating App with Backend Services
$http services
The response object
The $http constructor method
Ionic services vs factories
Ionic service – authentication service
Ionic factory – BooksFactory
$resource and REST API
Demystifying mBaaS
Integrating with Parse
Step 1 – creating an app on Parse
Step 2 – getting API keys
Step 3 – configuring appropriate settings
Step 4 – integrating SDK or integrating using REST API
Using SDK – downloading and overview
Using REST API
Integrating to Firebase
Summary
7. Testing App on Real Devices
Testing on browser emulators
Overview of device mode in Chrome dev tools
Ionic view app
The Ionic upload command
Viewing your app
Making debug build
Android debug build
iOS debug build
Remote debugging
Remote debugging using Chrome dev tools
Android debugging
iOS debugging
Remote debugging using jsconsole.com
Testing using Ngrok
Summary
8. Working with Cordova Plugins – ngCordova
Introduction to Cordova plugins
Plugin management
Integrating ngCordova to Ionic App
Important plugins
Camera plugin
Push Notifications
Geolocation
Contacts
Network
Device sensors
Device motion
Device orientation
Custom Cordova plugin development
Summary
9. Future of Ionic
Ionic cloud services
Ionic Creator
Ionic Market
Ionic Push
Ionic Deploy
Using Ionic Deploy
Ionic Analytics
Ionic Package
Ionic Lab
Ionic v2
New features
Angular 2, ES6, and Typescript
Abstracted annotations
Material design
Enhanced Native Integration
Powerful Theming
Improved navigation and routing
Migration to v2
Summary
Index
Getting Started with Ionic
Getting Started with Ionic
Copyright © 2016 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: January 2016
Production reference: 1070116
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78439-057-0
www.packtpub.com
Credits
Author
Rahat Khanna
Reviewer
Nikola Brežnjak
Commissioning Editor
Dipika Gaonkar
Acquisition Editor
Aaron Lazar
Content Development Editor
Priyanka Mehta
Technical Editor
Dhiraj Chandanshive
Copy Editor
Joanna McMahon
Project Coordinator
Izzat Contractor
Proofreader
Safis Editing
Indexer
Rekha Nair
Production Coordinator
Manu Joseph
Cover Work
Manu Joseph
Foreword
This book is the result of four months of intensive writing and coding on the part of Rahat Khanna, a dedicated Ionic community member, experienced developer, and excellent writer. We were really happy to hear that Rahat was writing an Ionic book because we think very highly of his blog posts, which have also been very popular among members of our developer community.
The book is ideal for new Ionic developers who have some prior web development experience. The book contains code samples related to a single app that readers build as they move from chapter to chapter.
In the first few chapters, Rahat offers a solid conceptual base for Angular and for Hybrid Mobile App development in general. He teaches users how to set up a native development environment and use the Ionic command-line interface.
In later chapters, Rahat takes a deep dive into Ionic's architecture and different components. Experienced Ionic developers will appreciate his chapters on integrating backend services and mBaaS with Ionic apps.
In addition, the book touches upon Ionic Platform Services and Ionic 2's new features and migration path.
By the time they complete this book, readers will be able to build a mobile application with a native-looking user interface and interactions with device APIs and publish it to the app stores.
I began my career as a developer and built many internal Hybrid Apps for my company. I chose Ionic because it offered the only complete solution for Hybrid Mobile App development, which allows me to focus on development; whereas Ionic handled architecture and design. Ionic offers a complete ecosystem to build performant, beautiful mobile apps using a single code base, which saves organization's both money and time and allows them to leverage the existing skills of their web developers.
As a core team member of Ionic and Ionic's developer advocate, I travel around the U.S. to speak about Ionic and teach developers how to use it. I hope that you find this book to be a great introduction to Ionic and also a way to build upon your existing skills.
Mike Harlington
Providence, Rhode Island
About the Author
Rahat Khanna is a techno-nerd experienced in developing web and mobile apps for many international MNCs and start-ups. He has completed his Bachelors in Technology with Computer Science & Engineering as specialisation. During the past 7 years, he has worked for a multinational IT service company and ran his own entrepreneurial venture also in his early twenties. He has worked on ranging projects from static HTML websites to scalable web applications and engaging mobile apps. Along with his current job as a Senior UI developer at Flipkart, a billion dollar e-commerce firm, he now blogs on the latest technology frameworks on sites www.airpair.com, appsonmob.com, and so on and delivers talks at community events. He has been helping individual developers and startups in their Ionic projects to deliver amazing mobile apps.
I live in Bangalore, India with my wife Palak who has been instrumental in motivating me to share my knowledge with the world and write this book. Also, I would like to thank my parents and family to support me in my endeavours. I would also like to thank Packt Publishing and their entire team for helping constantly throughout the whole experience of finishing the book. Finally, I am also indebted to all my career mentors and colleagues especially Sunil Khokhar and Rahul Luthra who have helped me in constantly learning new things and growing as a professional.
About the Reviewer
Nikola Brežnjak is an engineer at heart and a jack-of-all-trades kind of guy. For those who care about titles, he has a master's degree in computing. For the past eight years, he worked in the betting software industry where he made use of his knowledge in areas ranging from full stack (web and desktop) development to game development through Linux and database administration and use of various languages (C#, PHP, JavaScript to name just a few). Recently, he's been interested in the Ionic Framework, and he likes to help out on StackOverflow where he is currently in the top 0.X%.
He self-published the book Getting MEAN with MEMEs via Leanpub, available at https://leanpub.com/meantodo. Also, he self-published the book about Ionic Framework via Leanpub, https://leanpub.com/ionic-framework. He was a technical reviewer for the book Deploying Node.js, Sandro Pasquali, as well as for the video Beginning Ionic Hybrid Application Development, Troy Miles, both by Packt Publishing. You can find out more about him through his blog at http://www.nikola-breznjak.com/blog.
He lives in Croatia with his lovely wife and daughter whom he would like to thank to support him in all his geeky endeavors. Also, he would like to thank his parents to teach him the power of hard and consistent work.
www.PacktPub.com
Support files, eBooks, discount offers, and more
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
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://www2.packtpub.com/books/subscription/packtlib
Do you need