O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

NativeScript for Angular Mobile Development

Book Description

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.

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. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Get Into Shape with @NgModule
    1. Mental preparation
      1. The sketch exercise
      2. Low-level thinking
      3. Modularize with @NgModule
      4. Our app's module breakdown
    2. The module benefits
      1. Considerations?
      2. Getting started
      3. Create our module shells
      4. Injectable services
      5. Consistency and standards
    3. Finalizing CoreModule
    4. Summary
  3. Feature Modules
    1. Player and recorder modules
      1. A shared model for our data
      2. Scaffolding out the service APIs
      3. Implementing LogService
      4. Implementing DatabaseService
        1. Create AuthService to help handle the authenticated state of our app
      5. Prepare to bootstrap the AppModule 
    2. Summary
  4. Our First View via Component Building
    1. Our first view via component building
      1. All about the GridLayout
        1. Back to our layout
      2. Building TrackList component
        1. Building a dialog wrapper service to prompt the user
        2. Integrating DialogService into our component 
        3. Creating an Angular Pipe - OrderBy 
      3. Building PlayerControls component
      4. Quick preview 
        1. Preview  on iOS
        2. Preview on Android
    2. Summary
  5. A prettier view with CSS
    1. It's time to get classy
      1. Meet the NativeScript core theme
        1. Adjusting the status bar background color and text color on iOS and Android
    2. Summary
  6. Routing and Lazy Loading
    1. Get your kicks on Route 66
      1. Providing NSModuleFactoryLoader for NgModuleFactoryLoader
      2. Creating MixerModule
      3. Understanding Angular's Dependency Injector when lazy loading modules
    2. Creating AuthGuard for RecorderModule
    3. Handling late feature requirements – managing compositions
    4. Summary
  7. Running the App on iOS and Android
    1. Taking command…
      1. tns run <platform>
      2. tns debug <platform>
      3. tns build <platform> 
    2. Android Keystores
      1. Creating a new keystore
      2. Android Google Play Fingerprints
    3. Back in command
      1. The tns plugin command
      2. The tns install <dev_plugin> command
      3. The tns create <project_name> command
      4. The tns info command
      5. The tns platform [add|remove|clean|upgrade] <platform> command
      6. The tns test <platform> command
      7. The tns device command
      8. The tns doctor command
      9. The tns help command
    4. TNS command-line cheatsheet
    5. Summary
  8. Building the Multitrack Player
    1. Implementing our multitrack player via the nativescript-audio plugin
      1. Building the TrackPlayerModel for our multitrack player
      2. Let the music play!  
      3. Polishing the implementation
        1. Using NativeScript's strengths by tapping directly into the native API of the underlying iOS AVAudioPlayer instance from the nativescript-audio plugin
      4. Creating a custom ShuttleSliderComponent
      5. Creating SlimSliderDirective for iOS and Android native API modifications
    2. Summary
  9. Building an Audio Recorder
    1. Phase 1 – Building an audio recorder for iOS
      1. Challenge detour – Integrate Swift based library into NativeScript 
        1. Integrating a custom-built iOS framework into NativeScript
      2. Setting up native API type checking and generate AudioKit TypeScript definitions
      3. Build recorder with AudioKit
        1. How to convert Swift/ObjC methods to NativeScript
      4. Building custom reusable NativeScript view for native audio Waveform display
      5. Integrate a custom NativeScript view into our Angular app
      6. Creating the Recorder View layout
        1. Finishing implementation with RecorderService
    2. Phase 2 – Building an audio recorder for Android
      1. Using nativescript-audio's TNSRecorder for Android in our RecordModel
    3. Summary
  10. Empowering Your Views
    1. Multiple item templates with NativeScript's ListView
      1. Serializing data for persistence and hydrating it back upon retrieval
      2. Leveraging Angular directives to enrich the NativeScript Slider with more unique characteristics
        1. Graphic and resource handling for Android
    2. Summary
  11. @ngrx/store + @ngrx/effects for State Management
    1. Understanding Redux and integrating @ngrx/store
      1. What is @ngrx/store?
      2. Designing the state model
      3. Installing and integrating @ngrx/store
        1. Providing the initial app state excluding any lazily loaded module state
      4. Installing and integrating @ngrx/effects
      5. Providing lazily loaded feature module state
      6. Inspect the code! Exploring more on your own
    2. Summary
  12. Polish with SASS
    1. Polishing with SASS
      1. Using font icons with the nativescript-ngx-fonticon plugin
      2. Finishing touches
    2. Summary
  13. Unit Testing
    1. Unit testing
      1. Angular testing
        1. Running the tests
        2. Unexpected test failure
          1. Why did it fail?
        3. Test passes
      2. NativeScript testing framework
        1. Running the tests
    2. Summary
  14. Integration Testing with Appium
    1. Integration testing
      1. Configuration
      2. Creating a test
      3. More Appium testing
      4. Automated testing
        1. GitHub and Travis integration
    2. Summary
  15. Deployment Preparation with webpack Bundling
    1. Using webpack to bundle the app
      1. Preparing to use webpack
        1. Solution #1: Unexpected value 'SlimSliderDirective...'
        2. Solution #2: Cannot determine the module for class SlimSliderDirective...
        3. Solution #3: Error encountered resolving symbol values statically
        4. Solution #4 and #5: Can't resolve './app.css'
      2. Detour – Overview of developing a webpack plugin
    2. Summary
  16. Deploying to the Apple App Store
    1. Preparing for App Store distribution
      1. App ID, certificates, and profiles
      2. Configure the app metadata such as App ID and Display Name
        1. App ID
        2. Display name
      3. Create your app icons and splash screens
      4. Build the app for release
      5. Upload to iTunes Connect
        1. Uploading your .ipa file
    2. Summary
  17. Deploying to Google Play
    1. Building an APK for Google Play
      1. Uploading to Google Play
        1. APK
    2. Summary