Continuing down the path of user profile stores, we had previously seen how to create one with Node.js and Couchbase NoSQL as well as a web client front-end for it using Angular. What if we wanted to take this into a mobile application, which is the norm for all applications as of now.

There are many different mobile frameworks out there and we’re lucky that some even support Angular, which is what we had used in the previous example. We’re going to see how to convert our client front-end to mobile using NativeScript and Angular.

Before going forward, the assumption is that you’ve completely both of the two previous tutorials, one on creating the profile store backend and the other on creating the profile store web front-end. We’re also going to assume that your development environment is property configured for mobile development, whether that be Android, iOS, or both.

NativeScript with Couchbase Profile Store

The flow of events in this application will match what we saw in the web version.

Create a New NativeScript with Angular Project

Assuming that you’ve gotten the NativeScript CLI installed and configured, execute the following to create a new project:

The --ng flag in the above command is important because it means we are creating an Angular project rather than a NativeScript Core project.

As of right now, the NativeScript CLI doesn’t share the Angular CLI capabilities of generating components. For this reason, we’re going to have to create each of the HTML and TypeScript files manually.

If you’re on Mac or Linux, execute the following from within the NativeScript project:

If you’re on Windows, just create those directories and files manually. If you really wanted to, you could copy these directories and files from your web project from the previous tutorial.

Defining the Components to Represent Each Screen

Starting in the same direction as the web version, we’re going to focus on user login. Open the project’s app/login/login.component.ts file and include the following code:

The above code is exactly what we saw in the web version with two exceptions. I’ve removed the CSS reference since we did not create a CSS file on a component basis. I’ve also added a moduleId so relative paths could work with our component. These are both Angular related items with nothing to do with NativeScript.

The HTML is where things are different. Open the project’s app/login/login.component.html file and include the following XML markup:

NativeScript has its own markup for the UI. The same rules apply in terms of Angular, but creating UI components is just a bit different.

For example, we are still using the [(ngModel)] attributes, but instead of div tags, we have StackLayout tags.

Now let’s take a look at the registration component. Open the project’s app/register/register.component.ts file and include the following TypeScript:

Again, the only changes we made in the above code, compared to the previous example, is in the CSS removal and moduleId addition.

Not bad when it comes to creating cross platform web and mobile applications right?

The HTML for the UI that powers the TypeScript logic is found in the app/register/register.component.html file and it looks like this:

The final two components are going to be no different from what we’re already experiencing.

Open the project’s app/blogs/blogs.component.ts file and include the following TypeScript code:

No changes to see in the above other than the two previously mentioned, so we can move into our HTML for the page.

Open the project’s app/blogs/blogs.component.html file and include the following HTML markup:

Let’s wrap this application up with the final component that our profile store API and web front-end has to offer.

Open the project’s app/blog/blog.component.ts file and include this:

If you didn’t copy over your CSS file, don’t forget to remove it from the @Component block as seen in the previous components.

The HTML UI to go with this TypeScript is found in the project’s app/blog/blog.component.html file and it looks like the following:

As of right now you may be scratching your head on all this NativeScript XML markup. How Angular works with the UI hasn’t changed, but if you’re interested in learning about the NativeScript markup, check out their official documentation. Get familiar with the StackLayout, GridLayout and individual UI component tags.

Bringing it Together

We’ve created all these Angular components for NativeScript, but we haven’t brought them together via the Angular Router.

In the web version of this guide, the route information was in the app.module.ts file. While we could do that, NativeScript broke it out into a separate file.

Open the project’s app/app.routing.ts file and include the following:

A lot of the above code came with our new project template. We imported each of our components, and created a route for them.

Likewise, the components need to be imported in the project’s app/app.module.ts file. Open this file and include the following:

In addition to importing each component and adding them to the declarations array, we also imported a few modules such as the NativeScriptHttpModule and NativeScriptFormsModule. In pure Angular, these are called the HttpModule and FormsModule.

In theory, the application is ready to go.

Resolving App Transport Security Issues (ATS) for iOS

Because the Node.js and Couchbase API is running locally, we are using HTTP rather than HTTPS. iOS will throw errors if we try to access HTTP resources.

This is easily fixable by adding an ATS policy.

Open the project’s app/App_Resources/iOS/Info.plist and add the following alongside the other XML:

The above essentially whitelists all HTTP endpoints. It is not safe for production, but safe for testing.

More information on ATS in NativeScript applications can be read about in a previous article I wrote titled, Fix iOS 9 App Transport Security Issues in NativeScript.

Conclusion

You just saw how easy it was to take your web client front-end and convert it to mobile using NativeScript and Angular. The user profile store example quickly became a full stack example using the JavaScript stack. We had a Node.js with Couchbase Server backend, Angular web front-end, and NativeScript mobile front-end.

The next step, or option, would be to use the Couchbase Mobile components rather than HTTP calls against the API.

Posted by Nic Raboy, Developer Advocate, Couchbase

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.