Setting up Ionic with PouchDB

Ionic-PouchDB

In the first part of this series we will setup Ionic with PouchDB to be able to add and delete friends. Most of this code is from Ben Nadel’s series with Ionic. I could have modified this in to a standard “To-do” list app but I believe there is more value in continuity. There’s many ways to setup a local PouchDB instance and tons of tutorials out there. This is meant to be fairly brief because there’s going to be a lot more steps!

If you haven’t read the introduction to this series of blog posts, go here: Using Auth0 Authentication with Cloudant/PouchDB and Ionic

Here is a link to the PouchDB Docs: PouchDB API

Below is the finished product. You’ll be able to add/delete friends and see the data being saved to PouchDB. This is the first step to syncing a local client database with a remote database. The best part about PouchDB is its incredible replication protocol and its offline-first!

 

ionic-pouchdb

 ionic start --v2 Auth0CPDB 

Next, lets start working on the PouchDBService.

 cd Auth0CPDB 

Lets create the initial PouchDBService. I’m going to name each file “Step – X” as we progress and build each file. Read the comments in the code.

 ionic g provider PouchDBService 

Type up this code for the PouchDBService. We will need to update the app.modules.ts file. I’ll post a final version of it at the end of this blog post.

 app/app.modules.ts 

Once we have that setup, lets create the FriendService which will allow us to add, delete and load friends from the database. The comments on this code are from Ben.

Most of the code above was very similar to Ben’s. The following code is where it’ll start to deviate and become specific to Ionic.

Navigate to your home.ts file and type up this code. This is Step 1 to the Home.ts file.

 pages/home.ts 


Now let’s work on the view. Navigate to your home.html file and type up this code. This is Step 1 to the Home.html.

 pages/home.html 

Finally, here it the final code for the app.module.ts:

 app/app.module.ts 

In the next step we will go over setting up Create a Login and Sign Up Page with Auth0 + Ionic Tutorial.