NativeScript is an open source framework built by Progress to build truly native mobile apps with Angular, TypeScript, or even good old plain JavaScript. Angular is also an open source framework built by Google that offers declarative templates, dependency injection, and rich modules to build applications. Angular's versatile view handling architecture allows your views to be rendered as real native UI components--native to iOS or Android--that offer superior performance with fluid usability. This decoupling of the view rendering layer in Angular, combined with the power of native APIs in NativeScript, has come together to create the powerful combination that is the exciting world of NativeScript for Angular.
This book focuses on the key concepts you need to know to build NativeScript for your Angular mobile app on iOS and Android. We'll build a fun multitrack recording studio app, touching on the powerful native key concepts you need to know when you start building an app of your own. Having the right structure is critical to developing an app that can scale while also being highly maintainable and portable, so we'll start with project organization using Angular's @NgModule. We'll use Angular Components to build our first view and then create services that we can use via Angular's dependency injection.
You'll understand NativeScript's tns command-line utility to run the app on iOS and Android. We'll integrate third-party plugins to construct some of the core features. Next, we'll integrate the @ngrx store plus effects to establish some solid practices (Redux inspired) to deal with state management. Having a great data flow and solid architecture is meaningless if the app doesn't look good or offer a great user experience, so we'll use SASS to polish a style for our app. After that, we'll deal with debugging problems and invest some time into writing tests to prevent bugs in the future. Lastly, we'll bundle our app with webpack and deploy it to the Apple App Store and Google Play.
By the end of the book, you'll know the majority of the key concepts needed to build a NativeScript for Angular app.
Chapter 1, Get into Shape with @NgModule, discusses the @NgModule decorator, which clearly defines a segment of functionality in your app . This will be the organizational unit of your project. Before you begin building your app, you will gain many benefits by taking a moment and thinking about the various units/sections/modules that you may need/want for your app.
Chapter 2, Feature Modules, teaches you that structuring your app with feature modules offers many advantages for maintainability in the future and reduces duplication of code throughout your app.
Chapter 3, Our First View via Component Building, actually lets us see our app for the first time, where we need to build a Component for our first view.
Chapter 4, A prettier view with CSS, looks at how to turn our first view into something pretty amazing with a few CSS classes. We will also focus on how to utilize NativeScript's core theme to provide a consistent styling framework to build on.
Chapter 5, Routing and Lazy Loading, allows users to navigate around the various views in our app that will need to set up routing. Angular provides a powerful router that, when combined with NativeScript, works hand in hand with the native mobile page navigation system on iOS and Android. Additionally, we will set up the lazy loading of various routes to ensure that our app's launch time remains as speedy as possible.
Chapter 6, Running the App on iOS and Android, focuses on how to run our app on iOS and Android via NativeScript's tns command-line utility.
Chapter 7, Building the Multitrack Player, covers plugin integration and provides a direct access to Objective C/Swift APIs on iOS and Java APIs on Android via NativeScript.
Chapter 8, Building an Audio Recorder, works with native APIs to build an audio recorder for iOS and Android.
Chapter 9, Empowering your views, takes advantage of Angular's flexibility and NativeScript's power to get the most out of your app's user interface.
Chapter 10, @ngrx/store + @ngrx/effects for state management, manages app state via a single store with ngrx.
Chapter 11, Polish with SASS, integrates the nativescript-dev-sass plugin to polish our app's style with SASS.
Chapter 12, Unit testing, set up the Karma unit testing framework to future proof our app.
Chapter 13, Integration Testing with Appium, sets up Appium for integration testing.
Chapter 14, Deployment Preparation with webpack Bundling, works with webpack to optimize the bundle for release.
Chapter 15, Deploying to the Apple App Store, lets us distribute our app via the Apple App Store.
Chapter 16, Deploying to Google Play, lets us distribute our app via Google Play.
This book assumes that you are using NativeScript 3 or higher and Angular 4.1 or higher. If you plan to follow along for iOS development, you will need a Mac with XCode installed to run the accompanying app. You should also have the Android SDK tools installed with at least one emulator, preferably running 7.0.0 with API 24 or higher.
This book is for all types of software developer who are interested in mobile app development for iOS and Android. It’s specifically tailored to benefit those who already have a general understanding of TypeScript and some basic-level Angular features. Web developers who are just getting into mobile app development for iOS and Android may also gain a lot from the content in this book.
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Various common properties (padding, font size, font weight, color, background color, and more) are supported. Also, shorthand margin/padding works as well, that is, padding: 15 5."
A block of code is set as follows:
[default]
export class AppComponent {}When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
[default]
public init() {
const item = {};
item.volume = 1;
}Any command-line input or output is written as follows:
# tns run ios --emulatorNew terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Running our app again, we now see the login prompt when we tap the Record button".
Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply email [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for this book 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 files emailed directly to you. You can download the code files by following these steps:
- Log in or register to our website using your email address and password.
- Hover the mouse pointer on the
SUPPORTtab at the top. - Click on
Code Downloads & Errata. - Enter the name of the book in the
Searchbox. - Select the book for which you're looking to download the code files.
- Choose from the drop-down menu where you purchased this book from.
- Click on
Code Download.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
- WinRAR / 7-Zip for Windows
- Zipeg / iZip / UnRarX for Mac
- 7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/NativeScript-for-Angular-Mobile-Development. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/NativeScriptforAngularMobileDevelopment_ColorImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title. To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at [email protected] with a link to the suspected pirated material. We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.