Book Image

Ionic Cookbook - Third Edition

By : Indermohan Singh
Book Image

Ionic Cookbook - Third Edition

By: Indermohan Singh

Overview of this book

Ionic is the preferred choice for JavaScript developers to develop real-time hybrid applications. This book will get you started with Ionic 3.9 and help you create Angular 5 components that interact with templates. You will work with Ionic components and find out how to share data efficiently between them. You'll discover how to make the best use of the REST API to handle back-end services and then move on to animating your application to make it look pretty. You then learn to add in a local push notification in order to test the app. Then you'll work with Cordova to support native functionalities on both iOS and Android. From there, you'll get to grips with using the default themes for each platform and customizing your own. We then take you through the advanced Ionic features like lazy loading, deep linking, localizing ionic apps etc. Finally, you'll see how best to deploy your app to different platforms. This book will solve all your Ionic-related issues through dedicated recipes that will help you get the best out of Ionic.

Related Content you might be interested in

Current Title:

Small book image
Ionic Cookbook - Third Edition
Indermohan Singh
Apr, 2018 | 390 pages
Small book image
Ionic Cookbook
Hoc Phan
Oct, 2015 | 264 pages
Small book image
Learning Ionic
Arvind Ravulavaru
Apr, 2017 | 378 pages
Small book image
Hybrid Mobile Development with Ionic
Gaurav Saini
Apr, 2017 | 242 pages
Table of Contents (12 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Sections
Get in touch
Free Chapter
1
Creating Our First App with Ionic
Creating Our First App with Ionic
Introduction
Setting up a development environment
Creating a HelloWorld app via the CLI
Creating a HelloWorld app via Ionic Creator
Viewing the app using your web browser
Viewing the app using the Ionic CLI
Viewing the app using Xcode for iOS
Viewing the app using Genymotion for Android
Viewing the app using Ionic View
2
Adding Ionic Components
Adding Ionic Components
Introduction
Adding multiple pages using tabs
Adding left and right menu navigation
Navigating multiple pages with state parameters
Using menu, tabs, and segment together in an app
Using the Ionic grid to create a complex UI
3
Extending Ionic with Angular Building Blocks
Extending Ionic with Angular Building Blocks
Introduction
Creating a custom pizza ordering component
Creating a custom username input directive
Creating a custom pipe
Creating a shared service to provide data to multiple pages
Reusing an existing page as an HTML element
4
Validating Forms and Making HTTP Requests
Validating Forms and Making HTTP Requests
Introduction
Creating a complex form with input validation
Creating reactive forms in Ionic
Retrieving data via a mocked API using a static JSON file
Integrating with Stripe for online payment
5
Adding Animation
Adding Animation
Introduction
Embedding full screen inline video as background
Creating physics-based animation using Dynamics.js
Animating the slide component by binding a gesture to the animation state
Adding a background CSS animation to the login page
6
User Authentication and Push Notifications
User Authentication and Push Notifications
Introduction
Registering and authenticating users using Auth0
Building an iOS app to receive push notifications
Building an Android app to receive push notifications
7
Supporting Device Functionalities Using Ionic Native
Supporting Device Functionalities Using Ionic Native
Introduction
Taking a photo using the camera plugin
Sharing content using the social sharing plugin
Displaying a local notification using the local notification plugin
Fingerprint authentication using the fingerprint AIO plugin
Creating a media player with the Media Player notification control
Creating a taxi app using the Google Maps plugin and geocode support
8
Theming the App
Theming the App
Introduction
Viewing and debugging themes for a specific platform
Customizing themes based on the platform
9
Advanced Topics
Advanced Topics
Introduction
Lazy loading in Ionic
Internationalization (i18n) using ngx-translate
Creating documentation for Ionic app
10
Publishing the App for Different Platforms
Publishing the App for Different Platforms
Introduction
Adding versioning to future-proof the app
Building and publishing an app for iOS
Building and publishing an app for Android
11
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Taking a photo using the camera plugin

In this section, you will make an app to take a picture using the device camera or load an existing picture from the device album. The picture could be either in the Base64 format or saved in a local filesystem relating to your app. The following is a screenshot of the app:

Here is the high-level process:

  1. Access the Cordova camera plugin to trigger camera capture and get the image back in the Base64 or URI format
  2. Parse the Base64 data or URI on an <img> DOM object
  3. Display the URI if it's in the URI format
  4. Capture an event of a toggle component
  5. Display long data (for example, URI) using a horizontal scroll

Getting ready

You should have a physical device ready in order to...

Previous Section
End of Section 3
Next Section