Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 NativeScript Modules

In this lesson, we’ll look at how to use the HTTP NativeScript module to connect to a back-end service. I’ll also show you some best practices for structuring your code base.

Related Links

2.7 NativeScript Modules

So far we have created our first view. But the purpose of the login view of our application is to connect to GitHub, and evaluate the user name and password to check if the user exists. In this video we're going to discover NativeScript modules like HTTP. And create a contact file to restore back in APIs information to be shared across the application. The first step is to organize our Cloud base to handle more complex objects. In NativeScript, the best practice is to separate the view model section of the logic into another file. Let's do that now, under the login folder create a file called login-view-model.js, and import the observable module into it. Next, we need to create a function called user. And we pass a parameter called info. And now, to make sure that the info is not undefined, we check it at the beginning. Next, we create a variable called viewModel which is a new observable. And pass username and password properties to it. This is simply going to be replaced by the code that we have created previously in login.js, and shortly after finishing this file, we're going to claim the other files up. Usernames value should be equal to username text value. But to prevent the targeting of username each time, we can create a default value. Make sure that you remove these default values once you are committing your source code to GitHub or sharing it publicly. For this demonstration, I have created a new GitHub account, that I'm going to use its credentials here. I make sure that I change this password at the recording of these videos. Next, we create the signIn method, and for now it only displays a message. So, we can use the code that we have created previously here. But, we should start with viewModel before the name of the variable. At the end of this function, we returned a viewModel object. And don't forget to export the user function to be accessible publicly throughout the project. Now quickly, we go back to the login view and update the code in here, var uservm = require.- Login-view-model. First, you import the viewModel module, and call it userVM. Next, we initialize the userVM into a variable called user. var user equals new userVM. And now, like before, assign the user to the page.bindingContext in the loaded function. Exports.signIn = function user.signIn. And finally, signIn function, now, can refresh to signIn method inside the viewModel. Let's check the code, and it seems it's working properly. Now, it's time to learn about NativeScript modules. They are the JavaScript modules in your app_modules/tns-core-modules folder. So far we have used a number of them like application and observable, but now we are going to use a few more like http module for backing requests. There are two more modules that we're going to cover in next videos. To do http backing requests in NativeScript, we use http module. First, let's load it. This module is going to be used on signing events. But before that, we should get familiar with GitHub's API which you can find in the resources below. The URL to get the user information is, and authentication method is basic off. It means we can use our user name and password to authenticate but before that, we should encrypt them in basic SQL format. For encryption, I already have created a module, which you can use for educational purposes. Under the app folder, create a shared directory and add the base 64.js file into it. It has methods for encoding and decoding a string into a base 64 format. Finally, we need a module to restore all API end points, credentials, and a user data. Under the same shared folder, create a file called config.js. I now copy and paste the logic in here, to save us some time. This module is simply consists of some properties, and getter setter methods. API endpoint is the URL, we are going to use for logging in screen. Credentials is used to store a base 64 encoded credentials to be used later in the course. User data stores all relevant information of a user retrieve from API. Repos URL is the endpoint of all repositories that a user has. And repos is an array of all repositories that we can use later in the course. From line 8 to 34, there are getter and setter methods to access to these properties. And on line 36 onward we will return these methods. Back to login-view-model file, we need to import these modules. And now I will save the document, var credentials = base64.encodeviewModel.get(username) plus colon plus viewModel.get password. Now, in the signIn method, we should create a variable to hold the base 64 encoded credentials. But as you can see,we use the get method of the viewModel to access our properties ConfigModule.setCredentials(credentials). And we keep a copy of these credentials in ConfigModules, and now we can use http module. It is always a best practice to isolate back in services into another section like services. But for this example, it is okay to have it here. URL is the API endpoint that we have set in ConfigModule. Method, is the http method, and for this case, it is a get request. Headers, is an extremely fine object. The property name is authorization. And the value is basic. And the credentials that we have created earlier. The http request returns a response. First, we check for a status code of the request. If it is a 200, it means the request was successful. Then we log the results. Otherwise, we throw a bad credentials error, which will log it as error results. Now, let's log the result on Huzzle. Well done. As you can see the app successfully authenticated on GitHub, with http module of NativeScript. To finish this video, we need to capture the result and go about config file, so we can use it in the next screen. Simply put return before http module, and return the response and error objects. Now, back in login.js, we can update the user.signIn method. This method, returns a promise. So, I access the results when they are available. First, we catch any errors and simply put it in an alert. Otherwise, if the results were successful, we press it. To save the user data, we should import ConfigModule here, as well. Okay, copy and paste from the viewModel file. Now, I will add ConfigModule.setuserData(response). This way, we capture the result from back in services globally, so we can use it later. In the next video, we will create the second window, and we'll navigate with if user is successfully logged in and display some user profile information.

Back to the top