diff --git a/Projects/First-DB-App.md b/Projects/First-DB-App.md index 7c1f62ba..5897e33f 100644 --- a/Projects/First-DB-App.md +++ b/Projects/First-DB-App.md @@ -25,7 +25,10 @@ personal identifying information (PII) in a browser based database. - The following Javascript class is provided with the functionality to allow your app to initially populate and clear the database from the browser so you -can test the query logic you'll be adding. +can test the query logic you'll be adding. You'll be required to hook up +buttons on the web page you build to the `clearDB` and `loadDB` functions, and +to write your own `queryDB` handler to connect to the `Query DB` button. You'll +also need to add a `queryAllRows` function to the Customer class. ``` class Customer { constructor(dbName) { @@ -43,7 +46,6 @@ class Customer { removeAllRows = () => { const request = indexedDB.open(this.dbName, 1); - // Handle any errors request.onerror = (event) => { console.log('removeAllRows - Database error: ', event.target.error.code, " - ", event.target.error.message); @@ -78,7 +80,6 @@ class Customer { initialLoad = (customerData) => { const request = indexedDB.open(this.dbName, 1); - // Handle any errors request.onerror = (event) => { console.log('initialLoad - Database error: ', event.target.error.code, " - ", event.target.error.message); @@ -137,11 +138,53 @@ const loadDB = () => { ## User Stories -- [ ] User can ... first user story +- [ ] User can see a web page containing a control panel containing three +buttons - 'Load DB', 'Query DB', and 'Clear DB'. +- [ ] User can see a notification panel where status messages will be posted. +- [ ] User can see a scrollable log panel where execution details describing +the apps operation and interface with the Customer instance will be posted. +- [ ] User can see a running history of notification panel messages in the log +panel. +- [ ] User can see a scrollable query results area where retrieved customer +data will be displayed. +- [ ] User can click the 'Load DB' button to populate the database with data. +The 'Load DB' button in your UI should be hooked to the `loadDB` event handler +that's provided. +- [ ] User can see a message displayed in the notification panel when the +data load operation starts and ends. +- [ ] User can click the 'Query DB' button to list all customers in the query +results area. The 'Query DB' button in your UI should be hooked to a `queryDB` +event handler you will add to the program. +- [ ] User can see a message in the notification panel when the query starts +and ends. +- [ ] User can see a message in the query results area if there are no rows +to display. +- [ ] User can click on the 'Clear DB' button to remove all rows from the +database. The 'Clear DB' button in your UI should be hooked to the `clearDB` +event handler that's provided. +- [ ] User can see a message in the notification panel when the clear +operation starts and ends. ## Bonus features -- [ ] User can ... first bonus feature +- [ ] User can see buttons enabled and disabled according to the following +table. + | State | Load DB | Query DB | Clear DB | + |---------------------|----------|----------|----------| + | Initial App display | enabled | enabled | disabled | + | Load DB clicked | disabled | enabled | enabled | + | Query DB clicked | disabled | enabled | enabled | + | Clear DB clicked | enabled | enabled | disabled | +- [ ] User can see additional Customer data fields added to those included +in the code provided. Developer should add date of last order and total sales +for the year. +- [ ] Developer should conduct a retrospection on this project: + - What use cases can you see for using IndexedDB in your frontend apps? + - What advantages and disadvantages can you see over using a file or + local storage? + - In general, what criteria might you use to determine if IndexedDB is right + for your app. (Hint: 100% yes or no is not a valid answer). + ## Useful links and resources