NativeScript for Angular Mobile Development电子书

Title Page

Copyright

NativeScript for Angular Mobile Development

Credits

Foreword

About the Authors

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

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

Downloading the color images of this book

Errata

Piracy

Questions

Get Into Shape with @NgModule

Mental preparation

The sketch exercise

Low-level thinking

Modularize with @NgModule

Our app's module breakdown

The module benefits

Considerations?

Getting started

Create our module shells

Injectable services

Consistency and standards

Finalizing CoreModule

Summary

Feature Modules

Player and recorder modules

A shared model for our data

Scaffolding out the service APIs

Implementing LogService

Implementing DatabaseService

Create AuthService to help handle the authenticated state of our app

Prepare to bootstrap the AppModule

Summary

Our First View via Component Building

Our first view via component building

All about the GridLayout

Back to our layout

Building TrackList component

Building a dialog wrapper service to prompt the user

Integrating DialogService into our component

Creating an Angular Pipe - OrderBy

Building PlayerControls component

Quick preview

Preview on iOS

Preview on Android

Summary

A prettier view with CSS

It's time to get classy

Meet the NativeScript core theme

Adjusting the status bar background color and text color on iOS and Android

Summary

Routing and Lazy Loading

Get your kicks on Route 66

Providing NSModuleFactoryLoader for NgModuleFactoryLoader

Creating MixerModule

Understanding Angular's Dependency Injector when lazy loading modules

Creating AuthGuard for RecorderModule

Handling late feature requirements – managing compositions

Summary

Running the App on iOS and Android

Taking command…

tns run <platform>

tns debug <platform>

tns build <platform>

Android Keystores

Creating a new keystore

Android Google Play Fingerprints

Back in command

The tns plugin command

The tns install <dev_plugin> command

The tns create <project_name> command

The tns info command

The tns platform [add|remove|clean|upgrade] <platform> command

The tns test <platform> command

The tns device command

The tns doctor command

The tns help command

TNS command-line cheatsheet

Summary

Building the Multitrack Player

Implementing our multitrack player via the nativescript-audio plugin

Building the TrackPlayerModel for our multitrack player

Let the music play!

Polishing the implementation

Using NativeScript's strengths by tapping directly into the native API of the underlying iOS AVAudioPlayer instance from the nativescript-audio plugin

Creating a custom ShuttleSliderComponent

Creating SlimSliderDirective for iOS and Android native API modifications

Summary

Building an Audio Recorder

Phase 1 – Building an audio recorder for iOS

Challenge detour – Integrate Swift based library into NativeScript

Integrating a custom-built iOS framework into NativeScript

Setting up native API type checking and generate AudioKit TypeScript definitions

Build recorder with AudioKit

How to convert Swift/ObjC methods to NativeScript

Building custom reusable NativeScript view for native audio Waveform display

Integrate a custom NativeScript view into our Angular app

Creating the Recorder View layout

Finishing implementation with RecorderService

Phase 2 – Building an audio recorder for Android

Using nativescript-audio's TNSRecorder for Android in our RecordModel

Summary

Empowering Your Views

Multiple item templates with NativeScript's ListView

Serializing data for persistence and hydrating it back upon retrieval

Leveraging Angular directives to enrich the NativeScript Slider with more unique characteristics

Graphic and resource handling for Android

Summary

@ngrx/store + @ngrx/effects for State Management

Understanding Redux and integrating @ngrx/store

What is @ngrx/store?

Designing the state model

Installing and integrating @ngrx/store

Providing the initial app state excluding any lazily loaded module state

Installing and integrating @ngrx/effects

Providing lazily loaded feature module state

Inspect the code! Exploring more on your own

Summary

Polish with SASS

Polishing with SASS

Using font icons with the nativescript-ngx-fonticon plugin

Finishing touches

Summary

Unit Testing

Unit testing

Angular testing

Running the tests

Unexpected test failure

Why did it fail?

Test passes

NativeScript testing framework

Running the tests

Summary

Integration Testing with Appium

Integration testing

Configuration

Creating a test

More Appium testing

Automated testing

GitHub and Travis integration

Summary

Deployment Preparation with webpack Bundling

Using webpack to bundle the app

Preparing to use webpack

Solution #1: Unexpected value 'SlimSliderDirective...'

Solution #2: Cannot determine the module for class SlimSliderDirective...

Solution #3: Error encountered resolving symbol values statically

Solution #4 and #5: Can't resolve './app.css'

Detour – Overview of developing a webpack plugin

Summary

Deploying to the Apple App Store

Preparing for App Store distribution

App ID, certificates, and profiles

Configure the app metadata such as App ID and Display Name

App ID

Display name

Create your app icons and splash screens

Build the app for release

Upload to iTunes Connect

Uploading your .ipa file

Summary

Deploying to Google Play

Building an APK for Google Play

Uploading to Google Play

APK

Summary