Create a Weather App With TypeScript and NativeScript_part 1

In this tutorial I'll show you how to build a weather app in NativeScript using the TypeScript language.

First let's find out why TypeScript is a good option for building NativeScript apps.

1. Why TypeScript?

TypeScript is a first-class citizen in NativeScript. It is used by the core NativeScript team to build the NativeScript framework itself. Here are a couple of reasons why you would want to use TypeScript for developing NativeScript apps:

• TypeScript compiles to JavaScript. When the compiler runs, it catches any errors that you might have in your code so that you can act on them immediately without waiting for the NativeScript compiler to finish. This means more productivity for you as the developer.  
• TypeScript allows you to use ES6 Features such as classes, modules, arrow functions, template literals, and much more. This means more tools at your disposal to organize and write better code.

If I did a poor job at convincing you or you want to know more about why TypeScript is good for developing with NativeScript, you can check out Build Better NativeScript Apps With TypeScript.

2. Tooling

To fully take advantage of the features that TypeScript offers, I recommend that you use the Visual Studio Code text editor. It has an IntelliSense feature which provides smart auto-completion while you're writing TypeScript code, it integrates with Git, and it has debugging capabilities as well.

Best of all, there's also a NativeScript plugin which will make you more productive when developing NativeScript apps. One feature that I find useful is the emulator integration. This allows you to run the emulator directly from the text editor and debug the app from the text editor itself. Visual Studio Code is free and available on all major platforms (Windows, Linux, OS X).

However, if you don't want to leave the comfort of your text editor, you can also install extensions that will make coding with TypeScript better. For Atom, there's the atom-typescript plugin. For Sublime Text, there's the TypeScript Sublime plugin.

3. Overview of the App

The app that we're going to create is a weather app. It will have the following pages:

• A main page which shows the current weather along with some relevant information such as the temperature, air pressure, and humidity.
• A forecast page which shows a five-day forecast of what the weather is going to be for the next five days.

Here's what the main page will look like:

And here's the forecast page:

You can find the completed source code for this app on its GitHub repo.

4. OpenWeatherMap

The weather data will come from the OpenWeatherMap API, and just like any other API, you need to sign up for an API key in order to use it. Go ahead and sign up for an account, I'll wait. Once you're logged in, go to the API keys page, copy the value of the key field, and keep it somewhere safe. You'll need it later, once you start creating the app.

5. Creating the App

Now that you know what the app will look like, it's time to actually start creating it. Start by creating a new NativeScript project which uses the TypeScript template:

1. tns create weatherApp --template typescript

Once that's done, navigate into the app folder and create the following folders and files. For your convenience, you can also download or clone the GitHub repo and copy the files from the app folder.

1. - common
2.     + constants.ts
3.     + navigation.ts
4.     + requestor.ts
5.     + utilities.ts
6. - fonts
7. - pages
8.     + forecast
9.         * forecast.css
10.         * forecast.ts
11.         * forecast.xml
12.         * forecast-view-model.ts
13.     + main
14.         * main.css
15.         * main.ts
16.         * main.xml
17.         * main-view-model.ts
18. - stores
19.     + location.ts
20. - app.css
21. - app.ts

We will only ever work inside the app directory, so every time I reference a file path or a folder, assume that the app directory is the root.

Install the Dependencies

The app requires a couple of dependencies: the NativeScript Geolocation Module and Moment. You can install the Geolocation module with the following command:

1. tns plugin add nativescript-geolocation

And install Moment with:

1. npm install moment

The Geolocation module is used to determine the current location of the user. Moment allows easy formatting of the Unix timestamps, which we will be getting from the API later on.

Common Modules

Before we take a look at the code for each of the pages of the app, let's first take a look at the custom modules which will be used throughout the app.

Constants

The constants module (common/constants.ts) contains all the constant values used throughout the app: things like the base URL of the OpenWeatherMap API, the API key that you got earlier, the paths to the endpoints that we will be using, the character codes of the weather icons, and the wind directions.

1. export const WEATHER_URL = 'http://api.openweathermap.org/data/2.5/';
2. export const WEATHER_APIKEY = 'YOUR OPENWEATHERMAP API KEY';
3. export const CURRENT_WEATHER_PATH = 'weather/';
4. export const WEATHER_FORECAST_PATH = 'forecast/daily/';
5.  
6. export const WEATHER_ICONS = {
7.   day: {
8.     'clear': 0xf00d,
9.     'clouds': 0xf002,
10.     'drizzle': 0xf009,
11.     'rain': 0xf008,
12.     'thunderstorm': 0x010,
13.     'snow': 0xf00a,
14.     'mist': 0xf0b6
15.   },
16.   night: {
17.     'clear': 0xf02e,
18.     'clouds': 0xf086,
19.     'drizzle': 0xf029,
20.     'rain': 0xf028,
21.     'thunderstorm': 0xf02d,
22.     'snow': 0xf02a,
23.     'mist': 0xf04a
24.   },
25.   neutral: {
26.     'temperature': 0xf055,
27.     'wind': 0xf050,
28.     'cloud': 0xf041,
29.     'pressure': 0xf079,
30.     'humidity': 0xf07a,
31.     'rain': 0xf019,
32.     'sunrise': 0xf046,
33.     'sunset': 0xf052
34.   }
35. };
36.  
37. export const WIND_DIRECTIONS = [
38.   "North", "North-northeast", "Northeast",
39.   "East-northeast", "East", "East-southeast", "Southeast",
40.   "South-southeast", "South", "South-southwest", "Southwest",
41.   "West-southwest", "West", "West-northwest", "Northwest", "North-northwest"
42. ];

Utilities

The utilities module includes all sorts of utility functions: things like converting degrees to directions, determining a descriptive text for the wind speed, converting Kelvin to Celsius, and converting character codes into a character. You'll see how all of these functions are used later on in the pages.

1. import constants = require('./constants');
2.  
3. export function degreeToDirection(num) {
4.   var val= Math.floor((num / 22.5) + .5);
5.   return constants.WIND_DIRECTIONS[(val % 16)];
6. }
7.  
8. export function describeWindSpeed(speed) {
9.   if(speed < 0.3) {
10.     return 'calm';
11.   } else if(speed >= 0.3 && speed < 1.6) {
12.     return 'light air';
13.   } else if (speed >= 1.6 && speed < 3.4) {
14.     return 'light breeze';
15.   } else if (speed >= 3.4 && speed < 5.5) {
16.     return 'gentle breeze';
17.   } else if (speed >= 5.5 && speed < 8) {
18.     return 'moderate breeze';
19.   } else if(speed >= 8 && speed < 10.8) {
20.     return 'fresh breeze';
21.   } else if(speed >= 10.8 && speed < 13.9) {
22.     return 'strong breeze';
23.   } else if(speed >= 13.9 && speed < 17.2) {
24.     return 'moderate gale';
25.   } else if (speed >= 17.2 && speed < 20.8) {
26.     return 'gale';
27.   } else if (speed >= 20.8 && speed < 24.5) {
28.     return 'strong gale';
29.   } else if (speed >= 24.5 && speed < 28.5) {
30.     return 'storm';
31.   } else if (speed >= 28.5 && speed < 32.7) {
32.     return 'violent storm';
33.   } else if (speed >= 32.7 && speed < 42) {
34.     return 'hurricane force';
35.   }
36.   return 'super typhoon';
37. }
38.  
39. export function describeHumidity(humidity) {
40.   if (humidity >= 0 && humidity <= 40) {
41.     return 'very dry';
42.   } else if (humidity >= 40 && humidity <= 70) {
43.     return 'dry';
44.   } else if (humidity >= 85 && humidity <= 95) {
45.     return 'humid';
46.   }
47.   return 'very humid';
48. }
49.  
50. export function describeTemperature(temp) {
51.   var celsius = convertKelvinToCelsius(temp);
52.   if (celsius >= 0 && celsius < 7) {
53.     return 'very cold';
54.   } else if (celsius >= 8 && celsius < 13) {
55.     return 'cold';
56.   } else if (celsius >= 13 && celsius < 18) {
57.     return 'cool';
58.   } else if (celsius >= 18 && celsius < 23) {
59.     return 'mild';
60.   } else if (celsius >= 23 && celsius < 28) {
61.     return 'warm';
62.   } else if (celsius >= 28 && celsius < 32) {
63.     return 'hot';
64.   }
65.   return 'very hot';
66. }
67.  
68. export function convertKelvinToCelsius(celsius) {
69.   return celsius - 273.15;
70. }
71.  
72. export function getTimeOfDay() {
73.   var hour = (new Date()).getHours();
74.   var time_of_day = 'night';
75.   if(hour >= 5 && hour <= 18){
76.     time_of_day = 'day';
77.   }
78.   return time_of_day;
79. }
80.  
81. export function getIcons(icon_names) {
82.   var icons = icon_names.map((name) => {
83.     return {
84.       'name': name,
85.       'icon': String.fromCharCode(constants.WEATHER_ICONS.neutral[name])
86.     };
87.   });
88.   return icons;
89. }

Navigation

The navigation module is a custom helper module which allows us to easily navigate between all the pages of the app. Open the common/navigation.ts file and add the following:

1. import frame = require('ui/frame');
2.  
3. export function getStartPage() {
4.   return 'pages/main/main';
5. }
6.  
7. export function goToForecastPage() {
8.   frame.topmost().navigate('pages/forecast/forecast');
9. }
10.  
11. export function goToMainPage() {
12.   frame.topmost().goBack();
13. }

This uses the Frame module to navigate to other pages of the app. The getStartPage() method simply returns the location of the main app page. The goToForecastPage(), as the name suggests, allows the user to navigate to the forecast page. 

When navigating in NativeScript, you need to have a reference of where you currently are. That's why you first need to call the topmost() function to get the current or uppermost page, and then the navigate() function to go to another page. This function accepts the path to the page where you want to go. 

Requestor

The Requestor module performs the actual request to the OpenWeatherMap API. As mentioned in the Introduction to NativeScript article, NativeScript uses a JavaScript virtual machine to run JavaScript code. This means that we can also use functions that are available in the browser. 

One such function is fetch, which allows us to make HTTP requests to a remote server. The parameter is the URL where you want to make the request. It returns a promise so we use then() to wait for the raw response. Note the use of the word "raw"; the fetch function returns the response with headers and other low-level information—that's why we need to call the json() function to get the actual JSON data. This will return another promise so we use then() one more time to get the actual object.

1. export function get(url){
2.   return fetch(
3.     url
4.   ).then(function(response){
5.     return response.json();
6.   }).then(function(json){
7.     return json;
8.   });
9. }

Alternatively, you can use the Http module, which is a more robust way of making HTTP requests in NativeScript.

Location Store

The location store serves as the storage for the location information. This allows us to update and get the current location from any file which imports this module.

1. export var location;
2.  
3. export function saveLocation(loc) {
4.   location = loc;
5. }
6.  
7. export function getLocation() {
8.   return location;
9. }

(continue)

If you found this post interesting, follow and support us.

Suggest for you:

Ionic by Example: Create Mobile Apps in HTML5

Build Apps with React Native

The Complete Android Developer Course - Build 14 Apps

iOS 10 Message Extension App Reskinning without Coding

Getting started NativeScript Angular 2 and Ionic Framework 2

An Introduction to Xamarin.Forms and SQLite_part 2(end)

Step 5: Add the Android Implementation

This step is very similar to the previous one. The only difference is that the code will change a little due to the fact that the location of the database file will be different. You will still need to add the appropriate packages to the Android project (SQLite.Net PCL and SQLite.NET PCL - XamarinAndroid) as you did before. Once you have completed that, you can add the appropriate code in a new class named SQLite_Android.

1. using System;
2. using System.IO;
3. using Xamarin.Forms;
4. using IntroToSQLite.Android;
5.  
6. [assembly: Dependency(typeof(SQLite_Android))]
7.  
8. namespace IntroToSQLite.Android
9. {
10.     public class SQLite_Android: ISQLite
11.     {
12.         public SQLite_Android ()
13.         {
14.         }
15.  
16.         #region ISQLite implementation
17.  
18.         public SQLite.Net.SQLiteConnection GetConnection ()
19.         {
20.             var fileName = "RandomThought.db3";
21.             var documentsPath = Environment.GetFolderPath (Environment.SpecialFolder.Personal);
22.             var path = Path.Combine (documentsPath, fileName);
23.  
24.             var platform = new SQLite.Net.Platform.XamarinAndroid.SQLitePlatformAndroid ();
25.             var connection = new SQLite.Net.SQLiteConnection (platform, path);
26.  
27.             return connection;
28.         }
29.  
30.         #endregion
31.     }
32. }

You now have a working implementation of the ISQLite interface from the perspective of your Android app.

Step 6: Add the Windows Phone Implementation

Since I am running this app from a Mac, I won't be creating the Windows Phone implementation, but if you would like to do this, you can.

The first step is to add support to your Windows Phone project for SQLite. As mentioned earlier, SQLite comes by default on iOS and Android. This is not true for Windows Phone, but it is supported. To get it installed, you can follow the instructions found on the Xamarin website.

After installing SQLite, the process of adding the functionality for Windows Phone will be almost exactly the same, except that the packages to install are SQLite.Net PCL and SQLite.Net PCL - WindowsPhone 8 Platform. With these packages installed, you can create the Windows Phone implementation of the ISQLite interface.

1. using System;
2. using System.IO;
3. using Xamarin.Forms;
4. using IntroToSQLite.WinPhone;
5.  
6. [assembly: Dependency(typeof(SQLite_WinPhone)]
7.  
8. namespace IntroToSQLite.WinPhone
9. {
10.     public class SQLite_WinPhone: ISQLite
11.     {
12.         public SQLite_WinPhone ()
13.         {
14.         }
15.  
16.         #region ISQLite implementation
17.  
18.         public SQLite.Net.SQLiteConnection GetConnection ()
19.         {
20.             var fileName = "RandomThought.db3";
21.             var path = Path.Combine (ApplicationData.Current.LocalFolder.Path, fileName);
22.  
23.             var platform = new SQLite.Net.Platform.WindowsPhone8.SQLitePlatformWP8 ();
24.             var connection = new SQLite.Net.SQLiteConnection (platform, path);
25.  
26.             return connection;
27.         }
28.  
29.         #endregion
30.     }
31. }

There you have it. Now you have all of your native implementations complete. It's time to give this app a user interface and get your data into the database.

Step 7: Adding the User Interface

Since this tutorial is well into the topic of Xamarin.Forms, I'm going to assume that you at least have a basic working knowledge of Xamarin.Forms. With this assumption in mind, I'm not going to go into a lot of detail on the process of creating the user interface. If you need more background information on Xamarin.Forms, check out my other Xamarin.Forms tutorials on Tuts+.

The user interface is going to consist of two separate pages. The first page will contain a list of all the thoughts we have entered in a list while the second page will let the user enter a new thought. Let's build these pages.

Create the ListView

We will first focus on creating the first page that will contain a list of RandomThought objects. Start by creating a new file in the PCL (or Shared) project and name it RandomThoughtsPage. Replace the default implementation with the following:

1. using System;
2. using Xamarin.Forms;
3.  
4. namespace IntroToSQLite
5. {
6.     public class RandomThoughtsPage: ContentPage {
7.         private RandomThoughtDatabase _database;
8.         private ListView _thoughtList;
9.  
10.         public RandomThoughtsPage (RandomThoughtDatabase database)
11.         {
12.             _database = database;
13.             Title = "Random Thoughts";
14.             var thoughts = _database.GetThoughts ();
15.  
16.             _thoughtList = new ListView ();
17.             _thoughtList.ItemsSource = thoughts;
18.             _thoughtList.ItemTemplate = new DataTemplate (typeof(TextCell));
19.             _thoughtList.ItemTemplate.SetBinding (TextCell.TextProperty, "Thought");
20.             _thoughtList.ItemTemplate.SetBinding (TextCell.DetailProperty, "CreatedOn");
21.  
22.             var toolbarItem = new ToolbarItem {
23.                 Name = "Add",
24.                 Command = new Command(() => Navigation.PushAsync(new ThoughtEntryPage(this, database)))
25.             };
26.  
27.             ToolbarItems.Add (toolbarItem);
28.  
29.             Content = _thoughtList;
30.         }
31.  
32.         public void Refresh() {
33.             _thoughtList.ItemsSource = _database.GetThoughts ();
34.         }
35.     }
36. }

Most of the work done in this class is in the constructor. The constructor allows us to pass in an instance of the RandomThoughtsDatabase to get all the saved thoughts. We set the Title property of the page to "Random Thoughts", retrieve all the existing thoughts, create a new instance of a ListView, and create a ToolbarItem that will allow us to click a button to bring up the entry page. We haven't implemented that yet, but we will shortly.

To get our new RandomThoughtsPage up on the screen, we need to make a little modification to the App.cs file. Within this file, modify the GetMainPage method to look like the following:

1. public static Page GetMainPage ()
2. { 
3.     var database = new RandomThoughtDatabase ();
4.  
5.     return new NavigationPage (new RandomThoughtsPage (database));
6. }

The GetMainPage method now creates a new instance of our RandomThoughtDatabase class and returns a new instance of the RandomThoughtsPage. With this change, our iOS and Android apps should look something like this:

Create the Entry Page

We now have a list page for all of our RandomThought objects, but we don't have a way to enter new ones. For that, we will create another page similar to the previous page. Create a new file in your PCL (or Shared) project and call it ThoughtEntryPage. Replace the default implementation with the following:

1. using System;
2. using Xamarin.Forms;
3.  
4. namespace IntroToSQLite
5. {
6.     public class ThoughtEntryPage: ContentPage {
7.         private RandomThoughtsPage _parent;
8.         private RandomThoughtDatabase _database;
9.  
10.         public ThoughtEntryPage ( RandomThoughtsPage parent, RandomThoughtDatabase database)
11.         {
12.             _parent = parent;
13.             _database = database;
14.             Title = "Enter a Thought";
15.  
16.             var entry = new Entry ();
17.             var button = new Button {
18.                 Text = "Add"
19.             };
20.  
21.             button.Clicked += async (object sender, EventArgs e) => {
22.                 var thought = entry.Text;
23.  
24.                 _database.AddThought(thought);
25.  
26.                 await Navigation.PopAsync();
27.  
28.  
29.                 _parent.Refresh();
30.             };
31.  
32.             Content = new StackLayout {
33.                 Spacing = 20,
34.                 Padding = new Thickness(20),
35.                 Children = { entry, button },
36.             };
37.         }
38.     }
39. }

In this class, all the work is done within the constructor. We get a reference to the parent page, RandomThoughtsPage, as well as the database. The rest is basic setup code with an Entry object for entering text and a Button.

Once the user taps the Button, we use the database to add the new thought, dismiss the page, go back to the list page, and call the Refresh method to update the ListView. Once this is all wired up, we can run it to actually enter some values.

Entering Thoughts

Here is what it looks like on iOS and Android to enter some of your thoughts:

Viewing the List

After you have entered a few thoughts, your list will look something like this:

Conclusion

There you have it. You now have the ability to add database functionality to your Xamarin.Forms app to store and retrieve any sort of data with ease.

To continue your learning journey with Xamarin.Forms and SQLite, I give you the following challenge. See if you can enhance this application to enable deleting thoughts and update the list page in a similar fashion as the entry page. Good luck and happy coding.
Written by Derek Jensen

If you found this post interesting, follow and support us.
Suggest for you:

The Complete Android & Java Course - Build 21 Android Apps

Android Application Programming - Build 20+ Android Apps

iOS 10 Message Extension App Reskinning without Coding

iOS 10 Projects: Build Amazing Apps with Apple's Newest iOS

iOS 10 & Swift 3: From Beginner to Paid Professional

An Introduction to Xamarin.Forms and SQLite_part1

At some point in your mobile development career, you are going to need to deal with data. Dealing with data means more than processing and displaying information to the end user. You are going to need to store this information somewhere and be able to get at it easily. Thanks to Xamarin and open source software, you can easily store your data with an industry tested platform, SQLite.

1. Storing Data

So why do you need to care about data when it comes to your app? Because it is all around you. You can't escape it. No matter what kind of app you are writing, whether it's a game or some sort of utility, you are going to need to store data at some point. That data could be user data, statistics, or anything else of interest that either you or the user will be interested in at some point in the use of your app.

At this point, let's assume that you have decided to go the Xamarin.Forms route, because you are interested in targeting several platforms not only in the logic for your app, but also for the user interface layer.

Great. But what do you do now that you need to store information within your app? Don't worry, there's a very simple solution to this problem, SQLite.

2. Introduction to SQLite

You have now seen the term SQLite a couple of times in this tutorial, it's time to get down to the meat. What exactly is SQLite? SQLite is a public domain, zero configuration, transactional SQL database engine. All this means is that you have a full featured mechanism to store your data in a structured way. Not only do you get all of this, you also have access to the source code, because it's open source.

We will not be covering all the features of SQLite in this tutorial simply because there are too many to go through. Rest assured that you will have the ability to easily create a table structure to store data and retrieve it in your app. These are the concepts that we will be focusing on in this tutorial.

In the world of Xamarin.Forms, SQLite is a natural fit for a very simple reason. The SQLite engine is readily available on both iOS and Android. This means that you can use this technology right out of the box when you choose to write a Xamarin.Forms app.

Getting access to SQLite functionality in Windows Phone apps requires one additional step that we will go over a little later. All this functionality and cross platform accessibility is great, but how will we get access to the native platform implementations from our C# code in Xamarin.Forms? From a nice NuGet package, that's how. Let's take a look.

3. Creating an App

Let's start by creating a simple Xamarin.Forms application. In this tutorial, I will be using a Mac running Xamarin Studio, but you can just as easily be using Xamarin Studio or Visual Studio running on a PC.

Step 1: Create a Project

We start the process by creating a new Xamarin.Forms app. To do this, simply select the Mobile Apps project template family on the left and choose one of the Xamarin.Forms templates on the right. You can use either the PCL or Shared version of the template, but for this case, I will be using the PCL. You can follow along using either one, but there will be a slight difference if you choose the Shared template later on.

You can give the project any name you like. I will call this project IntroToSQLite. After you click the OK button, your IDE will go through the process of creating your solution. Your solution will contain four projects:

1. IntroToSQLite - PCL project
2. IntroToSQLite.Android - Android project
3. IntroToSQLite.iOS - iOS project
4. IntroToSQLite.WinPhone - Windows Phone project (only on a PC)

Step 2: Add SQLite Support

Now that we have our basic project structure set up, we can start to add access to SQLite to our PCL project. We need to install a new package into our project named SQLite.Net. This is a .NET wrapper around SQLite that will allow us to access the native SQLite functionality from a Xamarin.Forms PCL or Shared project.

We access this NuGet package by right-clicking on either Packages or References, depending on which IDE you are using, and select Add Package (or Reference). In the search box, type sqlite.net. This will show you a rather large collection of packages that you can include in your project.

Since I chose to go the PCL route for my Xamarin.Forms project, I will need to select the SQLite.Net PCL package to include into my project. Which one do you choose if you went the Shared project route? None.

SQLite and Shared Projects

If you've chosen the Shared project template earlier in the tutorial, you may be wondering how to get access to the SQLite package. The short answer is that you can't. If you remember from a previous tutorial, you can't add references to a Shared project. To get access to SQLite from a Shared project, you simply add the source code to the project.

Add Some Code

The final step in adding SQLite functionality to the PCL project is to create an interface that will allow us access into the SQLite world. The reason we are doing this is because we need to access the native functionality on the different platforms as we saw in a previous tutorial.

Let's start by defining an interface that is going to give us access to the SQLite database connection. Within your PCL project, create a new interface named ISQLite and replace the implementation with the following:

1. using System;
2. using SQLite.Net;
3.  
4. namespace IntroToSQLite
5. {
6.     public interface ISQLite
7.     {
8.         SQLiteConnection GetConnection();
9.     }
10. }

This is the interface that we will implement and get access to via the DependencyService from the native implementations.

Step 3: Define the Database

We now have access to the SQLite functionality, let's define our database. This particular application is going to be quite simple and we are just going to store some of our random thoughts as we come up with them.

We start by creating a class that will represent the data stored in a particular table. Let's call this class RandomThought.

1. using System;
2. using SQLite.Net.Attributes;
3.  
4. namespace IntroToSQLite
5. {
6.     public class RandomThought
7.     {
8.         [PrimaryKey, AutoIncrement]
9.         public int ID { get; set; }
10.         public string Thought { get; set; }
11.         public DateTime CreatedOn { get; set; }
12.  
13.         public RandomThought ()
14.         {
15.         }
16.     }
17. }

As you can see, this is a very simple class with three properties. Two of those properties are just your normal everyday properties, Thought and CreatedOn. These two properties are going to represent columns in the SQLite database, which will contain a table named RandomThought. The third property, ID, is also going to represent a column within the table and contain a unique id that we can use to refer to a specific RandomThought row within the table.

The interesting thing about the ID property is that it is decorated with two attributes, PrimaryKey and AutoIncrement. PrimaryKey tells SQLite that this column is going to be the primary key of the table, which means that, by default, it needs to be unique and there is an index applied to it to speed up retrievals from this table when referring to a row by this column.

AutoIncrement means that, when we insert a new RandomThought into this table, the ID column will be populated automatically with the next available integer value. The next step is to create this table in the database.

I like to create a class that represents my database and keep all the logic to access the database and its tables within this class. For this, I will create a class named RandomThoughtDatabase:

1. using System;
2. using SQLite.Net;
3. using Xamarin.Forms;
4. using System.Collections.Generic;
5. using System.Linq;
6.  
7. namespace IntroToSQLite
8. {
9.     public class RandomThoughtDatabase
10.     {
11.         private SQLiteConnection _connection;
12.  
13.         public RandomThoughtDatabase ()
14.         {
15.             _connection = DependencyService.Get<ISQLite> ().GetConnection ();
16.             _connection.CreateTable<RandomThought> ();
17.         }
18.  
19.         public IEnumerable<RandomThought> GetThoughts() {
20.             return (from t in _connection.Table<RandomThought> ()
21.                     select t).ToList ();
22.         }
23.  
24.         public RandomThought GetThought(int id) {
25.             return _connection.Table<RandomThought> ().FirstOrDefault (t => t.ID == id);
26.         }
27.  
28.         public void DeleteThought(int id) {
29.             _connection.Delete<RandomThought> (id);
30.         }
31.  
32.         public void AddThought(string thought) {
33.             var newThought = new RandomThought {
34.                 Thought = thought,
35.                 CreatedOn = DateTime.Now
36.             };
37.  
38.             _connection.Insert (newThought);
39.         }
40.     }
41. }

This is a very simple implementation as it only contains a few methods. These are typically some of the basic operations you perform when dealing with a database. One point of note is the constructor. Within the constructor we are doing two things.

First, we are using the DependencyService class to get a registered class that implements the ISQLite interface and call its GetConnection method.

Second, we use the CreateTable method on the SQLiteConnection class to create a table called RandomThought. This method will create the table, if it doesn't already exist, and exit gracefully if it already exists.

Obviously, you can get as sophisticated with this class as you want by adding all sorts of functionality, but these operations are typically a good starting point.

Step 4: Add the iOS Implementation

Most of the code that we use to interact with the database is going to be found in the PCL (or Shared) project. But we still need to do a little wiring up in the native implementations to get everything working correctly.

The main obstacle that we need to work around on the native side when using SQLite is where we are going to store the actual database file. This differs from platform to platform. Here is what we need for iOS.

Before we can actually add any sort of SQLite functionality to the iOS project, we need to add the SQLite.Net PCL as well as the SQLite.NET PCL - XamarinIOS Platform packages to this project. You can follow the same steps that you took in Step 2, making sure to add both to the project. Once you have added this package, you can start to write some SQLite code within the iOS project.

Let's create an implementation of the ISQLite interface for iOS. Start by creating a new class, naming it SQLite_iOS.

1. using System;
2. using System.IO;
3. using SQLite;
4. using IntroToSQLite.iOS;
5. using Xamarin.Forms;
6.  
7. [assembly: Dependency(typeof(SQLite_iOS))]
8.  
9. namespace IntroToSQLite.iOS
10. {
11.     public class SQLite_iOS: ISQLite
12.     {
13.         public SQLite_iOS ()
14.         {
15.         }
16.  
17.         #region ISQLite implementation
18.  
19.         public SQLite.Net.SQLiteConnection GetConnection ()
20.         {
21.             var fileName = "RandomThought.db3";
22.             var documentsPath = Environment.GetFolderPath (Environment.SpecialFolder.Personal);
23.             var libraryPath = Path.Combine (documentsPath, "..", "Library");
24.             var path = Path.Combine (libraryPath, fileName);
25.  
26.             var platform = new SQLite.Net.Platform.XamarinIOS.SQLitePlatformIOS ();
27.             var connection = new SQLite.Net.SQLiteConnection (platform, path);
28.  
29.             return connection;
30.         }
31.  
32.         #endregion
33.     }
34. }

We get access to the correct location to store the database file, create a new SQLiteConnection object, and pass it back to our PCL (or Shared) project. The assembly attribute at the top of the file is used to identify this class as a Dependency that can be retrieved via the Get method on the DependencyService class.

If you found this post interesting, follow and support us.
Suggest for you:

Ionic 2 Tutorial with Two Complete Apps

Android Application Programming - Build 20+ Android Apps

The Complete Android Developer Course - Build 14 Apps

The Complete Android & Java Course - Build 21 Android Apps

Android: From Beginner to Paid Professional

Create Your First NativeScript App_part 3 (end)

The saveNote()Function
The saveNote() function is executed when the user taps on the Save Note button. This gets the current value of the note title text field and the image path, increments the current_index, and pushes the new item into the plain notes array and observable notes array. Then it saves the current notes and the current_index into the application settings, removes the values for the new note from the application settings, updates the UI so that the form shows its empty state, and shows the list while hiding the new note form.

1. exports.saveNote = function() {  
2.   var new_note_title = pageData.get('item_title');
3.   var new_note_photo = pageData.get('attachment_img'); 
4.   current_index += 1;
5.   var new_index = current_index;  
6.   var new_item = {
7.     index: new_index,
8.     title: new_note_title,
9.     photo: new_note_photo,
10.     show_photo: false
11.   }; 
12.   notesArr.push(new_item);
13.   pageArray.push(new_item); 
14.   appSettings.setString('notes', JSON.stringify(notesArr));  
15.   appSettings.setNumber('current_index', new_index); 
16.   appSettings.remove('new_note_title');
17.   appSettings.remove('new_note_photo');
18.   pageData.set('showForm', false);
19.   pageData.set('item_title', '');
20.   pageData.set('attachment_img', null);   
21.   view.getViewById(page, 'list').animate({
22.     opacity: 1,
23.     duration: 400 
24.   }); 
25.   view.getViewById(page, 'form').animate({
26.       translate: { x: 0, y: -160 },    
27.       duration: 800,
28.   }); 
29. }

The deleteNote() Function
Lastly, we have the deleteNote() function which gets executed when a user taps on the delete button inside a list item. As you have already seen from previous functions, an object is passed in as an argument to functions that are attached as an event handler for a specific component. This object has the object property, which refers to the component itself.

From there, you can get the value of an attribute that was passed to it. In this case, we're getting the value of the index attribute, and we use it to get the actual index of the item that we want to delete.

1. exports.deleteNote = function(args){   
2.   var target = args.object; 
3.   var index_to_delete = notesArr.map(function(e) { 
4.     return e.index; 
5.   }).indexOf(target.index);
6.  
7.   notesArr.map(function(item, index){
8.  
9.     if(index == index_to_delete){
10.       notesArr.splice(index_to_delete, 1);
11.       pageArray.splice(index_to_delete, 1);
12.       return false;
13.     }
14.   }); 
15.   appSettings.setString('notes', JSON.stringify(notesArr));
16. }

6. Adding Styles

Open the app.css file and add the following global styles:

1. ActionBar {
2.     background-color: #b898ff;   
3.     color: #fff;
4. } 
5. .header-item {
6.     text-transform: uppercase;
7. } 
8. .item {
9.     padding: 20;
10.     font-size: 20px;
11. } 
12. .form-container {
13.     background-color: #fff;
14.     margin-top: -160px;
15.     padding: 20px;
16.     z-index: 10;
17. } 
18. .label {
19.     font-size: 18px;
20. } 
21. .link {
22.     text-align: left;
23.     background-color: transparent;
24.     color: #0275d8;
25.     padding: 5px;
26.     margin: 10px 0;
27.     text-transform: uppercase;
28.     font-size: 15px;
29. } 
30. .image {
31.     width: 300;
32.     margin: 20 0;
33. } 
34. .primary-button {
35.     padding: 5px;
36.     color: #fff;
37.     background-color: #0723bb;
38.     text-transform: uppercase;
39. } 
40. .delete-button {
41.     font-size: 15px;
42.     background-color: #f50029;
43.     color: #fff;
44. }

If you want to apply page-specific styles, you can also create a notes-page.css file and define your styles in there.

7. Running and Debugging the App

You can run the app on your device by executing tns run and then the platform where you want to deploy. Here's an example for android:

1. tns run android

This automatically installs the Android platform for you if it hasn't already been installed and then runs the app on your device once it's installed. Once the app is running, you can execute tns livesync android --watch to automatically refresh the app every time you make changes to the source files.

Debugging
Just like any other app framework, NativeScript allows developers to debug their app. This is done with the Chrome dev tools. There are two ways of doing this:

• If have an app already running, you can open a new terminal window and execute tns debug android --start to attach a debugger to the currently running instance of the app.
• If you don't have an app running yet, use tns debug android --debug-brk to build an instance of the app with a debugger attached to it.

No matter which option you choose, this will open up a new tab in the Google Chrome browser that allows you to debug the app just like a normal JavaScript web app. This means that you can actually use console.log in your source code to inspect the contents of the variables that you're working with.

Conclusion and Next Steps

In this article, you've learned how to build an app with NativeScript. Specifically, you've learned concepts such as using UI components, layouts, styling, animations, using the device camera, and maintaining application state with application settings.
Written by Wernher-Bel Ancheta

If you found this post interesting, follow and support us.
Suggest for you:

iOS 10 Projects: Build Amazing Apps with Apple's Newest iOS

iOS 10 & Swift 3: From Beginner to Paid Professional

The Complete Android Developer Course: Beginner To Advanced!

Android: From Beginner to Paid Professional

The Complete Android Developer Course - Build 14 Apps