NativeScript for Angular Mobile Development

图书信息

作者	Nathan Walker,Nathanael J. Anderson
出版社	Packt Publishing
ISBN	9781787124691
出版时间	2017-08-30
字数	42.1万
分类	Packt Publishing,进口书,外文原版书,电脑,网络

读书简介

Learn NativeScript to build native mobile applications with Angular, TypeScript, JavaScript About This Book ? Power packed hands-on guide to help you become pro-efficient with NativeScript ? Harness the power of your web development skills with JavaScript and Angular to build cross-platform mobile apps ? Create highly maintainable and feature-rich apps with TypeScript and NativeScript APIs Who This Book Is For This book assumes you have a general understanding of TypeScript, have heard of NativeScript and know what it's about, and are familiar with Angular (2.0). You don't need to be an expert in any of these technologies, but having some sense of them before reading is recommended this book, which is ideal for intermediate to advanced users. What You Will Learn ? Bootstrap a NativeScript for Angular app ? Best practices for project organization ? Style your app with CSS/SASS ? Use Angular together with NativeScript to create cross-platform mobile apps ? Take advantage of powerful Angular features, such as Dependency Injection, Components, Directives, Pipes, and NgModules right within your NativeScript apps ?Gain insight into great project organization and best practices ?Use Objective C/Swift and Java APIs directly from TypeScript ?Use rich framework features and third-party plugins ?Style your app with CSS/SASS ?Integrate @ngrx/store + @ngrx/effects to help with state management ?Test your app with Karma and Appium In Detail NativeScript is an open source framework that is built by Progress in order to build truly native mobile apps with TypeScript, JavaScript or just Angular which is an open source framework built by Google that offers declarative templates, dependency injection, and fully featured modules to build rich applications. Angular’s versatile view handling architecture allows your views to be rendered as highly performant UI components native to iOS and Android mobile platforms. This decoupling of the view rendering layer in Angular combined with the power of native APIs with NativeScript have together created the powerful and exciting technology stack of NativeScript for Angular. This book focuses on the key concepts that you will need to know to build a NativeScript for Angular mobile app for iOS and Android. We’ll build a fun multitrack recording studio app, touching on powerful key concepts from both technologies that you may need to know when you start building an app of your own. The structure of the book takes the reader from a void to a deployed app on both the App Store and Google Play, serving as a reference guide and valuable tips/tricks handbook. By the end of this book, you’ll know majority of key concepts needed to build a successful NativeScript for Angular app. Style and approach This step-by-step advanced tutorial focuses on the key concepts you need to know to build a NativeScript for Angular mobile app for iOS and Android.

目录

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

tns debug

tns build

Android Keystores

Creating a new keystore

Android Google Play Fingerprints

Back in command

The tns plugin command

The tns install command

The tns create command

The tns info command

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

The tns test 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