book

Ionic : Hybrid Mobile App Development

Name: Ionic : Hybrid Mobile App Development
ISBN: 9781788293112

by Rahat Khanna, Sani Yusuf, Hoc Phan

June 2017

Intermediate to advanced

544 pages

12h 25m

English

Packt Publishing

Read now

Unlock full access

Ionic : Hybrid Mobile App Development
Table of Contents
Ionic : Hybrid Mobile App Development
Ionic : Hybrid Mobile App Development
Credits
Preface
What this learning path covers
What you need for this learning path
Who this learning path is for
Reader feedback
Customer support
Downloading the example codeErrataPiracyQuestions

1. Module 1
1. All About Hybrid Mobile Apps and Ionic Framework
Introducing a Hybrid Mobile ApplicationTypes of Hybrid Mobile AppsWebView-based Hybrid AppsCross-compiled Hybrid AppsAnatomy of a Hybrid Mobile AppCustom WebViewNative libraryNative to JS Bridge
Using web technologies to develop for mobile
What is AngularJS?
Important concepts in AngularJSModulesDirectivesControllersServicesTemplatesExpressionsFilters
Why use Apache Cordova?
Introducing Ionic Framework
Summary
2. Setting up the Environment the Right Way
Setting up Native Mobile development environmentsFor iOSInstalling and running simulators for testingFor AndroidDownload linksSetting the environment variablesFor WindowsFor Linux/Mac OSManaging Android SDK and emulatorsAlternative to Android emulators – Genymotion
Ionic development environment
Installing NodeJSBasic npm commandsInstalling Cordova CLI and Ionic CLIInstallation 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
BracketsSublime TextVisual 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 filesMethod 2 – using Ionic Creator to design a prototype and start a projectMethod 3 – using Ionic CLI locally
The anatomy of Ionic Project
Project folder structure and important filesMain componentsThe index.html fileApp.js and the root moduleSimple content directives – ion-content and ion-paneion-contention-pane
The Ionic starter template
The blank templateThe tabs templateThe sidemenu templateThe maps template
E-commerce sample app – BookStore
FeaturesArchitecture and design
Summary
4. Navigation and Routing in an Ionic App
Introduction to Angular UI RouterStates and URLsNested states and viewsUsing the dot notationUsing the parent propertyUsing object-based statesViews for nested viewsWays to transition to a stateAbstract stateMultiple and named viewsView names – relative versus abstractState parametersBasic parametersRegex parametersQuery parametersSingle parameterMultiple parametersThe $stateParams serviceState events and resolveResolve
Ionic header and footer
The <ion-header-bar> directiveThe <ion-footer-bar> directive
Ionic Tabs
The <ion-tabs> directiveThe <ion-tab> directive
Ionic side menu
The <ion-side-menus> directiveThe <ion-side-menu> directiveThe <ion-side-menu-content> directiveOther important directives
Navigation and back menus
Navigation and layout to be used in BookStore
Summary
5. Accessorizing Your App with Ionic Components
Ionic CSS componentsHeaderFooterButtonsIcon buttonsButton barListsList dividersList iconsList buttonsItem avatars or thumbnailsCardsFormsInput elementsCheckboxRadio button listToggleRangeTabsGridUtility
Ionic JS components
Actionsheet – $ionicActionSheetBackdrop - $ionicBackdropForm inputsThe <ion-checkbox> directiveThe <ion-radio> directiveThe <ion-toggle> directiveGestures and eventsThe $ionicGesture serviceThe on methodThe off methodGesture eventsListsThe <ion-list> directiveLoading – $ionicLoadingModal – $ionicModalThe IonicModal controllerinitialize(options)Popover – $ionicPopoverSpinner – ion-spinner
Miscellaneous components
$ionicPosition$ionicConfigProvider
Summary
6. Integrating App with Backend Services
$http servicesThe response objectThe $http constructor method
Ionic services vs factories
Ionic service – authentication serviceIonic factory – BooksFactory
$resource and REST API
Demystifying mBaaS
Integrating with Parse
Step 1 – creating an app on ParseStep 2 – getting API keysStep 3 – configuring appropriate settingsStep 4 – integrating SDK or integrating using REST APIUsing SDK – downloading and overviewUsing REST API
Integrating to Firebase
Summary
7. Testing App on Real Devices
Testing on browser emulatorsOverview of device mode in Chrome dev tools
Ionic view app
The Ionic upload commandViewing your app
Making debug build
Android debug buildiOS debug build
Remote debugging
Remote debugging using Chrome dev toolsAndroid debuggingiOS debuggingRemote debugging using jsconsole.com
Testing using Ngrok
Summary
8. Working with Cordova Plugins – ngCordova
Introduction to Cordova pluginsPlugin management
Integrating ngCordova to Ionic App
Important plugins
Camera pluginPush NotificationsGeolocationContacts
Network
Device sensorsDevice motionDevice orientation
Custom Cordova plugin development
Summary
9. Future of Ionic
Ionic cloud servicesIonic CreatorIonic MarketIonic PushIonic DeployUsing Ionic DeployIonic AnalyticsIonic PackageIonic Lab
Ionic v2
New featuresAngular 2, ES6, and TypescriptAbstracted annotationsMaterial designEnhanced Native IntegrationPowerful ThemingImproved navigation and routingMigration to v2
Summary
2. Module 2
1. First Look at Ionic
The beginningThe problem
Apache Cordova
Early hybrid apps
What is Ionic?
Short history of IonicFeatures of IonicCSS featuresJavaScript featuresThe Ionic CLISetting up Ionic
Summary
2. To-Do List App
Creating our first applicationCreating our to-do list app
The Ionic workflow
In-depth look at our projectEnvisioning our appBuilding our todo appCreating the UIThe codeWiring things up
Summary
3. Running Ionic Apps
Running our todo appThe ionic serve techniqueEmulating with ChromeIonic serve labsThe Ionic viewTesting todo app with the Ionic viewDeviceAndroidiOS
Summary
4. Ionic Components
Creating a new to-do list applicationOverview of the Bucket-List appBreaking down the appDesigning the UIImplementing the input boxImplementing the ion-list applicationUsing ion-list for our Bucket-List appThe ion-list componention-itemion-option-buttonWriting the Angular code for our Bucket-List appCoding our input boxCreating the controllerCreating the input box modelCreating an array for the Bucket-List itemsImplementing code for the Add buttonImplementing the Delete buttonWire it all upBinding the controllerBinding the input box modelWiring up the Add buttonBinding ion-itemUsing ng-repeat to render the listWiring up the ion-option-button elementTesting our Bucket-List app
Summary
5. The London Tourist App
Introduction to the London Tourist AppCreating the London Tourist appThe side menu app designUsing the Ionic side menu templateSeeing the LTA side menu app in actionExploring the LTA side menu app's codeThe index.html fileThe menu.html fileThe <ion-side-menus>elementThe <ion-side-menu-content>elementThe <ion-side-menu>elementDeveloping the LTA applicationThe local JSON databaseCreating the local JSON database filePopulating the JSON fileDesigning the viewWiring up the dataRetrieving the data with the $http service
Summary
6. Advanced Ionic Components
The Ionic PopoverImplementing the popoverAdding the menu buttonCoding the popoverAdding the $ionicPopover serviceFinishing the popover codeCreating the popover.html fileWiring up the popover
The Ionic Modal
Creating the modalImplementing the modalCreating the modal.html fileWiring up the modal
Summary
7. Customizing the App
Customizing the look and feel of your appIonic styles with SASS
Ionic SCSS overview
The ionic.app.scss fileSetting up SCSSCustomizing the SCSS
$ionicConfigProvider
Summary
8. Building a Simple Social App
The Ionic tabs applicationCreating an Ionic tabs applicationRunning the tabs-app applicationOverview of the tabs-app applicationOverview of the tabs.html file
The <ion-tab> element
Adding tabs to the tabs-app applicationAdding the state for the new tabCreating the tab-wall.html fileCreating the WallController controllerCreating the tab
Summary
9. Connecting to Firebase
Extending our tabs-app Ionic appImplementing the post wall featureThe backend challenge
Firebase
Setting up a new Firebase accountIntegrate Firebase into tabs-app applicationAdding Firebase and Angular-Fire scriptsImplementing Firebase to our appPulling from databaseAdding to database
Summary
10. Roundup
Uncovered features of IonicAppcamp.IOThe Ionic documentationThe Ionic creatorThe Ionic code penIonic.IOThe Ionic playgroundThe Ionic community
Useful resources
Summary
3. Module 3
1. Creating Our First App with Ionic 2
Introduction
Setting up a development environment
Getting readyHow to do it…There's More…
Creating a HelloWorld app via the CLI
How to do it…How it works…
Creating a HelloWorld app via Ionic Creator
Getting readyHow to do it…There's More…
Viewing the app using your web browser
Getting readyHow to do it…How it works…
Viewing the app using the Ionic CLI
Getting ReadyHow to do it…
Viewing the app using Xcode for iOS
How to do it…There's more…
Viewing the app using Genymotion for Android
How to do it…
Viewing the app using Ionic View
How to do it…There's more…
2. Adding Ionic 2 Components
Introduction
Adding multiple pages using tabs
Getting readyHow to do it…How it works…See also
Adding left and right menu navigation
Getting readyHow to do it…How it works…See also
Navigating multiple pages with state parameters
Getting readyHow to do it…How it works…See also
3. Extending Ionic 2 with Angular 2 Building Blocks
Introduction
Creating a custom pizza ordering component
Getting readyHow to do it...How it works…See also
Creating a custom username input directive
Getting readyHow to do it...How it works…See also
Creating a custom pipe
Getting readyHow to do it...How it works…See also
Creating a shared service to provide data to multiple pages
Getting readyHow to do it...How it works…See also
4. Validating Forms and Making HTTP Requests
Introduction
Creating a complex form with input validation
Getting readyHow to do it…How it works…See also
Retrieving data via a mocked API using a static JSON file
Getting readyHow to do it...How it works…See also
Integrating with Stripe for online payment
Getting readyHow to do it...How it works…See also
5. Adding Animation
Introduction
Embedding full screen inline video as background
Getting readyHow to do it...How it works…
Creating a physics-based animation using Dynamics.js
Getting readyHow to do it...How it works…See also
Animating the slide component by binding a gesture to the animation state
Getting readyHow to do it...How it works…See also
Adding a background CSS animation to the login page
Getting readyHow to do it...How it works…See also
6. User Authentication and Push Notification Using Ionic Cloud
Introduction
Registering and authenticating users using Ionic Cloud
Getting readyHow to do it...How it works...
Building an iOS app to receive push notifications
Getting readyHow to do it...How it works...There's more...
Building an Android app to receive push notifications
Getting readyHow to do it...How it works...There's more...
7. Supporting Device Functionalities Using Ionic Native
Introduction
Taking a photo using the camera plugin
Getting readyHow to do it...How it works…There's more…
Sharing content using the social sharing plugin
Getting readyHow to do it…How it works…There's more…
Displaying a term of service using InAppBrowser
Getting readyHow to do it...How it works…There's more…
Creating a Taxi app using the Google Maps plugin and geocode support
Getting readyHow to do it...How it works…There's more…
8. Theming the App
Introduction
Viewing and debugging themes for a specific platform
Getting readyHow to do it…How it works…There's more…
Customizing themes based on the platform
Getting readyHow to do it…How it works…There's more…
9. Publishing the App for Different Platforms
Introduction
Adding versioning to future proof the app
Getting readyHow to do it...How it works…
Building and publishing an app for iOS
Getting readyHow to do it…How it works…There's more…
Building and publishing an app for Android
Getting readyHow to do it…How it works…
A. Biblography
Index

404

Not Found

Either this content does not exist or you do not have access to it. Try searching for something new.

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Ionic : Hybrid Mobile App Development

by Rahat Khanna, Sani Yusuf, Hoc Phan

404

Not Found