NativeScript for Angular Mobile Development

Nathan Walker, Nathanael J. Anderson

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781787124691
• Edition: 1
• Topic: Computer Science
• Subtopic: Open Source Programming
• Index: Computer Science

Learn NativeScript to build native mobile applications with Angular, TypeScript, JavaScriptAbout 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 APIsWho This Book Is ForThis 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 AppiumIn DetailNativeScript 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 approachThis 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.

Building an Audio Recorder

Recording audio is the most performance-intensive operation our app must handle. It is also the one feature where having access to native APIs will be the most rewarding. We want our users to be able to record with the lowest latency possible for the mobile device in order to achieve the highest fidelity of sound. Additionally, this recording should optionally happen over the top of an existing mix of pre-recorded tracks all playing in sync .

Since this phase of our app development will dive the deepest into platform-specific native APIs, we will split our implementations into two phases. We will first build out the iOS-specific details of the recording features, followed by Android.

In this chapter, we will cover the following:

• Building a feature rich cross-platform audio recorder for iOS and Android with a consistent API
• Integrating iOS framework libraries, such as AudioKit (http://audiokit.io), which was built entirely with Swift
• How to convert Swift/Objective C methods to NativeScript
• Building custom reusable NativeScript view components based on native APIs, as well as how to use them inside Angular
• Configuring a reusable Angular Component that can both be used via routing and opened via a popup modal
• Integrate Android Gradle libraries
• How to convert Java methods to NativeScript
• Using multiple item templates with NativeScript's ListView

Phase 1 – Building an audio recorder for iOS

The audio capabilities of the iOS platform are impressive, to say the least. A group of wonderfully talented audiophiles and software engineers have collaborated on building an open source framework layer on top of the platform's audio stack. This world class engineering effort is the awe inspiring AudioKit (http://audiokit.io/), led by the fearless Aurelius Prochazka, a true pioneer in audio technology.

The AudioKit framework is written entirely with Swift, which introduces a couple of interesting surface-level challenges when integrating with NativeScript.

Challenge detour – Integrate Swift based library into NativeScript

At the time of this writing, NativeScript can work with Swift if the codebase properly exposes the classes and types to Objective-C via what's called a bridging header, allowing both the languages to be mixed or matched. You can learn more about what a bridging header is here: https://developer.apple.com/library/content/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html.
This bridging header is auto generated when the Swift codebase is compiled into a framework. Swift offers rich language features, some of which do not have a direct correlation to Objective C. Full featured support for the latest Swift language enhancements will likely come to NativeScript eventually however at the time of this writing there are a couple considerations to keep in mind.

AudioKit utilizes the best of what the Swift language has to offer, including enriched enum capabilities. You can learn more about the expanded enum features in the Swift language here:
https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/Enumerations.html

In particular, there is this from the documentation: "they adopt many features traditionally supported only by classes, such as computed properties to provide additional information about the enumeration’s current value, and instance methods to provide functionality related to the values the enumeration represents.

Such enums are foreign to Objective C and, therefore, cannot be made available in the bridging header. Any code that uses Swift's exotic enums will be simply ignored when the bridging header is generated at compile time, resulting in Objective C not being able to interact with those sections of the code. This means you will not be able to use a method from a Swift codebase in NativeScript which utilizes these enhanced constructs out of the box (at the time of this writing).

To remedy this, we will fork the AudioKit framework and flatten the exotic enums used in the AKAudioFile extension files, which provide a powerful and convenient export method we will want to use to save our recorded audio files. The exotic enum we need to modify looks like this (https://github.com/audiokit/AudioKit/blob/master/AudioKit/Common/Internals/Audio%20File/AKAudioFile%2BProcessingAsynchronously.swift):

// From AudioKit's Swift 3.x codebase

public enum ExportFormat {
 case wav
 case aif
 case mp4
 case m4a
 case caf

 fileprivate var UTI: CFString {
 switch self {
 case .wav:
 return AVFileTypeWAVE as CFString
 case .aif:
 return AVFileTypeAIFF as CFString
 case .mp4:
 return AVFileTypeAppleM4A as CFString
 case .m4a:
 return AVFileTypeAppleM4A as CFString
 case .caf:
 return AVFileTypeCoreAudioFormat as CFString
 }
 }

 static var supportedFileExtensions: [String] {
 return ["wav", "aif", "mp4", "m4a", "caf"]
 }
}

This is unlike any enum you may be familiar with; as you can see, it includes properties in addition to what enums have. When this code is compiled and the bridging header is generated to mix or match with Objective-C, the bridging header will then exclude any code that uses this construct. We will flatten this out to look like the following:

public enum ExportFormat: Int {
 case wav
 case aif
 case mp4
 case m4a
 case caf
}

static public func stringUTI(type: ExportFormat) -> CFString {
 switch type {
 case .wav:
 return AVFileTypeWAVE as CFString
 case .aif:
 return AVFileTypeAIFF as CFString
 case .mp4:
 return AVFileTypeAppleM4A as CFString
 case .m4a:
 return AVFileTypeAppleM4A as CFString
 case .caf:
 return AVFileTypeCoreAudioFormat as CFString
 }
}

static public var supportedFileExtensions: [String] {
 return ["wav", "aif", "mp4", "m4a", "caf"]
}

We will then adjust the portions of the AKAudioFile extension to use our flattened properties. This will allow us to manually build AudioKit.framework we can use in our app, exposing the method we want to use: exportAsynchronously.

We won't go over the details of manually building AudioKit.framework, as it is well documented here: https://github.com/audiokit/AudioKit/blob/master/Frameworks/INSTALL.md#building-universal-frameworks-from-scratch. With our custom-built framework, we are now ready to integrate it into our app.

Integrating a custom-built iOS framework into NativeScri...

Table of contents

• Title Page
• Copyright
• Credits
• Foreword
• About the Authors
• About the Reviewer
• www.PacktPub.com
• Customer Feedback
• Preface
• Get Into Shape with @NgModule
• Feature Modules
• Our First View via Component Building
• A prettier view with CSS
• Routing and Lazy Loading
• Running the App on iOS and Android
• Building the Multitrack Player
• Building an Audio Recorder
• Empowering Your Views
• @ngrx/store + @ngrx/effects for State Management
• Polish with SASS
• Unit Testing
• Integration Testing with Appium
• Deployment Preparation with webpack Bundling
• Deploying to the Apple App Store
• Deploying to Google Play