├── README.md
├── img
├── app-logos
│ ├── shoppinglist192.png
│ ├── shoppinglist48.png
│ ├── shoppinglist96.png
│ ├── shoppinglist_splash.png
│ ├── shoppinglist_splash_desktop.png
│ ├── shoppinglist_splash_hybrid_mobile.png
│ ├── shoppinglist_splash_native_mobile.png
│ └── shoppinglist_splash_pwa.png
├── cloudant-sync-logo.png
├── cordova-logo.png
├── electron-logo.png
├── emberjs-logo.png
├── ionic-logo.png
├── kotlin-logo.png
├── mockup-01.png
├── mockup-02.png
├── mockup-03.png
├── polymer-logo.png
├── polymer-logo.svg
├── pouchdb-logo.png
├── preact-logo.jpg
├── pwa-logo.png
├── pwa-logo.svg
├── react-logo.png
├── react-logo.svg
├── react-native-logo.png
├── react-native-logo.svg
├── swift-logo.png
└── vuejs-logo.png
├── mockups.sketch
└── templates
├── CONTRIBUTING.md
├── LICENSE
├── MAINTAINERS.md
└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | # Shopping List
2 |
3 | **Note:** This is a work in progress.
4 |
5 | 
6 |
7 | Shopping List is a series of Offline First demo apps, each built using a different stack. These demo apps cover Progressive Web Apps, hybrid mobile apps, native mobile apps, and desktop apps.
8 |
9 | The Shopping List demo apps are brought to you by:
10 |
11 | * [Va Barbosa](https://github.com/vabarbosa)
12 | * [Glynn Bird](https://github.com/glynnbird)
13 | * [Juan Camacho](https://github.com/jcamach2)
14 | * [Teri Chadbourne](https://github.com/terichadbourne)
15 | * [Bradley Holt](https://github.com/bradley-holt)
16 | * [Nick Kasten](https://github.com/kastentx)
17 | * [Maureen McElaney](https://github.com/mmcelaney)
18 | * [Lorna Jane Mitchell](https://github.com/lornajane)
19 | * [Raj Singh](https://github.com/rajrsingh)
20 | * [Mark Sturdevant](https://github.com/markstur)
21 | * [Patrick Titzler](https://github.com/ptitzler)
22 | * [Mark Watson](https://github.com/markwatsonatx)
23 |
24 | ## Table of Contents
25 |
26 |
27 |
28 |
29 |
30 | - [Purposes](#purposes)
31 | - [Features](#features)
32 | - [Implementations](#implementations)
33 | - [Vanilla JS and PouchDB](#vanilla-js-and-pouchdb)
34 | - [Polymer and PouchDB](#polymer-and-pouchdb)
35 | - [React and PouchDB](#react-and-pouchdb)
36 | - [Preact and PouchDB](#preact-and-pouchdb)
37 | - [Vue.js and PouchDB](#vuejs-and-pouchdb)
38 | - [Ember.js and PouchDB](#emberjs-and-pouchdb)
39 | - [React Native and PouchDB](#react-native-and-pouchdb)
40 | - [React Native and Cloudant Sync](#react-native-and-cloudant-sync)
41 | - [Ionic and PouchDB](#ionic-and-pouchdb)
42 | - [Ionic and Cloudant Sync](#ionic-and-cloudant-sync)
43 | - [Cordova and PouchDB](#cordova-and-pouchdb)
44 | - [Cordova and Cloudant Sync](#cordova-and-cloudant-sync)
45 | - [Swift and Cloudant Sync](#swift-and-cloudant-sync)
46 | - [Kotlin and Cloudant Sync](#kotlin-and-cloudant-sync)
47 | - [Electron and PouchDB](#electron-and-pouchdb)
48 | - [Interoperability](#interoperability)
49 | - [Shopping List Example](#shopping-list-example)
50 | - [Shopping List Item Example](#shopping-list-item-example)
51 | - [Geolocation Context Example](#geolocation-context-example)
52 | - [Domain Model Implementations](#domain-model-implementations)
53 | - [JavaScript](#javascript)
54 | - [Swift](#swift)
55 | - [Kotlin](#kotlin)
56 | - [Style Guides](#style-guides)
57 | - [Templates](#templates)
58 |
59 |
60 |
61 | ## Purposes
62 |
63 | These demo apps will each serve multiple purposes:
64 |
65 | * Reference Implementations
66 | * Live Demos
67 | * Tutorials
68 | * Workshops
69 | * [Developer Journeys](https://developer.ibm.com/code/journey/)
70 |
71 | ## Features
72 |
73 | Shopping List is a simple demo app, with a limited feature set. Here is a list of features written as user stories grouped by Epic:
74 |
75 | * Planning
76 | * As a \, I want to \ so that \.
77 | * As a \, I want to \ so that \.
78 | * As a \, I want to \ so that \.
79 | * Shopping
80 | * As a \, I want to \ so that \.
81 | * As a \, I want to \ so that \.
82 | * As a \, I want to \ so that \.
83 | * As a \, I want to \ so that \.
84 | * Offline First
85 | * As a \, I want to \ so that \.
86 | * As a \, I want to \ so that \.
87 | * As a \, I want to \ so that \.
88 | * Multi-User / Multi-Device
89 | * As a \, I want to \ so that \.
90 | * As an \, I want to \ so that \.
91 | * As an \, I want to \ so that \.
92 | * Geolocation
93 | * As a \, I want to \ so that \.
94 | * As a \, I want to \ so that \.
95 | * As a \, I want to \ so that \.
96 |
97 | ## Implementations
98 |
99 | ### Vanilla JS and PouchDB
100 |
101 |  
102 |
103 | GitHub Repository:
104 | https://github.com/ibm-watson-data-lab/shopping-list-vanillajs-pouchdb
105 |
106 | ### Polymer and PouchDB
107 |
108 |   
109 |
110 | GitHub Repository:
111 | https://github.com/ibm-watson-data-lab/shopping-list-polymer-pouchdb
112 |
113 | ### React and PouchDB
114 |
115 |   
116 |
117 | GitHub Repository:
118 | https://github.com/ibm-watson-data-lab/shopping-list-react-pouchdb
119 |
120 | ### Preact and PouchDB
121 |
122 |   
123 |
124 | GitHub Repository:
125 | https://github.com/ibm-watson-data-lab/shopping-list-preact-pouchdb
126 |
127 | ### Vue.js and PouchDB
128 |
129 |   
130 |
131 | GitHub Repository:
132 | https://github.com/ibm-watson-data-lab/shopping-list-vuejs-pouchdb
133 |
134 | ### Ember.js and PouchDB
135 |
136 |   
137 |
138 | GitHub Repository:
139 | https://github.com/ibm-watson-data-lab/shopping-list-emberjs-pouchdb
140 |
141 | ### React Native and PouchDB
142 |
143 |  
144 |
145 | GitHub Repository:
146 | https://github.com/ibm-watson-data-lab/shopping-list-react-native-pouchdb
147 |
148 | ### React Native and Cloudant Sync
149 |
150 |  
151 |
152 | GitHub Repository:
153 | https://github.com/ibm-watson-data-lab/shopping-list-react-native-cloudant-sync
154 |
155 | ### Ionic and PouchDB
156 |
157 |  
158 |
159 | GitHub Repository:
160 | https://github.com/ibm-watson-data-lab/shopping-list-ionic-pouchdb
161 |
162 | ### Ionic and Cloudant Sync
163 |
164 |  
165 |
166 | GitHub Repository:
167 | https://github.com/ibm-watson-data-lab/shopping-list-ionic-cloudant-sync
168 |
169 | ### Cordova and PouchDB
170 |
171 |  
172 |
173 | GitHub Repository:
174 | https://github.com/ibm-watson-data-lab/shopping-list-cordova-pouchdb
175 |
176 | ### Cordova and Cloudant Sync
177 |
178 |  
179 |
180 | GitHub Repository:
181 | https://github.com/ibm-watson-data-lab/shopping-list-cordova-cloudant-sync
182 |
183 | ### Swift and Cloudant Sync
184 |
185 |  
186 |
187 | GitHub Repository:
188 | https://github.com/ibm-watson-data-lab/shopping-list-swift-cloudant-sync
189 |
190 | ### Kotlin and Cloudant Sync
191 |
192 |  
193 |
194 | GitHub Repository:
195 | https://github.com/ibm-watson-data-lab/shopping-list-kotlin-cloudant-sync
196 |
197 | ### Electron and PouchDB
198 |
199 |  
200 |
201 | GitHub Repository:
202 | https://github.com/ibm-watson-data-lab/shopping-list-electron-pouchdb
203 |
204 | ## Interoperability
205 |
206 | Implementations of the Shopping List demo app share a data model. This allows the demo apps to be interoperable with one another. For example, a user could plan a shopping trip with a desktop app built using Electron and PouchDB. The same user could then use a native app built using Kotlin and Cloudant Sync while shopping for groceries. Much of the design of this data model is inspired by the [CouchDB Best Practices](https://ehealthafrica.github.io/couchdb-best-practices/) collection from eHealth Africa.
207 |
208 | ### Shopping List Example
209 |
210 | ```javascript
211 | {
212 | "_id": "list:cj6mj1zfj000001n1ugjfkj33",
213 | "type": "list",
214 | "version": 1,
215 | "title": "Groceries",
216 | "checked": false,
217 | "place": {
218 | "title": "Healthy Living",
219 | "license": "Data © OpenStreetMap contributors, ODbL 1.0. http://www.openstreetmap.org/copyright",
220 | "lat": "44.46282415",
221 | "lon": "-73.1799710198028",
222 | "address": {
223 | "supermarket": "Healthy Living",
224 | "road": "Dorset Street",
225 | "city": "South Burlington",
226 | "county": "Chittenden County",
227 | "state": "Vermont",
228 | "postcode": "05406",
229 | "country": "United States of America",
230 | "countryCode": "us"
231 | }
232 | },
233 | "createdAt": "2017-08-21T18:40:00.000Z",
234 | "updatedAt": "2017-08-21T18:40:00.000Z"
235 | }
236 | ```
237 |
238 | Notes:
239 |
240 | * `_id`: Unique identifier for the document. Generated from the following values, separated by colons:
241 | * Document type (`list`).
242 | * [Collision-resistant ID (cuid)](https://usecuid.org/).
243 | * `type`: Document type (will always have a value of `list` for a shopping list).
244 | * `version`: Document schema version.
245 | * `title`: User-generated title for the shopping list.
246 | * `checked`: Has this shopping list been fully checked off?
247 | * `place`: Associates the shopping list with a geolocation. Derived from OpenStreetMap's [Nominatim](http://wiki.openstreetmap.org/wiki/Nominatim) search tool. The example above is derived from the following search:
248 | ```
249 | http://nominatim.openstreetmap.org/search/Healthy%20Living%20Vermont?format=json&addressdetails=1&namedetails=1
250 | ```
251 | * `createdAt`: Date and time at which the document was created. Expressed as a simplified extended ISO format in zero UTC offset (which can be generated in JavaScript with `new Date().toISOString()`).
252 | * `updatedAt`: Date and time at which the document was last updated. Expressed as a simplified extended ISO format in zero UTC offset.
253 |
254 | ### Shopping List Item Example
255 |
256 | ```javascript
257 | {
258 | "_id": "item:cj6mn7e36000001p9n14fgk6s",
259 | "type": "item",
260 | "version": 1,
261 | "list": "list:cj6mj1zfj000001n1ugjfkj33",
262 | "title": "Mangos",
263 | "checked": false,
264 | "createdAt": "2017-08-21T18:43:00.000Z",
265 | "updatedAt": "2017-08-21T18:43:00.000Z"
266 | }
267 | ```
268 |
269 | Notes:
270 |
271 | * `_id`: Unique identifier for the document. Generated from the following values, separated by colons:
272 | * Document type (`item`).
273 | * [Collision-resistant ID (cuid)](https://usecuid.org/).
274 | * `type`: Document type (will always have a value of `item` for a shopping list item).
275 | * `version`: Document schema version.
276 | * `list`: The unique identifier of the parent shopping list
277 | * `title`: User-generated title for the shopping list item.
278 | * `checked`: Has this shopping list item been checked off?
279 | * `createdAt`: Date and time at which the document was created. Expressed as a simplified extended ISO format in zero UTC offset (which can be generated in JavaScript with `new Date().toISOString()`).
280 | * `updatedAt`: Date and time at which the document was last updated. Expressed as a simplified extended ISO format in zero UTC offset.
281 |
282 | Here is an example of a [Mango](http://docs.couchdb.org/en/2.1.0/api/database/find.html) / [`pouchdb-find`](https://pouchdb.com/guides/mango-queries.html) / [Cloudant Query](https://console.bluemix.net/docs/services/Cloudant/api/cloudant_query.html) selector that fetches a single shopping list's items:
283 |
284 | ```javascript
285 | {
286 | "selector": {
287 | "type": "item",
288 | "list": "list:cj6mj1zfj000001n1ugjfkj33"
289 | }
290 | }
291 | ```
292 |
293 | Note that the above query can also be used to get a count of items within a shopping list by simply using the `Array.length` property (or equivalent) and accounting for the shopping list document being included in the results. Since PouchDB just runs every reduce function in memory, there is no benefit to using a `_count` reduce function when using PouchDB. The Cloudant Sync libraries for iOS and Android do not support map/reduce (but do support Cloudant Query / Mango).
294 |
295 | ### Geolocation Context Example
296 |
297 | A geolocation context is used to notify the user when the geolocation capability of their device has indicated that they are near a place associated with a shopping list. This provides the user with quick access to the shopping list for their current geographic context.
298 |
299 | ```javascript
300 | {
301 | "_id": "geo:drguywpyxp4t:cj6mn7e36000001p1q02dlz5q",
302 | "type": "geo",
303 | "list": "list:cj6mj1zfj000001n1ugjfkj33",
304 | "version": 1,
305 | "notified": false,
306 | "createdAt": "2017-08-21T18:57:00.000Z",
307 | "updatedAt": "2017-08-21T18:57:00.000Z"
308 | }
309 | ```
310 |
311 | Notes:
312 |
313 | * `_id`: Unique identifier for the document. Generated from the following values, separated by colons:
314 | * Document type (`geo`).
315 | * Geohash of the `place.lat` and `place.lon` values from the associated shopping list at a precision of 12 (which can be generated in JavaScript using the [`latlon-geohash`](https://www.npmjs.com/package/latlon-geohash) module).
316 | * [Collision-resistant ID (cuid)](https://usecuid.org/).
317 | * `type`: Document type (will always have a value of `geo` for a geolocation context item).
318 | * `list`: The unique identifier of the parent shopping list
319 | * `version`: Document schema version.
320 | * `notified`: Has a notification already been sent for this geolocation context? Note that the geolocation context document may be deleted after a notification has been sent and the corresponding shopping list has been fully checked off.
321 | * `createdAt`: Date and time at which the document was created. Expressed as a simplified extended ISO format in zero UTC offset (which can be generated in JavaScript with `new Date().toISOString()`).
322 | * `updatedAt`: Date and time at which the document was last updated. Expressed as a simplified extended ISO format in zero UTC offset.
323 |
324 | Here is an example of a [Mango](http://docs.couchdb.org/en/2.1.0/api/database/find.html) / [`pouchdb-find`](https://pouchdb.com/guides/mango-queries.html) / [Cloudant Query](https://console.bluemix.net/docs/services/Cloudant/api/cloudant_query.html) selector that utilizes the built-in `_all_docs` view to query for geolocation contexts near the current geolocation coordinates of the device (the value `drguyw` below is the geohash of the user's location at a precision of 6, or ±0.61 km):
325 |
326 | ```javascript
327 | {
328 | "selector": {
329 | "_id": {
330 | "$gte": "geo:drguyw",
331 | "$lte": "geo:drguyw\uffff"
332 | }
333 | }
334 | }
335 | ```
336 |
337 | ## Domain Model Implementations
338 |
339 | ### JavaScript
340 |
341 | GitHub Repository:
342 | https://github.com/ibm-watson-data-lab/shopping-list-model-js
343 |
344 | ### Swift
345 |
346 | GitHub Repository:
347 | https://github.com/ibm-watson-data-lab/shopping-list-model-swift
348 |
349 | ### Kotlin
350 |
351 | GitHub Repository:
352 | https://github.com/ibm-watson-data-lab/shopping-list-model-kotlin
353 |
354 | ## Style Guides
355 |
356 | General guidelines:
357 |
358 | * Where possible, a consistent style is maintained between the different demo app implementations.
359 | * Where there is a style that is common for a particular type of application we defer to that style.
360 |
361 | Implementations:
362 |
363 | * **Vanilla JS:** Material Design (using [MDC-Web](https://material.io/components/web/))
364 | * **Polymer:** Material Design (using [Polymer App Toolbox](https://www.polymer-project.org/2.0/toolbox/))
365 | * **React:** Material Design (using [Material-UI](http://www.material-ui.com/))
366 | * **Preact:** Material Design (using [preact-material-components](https://github.com/prateekbh/preact-material-components))
367 | * **Vue.js:** Material Design (using [Vue Material](http://vuematerial.io/))
368 | * **Ember.js:** Material Design (using [MDC-Web](https://material.io/components/web/))
369 | * **React Native:** iOS Design Themes or Material Design (depending on the target platform)
370 | * **Ionic:** iOS Design Themes or Material Design (depending on the target platform)
371 | * **Cordova:** iOS Design Themes or Material Design (depending on the target platform)
372 | * **Swift:** iOS Design Themes
373 | * **Kotlin:** Material Design
374 | * **Electron:** Material Design (using [MDC-Web](https://material.io/components/web/))
375 |
376 | ## Templates
377 |
378 | See the `templates` directory for templates that can be used for each demo app implementation. This includes the following files:
379 |
380 | * `LICENSE`
381 | * `README.md`
382 |
--------------------------------------------------------------------------------
/img/app-logos/shoppinglist192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/app-logos/shoppinglist192.png
--------------------------------------------------------------------------------
/img/app-logos/shoppinglist48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/app-logos/shoppinglist48.png
--------------------------------------------------------------------------------
/img/app-logos/shoppinglist96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/app-logos/shoppinglist96.png
--------------------------------------------------------------------------------
/img/app-logos/shoppinglist_splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/app-logos/shoppinglist_splash.png
--------------------------------------------------------------------------------
/img/app-logos/shoppinglist_splash_desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/app-logos/shoppinglist_splash_desktop.png
--------------------------------------------------------------------------------
/img/app-logos/shoppinglist_splash_hybrid_mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/app-logos/shoppinglist_splash_hybrid_mobile.png
--------------------------------------------------------------------------------
/img/app-logos/shoppinglist_splash_native_mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/app-logos/shoppinglist_splash_native_mobile.png
--------------------------------------------------------------------------------
/img/app-logos/shoppinglist_splash_pwa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/app-logos/shoppinglist_splash_pwa.png
--------------------------------------------------------------------------------
/img/cloudant-sync-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/cloudant-sync-logo.png
--------------------------------------------------------------------------------
/img/cordova-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/cordova-logo.png
--------------------------------------------------------------------------------
/img/electron-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/electron-logo.png
--------------------------------------------------------------------------------
/img/emberjs-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/emberjs-logo.png
--------------------------------------------------------------------------------
/img/ionic-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/ionic-logo.png
--------------------------------------------------------------------------------
/img/kotlin-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/kotlin-logo.png
--------------------------------------------------------------------------------
/img/mockup-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/mockup-01.png
--------------------------------------------------------------------------------
/img/mockup-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/mockup-02.png
--------------------------------------------------------------------------------
/img/mockup-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/mockup-03.png
--------------------------------------------------------------------------------
/img/polymer-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/polymer-logo.png
--------------------------------------------------------------------------------
/img/polymer-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/img/pouchdb-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/pouchdb-logo.png
--------------------------------------------------------------------------------
/img/preact-logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/preact-logo.jpg
--------------------------------------------------------------------------------
/img/pwa-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/pwa-logo.png
--------------------------------------------------------------------------------
/img/pwa-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/img/react-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/react-logo.png
--------------------------------------------------------------------------------
/img/react-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/react-native-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/react-native-logo.png
--------------------------------------------------------------------------------
/img/react-native-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
71 |
--------------------------------------------------------------------------------
/img/swift-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/swift-logo.png
--------------------------------------------------------------------------------
/img/vuejs-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/img/vuejs-logo.png
--------------------------------------------------------------------------------
/mockups.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibm-watson-data-lab/shopping-list/de9c3c615b660b321d6cb45349d80c7fac8d098e/mockups.sketch
--------------------------------------------------------------------------------
/templates/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing In General
2 |
3 | Our project welcomes external contributions! If you have an itch, please
4 | feel free to scratch it.
5 |
6 | To contribute code or documentation, you can submit a pull request. A
7 | good way to familiarize yourself with the codebase and contribution process is
8 | to look for and tackle low-hanging fruit in the issue tracker. Before embarking on
9 | a more ambitious contribution, please raise an issue for discussion.
10 |
11 | **We appreciate your effort, and want to avoid a situation where a contribution
12 | requires extensive rework (by you or by us), sits in the queue for a long time,
13 | or cannot be accepted at all!**
14 |
15 | ### Proposing new features
16 |
17 | If you would like to implement a new feature, please raise an issue before sending a pull
18 | request so the feature can be discussed. This is to avoid you spending your
19 | valuable time working on a feature that the project developers are not willing
20 | or able to accept into the code base.
21 |
22 | ### Fixing bugs
23 |
24 | If you would like to fix a bug, please raise an issue before sending a pull
25 | request so it can be discussed. If the fix is trivial or non controversial then
26 | this is not usually necessary.
27 |
28 | ### Merge approval
29 |
30 | Two project maintainers will need to review and approve your pull request before it
31 | is merged. They may request changes or ask questions so keep an eye on your pull
32 | request while review is in progress. Maintainers will expect that:
33 |
34 | - tests pass, and new features have accompanying tests (see the project `README` for more information about running tests)
35 | - documentation has been updated where appropriate
36 | - any coding standards have been followed (see the project `README` for more information about coding standards)
37 |
38 | Some or all of these checks may be automated so look out for immediate feedback from the
39 | CI system on your pull request.
40 |
41 | For more details, see the [MAINTAINERS](MAINTAINERS.md) page.
42 |
43 | ## Developer Setup
44 |
45 | Follow the "Run locally" steps in the `README` and you will have a local git repo
46 | and test environment, or use "Deploy to Bluemix" and you can use the Bluemix DevOps environment.
47 |
48 |
--------------------------------------------------------------------------------
/templates/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/templates/MAINTAINERS.md:
--------------------------------------------------------------------------------
1 | # Maintainers Guide
2 |
3 | This guide is intended for maintainers - anybody with commit access to one or
4 | more Code Pattern repositories.
5 |
6 | ## Methodology
7 |
8 | This repository does not have a traditional release management cycle, but
9 | should instead be maintained as as a useful, working, and polished reference at
10 | all times. While all work can therefore be focused on the master branch, the
11 | quality of this branch should never be compromised.
12 |
13 | The remainder of this document details how to merge pull requests to the
14 | repositories.
15 |
16 | ## Merge approval
17 |
18 | The project maintainers use LGTM (Looks Good To Me) in comments on the pull
19 | request to indicate acceptance prior to merging. A change requires LGTMs from
20 | two project maintainers. If the code is written by a maintainer, the change
21 | only requires one additional LGTM.
22 |
23 | ## Reviewing Pull Requests
24 |
25 | We recommend reviewing pull requests directly within GitHub. This allows a
26 | public commentary on changes, providing transparency for all users. When
27 | providing feedback be civil, courteous, and kind. Disagreement is fine, so long
28 | as the discourse is carried out politely. If we see a record of uncivil or
29 | abusive comments, we will revoke your commit privileges and invite you to leave
30 | the project.
31 |
32 | During your review, consider the following points:
33 |
34 | ### Does the change have positive impact?
35 |
36 | Some proposed changes may not represent a positive impact to the project. Ask
37 | whether or not the change will make understanding the code easier, or if it
38 | could simply be a personal preference on the part of the author (see
39 | [bikeshedding](https://en.wiktionary.org/wiki/bikeshedding)).
40 |
41 | Pull requests that do not have a clear positive impact should be closed without
42 | merging.
43 |
44 | ### Do the changes make sense?
45 |
46 | If you do not understand what the changes are or what they accomplish, ask the
47 | author for clarification. Ask the author to add comments and/or clarify test
48 | case names to make the intentions clear.
49 |
50 | At times, such clarification will reveal that the author may not be using the
51 | code correctly, or is unaware of features that accommodate their needs. If you
52 | feel this is the case, work up a code sample that would address the pull
53 | request for them, and feel free to close the pull request once they confirm.
54 |
55 | ### Does the change introduce a new feature?
56 |
57 | For any given pull request, ask yourself "is this a new feature?" If so, does
58 | the pull request (or associated issue) contain narrative indicating the need
59 | for the feature? If not, ask them to provide that information.
60 |
61 | Are new unit tests in place that test all new behaviors introduced? If not, do
62 | not merge the feature until they are! Is documentation in place for the new
63 | feature? (See the documentation guidelines). If not do not merge the feature
64 | until it is! Is the feature necessary for general use cases? Try and keep the
65 | scope of any given component narrow. If a proposed feature does not fit that
66 | scope, recommend to the user that they maintain the feature on their own, and
67 | close the request. You may also recommend that they see if the feature gains
68 | traction among other users, and suggest they re-submit when they can show such
69 | support.
70 |
--------------------------------------------------------------------------------
/templates/README.md:
--------------------------------------------------------------------------------
1 | To use this template, view as plain text (it contains comments), then edit as appropriate (start by deleting this line!)
2 |
3 |
4 |
5 |
6 |
7 | [](https://travis-ci.org/IBM/watson-banking-chatbot)
8 | 
9 |
10 |
11 | # Create an Offline First Shopping List with [technologies]
12 |
13 |
14 | This code pattern is a reference implementation of an Offline First shopping list app, built as a Progressive Web App using [technology](technologyURL). [This app is part of a series of Offline First demo apps, each built using a different stack](https://github.com/ibm-watson-data-lab/shopping-list).
15 |
16 | When the reader has completed this Code Pattern and explored the code in this GitHub repository, they will understand how to:
17 |
18 | * [goal 1]
19 | * [goal 2]
20 | * [goal 3]
21 | * [goal 4]
22 |
23 |
24 | 
25 |
26 | ## Flow
27 |
28 | 1. Step 1.
29 | 2. Step 2.
30 | 3. Step 3.
31 | 4. Step 4.
32 | 5. Step 5.
33 |
34 |
35 | ## Included components
36 | Select components from [here](https://github.ibm.com/developer-journeys/journey-docs/tree/master/_content/dev#components), copy and paste the raw text for ease
37 | * [Cloudant NoSQL DB](https://console.ng.bluemix.net/catalog/services/cloudant-nosql-db): A fully-managed data layer designed for modern web and mobile applications that leverages a flexible JSON schema. Based on the open source Apache CouchDB, IBM Cloudant provides additional full text and geospatial capabilities.
38 | * [Component](link): description
39 | * [Component](link): description
40 |
41 |
42 | ## Featured technologies
43 | Select components from [here](https://github.ibm.com/developer-journeys/journey-docs/tree/master/_content/dev#technologies), copy and paste the raw text for ease
44 | * [Apache CouchDB](http://couchdb.apache.org/) - modern, document database hosted on your server or in the cloud.
45 | * [Technology](link): description
46 | * [Technology](link): description
47 |
48 | ## Key concepts
49 |
50 |
51 | This shopping list app is a small single page web application consisting of an HTML file, a couple of CSS files, and a couple of JavaScript files, and the PouchDB library. No other JavaScript framework framework (such as jQuery or Ember.js) or library other than PouchDB is used. The web page will allow multiple shopping lists to be created (e.g., Groceries, Clothes, etc.) each with a number of shopping list items associated with them (e.g., Bread, Water, etc.).
52 |
53 | So what sets this app apart? Its Offline First architecture. The Offline First approach plans for the most constrained network environment first, enabling a great user experience even while the device is offline or has only an intermittent connection, and providing progressive enhancement as network conditions improve. This design also makes the app incredibly performant (fast!) on the best of networks.
54 |
55 |
56 | PouchDB, CouchDB, and Service Worker are the primary tools that turn our simple shopping list app into a high performance, offline-capable Progressive Web App.
57 |
58 |
59 | **Data stays safe on your device, even while it's offline.**
60 | Persistance of shopping lists and item data entered by the user is achieved using the in-browser database PouchDB. This will allow your data to survive between sessions and when disconnected from the network. (Whether you remember that you need juice while you're on your trusty home Wi-Fi or in the middle of the wilderness, you can still add it your list.)
61 |
62 | **Data syncs between devices when a connection is available.**
63 | When a connection is available, the data is synced from the local device to a CouchDB database in the cloud, and can thus be shared across multiple devices or users. (Need to share your grocery list with your roommate or access it on both your phone and your laptop? No problem!)
64 |
65 |
66 | **The app loads quickly, even while offline.**
67 | To keep the app itself functional while offline, a Service Worker is used to cache page resources (the most important HTML, CSS, and JavaScript files) when the web application is first visited. Each device must have a connection for this first visit, after which the app will be fully functional even while offline or in shoddy network conditions. (No more error messages or frustratingly slow page loads.)
68 |
69 |
70 | **The app can be installed on a mobile device.**
71 | In combination with the Service Worker used for caching, a manifest file containing metadata allows the app to become a Progressive Web App, an enhanced website that can be installed on a mobile device and can then be used with or without an internet connection. (It's secretly still a website, but you can access it through one of those handy dandy little app icons on your homescreen!)
72 |
73 | Explore the code in this GitHub repository to see how the Offline First design is applied.
74 |
75 | # Tutorial
76 |
77 | Refer to the [tutorial](https://github.com/ibm-watson-data-lab/shopping-list-vanillajs-pouchdb/tree/master/tutorial) for step-by-step instructions on how to build your own Offline First shopping list Progressive Web App with Vanilla JS (aka plain old JavaScript) and PouchDB.
78 |
79 | # Live demo
80 |
81 | To see this app in action without installing anything, simply visit https://ibm-watson-data-lab.github.io/shopping-list-vanillajs-pouchdb/ in a web browser or on your mobile device.
82 |
83 | # Steps
84 |
85 | Want to check out the end product on your own machine? Follow these steps to deploy your own instance of the shopping list app.
86 |
87 | This app can be deployed to IBM Cloud. You can also run this app on your local machine for development purposes using either a local Apache CouchDB instance or an IBM Cloudant service instance from the IBM Cloud Catalog.
88 |
89 | * [Deploy to IBM Cloud](#deploy-to-bluemix) **OR** [Run locally](#run-locally)
90 | * [Database and replication setup](#database-and-replication-setup)
91 |
92 | ## Deploy to IBM Cloud
93 |
94 | [](https://bluemix.net/deploy?repository=https://github.com/ibm-watson-data-lab/shopping-list-polymer-pouchdb)
95 |
96 | 1. Press the above ``Deploy to IBM Cloud`` button and then click on ``Deploy``.
97 |
98 | 1. In Toolchains, click on Delivery Pipeline to watch while the app is deployed. Once deployed, the app can be viewed by clicking `View app`.
99 |
100 | 1. To see the app and services created and configured for this code pattern, use the IBM Cloud dashboard. The app is named [app-name] with a unique suffix. The following services are created and easily identified by the [chosen prefix] prefix:
101 | * prefix-Service1
102 | * prefix-Service2
103 |
104 | ## Run locally
105 | > NOTE: These steps are only needed when running locally instead of using the ``Deploy to IBM Cloud`` button.
106 |
107 |
108 |
109 | 1. [Clone the repo](#1-clone-the-repo)
110 | 1. [Install the prerequisites](#2-install-the-prerequisites)
111 | 1. [Run the server](#3-run-the-server)
112 | 1. [Create a Cloudant or CouchDB service](#4-create-a-cloudant-or-couchdb-service)
113 |
114 | ### 1. Clone the repo
115 |
116 | Clone the `shopping-list-polymer-pouchdb` locally. In a terminal, run:
117 |
118 |
119 |
120 | ```
121 | $ git clone https://github.com/ibm-watson-data-lab/shopping-list-polymer-pouchdb
122 | ```
123 |
124 | ### 2. Install the prerequisites
125 |
126 | First, install [Polymer CLI](https://github.com/Polymer/polymer-cli) using [npm](https://www.npmjs.com/) (we assume you have pre-installed [Node.js](https://nodejs.org/)):
127 |
128 |
129 |
130 |
131 | $ npm install --global polymer-cli
132 |
133 | Second, install [Bower](https://bower.io/) using [npm](https://www.npmjs.com):
134 |
135 | $ npm install --global bower
136 |
137 | Third, install the [Bower npm resolver](https://github.com/mjeanroy/bower-npm-resolver):
138 |
139 | $ npm install --global bower-npm-resolver
140 |
141 | ### 3. Run the server
142 |
143 | This command serves the app at `http://127.0.0.1:8081` and provides basic URL routing for the app:
144 |
145 |
146 |
147 |
148 | $ polymer serve
149 |
150 | ### 4. Create a Cloudant or CouchDB service
151 |
152 | PouchDB can synchronize with CouchDB and compatible servers. To run and test locally, you can install CouchDB. Alternatively, you can use a hosted Cloudant NoSQL DB service for your remote DB.
153 |
154 | #### Installing Apache CouchDB
155 |
156 | [Install CouchDB 2.1](http://docs.couchdb.org/en/2.1.0/install/index.html). Instructions are available for installing CouchDB 2.1 on Unix-like systems, on Windows, on Mac OS X, on FreeBSD, and via other methods.
157 |
158 | Configure CouchDB for a [single-node setup](http://docs.couchdb.org/en/2.1.0/install/setup.html#single-node-setup), as opposed to a cluster setup. Once you have finished setting up CouchDB, you should be able to access CouchDB at `http://127.0.0.1:5984/`. Ensure that CouchDB is running and take note of your admin username and password.
159 |
160 | #### Creating a Cloudant NoSQL DB service
161 |
162 | To provision a managed Cloudant NoSQL DB
163 |
164 | * Log in to [IBM Cloud](https://console.ng.bluemix.net/).
165 | > Sign up for an account, if you do not already have one.
166 | * [Provision a Cloudant NoSQL DB _Lite_ plan instance](https://console.bluemix.net/catalog/services/cloudant-nosql-db), which is free.
167 | > If desired, you can also re-use an existing Cloudant NoSQL DB service instance. (Open the [**Data & Analytics** resources dashboard](https://console.bluemix.net/dashboard/data) to see a list of pre-provisioned instances that you have access to.)
168 | * Open the **Service credentials** tab.
169 | * Add new credentials for this service instance if no credentials have been defined yet.
170 | * View the credentials and note the value of the **url** property, which has the following format: `https://username:password@username-bluemix.cloudant.com`.
171 |
172 | Tip: Select the **Manage** tab and click **Launch** to open the Cloudant dashboard and manage the service instance.
173 |
174 | ## Database and replication setup
175 | 1. [Create the remote database](#1-create-the-remote-database)
176 | 1. [Enable CORS](#2-enable-cors)
177 | 1. [Set the replication target](#3-set-the-replication-target)
178 |
179 | ### 1. Create the remote database
180 |
181 | * Use the Cloudant or CouchDB dashboard to create a database.
182 |
183 | * Select the Databases tab on the left and then use the `Create Database` button to create the "shopping-list" database.
184 | The Shopping List app can be used locally before the database exists, but cannot sync
185 | until the remote database is completed.
186 |
187 |
188 | 
189 |
190 | ### 2. Enable CORS
191 |
192 | * Open the Cloudant or CouchDB dashboard to enable Cross-Origin Resource Sharing (CORS).
193 |
194 | * Select the Account Settings (or config) tab and open the **CORS** tab.
195 |
196 | * Enable CORS and restrict the domain as needed for security.
197 |
198 |
199 | 
200 |
201 | ### 3. Set the replication target
202 |
203 | Run the Shopping List app and use the *Settings* form to enter your database URL.
204 | If you use the IBM Cloud Cloudant URL taken from the service credentials as described above, the URL includes user name and password.
205 |
206 | Add `/shopping-list` to the URL to connect to the database that you created.
207 |
208 |
209 | 
210 |
211 |
212 | # Using the app
213 |
214 | The app allows you to create a shopping list by clicking on the plus sign. Click on the list to see its items. Then, you can add items to the list by clicking the plus sign. There is a checkbox to allow you to mark the items complete as you buy load up your cart.
215 |
216 | When you have not configured your Replication Target or when you are offline, the lists will not sync. One good way to test this is to run two browsers. You can use Chrome and Firefox and have different lists in each.
217 |
218 | When you go online and have the database and CORS enabled and the Replication Target is set, the shopping lists will sync. You will then be able to use both lists from either browser.
219 |
220 |
221 | 
222 |
223 | ## Running the tests
224 |
225 |
226 | This project does not, at present, have any automated tests. If you'd like to contribute some then please raise and issue and submit a pull-request - we'd be very happy to add them! Any pull-request you contribute will run through our continuous integration process which will check your code style.
227 |
228 | ## Deploying to GitHub Pages
229 |
230 |
231 | # Privacy Notice
232 |
233 |
234 |
235 | Refer to https://github.com/IBM/metrics-collector-service#privacy-notice.
236 |
237 | ## Disabling Deployment Tracking
238 |
239 |
240 | To disable tracking, simply remove ``require('metrics-tracker-client').track();`` from the ``app.js`` file in the top level directory.
241 |
242 |
243 |
244 | # Links
245 | * [More Shopping List Sample Apps](https://github.com/ibm-watson-data-lab/shopping-list)
246 |
247 | * [Offline First](http://offlinefirst.org/)
248 | * [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)
249 | * [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)
250 | * [Web App Manifest](https://w3c.github.io/manifest/)
251 | * [PouchDB](https://pouchdb.com/)
252 | * [Apache CouchDB](https://couchdb.apache.org/)
253 | * [IBM Cloudant](https://www.ibm.com/cloud/cloudant)
254 | * [Materialize CSS](http://materializecss.com/getting-started.html)
255 | * [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
256 |
257 |
271 |
272 |
273 |
274 |
275 | # License
276 | [Apache 2.0](LICENSE)
277 |
--------------------------------------------------------------------------------