What is NativeScript (in a nutshell)?
With NativeScript you can build cross-platform applications with one single code base. This means that you’ll be able to build both Android and iOS apps simultaneously while customizing code specific to each platform.
Now that you have a basic definition, you’re probably asking, “What can I build with NativeScript and how can I get it done FAST?”
One more thing before we start…
For this tutorial, we’ll be building a simple Notes app that implements some of the tools from NativeScript UI by Telerik. After this tutorial, you will know how to use these components–and others–by yourself.
Let’s get started!
Creating a NativeScript Angular project
Not that you have run the app… what’s next?
Open the app project in your favorite editor, then delete the items folder and remove all unnecessary imports and declarations in these files: app.module.ts and app.routing.ts.
Your code should look like this:
In order to used NativeScript UI Tools, we must install the component plugin first. To install the plugin, run this command in the terminal or command prompt:
After installing the plugin, you might need to delete the platforms, hooks, and node-modules folders from your project.
Now, we will import the NativescriptUIListView module into the notes.module.ts file:
Next, create a folder called models and add the following files to it: notes.ts and notes-date-form.ts,
Since the list doesn’t look anything like a note, we’ll be using the CardView plugin to give the list the appearance of a note:
But first, let’s register the CardView element in the notes.module.ts file:
Let’s test our app again, but this time, we’ll use the model we created:
Inside add a new file called notes.service.ts and add the logic to get and to create a new list:
Every service has to be declared as a provider in the notes.module.ts, so let’s do that:
Now we’re able to create a new note and to view a list of notes the user has added.
Using the commands you learned above, let’s create a new components called new-note inside the notes folder:
But first, let’s go here and download the icon in black as a png file for android. Then, let’s extract the file into App_Resources > Android.
Please note that this is for Android and similar steps are required for iOS using iOS files.