Couchbase Meetup Project on NativeScript, Angular, and NoSQL Development Available

I recently hosted a Couchbase Meetup in Mountain View, California, on the topic of NativeScript, Angular and NoSQL development. With special guest, TJ VanToll from Progress, we discussed mobile application development and how Couchbase can be included for NoSQL storage and data synchronization.

There was a good turnout at the event and per popular request, I wanted to share and review the code used to make the Couchbase project possible.

Assuming you have the NativeScript CLI and either Xcode or the Android SDK installed and configured on your machine, we can create a new project from the Command Prompt or Terminal:

The --ng flag in the above command indicates that we’re creating an Angular project rather than a Core project.

The project we create will consist of two pages and a data service.

Within the application you’ll be able to show a list of movies stored in your database as well as add movies to that database. This is all managed through the data service. With Couchbase Sync Gateway available, synchronization will be able to happen.

Add the following directories and files to your fresh NativeScript project:

In Angular development, each component will have a TypeScript and HTML file. Each service will only have a TypeScript file.

Let’s start by designing our data service which will handle interactions with the locally installed Couchbase Lite database. Open the project’s app/providers/database.service.ts file and include the following:

There is a lot happening in the above service, so we should break it down.

After importing all the component dependencies and defining our variables, we have our constructor method:

In the constructor method we create and open the Couchbase NoSQL database as well as create a view which will be used for querying data. The view logic says that when queried, return a key-value pair for every document that has a property named type that equals movie. Any other documents that don’t match this condition will not be included in the results.

When querying the view, we’ll receive an array of results which we can choose to display on the screen. This is something we’ll do in the appropriate component.

To leverage the power and awesomeness of Couchbase, we want to have replication / synchronization support within the application. Within the startReplication method, we have the following:

If we provide the information for our Couchbase Sync Gateway instance, we can replicate the data in both directions continuously. Since the mobile application never reads the remote data, we set up a change listener when the local data changes. These changes are emitted via an Angular emitter.

To be able to inject this data service into each of our components, we need to import it into the project’s @NgModule block. Open the project’s app/app.module.ts file and make it look like the following:

Notice that the service was imported and included in the providers array of the @NgModule block. Getting ahead of ourselves, we’ve also imported each of the components that we’re creating.

Now let’s jump into the component for adding new movies to the database. Open the project’s app/components/create/create.component.ts file and include the following TypeScript code:

In the above code we are injecting the DatabaseService previously created along with the Angular Location service. Using the DatabaseService we can obtain the database instance and save the input object to it when the save method is called. The input object is bound to a form in the UI.

The UI to this component can be described in the project’s app/components/create/create.component.html file:

In the above XML, notice the two TextField tags are bound to the input variable via the Angular ngModel attributes.

The final part of the NativeScript application involves listing the movies that are in our database. Open the project’s app/components/list/list.component.ts file and include the following TypeScript code:

Again, we are injecting the DatabaseService, Location, and NgZone services into the component’s constructor method.

It is never a good idea to load data in the constructor method, so we’re using the ngOnInit method instead:

A few things are happening in the ngOnInit method. We want to load the data from the database, but it needs to be done two different ways. We need to load the data when the application opens and we need to load the data when navigating backwards from the creation screen.

Because the ngOnInit method doesn’t trigger when navigating backwards, we need to subscribe to the location events. In both scenarios we query the view that we had created.

Since we want synchronization support, we can call the startReplication service and pass the Sync Gateway information. If you’re testing locally, make sure to provide appropriate host information for Android and iOS.

While listening for changes, any data that come through should be looked up by id and added to the list.

The UI that pairs with the component for listing movies can be found in the app/components/list/list.component.html file:

In the above XML, we have a simple ListView where each row contains information from the objects that we’re storing in Couchbase.

Bringing the NativeScript application to a close, we have to fix up our routing file which is responsible for navigation. Open the project’s app/app.routing.ts file and include the following TypeScript:

In the above code we’re only importing the two components and listing them as possible routes within the application. More information on routing with a NativeScript with Angular application can be found in a previous article that I wrote titled, Navigating a NativeScript App with the Angular Router.

Remember, our project not only consists of NativeScript, but it also consists of Sync Gateway which is a separate entity. We need to define a configuration file on how synchronization should work.

Create a file called, sync-gateway-config.json and include the following:

When launching Couchbase Sync Gateway, the above configuration should be used. It is only a basic example of what you can accomplish with data synchronization.

Conclusion

I personally believe NativeScript is a great technology for mobile development. When using the community supported Couchbase plugin for NativeScript, you can include NoSQL and data synchronization support within your application.

If you’re not currently registered to the Couchbase Silicon Valley group and are in the Mountain View area, I recommend taking a moment to register. If you’re interested in seeing more Couchbase with NativeScript in action, have a look at a previous article I wrote about here.

For more information on Couchbase Lite, check out the Couchbase Developer Portal.