I get a particular set of questions quite a bit when it comes to mobile applications, the first being how to save captured images, and the second being how to sync them between devices or a remote database. Since I’m a huge fan of NativeScript for Android and iOS development, I thought it would be great to share one of many possible examples toward solving this problem.

We’re going to see how to capture images in a NativeScript application using Angular and save those captured images to Couchbase Lite, an embedded device level database.

Going forward, it is important to note that there are many ways to save images or any other file data within a mobile application. For example you could save them in a database or you can save them on the file system. We’re going to be saving them directly into the database in this example, but do your research on what strategy will work best for you.

NativeScript Couchbase Photos

In the above animated image we are presented with the ability to capture images.  Things are a little different in a simulator, but on a device the camera will open.  After capturing an image it will be presented on the screen and saved into Couchbase Lite as a base64 formatted string.

The Requirements

There aren’t many requirements when it comes to being successful with this guide.  At a minimum you’ll need the following:

  • NativeScript CLI
  • Android SDK for Android and Xcode for iOS

To be able to build for Android you’ll need the Android SDK and to be able to build for iOS you’ll need Xcode, which is only available on macOS computers. For this particular guide, no remote instance of Couchbase Server is necessary.

Creating a Fresh NativeScript with Angular Project

With the prerequisites installed and ready to go, we need to create a fresh project somewhere on our computer.

From the NativeScript CLI, execute the following:

The above command will create a new Angular project, hence the --ng flag.

Before we start developing, we will need to install the Couchbase plugin for NativeScript.  This can be done by executing the following:

While we can technically start developing the application, there is one more order of business to take care of. On iOS it is a requirement to explain each of the permissions being used. Being able to take photos or use the gallery is a permission request, so we have to explain.

Open the project’s app/App_Resources/iOS/Info.plist file and include the following:

The above will prevent any errors during compile time or run time.  Now we can safely start developing our Android and iOS mobile application.

Developing the Core Application Logic and User Interface

Before we start adding our own code, let’s strip out a bunch of the boilerplate template code that ships when creating a new NativeScript with Angular project.

This is going to be a single page application so we need to remove any of the pre-existing navigation routes.  Start by opening the project’s app/app.routing.ts file and make it look like the following:

The only thing we did was remove the routes from the routes array.  Technically we can remove this file, but it is easier just to strip out what we’re not going to use.

Now open the project’s app/app.module.ts file and make the TypeScript look like the following:

Notice in the above we’ve removed any reference to the MVC files that were previously routes.  This includes HTML, TypeScript, and the Angular service that was provided.

When it comes to adding new content, we’re going to focus on the TypeScript logic first, then move into the HTML UI. Open the project’s app/app.component.ts file and include the following:

A lot is happening in the above code so we’re going to break it down.

We had previously downloaded the Couchbase plugin for NativeScript, but now we need to import it along with other things:

The camera functionality is already included with NativeScript, we just need to import it.  When it comes to manipulating the camera data, the ImageSource is what we’ll use.

Within the AppComponent class we have two variables:

The database will hold our open Couchbase Lite instance and the images will hold all saved images that will be presented on the screen.

Within the constructor method we open our database, create a view that we can later query, and initialize the array that will store our images.

The view that we’re creating will return all NoSQL documents that have a property called type that is set to image which represents to us that it is one of the possible images for displaying on the screen.

Because data should never be loaded in the constructor method, we take things to the ngOnInit method:

The ngOnInit method triggers after the constructor method and it will query the view that had been previously created. Each document saved will have a property called image that contains base64 image data. This model is based on our design.

After obtaining the base64 data it is converted into an ImageSource and added to our array to be displayed on the screen.

The above capture method is called via a button press in our HTML. It will launch the camera with a few settings defined.

Upon a successful capture, the picture will be converted to base64 and a NoSQL document will be created along with various information sitting next to the base64 data.

Not so bad right?

Now we want to take a look at the HTML markup that goes with this logic.  Open the project’s app/app.component.html file and include the following:

In the above HTML we have an actionbar with a button that will trigger the camera.  Within the core content of the page we have a loop that will go through each image in the array and display it on the screen.

Conclusion

You just saw how to create a basic image capturing application with NativeScript and Angular that saves image data directly into Couchbase Lite NoSQL documents as base64 encoded strings. Next time around we’re going to see how to synchronize this image data between devices and a remote database instance.

In the meantime, check out this other tutorial on using NativeScript with Couchbase titled, Key-Value Operations in Couchbase Mobile via NativeScript and Angular.

Want more help with Couchbase for Android and iOS? Check out the Couchbase Developer Portal for documentation and examples.

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.

5 Comments

  1. […] Save Captured Images in a NativeScript Angular Application to Couchbase (Nic Raboy) […]

  2. Thanks for the tutorial. Found that for NS3.0, the camera import should be from “nativescript-camera”.

    1. Yea, but the good thing, it is only a minor change 🙂

  3. […] few weeks ago I had written a guide that demonstrated saving captured images to Couchbase Lite as base64 encoded string data in a […]

Leave a reply