- (8) See months Hide months
- A while back I wrote about using Couchbase in a NativeScript application as well as using Couchbase in a NativeScript Angular application .
- The project, while single page, will have two core pieces of application logic.
- The data stored and the data retrieved are both in JSON format, which is great for NativeScript applications.
- There will be the logic that appears on the default page and the logic that appears in the modal dialog.
January 6, 2017
@nraboy: Use #Couchbase as persisted key-value storage in a @NativeScript Angular mobile app. #nosql…
I’m a huge fan of mobile Android and iOS application development and an even bigger fan of using Angular to develop those applications. A while back I wrote about using Couchbase in a NativeScript application as well as using Couchbase in a NativeScript Angular application. Both were very simple todo-list scenarios.
We’re going to take a step back and break down what Couchbase can do in your mobile application piece by piece. For example, Couchbase is a document database that can be managed as key-value or by the document properties. In this example we’re going to work with keys and values to save and load imaginary profile data.
In the above example we can add a first an last name and choose from a list of available profile avatars. When saving, the data is stored in Couchbase, and the screen is reset. When loading, the data is loaded via the previously saved key.
This project has a few basic requirements in order to function:
The NativeScript CLI, obtainable through the Node Package Manager (NPM) is required for creating and building projects. To complete the building process, either the Android SDK or Xcode is required, depending on which platform you wish to build for.
To keep things easy to understand, we’re going to create a fresh NativeScript with Angular project for Android and iOS. From the command line, execute the following:
If you’re not using a Mac with Xcode installed, you can only build for the Android platform. iOS is a Mac only thing.
This project will be using Couchbase, so we must install the nativescript-couchbase plugin. From the CLI, execute:
The above command will install the Couchbase plugin for whatever platforms are available in the project. At this point we are ready for the development of our application.
The project, while single page, will have two core pieces of application logic. There will be the logic that appears on the default page and the logic that appears in the modal dialog. We’re going to start with the logic that appears in the default page.
Open the project’s app/app.component.ts file and include the following:
In the above code we are importing various Angular components, the NativeScript modal service, Couchbase, and the soon to be created modal dialog.
variable will hold information such as person name and profile picture.
services to be used throughout the page.
. You might notice ~/kitten1.jpg and be wondering what it is.
In this application we have a few avatars available to us called kitten1.jpg, kitten2.jpg, and kitten3.jpg all found within the project’s app directory.
I didn’t take these pictures, but instead found them on the internet. Feel free to use whatever images you’d like for this example.
property will hold the path to the photo we wish to use.
variable, otherwise create it. Once saved we can reset the form.
Since we know the name of the document key, we can retrieve the document when we wish to reload the form. The data stored and the data retrieved are both in JSON format, which is great for NativeScript applications.
because the value returned should be an image path.
Now how do we create that modal dialog?
Creating a modal is pretty much the same as creating a NativeScript page. However, other bootstrapping must be done to prove that it is a modal and not a page.
Create a file app/app.modal.ts and include the following code:
method will be called passing the value to the previous page.
Before the modal can be used, it must be bootstrapped in the project’s app/app.module.ts file:
Now the modal can be launched within the application.
So how about the UI for the default NativeScript application page? Open the project’s app/app.component.html file and include the following XML markup:
method in our TypeScript code.
variable. When tapped the modal will launch to allow us to choose a new avatar.
method will be triggered, saving the data into Couchbase.
You just saw how to use Couchbase as key-value storage within a NativeScript Android and iOS application built with Angular. Next time we’ll see how to save more than one document in Couchbase and query for those documents making it much more powerful than just key-value storage.