Ionic : Hybrid Mobile App Development

Ionic : Hybrid Mobile App Development

by Rahat Khanna, Sani Yusuf, Hoc Phan
Released June 2017
Publisher(s): Packt Publishing
ISBN: 9781788293112

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

An end–to-end journey, empowering you to build real-time, scalable, and interactive mobile applications with the Ionic framework

About This Book

  • Develop engaging mobile experiences with a native-looking UI in Ionic and AngularJS.

  • Use out-of-the-box Ionic functionalities, customize existing components, and add new components with this comprehensive course.

  • Learn Ionic by creating three complete mobile applications

    • Who This Book Is For

    If you are a web developer who wants to build hybrid mobile app development using the Ionic framework, then this comprehensive course is best-suited for you.

    What You Will Learn

  • Get to know about Hybrid Apps and AngularJS

  • Set up a development environment to build Hybrid Apps

  • Navigate around components and routing in Ionic

  • Authenticate users using an e-mail password, Twitter, Facebook, Google+, and LinkedIn

  • Retrieve data and store it using Firebase

  • Access native device functionalities such as the camera, contact list, e-mail, and maps using NG-Cordova

  • Integrate PhoneGap plugins with NG-Cordova

  • Test your apps to improve and optimize performance

    • In Detail

    Hybrid Apps are a promising choice in mobile app development to achieve cost-effectiveness and rapid development. Ionic 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. The Ionic Complete Developers course takes you on an end–to-end journey, empowering you to build real-time, scalable, and interactive mobile applications with the Ionic framework.

    Starting with an introduction to the Ionic framework to get you up and running, you will gradually move on to setting up the environment, and work through the multiple options and features available in Ionic to build amazing hybrid mobile apps. You will learn how to use Cordova plugins to include native functionality in your hybrid apps.

    You will work through three complete projects and build a basic to-do list app, a London tourist app, and a complete social media app. All three projects have been designed to help you learn Ionic at its very best. From setting up your project to developing on both the server side and front end, and best practices for testing and debugging your projects, you'll quickly be able to deliver high-performance mobile apps that look awesome.

    You will then hone your skills with recipes for cross-platform development. Integrating Ionic with Cordova will bring you native device features, and you will learn about the best modules from its ecosystem. Creating components and customizing the theme will allow you to extend Ionic. You'll see how to build your app to deploy to all platforms to make you a confident start-to-finish mobile developer.

    This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

  • Getting Started with Ionic – by Rahat Khanna

  • Ionic by Example – by Sani Yusuf

  • Ionic Cookbook – by Hoc Phan

    • Style and approach

    This course shows you how to get up and running with the Ionic framework. It doesn't just give you instructions, expecting you to follow them. Instead, with a hands-on approach, it demonstrates what Ionic is capable of through a series of practical projects that you can build yourself.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased 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 code file.

    Table of contents

    1. Ionic : Hybrid Mobile App Development
      1. Table of Contents
      2. Ionic : Hybrid Mobile App Development
      3. Ionic : Hybrid Mobile App Development
      4. Credits
      5. Preface
        1. What this learning path covers
        2. What you need for this learning path
        3. Who this learning path is for
        4. Reader feedback
        5. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      6. 1. Module 1
        1. 1. All About Hybrid Mobile Apps and Ionic Framework
          1. Introducing a Hybrid Mobile Application
            1. Types of Hybrid Mobile Apps
              1. WebView-based Hybrid Apps
              2. Cross-compiled Hybrid Apps
            2. Anatomy of a Hybrid Mobile App
              1. Custom WebView
              2. Native library
              3. Native to JS Bridge
          2. Using web technologies to develop for mobile
          3. What is AngularJS?
            1. Important concepts in AngularJS
              1. Modules
              2. Directives
              3. Controllers
              4. Services
              5. Templates
              6. Expressions
              7. Filters
          4. Why use Apache Cordova?
          5. Introducing Ionic Framework
          6. Summary
        2. 2. Setting up the Environment the Right Way
          1. Setting up Native Mobile development environments
            1. For iOS
              1. Installing and running simulators for testing
            2. For Android
              1. Download links
              2. Setting the environment variables
            3. For Windows
            4. For Linux/Mac OS
              1. Managing Android SDK and emulators
              2. Alternative to Android emulators – Genymotion
          2. Ionic development environment
            1. Installing NodeJS
              1. Basic npm commands
            2. Installing Cordova CLI and Ionic CLI
              1. Installation command for Cordova CLI
          3. Basic Ionic CLI commands
          4. Building a dummy app
          5. Popular issues faced and solutions
          6. Alternative to installation fuss – Ionic Playground
          7. Using Ionic Framework with different Code Editors
            1. Brackets
            2. Sublime Text
            3. Visual Studio
          8. Summary
        3. 3. Start Building Your First Ionic App
          1. Starting a new project
          2. Multiple ways to start a project
            1. Method 1 – using CDN-hosted library files
            2. Method 2 – using Ionic Creator to design a prototype and start a project
            3. Method 3 – using Ionic CLI locally
          3. The anatomy of Ionic Project
            1. Project folder structure and important files
            2. Main components
              1. The index.html file
            3. App.js and the root module
              1. Simple content directives – ion-content and ion-pane
                1. ion-content
                2. ion-pane
          4. The Ionic starter template
            1. The blank template
            2. The tabs template
            3. The sidemenu template
            4. The maps template
          5. E-commerce sample app – BookStore
            1. Features
            2. Architecture and design
          6. Summary
        4. 4. Navigation and Routing in an Ionic App
          1. Introduction to Angular UI Router
            1. States and URLs
            2. Nested states and views
              1. Using the dot notation
              2. Using the parent property
              3. Using object-based states
              4. Views for nested views
              5. Ways to transition to a state
              6. Abstract state
            3. Multiple and named views
              1. View names – relative versus abstract
            4. State parameters
              1. Basic parameters
              2. Regex parameters
              3. Query parameters
                1. Single parameter
                2. Multiple parameters
                  1. The $stateParams service
            5. State events and resolve
              1. Resolve
          2. Ionic header and footer
            1. The <ion-header-bar> directive
            2. The <ion-footer-bar> directive
          3. Ionic Tabs
            1. The <ion-tabs> directive
            2. The <ion-tab> directive
          4. Ionic side menu
            1. The <ion-side-menus> directive
            2. The <ion-side-menu> directive
            3. The <ion-side-menu-content> directive
            4. Other important directives
          5. Navigation and back menus
          6. Navigation and layout to be used in BookStore
          7. Summary
        5. 5. Accessorizing Your App with Ionic Components
          1. Ionic CSS components
            1. Header
            2. Footer
            3. Buttons
              1. Icon buttons
              2. Button bar
            4. Lists
              1. List dividers
              2. List icons
              3. List buttons
              4. Item avatars or thumbnails
            5. Cards
            6. Forms
            7. Input elements
              1. Checkbox
              2. Radio button list
              3. Toggle
              4. Range
            8. Tabs
            9. Grid
            10. Utility
          2. Ionic JS components
            1. Actionsheet – $ionicActionSheet
            2. Backdrop - $ionicBackdrop
            3. Form inputs
              1. The <ion-checkbox> directive
              2. The <ion-radio> directive
              3. The <ion-toggle> directive
            4. Gestures and events
            5. The $ionicGesture service
              1. The on method
              2. The off method
            6. Gesture events
            7. Lists
              1. The <ion-list> directive
            8. Loading – $ionicLoading
            9. Modal – $ionicModal
              1. The IonicModal controller
                1. initialize(options)
            10. Popover – $ionicPopover
            11. Spinner – ion-spinner
          3. Miscellaneous components
            1. $ionicPosition
            2. $ionicConfigProvider
          4. Summary
        6. 6. Integrating App with Backend Services
          1. $http services
            1. The response object
            2. The $http constructor method
          2. Ionic services vs factories
            1. Ionic service – authentication service
            2. Ionic factory – BooksFactory
          3. $resource and REST API
          4. Demystifying mBaaS
          5. Integrating with Parse
            1. Step 1 – creating an app on Parse
            2. Step 2 – getting API keys
            3. Step 3 – configuring appropriate settings
            4. Step 4 – integrating SDK or integrating using REST API
              1. Using SDK – downloading and overview
              2. Using REST API
          6. Integrating to Firebase
          7. Summary
        7. 7. Testing App on Real Devices
          1. Testing on browser emulators
            1. Overview of device mode in Chrome dev tools
          2. Ionic view app
            1. The Ionic upload command
            2. Viewing your app
          3. Making debug build
            1. Android debug build
            2. iOS debug build
          4. Remote debugging
            1. Remote debugging using Chrome dev tools
            2. Android debugging
            3. iOS debugging
            4. Remote debugging using jsconsole.com
          5. Testing using Ngrok
          6. Summary
        8. 8. Working with Cordova Plugins – ngCordova
          1. Introduction to Cordova plugins
            1. Plugin management
          2. Integrating ngCordova to Ionic App
          3. Important plugins
            1. Camera plugin
            2. Push Notifications
            3. Geolocation
            4. Contacts
          4. Network
            1. Device sensors
              1. Device motion
              2. Device orientation
          5. Custom Cordova plugin development
          6. Summary
        9. 9. Future of Ionic
          1. Ionic cloud services
            1. Ionic Creator
            2. Ionic Market
            3. Ionic Push
            4. Ionic Deploy
              1. Using Ionic Deploy
            5. Ionic Analytics
            6. Ionic Package
            7. Ionic Lab
          2. Ionic v2
            1. New features
              1. Angular 2, ES6, and Typescript
              2. Abstracted annotations
              3. Material design
              4. Enhanced Native Integration
              5. Powerful Theming
              6. Improved navigation and routing
            2. Migration to v2
          3. Summary
      7. 2. Module 2
        1. 1. First Look at Ionic
          1. The beginning
            1. The problem
          2. Apache Cordova
            1. Early hybrid apps
          3. What is Ionic?
            1. Short history of Ionic
              1. Features of Ionic
                1. CSS features
                2. JavaScript features
                3. The Ionic CLI
            2. Setting up Ionic
          4. Summary
        2. 2. To-Do List App
          1. Creating our first application
            1. Creating our to-do list app
          2. The Ionic workflow
            1. In-depth look at our project
            2. Envisioning our app
            3. Building our todo app
              1. Creating the UI
              2. The code
              3. Wiring things up
          3. Summary
        3. 3. Running Ionic Apps
          1. Running our todo app
            1. The ionic serve technique
              1. Emulating with Chrome
            2. Ionic serve labs
            3. The Ionic view
              1. Testing todo app with the Ionic view
            4. Device
              1. Android
              2. iOS
          2. Summary
        4. 4. Ionic Components
          1. Creating a new to-do list application
            1. Overview of the Bucket-List app
              1. Breaking down the app
            2. Designing the UI
              1. Implementing the input box
              2. Implementing the ion-list application
                1. Using ion-list for our Bucket-List app
                  1. The ion-list component
                  2. ion-item
                    1. ion-option-button
            3. Writing the Angular code for our Bucket-List app
              1. Coding our input box
                1. Creating the controller
                2. Creating the input box model
                3. Creating an array for the Bucket-List items
                4. Implementing code for the Add button
                5. Implementing the Delete button
              2. Wire it all up
                1. Binding the controller
                2. Binding the input box model
                3. Wiring up the Add button
                4. Binding ion-item
                  1. Using ng-repeat to render the list
                  2. Wiring up the ion-option-button element
            4. Testing our Bucket-List app
          2. Summary
        5. 5. The London Tourist App
          1. Introduction to the London Tourist App
            1. Creating the London Tourist app
              1. The side menu app design
              2. Using the Ionic side menu template
              3. Seeing the LTA side menu app in action
              4. Exploring the LTA side menu app's code
                1. The index.html file
                2. The menu.html file
                  1. The <ion-side-menus>element
                  2. The <ion-side-menu-content>element
                  3. The <ion-side-menu>element
              5. Developing the LTA application
                1. The local JSON database
                  1. Creating the local JSON database file
                  2. Populating the JSON file
                2. Designing the view
                  1. Wiring up the data
                  2. Retrieving the data with the $http service
          2. Summary
        6. 6. Advanced Ionic Components
          1. The Ionic Popover
            1. Implementing the popover
              1. Adding the menu button
              2. Coding the popover
              3. Adding the $ionicPopover service
                1. Finishing the popover code
              4. Creating the popover.html file
              5. Wiring up the popover
          2. The Ionic Modal
            1. Creating the modal
            2. Implementing the modal
            3. Creating the modal.html file
            4. Wiring up the modal
          3. Summary
        7. 7. Customizing the App
          1. Customizing the look and feel of your app
            1. Ionic styles with SASS
          2. Ionic SCSS overview
            1. The ionic.app.scss file
            2. Setting up SCSS
            3. Customizing the SCSS
          3. $ionicConfigProvider
          4. Summary
        8. 8. Building a Simple Social App
          1. The Ionic tabs application
            1. Creating an Ionic tabs application
              1. Running the tabs-app application
              2. Overview of the tabs-app application
              3. Overview of the tabs.html file
          2. The <ion-tab> element
            1. Adding tabs to the tabs-app application
              1. Adding the state for the new tab
            2. Creating the tab-wall.html file
            3. Creating the WallController controller
            4. Creating the tab
          3. Summary
        9. 9. Connecting to Firebase
          1. Extending our tabs-app Ionic app
            1. Implementing the post wall feature
              1. The backend challenge
          2. Firebase
            1. Setting up a new Firebase account
            2. Integrate Firebase into tabs-app application
              1. Adding Firebase and Angular-Fire scripts
              2. Implementing Firebase to our app
              3. Pulling from database
                1. Adding to database
          3. Summary
        10. 10. Roundup
          1. Uncovered features of Ionic
            1. Appcamp.IO
            2. The Ionic documentation
            3. The Ionic creator
            4. The Ionic code pen
            5. Ionic.IO
            6. The Ionic playground
            7. The Ionic community
          2. Useful resources
          3. Summary
      8. 3. Module 3
        1. 1. Creating Our First App with Ionic 2
          1. Introduction
          2. Setting up a development environment
            1. Getting ready
            2. How to do it…
            3. There's More…
          3. Creating a HelloWorld app via the CLI
            1. How to do it…
            2. How it works…
          4. Creating a HelloWorld app via Ionic Creator
            1. Getting ready
            2. How to do it…
            3. There's More…
          5. Viewing the app using your web browser
            1. Getting ready
            2. How to do it…
            3. How it works…
          6. Viewing the app using the Ionic CLI
            1. Getting Ready
            2. How to do it…
          7. Viewing the app using Xcode for iOS
            1. How to do it…
            2. There's more…
          8. Viewing the app using Genymotion for Android
            1. How to do it…
          9. Viewing the app using Ionic View
            1. How to do it…
            2. There's more…
        2. 2. Adding Ionic 2 Components
          1. Introduction
          2. Adding multiple pages using tabs
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          3. Adding left and right menu navigation
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          4. Navigating multiple pages with state parameters
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
        3. 3. Extending Ionic 2 with Angular 2 Building Blocks
          1. Introduction
          2. Creating a custom pizza ordering component
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
          3. Creating a custom username input directive
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
          4. Creating a custom pipe
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
          5. Creating a shared service to provide data to multiple pages
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
        4. 4. Validating Forms and Making HTTP Requests
          1. Introduction
          2. Creating a complex form with input validation
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          3. Retrieving data via a mocked API using a static JSON file
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
          4. Integrating with Stripe for online payment
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
        5. 5. Adding Animation
          1. Introduction
          2. Embedding full screen inline video as background
            1. Getting ready
            2. How to do it...
            3. How it works…
          3. Creating a physics-based animation using Dynamics.js
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
          4. Animating the slide component by binding a gesture to the animation state
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
          5. Adding a background CSS animation to the login page
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
        6. 6. User Authentication and Push Notification Using Ionic Cloud
          1. Introduction
          2. Registering and authenticating users using Ionic Cloud
            1. Getting ready
            2. How to do it...
            3. How it works...
          3. Building an iOS app to receive push notifications
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more...
          4. Building an Android app to receive push notifications
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more...
        7. 7. Supporting Device Functionalities Using Ionic Native
          1. Introduction
          2. Taking a photo using the camera plugin
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. There's more…
          3. Sharing content using the social sharing plugin
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
          4. Displaying a term of service using InAppBrowser
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. There's more…
          5. Creating a Taxi app using the Google Maps plugin and geocode support
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. There's more…
        8. 8. Theming the App
          1. Introduction
          2. Viewing and debugging themes for a specific platform
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
          3. Customizing themes based on the platform
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
        9. 9. Publishing the App for Different Platforms
          1. Introduction
          2. Adding versioning to future proof the app
            1. Getting ready
            2. How to do it...
            3. How it works…
          3. Building and publishing an app for iOS
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. There's more…
          4. Building and publishing an app for Android
            1. Getting ready
            2. How to do it…
            3. How it works…
      9. A. Biblography
      10. Index

    Product information

    • Title: Ionic : Hybrid Mobile App Development
    • Author(s): Rahat Khanna, Sani Yusuf, Hoc Phan
    • Release date: June 2017
    • Publisher(s): Packt Publishing
    • ISBN: 9781788293112