Getting Started with NativeScript - Nathanael J. Anderson - E-Book

Getting Started with NativeScript E-Book

Nathanael J. Anderson

0,0
26,39 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

Explore the possibility of building truly native, cross-platform mobile applications using your JavaScript skill—NativeScript!

About This Book

  • Save your marketing time by building for iOS, Android, and Windows Mobile platforms simultaneously
  • Be an ace at utilizing the features of NativeScript and its ability to communicate with each of the host device libraries natively
  • Proficiently, build your fully cross-platform communication application exhibiting the fundamentals of NativeScript

Who This Book Is For

If you are a JavaScript developer and want to build cross-platform applications, then this book is just the right one for you!

What You Will Learn

  • Install and compile your application in NativeScript
  • Get important know-how on the NativeScript project structure
  • Develop and style your screens for multiple platforms
  • Create a full-featured cross-platform communication application
  • Import and use several third-party components
  • Simplify and deal with device resolution and cross-platform issues
  • Test and deploy your application

In Detail

NativeScript allows you to build a fast cross-platform application that has a native UI. NativeScript is a true cross-platform framework that generates native speed applications using the native components of the host platform, all using JavaScript. Although NativeScript allows you to build your application in JavaScript, you have full access to the host OS from your code, allowing you to easily tweak or use new platform features instantly at native code speeds.

Whether you have already developed multiple applications or zero applications, this book will help you to develop your next application in a cross-platform framework quickly, saving you a massive amount of time and money.

This book concisely shows you NativeScript's built-in framework that allows you to rapidly develop a fully-working compiled cross-platform application in just a few chapters. It starts by laying the foundation of NativeScript and working through the fundamentals to create a basic shell of the application. Moving on, you'll see how to build a full-fledged application step by step. We'll show you how to use plugins, and how to communicate with the native OS libraries easily so that you can customize your application as if your app was created in Java or Objective C. We then deal with the issues that arise from being cross platform and compensate for the different screen sizes, screen resolutions, and device abilities. Finally, we progress to testing and deploying your app.

Style and approach

A stepwise guide for building cross-platform mobile applications with the help of easy-to-understand examples.

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern

Seitenzahl: 215

Veröffentlichungsjahr: 2016

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Getting Started with NativeScript
Credits
Foreword
About the Author
About the Reviewer
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
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
Errata
Piracy
Questions
1. Introduction to NativeScript
NativeScript
Telerik's NativeScript
Other competitors
NativeScript uniqueness
NativeScript is easy
NativeScript and TypeScript
What is TypeScript?
TypeScript's use in NativeScript
Choosing a development language
Common modules
Installing NativeScript
Prerequisites
node.js
iOS
Android
Installation
Installation help
The NativeScript command line
NativeScript commands
Creating your first application
Creating the application in easy steps
Running the app
Summary
2. The Project Structure
Project directory overview
The root folder
The app folder
The lib folder
The hooks folder
The node_modules folder
The tns-core-modules folder
The platforms folder
The platforms/android folder
Bad resource files on Android
Compiled Android application location
The platforms/iOS folder
The app folder
The .gradle folder
The App_Resources folder
The fonts folder
The app folder files
The package.json file
License
App.js
App.css
Application page
The main-page.js file
The main-page.css file
The main-page.xml file
The main-view-model.js file
Our rewrite of the main-view-model.js file
Foundational components
Application component
Frame component
Page component
Creating a second page
Creating additional files and pages
Creating settings.js
Navigating to another page
Running the application
Viewing our screen
Summary
3. Declarative UI, Styling, and Events
Declarative UI
XML parser
Page, StackLayout, label, and more
<Page ...> node
<StackLayout ...> node
<Label ...> node
FormattedString component
Complex properties
<Button ...> node
Second <Label...> node
Declarative UI and components
Visual components
Using the Declarative UI for our settings page
Our settings.xml file
Binding and event system
Event system
Binding
Styling the UI
What is CSS?
Why use CSS?
How to use CSS
Configuring your CSS Rules
Existing CSS properties
Exploring app.css
Trying CSS out and styling our application
Styling on your own
Summary
4. Building a Featured Application
Layouts
StackLayout
WrapLayout
AbsoluteLayout
DockLayout
GridLayout
Building our featured application
Nonvisual components
Dialogs
Alert dialog
Confirm dialog
Prompt dialog
Login dialog
Action dialog
Promises
The settings screen Declarative UI
GridLayouts
Building the main screen
JavaScript code
Declarative UI
Main page Declarative UI
Main page body
ScrollViews
More about bindings
Repeaters
Main-body footer
The main-page.css file
Application CSS
Fonts
Icons
Communication with the server
Trying out our application
The server
Setting up your own server
Trying crossCommunicator out.
Summary
5. Installing Third-Party Components
Places to find third-party components
The Telerik plugin site
npmjs.com
The NativeScript unofficial plugin list
How to install a third-party plugin component
Installing the vibration plugin
Installing the webSockets plugin
Installing the Telerik SideDrawer plugin
Using third-party components
Using the vibration plugin
Using Websockets
Using Telerik's side drawer
Easily using the components
Useful third-party components
Summary
6. Platform Differences
Android and iOS differences
The soft keyboard
The Page.loaded event
Code differences
Platform classes
Declarative UI
Declarative UI properties
Declarative UI platform qualifiers
Platform- and device-specific files
Screen size differences
Fonts
Our own custom resource folders
Compiled application resources on iOS
Compiled application resources on Android
Device differences
Summary
7. Testing and Deploying Your App
Testing your application
Test frameworks
Local testing of your code
Unit testing on the device
Installing the test framework
Writing tests
Running tests
Testing your app on a device or emulator
Understanding the call stack
Android call stack
iOS call stack
Debugging your application
Publishing your application
Publishing to iOS
Summary
Index

Getting Started with NativeScript

Getting Started with NativeScript

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: January 2016

Production reference: 1220116

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78588-865-6

www.packtpub.com

Credits

Author

Nathanael J. Anderson

Reviewer

TJ VanToll

Commissioning Editor

Veena Pagare

Acquisition Editor

Prachi Bisht

Content Development Editor

Mehvash Fatima

Technical Editor

Abhishek R. Kotian

Copy Editor

Lauren Harkins

Project Coordinator

Shipra Chawhan

Proofreader

Safis Editing

Indexer

Monica Ajmera Mehta

Production Coordinator

Conidon Miranda

Cover Work

Conidon Miranda

Foreword

Are you tired of writing the same mobile app from scratch for iOS, Android and Windows? Yes? Then, you should be glad you found NativeScript!

Owing to the mobile platforms diversification, it is clear that to build a successful mobile application, you should make it available on all of the major mobile marketplaces, namely, Apple AppStore, Google PlayStore, and Microsoft Windows Store. This created a need for companies and developers to publish native apps that are available on all three major mobile stores without compromising on the native user experience. The problem, however, is that these three operating systems are very different and companies need to implement three different applications for these stores. Essentially, your company has to write and maintain multiple implementations for the same problem. Teams write (and have to support) the same apps multiple times. There is a good chance that bugs reported on one platform also exist on the others but remain unnoticed. Apps that are meant to behave identically on all platforms may exhibit subtle differences due to their differing implementations. Also, shipping new features at the same time on all platforms is difficult. This is neither optimal, nor very productive and requires a significant investment to gain the knowledge of three different operating systems, languages, IDEs, APIs, and marketplaces. There has got to be a better way. Enter NativeScript—a framework using the native platform APIs, rendering and layout capabilities to deliver ultimate user experience and will allow developers to reuse their coding skills, eliminating the need to learn new languages and IDEs.

The NativeScript framework enables developers to use the pure JavaScript language to build native mobile applications running on all major mobile platforms—Apple iOS, Google Android, and Windows Universal. The application's UI stack is built on the native platform rendering and layout engine using native UI components, and because of that, no compromises with the User Experience of the applications are made. It is also worth mentioning that a full native API access is provided using JavaScript.

This book has everything you need to get started with NativeScript. It starts with the fundamentals, such as the project structure, the command-line interface, how to use basic UI element, how to use third-party native components, and finally, how to target different platforms with NativeScript.

The author, Nathanael Anderson, is one of the faces of NativeScript. He has a deep understanding of how the framework operates from inside out and is the best person who can teach you how to use it.

"I'm confident that by reading this book, you will be able to quickly get into NativeScript and start building your next cross-platform native mobile application."

Valio Stoychev

Product Manager NativeScript at Telerik

About the Author

Nathanael J. Anderson has been developing software for over 20 years in a wide range of industries, including areas of games, time management, imaging, service, printing, accounting, land management, security, web, and even (believe it or not) some successful government projects. He is currently a contract developer for master technology and can create a solution for several types of applications (native, web, mobile, and hybrid) running on any operating system.

As a senior developer engineer, he can work, tune, and secure everything from your backend servers to the final destination of the data on your desktop or mobile devices. By understanding the entire infrastructure, including the real and virtualized hardware, he can completely eliminate different types of issues in all parts of a framework.

Currently, he has multiple highly rated cross-platform plugins for NativeScript, and he works heavily in the NativeScript community by providing things such as bleeding edge build servers to build knightly code. He has also provided multiple patches and features to the main NativeScript project.

About the Reviewer

TJ VanToll is a senior developer advocate for Telerik, a jQuery team member, and the author of jQuery UI in Action. He has over a decade of web development experience—specializing in performance and the mobile Web. He speaks about his research and experiences at conferences around the world and has written for publications such as Smashing Magazine, HTML5 Rocks, and MSDN Magazine. You can follow him on Twitter at @tjvantoll and on GitHub at tjvantoll.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by PacktCopy and paste, print, and bookmark contentOn demand and accessible via a web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.

Preface

Welcome to Getting Started with NativeScript. In this book, we are going to go on an awesome journey of building cross-platform applications in JavaScript. We will cover everything from how NativeScript works, to how to test, debug, and finally deploy your application. Over the course of this book, we are going to explore how to build a full-featured, cross-platform messaging platform. The application will work the same on all NativeScript-supported platforms. With your ability to develop in JavaScript and the insights provided in this book, you will be releasing your own cool applications in no time.

What this book covers

Chapter 1, Introduction to NativeScript, will teach you about NativeScript and how to install and build your first NativeScript application.

Chapter 2, The Project Structure, provides an overview of what all the different files and folders are used for, and we will build and switch to a second screen for our application here.

Chapter 3, Declarative UI, Styling, and Events, works through how to create screens using the Declarative UI, style them and then how to create and respond to events.

Chapter 4, Building a Featured Application, helps you to actually sit down and build a full-featured, cross-device messaging application using just the standard NativeScript components.

Chapter 5, Installing Third-Party Components, delves into how to install several different types of third-party components to enhance our cool communication application.

Chapter 6, Platform Differences, looks at how to deal with the differences between iOS and Android and the differences in the actual physical characteristics of the devices even on the same platform.

Chapter 7, Testing and Deploying Your App, looks at how to use several different types of testing frameworks, how to debug your application, and finally, how to actually deploy your application.

What you need for this book

NativeScript is an open source project; as such, it uses technologies that can be freely downloaded from the Internet. You need to download and install a recent version of Node from http://nodejs.org. You also need a text editor so that you can edit your source code. If you are developing for Android, you need to download and install Java 7, Gradle 2.3, and the Android SDK. For iOS, you need to install Xcode 6.2 or a later version.

Who this book is for

If you are already a JavaScript developer and you want to finally build native cross-platform applications for iOS and Android using your skills, then this book is just for you!

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "which a require statement would load into your code."

A block of code is set as follows:

{ "name": "tns-template-hello-world", "main": "app.js", "version": "1.5.0", ... more json documentation fields... }

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

{ "nativescript": { "id": "org.nativescript.crossCommunicator", "tns-android": { "version": "1.5.0" },

Any command-line input is written as follows:

nativescript run ios --emulator

New terms and important words are shown in bold or italics. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "You can probably guess that the Label will still say Tap the button."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via 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 on www.packtpub.com/authors.

Customer support

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.

Downloading the example code

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 files e-mailed directly to you.

Errata

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 would 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 erratasubmissionform link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright 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.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

NativeScript and TypeScript

We are going to explain how parts of NativeScript are developed in TypeScript and what that means for you in terms of developing your awesome application using NativeScript.

What is TypeScript?

In 2012, Microsoft released an interesting language called TypeScript. This language is fully open sourced because the company felt it was something the JavaScript community needed. It is, in a nutshell, a superset of JavaScript with types and several other additional language features. If you write any code in TypeScript, you then have to use the TypeScript transpiler to convert the code from TypeScript back into JavaScript. One of the primary reasons people use TypeScript over regular JavaScript is that TypeScript offers the ability to do static type checking at the point it converts the code to JavaScript. So, you don't have a runtime hit, and you don't have to do a lot of runtime parameter checks if the code is all in TypeScript. This feature alone eliminates a type of bug that is very easy to access in JavaScript. In addition to static typing, it has several class/object type features that make inheritance and class definition considerably simpler and safer.

Note

Types possess the ability to add markup to code denoting the type expected:

private validateMe(name: string, password: string): boolean { };

The string and boolean are declarations telling what the exact parameter types and expected return type are. This allows the transpiler to verify that the code matches the static types during the building stage.

Transpiler is a shortened term from translation compiler used to mean the code is converted from one language to another language. So, in this case, we are translating the code from TypeScript into JavaScript.

TypeScript's use in NativeScript

The NativeScript command-line utility, common modules, and components are all written in TypeScript. TypeScript is then transpiled to JavaScript before it is distributed for all us developers to download, install, and use. So, unless you are actually pulling the open source code from the NativeScript repositories, then all the code you will see is in JavaScript.

Fortunately for us, the majority of the differences between TypeScript and JavaScript are fairly minor, so the code transpiled to JavaScript in almost all cases is very close to the original TypeScript, which still makes it very readable.

Note

Telerik just released a brand new module in v1.5.0 that will allow TypeScript to now be a first-class citizen in the development of your application. If you don't use this module, then you have to manually transpile all your TypeScript code each time before you build an application. After you execute a nativescript install typescript command, when the NativeScript command does anything with your code, it will automatically transpile all your TypeScript code first. This makes your development a much more streamlined process.

Choosing a development language

Since the final output of all the code must be JavaScript, you are able to write any of your applications or modules in TypeScript, CoffeeScript, or any other language that can be transpiled into JavaScript. This book is going to focus on doing everything in JavaScript as this is what the final code output must be for all the devices, and it is the common language that binds everything together.

Common modules

Common modules were created to solve the issue of JavaScript files polluting the global namespace with variables and functions that another JavaScript file could easily overwrite accidently. JavaScript allows you to redeclare or monkey patch your functions on a whim, which is part of what makes it so powerful. However, with that much power comes the ability to very easily shoot yourself in both feet simultaneously. Then, you are left scratching your head why you just lost both feet. To attempt to solve the issue of one included file function or variable being overwritten by another include file, developers came up with several techniques that evolved into the common module formats we use today. There are three standards available for you to use: the CommonJS module format, which is what node.js popularized; the AMD