NativeScript is one of the many approaches to write applications for both iOS and Android. The goal of this blog is to show you how easy it is to dive into it, with just a few simple steps you can have your first app running on your cell phone.
For that, we will cover the simplest development scenario for it:
- Choose your pill (whether it’s NativeScript native or combined with Vue.js or Angular)
- Choose your template or boilerplate
- Deploy -> Changes-> Redeploy
- Try it with your cell phone
Choose Your Pill
In NativeScript, you have three paths. Angular, VueJS, and Native, which is your decision on how to operate with Javascript Html, CSS, Typescript, Flexbox, etc.
Pretty much everyone with a web development experience can progress quickly.
For this blog, we will be using the latest Angular https://angular.io/ read more.
Choose Your Template or Boilerplate
Let’s go to the NativeScript Marketplace. Here there are many starters you can choose or play with before you start something from scratch. Notice you can filter samples by your pill of preference, whether it’s Angular, Vue, or Native(Core).
So let’s choose the one called Implementing Split-View Components https://play.nativescript.org/?template=play-ng&id=zaE2Hf&v=5, which happens to be implemented in every framework so you can see the differences between them if you want.
Now we are in the demo playground for this application.
Go and click the QR Code button in the toolbar, which will show you a QR Code to try the app on your phone. For that, you must install NativeScript Playground and Preview applications on your phone.
Once you have both apps installed, open the Preview app, and scan the QR. That will show you on your phone the sample you choose from the code you are seeing. This sample is a listing app with some Pokemon, and when you click on one item, it takes you to a details page where you can see the description of that Pokemon.
That’s our first part, the “deploy.” Now, let’s make some changes.
In the file detail.component.ts, let’s add a function called onButtonTap that receives a name and shows in the console when we press the named button.
Now we are going to add a button on the detail.component.html that will use the function we just created, and the text of the button will the name of the selected Pokemon.
Now for the “redeploy” click the save button in the toolbar, this will refresh the application on your phone immediately. Now in the list of Pokemon, select one, and you will then see the button you just added. Click it a couple of times, and you will show you the messages on the “Device Logs” tab at the bottom of the screen.
Building applications for both iOS and Android can be quite simple, depending on your skills and the use case you have. Luckily for us web developers, there are frameworks like NativeScript, React Native, and Ionic that can translate front-end skills on mobile.
This approach is just one of many, and I hope it encourages you to go forward and develop your first or more mobile application.