Exercise (Video): NoSQL Storage with Couchbase Lite

Loading...

Do curso por The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

82 classificações

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

82 classificações

Curso 4 de 5 em Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing truly cross-platform, native iOS and Android apps using NativeScript (Ver 3.x). The framework uses Angular, TypeScript or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with NativeScript UI and layout support and access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your Angular, TypeScript and Javascript skills, and (c) Use various features of the NativeScript framework to build truly cross-platform mobile applications

Na lição

NativeScript Animations, Gestures, Storage and Image Resources

In this module we look at enhancing the user experience through the use of animations and support for gesture-based interaction. We also look at leveraging the storage for persisting data, and the customization of splash screens, icons and the use of other image resource in the app

Persisting Data: NativeScript Storage9:05

Exercise (Video): Application Settings12:23

Exercise (Video): NoSQL Storage with Couchbase Lite18:01

Conheça os instrutores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Continuing with the theme of storing data within our NativeScript application.

In this exercise, we'll look at the use of the NoSQL database supported using Couchbase.

So here, we will install the Couchbase Lite plugin within

our NativeScript application and then store our data in

a NoSQL database using the document like storage,

that Couchbase provides for us.

We will use this Couchbase storage for storing the favorites for our users.

So, whenever the user saves any of the dishes into his or her list of favorites,

the favorites information will be persistent in the Couchbase database so that even if

the application is restarted or the device is restarted and app is restored,

the favorites for the user will still remain and will be shown within the application.

In the earlier version of the application,

you saw that when you quit the application,

restarted it, the favorites for the user will completely disappear.

So this is where we will show how we can persist data within

our application using the Couchbase database.

To install the Couchbase plugin,

add the prompt type,

tns plugin add nativescript-couchbase.

And once the plugin is installed,

we switch to our application.

A good pattern for us to follow is when you are using a database,

create a service that takes care of all the interactions with the database and then

exports an API that can be used by the other components within your application.

So to do that, going to my services folder,

I'm going to create a service called couchbase.service.ts file here.

And in this couchbase.service.ts file,

I'm going to create the couchbase.service by importing injectable

from angular/core and also

import couchbase

from nativescript-couchbase.

So the nativescript-couchbase should be in

the node buttons folder and let's create the service here.

So we'll say, injectable export

class CouchbaseService.

And in this CouchBaseService,

we will declare a variable called database,

which will keep a reference to our database.

And then in the constructor,

I'm going to create

the database

and then

name it as 'confusion'.

So, to create the database as you can see, new couchbase confusion.

If this database already exists then that will be opened and we'll get a reference to it.

If not, then the database will be created here.

Now, for this database let's support a few methods here.

So we'll support public getDocument and we

will supply a document ID which is the type string for getting the document.

So from the database, we'll say,

return this database getDocument

and pass in the docID as the parameter here.

This allows us to get a document from the database.

The next method that we are going to introduce is createDocument.

This method takes data which is

a JavaScript object or equivalently a JSON string,

as the first parameter and the document identifier,

as the second parameter.

So, we are creating a document with a pre-specified document

ID so that it's more easy for us to refer to this in our code.

So, we'll say, return this database createDocument and two parameters,

so that is data and docID.

So this allows us to create a new document and put it into our database.

If we have an existing document whose docID is already known,

then we can use the updateDocument to update

the document with the docID as given here.

And the corresponding data again,

in that form of a JavasScript object or equivalently the JSON string there.

And this will be inserted into the document in

place of what already exists in the document.

So we'll say, return this database updateDocument and

the two parameters pass in

the parameters to the updateDocument method from Couchbase.

And then finally, of course,

we have the read,

create, update, and we need the delete method.

So going in, introducing

public deleteDocument and specifying

the docID as the parameter here,

and this should delete

the document with the given docID.

The getDocument will return

the entire document including the data that we have inserted into the document,

so that we can use in our code to retrieve a document with a given docId.

If the document does not exist then it will return a null.

So that is what we will check for in our code.

The createDocument will return the docID corresponding to

that document since we already specify the docID,

so that would be the same here.

UpdateDocument will update the document and the delete

will delete the corresponding document.

With these changes, let's go ahead and now include this into our

app.module.ts file so that

the CouchbaseService can be used within the remaining components of our application.

So importing the CouchbaseService here

from services

couchbase.service and

then going into the providers.

Let me inject the CouchbaseService here.

Now, my CouchbaseService is now available for use within my application.

So, going into the services in my favorites service,

or recall that in the favorite's service,

this is where I am providing the interface

for the users to save and retrieve their favorites.

So in the favorite service,

I'm going to inject the CouchbaseService,

so let me import the CouchbaseService in here

from couchbase.service which is in the same folder.

And then, I will go into the constructor.

And in addition to the DishService,

I will inject

CouchbaseService into the constructor.

Let me, next, go ahead and inject a variable called docID which I will

use as the ID of the document that I saved in the Couchbase database.

So they will give the stock ID as favorites.

Now, within the constructor, when I start,

as you see initially I have the favorites to

null but if the favorites is in the database,

I want to fetch that and then set that

this favorites to the favorites that has been saved in the database.

So right there, let me go ahead and try to find

the document with this docID

that we have just set up.

So we will search for a document with favorites as the ID by doing getDocument.

If the document exists,

then the document will return.

If not, this will return a null value.

So if it returns a null value that means that the favorites are

have not been saved into the database.

So on that point, we will say,

if doc equal to null,

then we will create the document in the database.

So, to create this document,

there, I will store the favorites,

is to create a JavaScript object with favorites as

the property and then set that to an empty array here.

Because at this moment,

we don't have anything in our favorites so we'll set that to an empty array.

So that is where will start out as

the initial value for our favorites that is saved in our database.

The second parameter of course is the docID and

so that should create a document with the ID favorites in my database.

If the doc already exists,

so this is where we know that,

that favorites has been saved into the database.

So on that point,

as this favorites is equal to doc,

and note that we have saved the favorites in that favorites property here.

So we'll say, doc.favorites and that should

initialize the favorites to what is retrieved from the database.

So this way, when I start out my favorite service

it will be initialized with the favorites saved in the database if it exists.

Otherwise, of course, that favorites is empty.

So which is what we start up with and we will create

the document in the database at this point.

Now, whenever we modify the favorites,

we want to update the favorites in our database.

So the two places where we will do the modification is in the

add favorite and the delete favorite.

So, going to the add favorite method here,

right there, we are modifying the favorite.

So, at this point,

I will save it to the Couchbase by saying,

this Couchbase updateDocument and

the first parameter is the docID that I have already initialized earlier.

And the second parameter, of course,

is the JavaScript object with the property favorites just like we used earlier.

But here, the second value would be the current value of the favorites.

So notice that we are saving the updated value of favorites into our database.

So this is how we will persist the change that we make to the favorites.

So this is where we are making a change to

favorites by adding the new one to the favorites.

And then, this is where we will persist that change to our database.

I need to do exactly the same operation also in my delete favorites.

So going to the delete favorites,

notice that right there we are modifying the favorites here by splicing out the item,

the index from the favorite.

So right there, also I need to save the changes into the database.

So that is where I will do this CouchbaseService updateDocument

and update the current favorites that is saved in my Couchbase.

That's it. Let's save all the changes and then go and take a look at our application.

My app did not get reinstalled.

Sometimes this happens, in that case,

I'm just restarting the tns run android

one more time to redeploy the application onto the device.

So if anytime your app doesn't automatically update,

just relaunch the tns run android, and the app should automatically update itself.

So when my app is now ready,

I'm going to first demonstrate to you that my favorites is currently empty.

Nothing exists there.

So let's go to our dishes and then add a couple to my favorites.

So let me add in,

this dish to my favorites and also going to the second one.

For the second dish,

bring up the action dialogue and click on add to

favorites and that should also add into the favorites.

So this, you should have done as part of your second assignment.

So now, we have two dishes in our favorites.

Then we go and check our favorites.

You'll notice that now there are two dishes in our favorites.

Let me close the application,

so I'm going to close the application and then we'll restart the application.

When you now bring up my favorites,

you would notice that my favorites

what I have saved will still persist in my application.

So even if I restart my application,

even if I restart my device,

the list of favorites that I've saved will always be there within

my application and will be brought up whenever I go to my list of favorites.

Now, after this point,

you will have to explicitly delete your favorites if you

don't want them to be in your list of favorites.

Because, even if you restart your application,

the favorites will still be displayed in the list of favorites.

So, you see how we can use

the Couchbase to persist our favorites data within our application.

With this, we complete this exercise.

In this exercise, we have seen how we can use Couchbase within our application.

This is a good time for you to do a get comment with the message storage with Couchbase.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play