So you just installed NativeScript and finished the tutorial. Do yourself a favor and start here!
If you don’t know what NativeScript is yet, then don’t worry.  Join us as we explore NativeScript!  We’ve assembled the basics in this easy-to-read primer and interactive tutorial.

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.

Image result for professor farnsworth good news

Let’s get started!

Creating a NativeScript Angular project

To create a new Angular project, let’s run the following command from NativeScript CLI:
At this point, you should have a brand new app compatible with Android and iOS.  To test your new app, just run the following commands:

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:

Now create a folder called notes and add the following files:

  • notes.component.html
  • notes.component.css
  • notes.component.ts
  • notes.module.ts
  • notes.routing.ts.

Now what?

For convenience, you can install following extension to NativeScript CLI.  This will create the files for you.  Unfortunately, you will need to add the module file and the routing file yourself, but more on that later.
Once installed, just run one of these commands:
To keep it short, both commands achieve the same thing, but it’s up to you to decide which one you would rather use.  If you want to know more about this extension and all of its capabilities, then check out this GitHub repository.
Please note that if you used this extension, then the components will be created with a Sass file.  In this tutorial, we will be using CSS, so you will need to make this change in the the TypeScript file.
Now add the file notes.routing.ts inside the notes folder and then add the following code:
Now add the file notes.module.ts inside the notes folder and add the following code:
Since we now have a component and two new files (notes.module.ts and notes.routing.ts), we can go back to our app.routing.ts file and add the following code:

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:

Now, let’s add some code to the notes file to determine if what we just did works:
If everything went right, then your app should look like this:

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:

If everything went right, then your app should now look like this:
Add a folder called services.

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.

Creating notes

Since our goal is to create a Notes app, we want to have all the basic functionalities you would expect from a notes app, such as the ability to View, Create, Update, and Delete a note.  For this part of the tutorial, we will only implement the create functionality.

Using the commands you learned above, let’s create a new components called new-note inside the notes folder:

Next, let’s declare the new component in the notes.module.ts file:
We also need to declare the route in the notes.routing.ts file:
Now that we’ve checked this tasks off of our list, we can start working on the New Notes component.

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.

Getting the list

Now that we have implemented the service and the New note component, we can View a list of notes created:

Let’s recap…

In this tutorial, we learned how to create a Notes app that integrates the RadListView from Nativescript UI Components.  Our current app only creates a list of notes.  We will cover additional functionalities in the next tutorial, where we will learn how to set up and use the RadDataForm to select a date for the note, which will later be displayed on a calendar using the RadCalendar component. We will also tackle other basic functionalities of a Notes app, like creating, updating, deleting, and viewing.