Mobile Application Development: JavaScript Frameworks电子书

Mobile Application Development: Using JavaScript Descendent Technologies

Table of Contents

Mobile Application Development: Using JavaScript Descendent Technologies

Mobile Application Development: Using JavaScript Descendent Technologies

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 code

Errata

Piracy

Questions

1. Module 1

1. An Introduction to Apache Cordova

What is Apache Cordova?

The differences between mobile web, hybrid mobile, and native mobile applications

Why you should use Cordova

Cordova architecture

Overview of Cordova APIs

Summary

2. Developing Your First Cordova Application

An introduction to Cordova CLI

Installing Apache Cordova

Generating our Sound Recorder's initial code

The Sound Recorder's initial structure

An insight into the www files

Developing Sound Recorder application

Sound Recorder functionality

Sound Recorder preparation

Sound Recorder details

Recording and playing the audio files back

Building and running Sound Recorder application

Summary

3. Apache Cordova Development Tools

Configuring Android development environment

Extending your existing Eclipse IDE

Creating an Android Virtual Device

Importing the Sound Recorder application in to Eclipse

Running the Sound Recorder application on a real Android device

Configuring iOS development environment

Importing the Sound Recorder application into Xcode

Running the Sound Recorder application on a real iOS device

Configuring the Windows Phone development environment

Importing the Sound Recorder application into Visual Studio

Running the Sound Recorder application on a real Windows Phone

Summary

4. Cordova API in Action

Exploring the Cordova Exhibition app

The Cordova Exhibition app structure

Accelerometer

Demo

The HTML page

View controller

API

Camera

Demo

The HTML page

View controller

API

Compass

Demo

The HTML page

View controller

API

Connection

Demo

The HTML page

View controller

API

Contacts

Demo

The HTML page

View controller

API

Device

Demo

The HTML page

View controller

API

Geolocation

Demo

The HTML page

View controller

API

Globalization

Demo

The HTML page

View controller

API

InAppBrowser

Demo

The HTML page

View controller

API

Summary

5. Diving Deeper into the Cordova API

Media, file, and capture

Demo

The HTML page

View controller

API

Notification

Demo

The HTML page

View controller

API

Storage

Demo

The HTML page

View controller

API

Finalizing the Cordova Exhibition app

Cordova events

Summary

6. Developing Custom Cordova Plugins

Developing a custom Cordova plugin

Using plugman

Plugin definition

Defining the plugin's JavaScript interface

Developing Android code

Developing iOS code

Developing Windows Phone 8 code

Publishing our plugin to Cordova Registry

Testing our Cordova plugin

Summary

7. Unit Testing the Cordova App's Logic

What is Jasmine

Configuring Jasmine

Writing your first Jasmine test

Jasmine Matchers

Jasmine in action – developing Cordova app tests

An overview of the weather application

Developing synchronous code tests

Developing asynchronous code tests

Manually executing tests

Automating tests using Karma

Installing Karma

Karma configuration

Running tests (on mobile devices)

Generating XML JUnit and code coverage reports

Integrating tests with the CI tools

Summary

8. Applying it All – the Mega App

Mega App specification/wireframes

Preparing for the Mega App

The Mega App architecture

The Mega App model and API

The Mega App user interface

Finalizing Mega App

Deploying and running Mega App

Start contributing to Mega App

Summary

2. Module 2

1. Exploring the Sample Application

Installing Xcode

Running the sample application

A sneak peek at the sample application

Experimenting with the sample application

Summary

2. Understanding React Native Fundamentals

The Virtual DOM

Components

Creating your first component

JSX

Back to our first component

Props and states

Props

Validating props

State

Summary

3. Beginning with the Example Application

Generating the projects

Xcode and the iOS simulator

The Android SDK and emulator

Modifying the React Native starter template

Structuring the application

Creating the SimpleButton component

Navigation

The Navigator component

Navigator.NavigationBar

The NoteScreen – first pass

Summary

4. Working with Styles and Layout

React CSS

Style Sheet

Styling the SimpleButton component

Layout and Flexbox

Flex container

Flex items

Horizontal and vertical centering

Absolute positioning

Styling the NavigationBar component

Changing the Android Material Theme

Styling the NoteScreen

Summary

5. Displaying and Saving Data

Lists

Understanding props

Using state

Passing callbacks in props

Creating new notes

Using AsyncStorage

Deleting notes

Summary

6. Working with Geolocation and Maps

Introducing the Geolocation API

The location permission in iOS

Tagging notes with geolocation

NoteLocationScreen

MapView

Summary

7. Integrating Native Modules

Adding images to notes

Installing react-native-camera on iOS

Searching for Native Modules

Using the camera component

Viewing images

The image component

Deleting images

Connecting the final pieces

Summary

8. Releasing the Application

Generating the static bundle in iOS

Testing the static bundle in iOS

Creating an iOS release in Xcode

Generating the Android APK

Summary

3. Module 3

1. First Look at Ionic

The beginning

The problem

Apache Cordova

Early hybrid apps

What is Ionic?

Short history of Ionic

Features of Ionic

CSS features

JavaScript features

The Ionic CLI

Setting up Ionic

Summary

2. To-Do List App

Creating our first application

Creating our to-do list app

The Ionic workflow

In-depth look at our project

Envisioning our app

Building our todo app

Creating the UI

The code

Wiring things up

Summary

3. Running Ionic Apps

Running our todo app

The ionic serve technique

Emulating with Chrome

Ionic serve labs

The Ionic view

Testing todo app with the Ionic view

Device

Android

iOS

Summary

4. Ionic Components

Creating a new to-do list application

Overview of the Bucket-List app

Breaking down the app

Designing the UI

Implementing the input box

Implementing the ion-list application

Using ion-list for our Bucket-List app

The ion-list component

ion-item

ion-option-button

Writing the Angular code for our Bucket-List app

Coding our input box

Creating the controller

Creating the input box model

Creating an array for the Bucket-List items

Implementing code for the Add button

Implementing the Delete button

Wire it all up

Binding the controller

Binding the input box model

Wiring up the Add button

Binding ion-item

Using ng-repeat to render the list

Wiring up the ion-option-button element

Testing our Bucket-List app

Summary

5. The London Tourist App

Introduction to the London Tourist App

Creating the London Tourist app

The side menu app design

Using the Ionic side menu template

Seeing the LTA side menu app in action

Exploring the LTA side menu app's code

The index.html file

The menu.html file

The <ion-side-menus>element

The <ion-side-menu-content>element

The <ion-side-menu>element

Developing the LTA application

The local JSON database

Creating the local JSON database file

Populating the JSON file

Designing the view

Wiring up the data

Retrieving the data with the $http service

Summary

6. Advanced Ionic Components

The Ionic Popover

Implementing the popover

Adding the menu button

Coding the popover

Adding the $ionicPopover service

Finishing the popover code

Creating the popover.html file

Wiring up the popover

The Ionic Modal

Creating the modal

Implementing the modal

Creating the modal.html file

Wiring up the modal

Summary

7. Customizing the App

Customizing the look and feel of your app

Ionic styles with SASS

Ionic SCSS overview

The ionic.app.scss file

Setting up SCSS

Customizing the SCSS

$ionicConfigProvider

Summary

8. Building a Simple Social App

The Ionic tabs application

Creating an Ionic tabs application

Running the tabs-app application

Overview of the tabs-app application

Overview of the tabs.html file

The <ion-tab> element

Adding tabs to the tabs-app application

Adding the state for the new tab

Creating the tab-wall.html file

Creating the WallController controller

Creating the tab

Summary

9. Connecting to Firebase

Extending our tabs-app Ionic app

Implementing the post wall feature

The backend challenge

Firebase

Setting up a new Firebase account

Integrate Firebase into tabs-app application

Adding Firebase and Angular-Fire scripts

Implementing Firebase to our app

Pulling from database

Adding to database

Summary

10. Roundup

Uncovered features of Ionic

Appcamp.IO

The Ionic documentation

The Ionic creator

The Ionic code pen

Ionic.IO

The Ionic playground

The Ionic community

Useful resources

Summary

A. Bibliography

Index