In a browser, return to the linkblog list at http://localhost:8091/admin/linkblog/, and click the 'Add Item' button to see http://localhost:8091/admin/linkblog/detail.html. Note that the date field is pre-populated with today's date. In VS Code, inspect /public/admin/linkblog/detail.pug. This file defines the composition of the linkblog 'Add Item' screen. In the HTML part of this file, the data entry form represented by the pug statement 'form#form1' ('<form id="form1">'). Note that it has 'onsubmit='return false', because we do not want the browser default behavior of posting to a form action URL.
-, and the two pages belong together - we have chosen to augment LinkblogBusiness.js with the 'detail()' and 'save()' functions rather than creating separate LinkblogListBusiness and LinkblogAddBusiness. For a different module we would create a separate XxxBusinness.
Reopen /topseed-webroot/admin/linkblog/LinkblogBusiness.js and locate the 'detail: function('. We use https://momentjs.com/ for date handling and jquery.jsForm from https://github.com/corinis/jsForm to populate the form with the date. The necessary libraries are loaded in /_js/admin.js. You see the result of the call to 'detail()' when rendering of the page has completed.
Fill some data in the form and click 'Save'. You should see an alert that saving is not enabled: we are not yet configured to use a database that allows saving. In LinkblogBusiness.js, locate the 'save: function('. Once we enable 'update' in the urlSpec, processing will continue. We obtain the 'formData' with 'jquery.jsForm('get')', and pass it to the 'linkblogDao.update' function. Once this has returned successfully ('promise.then('), we redirect to the list page. BLX/sbhas base functionality using turbo for the new page load.
Reopen BDS and look for 'update: function('. It calls a shared static _post function which uses fetch_ to call the urlSpec update URL.
It is time to connect LinkblogDao/BDS to a live database. Go to the top of LinkblogBusiness.js, comment out the first urlSpec and comment in the urlSpec that goes to localhost:8081, does not use dummy.json and also has an update route, unlike the first urlSpec. We included a basic API server implementation in the topseed project at /topseed/bsrv that we will run at localhost:8081. The API server in turn will call a Google Firebase service that you will configure in the next step. Why do we not call the Firebase API directly from the browser? We do not want the browser to hold the authentication credentials for the database connection (more about user authentication in the next tutorial).
Log into your Gmail/Google account at https://mail.google.com (Create one if you don't have one). Navigate to https://console.firebase.google.com, click 'Add Project', enter 'mydb1' as Project name when prompted and click 'Create Project'.
Click the 'gear' icon on the left menu (enlarge browser window if necessary to see it) to access Project Settings and click the 'Service Accounts' tab. Copy the 'databaseURL' value from the Node.js Admin SDK configuration snippet and paste it into the /topseed/bsrv/config/ApiConfig.js DB_URL return value. The line in ApiConfig.js should look something like 'get DB_URL() { return 'https://mydb1-7b77e.firebaseio.com' }' On the Google Project Settings Service Accounts tab, click 'Generate New Private Key' and 'Generate Key'. From the download prompt, save the file into the /topseed/bsrv/scode/route/ds/ folder. Open BaseFB.js, and replace 'serviceKey.json' with the filename. The line should look something like 'const 'serviceAccount = require("./mydb1-7b77e-firebase-adminsdk-8swi6-f46e592e60.json")'. Verify that the path starts with './'.
You are ready to start the API server that uses this configuration. In VS Code, open another Terminal Shell (Ctrl+Shift+`), type 'cd bsrv [Enter]', do the 'npm install [Enter]' and then 'node index [Enter]'.
You should see console output 'API server listening at http://localhost:8081'. On the VS Code terminal tab, use the dropdown go to the tab for topseed-srv, and start topseed-srv if not already running. You should see console output 'Web server listening at http://localhost:8091' (and 8092).
In a browser, go to or refresh the linkblog list at http://localhost:8091/admin/linkblog/. The list should now say 'No data available in table', because LinkblogBusiness 'urlSpec' points to the newly configured API server that has an 'empty' database. Click 'Add Item', enter some values and click 'Save'. Your item should appear in the list. Back in the Google Firebase Console at https://console.firebase.google.com/, for the project 'mydb1', navigate to 'Database' from the menu tree on the left. You should be able to drill down to see the newly created entry in a table named 'links11'. If you like, return to the linkblog list at http://localhost:8091/admin/linkblog/ in the browser and add a few more items with 'Add Item'.
Optional: Learn how the API server at /bsrv works. Inspect /bsrv/index.js. The line beginning with 'server.use('/linkblog'' specifies that any requests to localhost:8081/linkblog are handled
by /scode/route/LinkblogService.js. Inspect this file. The function beginning with 'router.post('/'' specifies in the line 'const _promise = linkblog.update(row)' that a post request will call the 'update' function in /ds/Linkblog.js. Inspect this file. Linkblog.js specifies the table name as 'links11', but also extends BaseFB. (Since Linkblog.js runs in the Node.js server and not in the browser, we can use 'extends' instead of '.extends(['). BaseFB has the common functionality to create a Firebase connection, query and update the database. For this, it uses the 'firebase-admin' package imported as a dependency in /bsrv/package.json. To add a row, the BaseFB.js function 'update(row)' was used. Similarly, a 'get' request to localhost:8081/linkblog uses BaseFB.js 'selectList()' to obtain the list of linkblog items.
Perspective: For a complete Create-Read-Update-Delete (CRUD) implementation, we would add single-row query, update and delete capability. To edit existing items, we would navigate to '/detail.html?id=x' and, in LinkblogBusiness 'detail()', use the 'id' URL parameter to obtain the existing data querying by a primary key column or unique index on the database. If you were to use a database service provider other than Google Firebase, you would create an implementation of BaseFB.js using the alternative provider's API, following the provider's examples for Node.js.