本文为转载文章, 仅用于自己的知识管理收集, 如果涉及侵权,请联系 suziwen1@gmail.com,会第一时间删除
收集该文章,并非代表本人支持文中观点,只是觉得文章内容容易引起思考,讨论,有它自有的价值

转载自: https://medium.com/@duytq94/making-a-simple-note-app-with-pouchdb-in-react-native-ec4810b18a42

Introduce

Nowadays, most applications need a constant connection to the internet. Data loss or slow networks have become a problem most developers need to work around. When it comes to allowing users to go offline without losing their data, CouchDB and PouchDB offer some amazing features that are worth a look.

So the question is: can we achieve an offline-first experience using React Native? Can we store data locally? Can we sync data between multiple devices? So today I’ll try to make a note app, typical types of an application need these features to check if the required features are met.

First, determine which basic features basic note app need.

Can working with slow or no network connection.

Synchronization between devices and server when going online (with actions like creating, reading, updating, deleting notes).

Second, we’ll use CouchDB and PouchDB, what are they?

CouchDB (remote/server) is a database that completely embraces the web. Store your data with JSON documents. Access your documents with your web browser, via HTTP. Query, combine and transform your documents with JavaScript. CouchDB works well with modern web and mobile apps.

PouchDB (local/client) enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back online, keeping the user’s data in sync no matter where they next login.

You haven’t cleared yet? Let’s come to the demo!

Demo

video

Screenshots

Implement

Setup CouchDB as a server

Access here to download a suitable package for your OS. In this article, I’m working with windows.

Follow here to install the package.

Choose Configure a Single Node

Create an account to access and control the database for both Fauxton and auth connection from the client (Fauxton is a native web-based interface built into CouchDB. It provides a basic interface to the majority of the functionality, including the ability to create, update, delete and view documents and design documents).

Setup an account with username = duytq and password = 123456 as an admin

Turn off the firewall or allow inbound port 5984, so connections from outside localhost (client devices at this case) can access to the server (if not, PouchDB at client won’t throw any error, but your result data is empty when synchronization finish).

In my case, I’m going set the firewall’s Inbound Rules like below (Control Panel => Windows Defender Firewall => Advanced settings => Inbound Rules => New Rule…)

Result

Setup PouchDB as a client

First, init React Native project.

Then, follow here to hack PouchDB can work with React Native (I tried pouchdb-react-native but seem this library hasn’t maintained anymore and some features don’t work so I can’t use it).

Finally, install pouchdb-find and pouchdb-upsert so we can query or update data easier.

Something needs to pay attention when working with PouchDB

Limitation

Can not store attachment since RN doesn’t support FileReader.readAsArrayBuffer. If you’re planning to manipulate multiple files in large size, just use PouchDB to store and sync the info file (like url, name, size…) and separate handle file (store, upload, download…) with react-native-fs.
For using SQLite, the maximum size in an item is about 2.1MB, so any field with the size bigger than that will cause the error when storing to the devices.

Attention

Using syncwithlive: true then complete status is never called (sequence of callback: active => change => paused).
Using sync will revoke paused twice (the docs don’t explain but I think the one is pushed and the other is pull, since replicate just triggered once).
If the data has been updated recently and you just call sync/replicate more than 5 times, then don’t have any callback is revoked, so that why I also need to check local db to handle this case.
Calling .cancel() will invoke completed.
If you would like to sort items base on field A, need to index field A first.
Since we use PouchDB in React Native by hacking it (disable readAsArrayBuffer) so attachment will not work. I have to encode the attachment to Base64 and use it as a field with string in this demo.
Using find with a field condition don’t create an index causing a warning.

sync/replicate with filter option won’t invoke any callback when deleting (through api or sdk’s function…) a document from the other side. Explain in the image below.
Solutions here are using update (set _deleted = true) instead of call delete OR add a condition doc._deleted === true in your filter

Deleting a database from remote (Fauxton) won’t cause any changes at the client, your local DB still exist.

Data structure

We only need a DB named note

Let’s talk about React Native code

Init PouchDB variables

We need 2 variables to control a local and a remote. So initialize them.

1export const nameIndex = {UPDATED_AT: 'index-updated_at'} 
2 
3const myIP = "10.68.64.131" 
4 
5export const remoteNoteDb = new PouchDB(`http://duytq:123456@${myIP}:5984/note`) 
6export const localNoteDb = new PouchDB('note', {adapter: 'react-native-sqlite'}) 

The param’s format string is

1http://[username]:[password]@[ipAddress]:[port]/[dbName]

We’ll control the DB with administrative privileges. The IP is localhost’s address in your LAN network and using port as default (5984).

DB security

Designing Home screen: containing a list of notes

Home screen

The note with the latest update will be at the top of the list, meaning we need to sort item by field updated_at and as I said, we have to index this field to make it works.

1remoteNoteDb.createIndex({ 
2    index: { 
3        fields: ['updated_at'], 
4        name: nameIndex.UPDATED_AT, 
5        ddoc: nameIndex.UPDATED_AT, 
6    } 
7}).then((result) => { 
8    console.log(TAG, result) 
9}).catch((err) => { 
10    console.log(TAG, err) 
11}) 

Checking the database on the server, you’ll see a new document similar below

Indexing updated_at field

Notes

At CouchDB, an index is also a document (a row) like others general data (all things at CouchDB is document — include index, filter condition, map-reduce…).
You can always create this index directly from Fauxton instead of js code at the client.
Index just need to initialize once (meaning if you initialize from js code at the client, just run the code once is enough).

When starting, we will retrieve local data (to show any information the device has stored and synchronize data from remote to update it).

Synchronize data…js 28行

1syncDb = () => { 
  this.setState({isLoading: true}) 
  handlerSync = PouchDB.sync(remoteNoteDb, localNoteDb, { 
      live: true, 
      retry: true, 
  }) 
      .on('change', (info) => { 
          // console.log(TAG, 'sync onChange', info) 
      }) 
      .on('paused', (err) => { 
          // console.log(TAG, 'sync onPaused', err) 
          if (this.isAtCurrentScreen) { 
              this.getListNoteFromDb() 
          } 
      }) 
      .on('active', () => { 
          // console.log(TAG, 'sync onActive') 
      }) 
      .on('denied', (err) => { 
          // console.log(TAG, 'sync onDenied', err) 
      }) 
      .on('complete', (info) => { 
          // console.log(TAG, 'sync onComplete', info) 
      }) 
      .on('error', (err) => { 
          // console.log(TAG, 'sync onError', err) 
      }) 
28} 

Synchronization run real-time with live and any data change or update has listened, so at paused we check if the user’s not at this screen => don’t need to read the local data and render the UI.

then read data from local DB to display on the screenjs 24行

1getListNoteFromDb = () => { 
  this.setState({isLoading: true}) 
  localNoteDb 
      .find({ 
          selector: { 
              updated_at: {$gt: true} 
          }, 
          fields: ['_id', 'title', 'updated_at'], 
          use_index: nameIndex.UPDATED_AT, 
          sort: [{updated_at: 'desc'}] 
      }) 
      .then(result => { 
          console.log(TAG, 'find list note', result) 
          this.setState({ 
              isLoading: false, 
              arrNote: [...result.docs] 
          }) 
      }) 
      .catch(err => { 
          // console.log(TAG, 'err find list note', err) 
          this.setState({isLoading: false}) 
          Toast.show(err.message) 
      }) 
24} 

We’re checking if the user goes to detail or create new note screen and come back, we should reload the list since maybe they have changed notes.

1returnFromDetail = () => { 
2    this.isAtCurrentScreen = true 
3    this.getListNoteFromDb() 
4} 
5 
6returnFromAddNewNote = () => { 
7    this.isAtCurrentScreen = true 
8    this.getListNoteFromDb() 
9} 

Designing Detail screen: displays detailed information, edit, delete a note

READ NOTE

Detail screen

We’ll use the note _id from the previous screen (home screen) to get full note info. Using get and pass docId as a param.

And how about a note we’re reading at detail has been deleted from another device then synchronize to the current device? How can we catch this case?

Checking and finding the current docId in an array of docs have changed at change callback is not a good way.

change callback giving us a list of docs have been changed

So my idea is just to catch the missing error meaning current doc has been deleted then we come back to home.

1getDetailNoteFromDb = () => { 
  this.setState({isLoading: true}) 
  localNoteDb 
      .get(this.idNote) 
      .then(result => { 
          // console.log(TAG, 'localNoteDb get', result) 
          this.setState({ 
              isLoading: false, 
              detailNote: result 
          }) 
      }) 
      .catch(err => { 
          console.log(TAG, 'err find list note', err) 
          if (err.message === 'missing') { 
              Toast.show('This note has been deleted') 
              this.handleBackPress() 
          } else { 
              this.setState({isLoading: false}) 
              Toast.show(err.message) 
          } 
      }) 
22} 

Enabling synchronization at this screen too (although we have done it before at home) because it helps us instantly update the data (if not, we don’t have any trigger to know when data was updated by other devices when we’re locating at this detail screen).

1syncDb = () => { 
  handlerSync = PouchDB.sync(remoteNoteDb, localNoteDb, { 
      live: true, 
      retry: true, 
  }) 
      .on('change', (info) => { 
          // console.log(TAG, 'sync onChange', info) 
      }) 
      .on('paused', (err) => { 
          // console.log(TAG, 'sync onPaused', err) 
          this.getDetailNoteFromDb() 
      }) 
      .on('active', () => { 
          // console.log(TAG, 'sync onActive') 
      }) 
      .on('denied', (err) => { 
          // console.log(TAG, 'sync onDenied', err) 
      }) 
      .on('complete', (info) => { 
          // console.log(TAG, 'sync onComplete', info) 
      }) 
      .on('error', (err) => { 
          // console.log(TAG, 'sync onError', err) 
      }) 
25} 

UPDATE NOTE

At this demo scope, allow user can edit title, image, content.

First, installing pouchdb-upsert for easier to update the data. If not, you have to put all item properties instead of only fields need to change.

Update notejs 32行

1updateNote = () => { 
  this.setState({isLoading: true}) 
  localNoteDb 
      .upsert(this.idNote, doc => { 
          if (this.refTextInputTitle && this.refTextInputTitle._lastNativeText) { 
              doc.title = this.refTextInputTitle._lastNativeText 
          } 
          if (this.state.newImage) { 
              doc.img = this.state.newImage 
          } 
          if (this.refTextInputContent && this.refTextInputContent._lastNativeText) { 
              doc.content = this.refTextInputContent._lastNativeText 
          } 
          doc.updated_at = moment().unix() 
          return doc 
      }) 
      .then(response => { 
          if (response.updated) { 
              Toast.show('Updated') 
              this.setState({isLoading: false}) 
          } else { 
              Toast.show('Update fail, please try again') 
              this.setState({isLoading: false}) 
          } 
25 
      }) 
      .catch(err => { 
          console.log(TAG, err) 
          Toast.show(err.message) 
          this.setState({isLoading: false}) 
      }) 
32} 

DELETE NOTE

Deletes the document. doc is required to be a document with at least an _id and a _revproperty. Sending the full document will work as well.

1deleteNote = () => { 
  this.setState({isLoading: true}) 
  localNoteDb.remove(this.idNote, this.state.detailNote._rev) 
      .then(response => { 
          if (response.ok) { 
              this.handleBackPress() 
          } else { 
              Toast.show('Delete note fail') 
              this.setState({isLoading: false}) 
          } 
      }) 
      .catch(err => { 
          console.log(TAG, err) 
          Toast.show(err.message) 
          this.setState({isLoading: false}) 
      }) 
17} 

After deleting successfully, go back to home screen and reload the list.

Designing Add New Note screen

Creating a new note will create an item in the DB.

Image (if exist) will be stored with format Base64 encode (react-native-image-picker supports exporting this format).

Each item can’t larger than 2.1MB as I said, so we should constraint the maximum image size is 500x500px.

1onSaveNotePress = () => { 
Keyboard.dismiss() 
if (this.refTextInputTitle && this.refTextInputTitle._lastNativeText && this.refTextInputContent && this.refTextInputContent._lastNativeText) { 
  this.setState({ isLoading: true }) 
  let newNote = { 
    title: this.refTextInputTitle._lastNativeText, 
    updated_at: moment().unix(), 
    content: this.refTextInputContent._lastNativeText, 
    img: this.state.image 
  } 
  localNoteDb 
    .post(newNote) 
    .then(response => { 
      if (response.ok) { 
        Toast.show('Add new note success') 
        this.handleBackPress() 
      } else { 
        Toast.show('Add new note fail') 
        this.setState({ isLoading: false }) 
      } 
    }) 
    .catch(err => { 
      console.log(TAG, err) 
      Toast.show(err.message) 
      this.setState({ isLoading: false }) 
    }) 
} 
28} 

After creating successfully, go back to home screen and reload the list.

Conclusion

The scope of this demo only explores the commonly used basic things of PouchDB. It has many other interesting things waiting for you to discover. Refer the docs to get more features PouchDB can help.

If you have any questions or issues with the deployment, leaving a comment and we will work together to find a solution

And of course, the source code is always available

Making a simple note app with PouchDB in React Native