Grocery List App

Sync a Grocery List across multiple devices/web apps

Github Links

Github    Clone in Desktop    Download ZIP

Platforms (Click the icon to download/start the app)

Technologies

Tools

Grocery List App

What does this app do

This app maintains a grocery list. There are versions for the web, Android, and Apple devices. The grocery lists on each device are kept in sync to a common network database, when connected to the net. However, an offline copy is also kept on the device/browser. This copy can be edited while offline, and the next time you connect to the net, it will be re-synchronized with the network database. This program is a demonstration of solution for syncing multiple databases, solving the following problems:

Problems

  1. Without a database, your data is not persistent
  2. If you store data in remote database to get persistance; but you can't do anything if the network goes down.
  3. If you store the data in local storage, to get persistance, and can work without a network; but you have multiple copies of your database on each browser, on each computer, or device which accesses the data

Solution

  1. Pouch DB allows you to organize and store your data in local storage for persistance, and the ability to work offline, on devices or different browsers/computers.
  2. Couch DB (using Cloudant for free server space), allows for a network accessible common database for syncing all devices/browsers/computers
  3. This program uses the automatic syncing capabilities of Pouch DB, and Couch DB to allow synchronization of multiple databases across multiple devices/browsers/computers to come in sync when they are connected together on the network.

How does it do it

Couch DB (on Cloudant), acts as a central repository for your shared data. A pouch DB instance on each web-page, allows local storage of data on each browser/computer/device, if you aren't connected to the Couch DB database on the network. The next time you are connected to the Couch DB database on the network, the software will automatically sync the databases, so they are consistent.

So, for instance, suppose you had an instance of this application open on Chrome, another on Firefox, and another version on a mobile device, as well as a central repository on Couch DB (Cloudant). If all of the versions were connected to the network to the Couch DB database, each instance of the program would have an exact copy of the Couch DB database stored in the local Pouch DB database in local storage. If you were to add a record on the Chrome instance of the app, it would update the local storage Pouch DB database. This would trigger an automatic sync with the Couch DB database on the network, and this would then trigger automatic updates on the instances running on Firefox, as well as the mobile device. Since, this program is using Angular JS; which already supports two way data binding, this is an example of six way data binding.

  • Two Way data binding - HTML View and $scope in angular is kept in sync
  • Three Way data binding - Above, plus kept in sync with local Chrome Pouch DB
  • Four Way data binding - Above, plus kept in sync with remote Couch DB (Cloudant)
  • Five Way data binding - Above, plus kept in sync with Firefox Pouch DB local storage
  • Six Way data binding - Above, plus kept in sync with an Android App Pouch DB instance

If the network is not available to your mobile device, the local pouch DB database allows you to modify a local copy of the database. Then, when your device is reconnected to the network (couch DB database), it will automatically sync the databases, and these changes will be distributed to all of the other instances that are online.

Getting the App

This app is available three ways:

  1. On the web:


  2. On Android devices through the Amazon Apps Store .
  3. On Apple devices (iPhone/iPad), by downloading an app called Ionic View, and selecting the app id: {{ios.ionicViewId}}. See the next section for directions to try the app.

Running the App on Apple Devices, using Ionic View

  1. Load the Ionic View App from the App Store



  2. Start Ionic View



  3. Select "Preview a Shared App"



  4. Enter the code for this App {{ios.ionicViewId}}, click "Load App"



Platforms


{{details.web.name}}

{{details.web.info}}

Learn More

{{details.android.name}}

{{details.android.info}}

Learn More

{{details.ios.name}}

{{details.ios.info}}

Learn More

{{details.arduino.name}}

{{details.arduino.info}}

Learn More

{{details.raspberryPi.name}}

{{details.raspberryPi.info}}

Learn More

{{details.intelEdison.name}}

{{details.intelEdison.info}}

Learn More

Technologies


{{details.html5.name}}

{{details.html5.info}}

Learn More

{{details.css3.name}}

{{details.css3.info}}

Learn More

{{details.javascript.name}}

{{details.javascript.info}}

Learn More

{{details.jQuery.name}}

{{details.jQuery.info}}

Learn More

{{details.jQueryMobile.name}}

{{details.jQueryMobile.info}}

Learn More

{{details.angularJS.name}}

{{details.angularJS.info}}

Learn More

{{details.bootstrap.name}}

{{details.bootstrap.info}}

Learn More

{{details.php.name}}

{{details.php.info}}

Learn More

{{details.python.name}}

{{details.python.info}}

Learn More

{{details.nodeJS.name}}

{{details.nodeJS.info}}

Learn More

{{details.expressJS.name}}

{{details.expressJS.info}}

Learn More

{{details.firebase.name}}

{{details.firebase.info}}

Learn More

{{details.pouchDB.name}}

{{details.pouchDB.info}}

Learn More

{{details.couchDB.name}}

{{details.couchDB.info}}

Learn More

{{details.mongoDB.name}}

{{details.mongoDB.info}}

Learn More

{{details.mySQL.name}}

{{details.mySQL.info}}

Learn More

Tools


{{details.webStorm.name}}

{{details.webStorm.info}}

Learn More

{{details.ionic.name}}

{{details.ionic.info}}

Learn More

{{details.cordova.name}}

{{details.cordova.info}}

Learn More

{{details.phoneGap.name}}

{{details.phoneGap.info}}

Learn More

{{details.yeoman.name}}

{{details.yeoman.info}}

Learn More

{{details.github.name}}

{{details.github.info}}

Learn More

{{details.npm.name}}

{{details.npm.info}}

Learn More

{{details.grunt.name}}

{{details.grunt.info}}

Learn More

{{details.bower.name}}

{{details.bower.info}}

Learn More