Mastering NativeScript: A Beginner's Guide

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

Mastering NativeScript helps readers master the NativeScript framework for faster and more robust mobile app development.

Mobile devices have progressed from a mere means of communication to becoming a critical business tool in recent years. People are increasingly glued to their smartphones as technology advances at breakneck speed. The significance of mobile app development cannot be overstated.

And when it comes to mobile app development, NativeScript is a hot topic.

NativeScript was introduced by Telerik, and it allows you to develop truly native apps for iOS and Android under a single code base using JavaScript or TypeScript, XML, and a subset of CSS. The charm of NativeScript is that it enables us to code once for multiple platforms (iOS≤7.1 and Android≤4.1), simultaneously sharing code amongst them while still allowing developers to add platform-specific instructions with flawless execution. As a result, you may release an app for both platforms using a single code base.

NativeScript is comprised of three parts: a JavaScript (JS) virtual machine, a runtime, and a bridge module. The JS virtual machine is used for interpretation and execution of JavaScript code. The bridge module then converts the calls to platform-specific API calls and returns the outcome to the caller.

NativeScript is a very appealing paradigm, and is rising in popularity as we speak. It can be used to construct practically any program, including communication apps (news and social networking), gaming applications (Chess, Tic-Tac-Toe, Pinball), and chat apps. It can also handle maps and geolocation apps.

With Mastering NativeScript, learning NativeScript becomes straightforward, which will undoubtedly help readers advance their careers.

The Mastering Computer Science series is edited by Sufyan bin Uzayr, a writer and educator with over a decade of experience in the computing field.

Author(s): Sufyan bin Uzayr
Series: Mastering Computer Science
Publisher: CRC Press
Year: 2022

Language: English
Pages: 279
City: Boca Raton

Cover
Half Title
Series Page
Title Page
Copyright Page
Contents
Preface
About the Author
CHAPTER 1: The Basics
JavaScript FRAMEWORK OVERVIEW
Angular
Vue.js
ReactJS
Node.js
NativeScript OVERVIEW
HOW ARE NativeScript APPS CREATED?
WHAT NativeScript MEANS IN THE CONTEXT OF MOBILE DEVELOPMENT
Various Sorts of Mobile Apps
WHY IS NativeScript IMPORTANT?
Getting to Market Quickly
WHAT KINDS OF APPS MAY BE CREATED WITH NativeScript?
Graphic Intensive Games
Line-of-Business and Consumer Apps
FEATURES OF NativeScript
BENEFITS OF NativeScript
WORKING WITH NativeScript
Taking a Deeper Dive
INSTALLATION OF NativeScript
Prerequisites
Verify Node.js
CLI Setup
setupcli
cli
Installing the NativeScript Playground Application
Configuration for Android and iOS
ARCHITECTURE IN NativeScript
Overview of the NativeScript Framework at a High Level
A NativeScript APPLICATION’S WORKFLOW
Root Modules
Page Modules
ANGULAR-BASED NativeScript APPLICATION WORKFLOW
ANGULAR APPLICATION IN NativeScript
Developing the Application
Application Architecture
Configuration
Modules of Node
Source Code of Android
Source Code of iOS
The Application’s Source Code
Run Our App
Run Our App on Our Device
TEMPLATES FOR NativeScript
Using a Template
Template for Navigation
Template for Tab Navigation
Template for Master-Detail
Customized Template
Structure
WIDGETS IN NativeScript
Button
Label
TextField
TextView
SearchBar
Switch
Slider
Progress
ActivityIndicator
Image
WebView
DatePicker
TimePicker
LAYOUT CONTAINERS IN NativeScript
AbsoluteLayout
DockLayout
GridLayout
StackLayout
WrapLayout
FlexboxLayout
CHAPTER 2: Structuring Your App
NAVIGATION IN NativeScript
Fundamental Ideas
Forward Navigation
Backward Navigation
Lateral Navigation
Bottom and Tab Navigation
Angular-Based Navigation
Page-Router-Outlet
Router Link (nsRouterLink)
Router Extension
Custom Route Reuse Strategy
Routes
EVENTS HANDLING IN NativeScript
Observable Class
Event Listener
Modifying BlankNgApp
DATA BINDING IN NativeScript
One-Way Data Binding
Two-Way Data Binding
MODULES FOR NativeScript
Application
Console
Application-settings
Image-source
Timer
Trace
ui/image-cache
Connectivity
Modules of Functionality
The Module of UI
PLUGINS FOR NativeScript
Adding Plugins
Importing Plugins
Updating Plugins
Removing Plugin
Building Plugins
Creating Plugins
NATIVE APIs USING JavaScript
Marshaling
Numeric Values
Android Environment
Strings
Android
iOS Environment
Arrays
Declaration of an Array
Array Declaration in Android
Classes and Objects
Android Environment
iOS Environment
NativeScript – ANDROID APPLICATION DEVELOPMENT
Sidekick for NativeScript
Publish Our Sidekick App to Google Play Console
Publish Our App to Google Play
Procedure for Releasing our App
OUR FIRST APPLICATION
Setting Up NativeScript
Creating the APP
The Entry Point File
UI Markup Adding
JavaScript Code
Initialization
The pageLoaded() Function
The newNote() Function
The btnLoaded() Function
The openCamera() Function
The saveNote() Function
The deleteNote() Function
Adding Styles
Running and Debugging the App
DEBUGGING
LAYOUTS IN NativeScript
GridLayout
StackLayout
ScrollView
UI LAYOUT CONTAINERS
AbsoluteLayout
DockLayout
stretchLastChild
The GridLayout
StackLayout
WrapLayout
FlexboxLayout
CHAPTER 3: Refining Your App
EIGHT STEPS FOR LAUNCHING OUR NativeScript APP INTO APP STORES
Step 1: Design Our App Icons
Step 2: Create Our Splash Screens
Step 3: Set Up Our Metadata
Application id
Display Name
Other Metadata
Step 4 (Optional): Install Webpack
Step 5: Create an Android Release Build
Step 6: Google Play
Screenshots
Feature Graphic
APK
Step 7: Create an iOS Release Build
Apple Developer Account
Certificates, Identifiers, and Profiles
Generating Your .ipa File
Step 8: Connect to iTunes
Create a New App
Screenshots
Uploading Your .ipa File
IN NativeScript, WORK WITH DATA
Why Do We Require Dynamic User Interfaces?
The Path to a More Dynamic UI
Data Binding
GETTING OUR APP READY FOR DISTRIBUTION
Overview
Set the Bundle ID
Configure the Bundle ID for a Mac App Created with Mac Catalyst
Configure the Version Number and Build String
Configure the App Category
Assign a Team to the Project
Edit the Deployment Info Settings
Add an App Icon and an App Store Icon
Provide a Launch Screen (iOS)
To Get Access to Protected Resources, Provide Usage Descriptions
Set Up the App Sandbox and Hardened Runtime (macOS)
Configure the Copyright Key (macOS)
Add Export Compliance Data
NativeScript SIDEKICK ALLOWS US TO CREATE iOS APPS ON WINDOWS
What Exactly Is a Cloud Build?
But What If We Weren’t Required to Use this Method?
Is It Still Possible for Us to Build Locally?
How Do We Create a Build with Sidekick?
iOS Development on Windows
How Do Continuous Integration Build Work?
PROTECT OUR MOBILE APP
Source Code Protection
Obfuscation and Minification
Jscrambler (Protection+++)
Restriction of Access via Private App Stores
Options for Enterprise MAM/MDM
Apple Developer Enterprise Program
Maintain Business Logic on the Cloud
Take Caution When Sharing Keys
CHAPTER 4: Angular and NativeScript
CREATE A WEB AND MOBILE APPLICATION WITH Angular AND NativeScript
Install the Global NPM Dependencies That Are Necessary
Create a New Angular CLI Project That Includes NativeScript Support
Understanding the Schematic Changes and Angular Development Process
Using the NativeScript CLI to Run an Angular CLI Project on Android or iOS
Angular 10 Upgrading Suggestions
Upgrading Our Angular 10 Project
Package Should Be Updated .json
Fixing Imports
Additional Suggestions
USING Angular, CREATE A NativeScript APP
Angular BOOTSTRAP
The Bootstrap Process
NativeScript Application Option
Customizing DI Providers
Objects Injected by the Platform
Autoinjected Objects
Advanced Bootstrap
NAVIGATION
NativeScript Route Module
Page-Router-Outlet
Router Link
Router Extention
Custom Route Reuse Strategy
Configuration
Mobile Navigation Patterns
Angular Navigation
Forward Navigation
Backward Navigation
Lateral Navigation
Hub Navigation
Bottom Navigation and Tab Navigation
Model View Navigation
SideDrawer Navigation
DATA BINDING
One-Way vs. Two-Way Data Binding
Interpolation
Data Converters
USING PLUGINS
Finding Plugins
Installing Plugins
Installing Plugins as Developer Dependencies
Importing and Using Plugins
Removing Plugins
CHAPTER 5: Digging Deeper
INSTALL ANDROID EMULATORS
Creating an Android Virtual Device in Android Studio
Using a Command-Line Tool to Create an Android Virtual Device
CUSTOM webpack CONFIGURATION
What Exactly Is webpack Configuration?
How to Use Custom webpack Configuration
Custom Application and Activity (Android)
Add More Rules for Specific Files
Delete the Default Plugin
iOS APP EXTENSIONS
NativeScript App Extensions
Including an App Extension in an Existing Application
Adding an App Extension to a Plugin
iOS WatchOS Applications
NativeScript Application for WatchOS
USING JavaScript TO ACCESS NATIVE APIs
Numeric Types
String
Boolean
Array
Class and Object
Using Classes and Objects on iOS
NSDictionary
Undefined and Null
TypeScript via IntelliSense and Access to Native APIs
METADATA
Metadata Filtering
Rule Syntax
Rule Semantics
Troubleshooting
MEMORY MANAGEMENT
Terms
iOS
Splice LifeCycle
Implementation Characteristics
Android
Splice LifeCycle
Implementation Characteristics
Premature Collection
Leaks
Half-Dead Splice
Splices Die Fast
Splices Die Hard
Java Friendly
Common Tips
USER INTERFACE LAYOUT PROCESS
Measure Pass
Layout Pass
Layout Properties
Margins
Padding
Alignments
Percentage Support
iOS Safe Area Support
iosOverflowSafeArea Property
Layout
Predefined Layouts
Default Layouts Provided by NativeScript
COMPONENTS
Action Bar
Usage
ActionItem
NavigationButton
Styling
Properties
Animation
Animation Properties
Button
Usage
Styling
Gestures
Slider
Usage
Styling
Switch
Usage
Styling
DatePicker
Usage
Styling
HtmlView
Usage
TimePicker
Usage
Tabs
Usage
Styling
WebView
Usage
Tips & Tricks
USER INTERFACE STYLING
Applying CSS Styles
Application-Wide CSS
Component-Specific CSS
Adding CSS String
Adding CSS File
Inline CSS
Platform-Specific CSS
Supported Selectors
Type Selector
Class Selector
ID Selector
Hierarchical Selector
Attribute Selector
Pseudo Selector
BASICS OF THE NativeScript COMMAND-LINE INTERFACE
Developing Applications
Running Applications
Using PREVIEW Quick Setup
Use tns Preview Command
APPRAISAL
BIBLIOGRAPHY
INDEX