added API example

codex-avee · codex-avee · commit a99e84f11191 · 2018-09-18T17:48:15.000+02:00
diff --git a/README.md b/README.md
@@ -156,3 +156,19 @@ Note that the application is using two environment variables to be able to deplo
 
 * `process.env.PORT`
 * `process.env.DATABASE_URL`
+
+## API basics
+
+Look at the `products-api.js` file in the `api` folder to see how to create an simple API. And API endpoint returns JSON to the client using the HttpResponse Objects `json` method.
+
+```javascript
+res.json({
+	result: 'success'
+})
+```
+
+The API end point is running at http://localhost:3000/api/products.
+
+The `client.js` file in the public folder is using the API. It calls the API and renders the resulting JSON data to the screen using HandlebarsJS.
+
+Go to http://localhost:3000/client.html to see the screen using the API in action. It uses [axios](https://github.com/axios/axios) to call the API endpoints using HTTP.
diff --git a/api/products-api.js b/api/products-api.js
@@ -0,0 +1,98 @@
+module.exports = function(productService) {
+	
+	async function all(req, res) {
+		try {
+			let results = await productService.all(); 
+
+			res.json({
+				status: 'success',
+				data: results
+			})
+		}
+		catch (err) {
+			next(err);
+		}
+	};
+
+	async function add(req, res) {
+
+		try {
+			await productService.create({
+				category_id: Number(req.body.category_id),
+				description : req.body.description,
+				price: Number(req.body.price)
+			});
+			
+			res.json({
+				status: "success",
+			});
+		}
+		catch (err) {
+			res.json({
+				status: "error",
+				error: err.stack
+			});
+		}
+	};
+
+	async function get(req, res) {
+		try {
+			let id = req.params.id;
+			let product = await productService.get(id);
+			res.json({
+				status: "success",
+				data: product
+			});
+		}
+		catch (err) {
+			res.json({
+				status: "error",
+				error: err.stack
+			});
+		}
+	};
+
+	async function update(req, res, next) {
+		try{
+			await productService.update({
+				category_id: Number(req.body.category_id),
+				description: req.body.description,
+				price: Number(req.body.price),
+				id: req.params.id
+			});
+			res.json({
+				status: "success"
+			});
+		}
+		catch(err){
+			res.json({
+				status: "error",
+				error: err.stack
+			});
+		}
+	};
+
+	async function deleteProduct (req, res, next) {
+		try{
+			var id = req.params.id;
+			await productService.delete(id);
+			res.json({
+				status: "success"
+			});
+		}
+		catch(err){
+			res.json({
+				status: "error",
+				error: err.stack
+			});
+		}
+	};
+
+	return {
+		all,
+		add,
+		get,
+		delete : deleteProduct,
+		update
+	}
+}
diff --git a/index.js b/index.js
@@ -5,6 +5,8 @@ const exphbs  = require('express-handlebars');
 const bodyParser = require('body-parser');
 const Categories = require('./routes/categories');
 const Products = require('./routes/products');
+const ProductsAPI = require('./api/products-api');
+
 const app = express();
 const session = require('express-session');
 const flash = require('express-flash');
@@ -31,6 +33,7 @@ const categoryService = CategoryService(pool);
 const productService = ProductService(pool);
 const categoryRoutes = Categories(categoryService);
 const productRoutes = Products(productService, categoryService);
+const productsAPI = ProductsAPI(productService);
 
 app.use(session({
   secret: 'keyboard cat',
@@ -76,6 +79,8 @@ app.post('/products/add', productRoutes.add);
 //this should be a post but this is only an illustration of CRUD - not on good practices
 app.get('/products/delete/:id', productRoutes.delete);
 
+app.get('/api/products', productsAPI.all);
+
 app.use(errorHandler);
 
 //configure the port number using and environment number
diff --git a/public/client.html b/public/client.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js"></script>
+    <link rel="stylesheet" href="/style.css">
+
+    <script type="text/x-template" class="productListTemplate">
+        <table>
+        <tr>
+            <th>Product name</th>
+            <th>Category name</th>
+            <th>Price</th>
+        </tr>
+        {{#each productList}}
+        <tr>
+                <td>{{description}}</td>
+                <td>{{category_description}}</td>
+                <td>{{price}}</td>
+            </tr>
+        {{/each}}
+    </table>
+    </script>
+
+</head>
+<body>
+    <div id="container">
+            <h1>Products via API</h1>
+            <div class="products">
+        
+            </div>
+    </div>
+</body>
+<script src="client.js"></script>
+</html>
diff --git a/public/client.js b/public/client.js
@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+    let productListTemplate = document.querySelector('.productListTemplate');
+    let productListTemplateInstance = Handlebars.compile(productListTemplate.innerHTML);
+    let productsElem = document.querySelector('.products');
+
+    // Client side Factory function
+    let productService = ProductService();
+
+    productService
+        .getProducts()
+        .then(function(results){
+            let response = results.data;
+            let data = response.data;
+            // console.log(data);
+            let productTableHTML = productListTemplateInstance({
+                productList : data
+            });
+            productsElem.innerHTML = productTableHTML;
+        });
+});
+
+
+function ProductService() {
+    function getProducts(){
+        return axios.get('/api/products')
+    }
+
+    return {
+        getProducts
+    }
+}
diff --git a/public/style.css b/public/style.css
@@ -89,3 +89,17 @@ input[type=submit] {
 	margin-top : 1.0em;
 	font-weight: bold;
 }
+
+table, td, th {    
+    border: 1px solid #ddd;
+    text-align: left;
+}
+
+table {
+    border-collapse: collapse;
+    width: 80%;
+}
+
+th, td {
+    padding: 15px;
+}	
diff --git a/services/product-service.js b/services/product-service.js
@@ -1,6 +1,7 @@
 module.exports = function ProductService(pool){
     async function all(){
-        const query = `select p.id, p.description, p.price, c.description as category_description from products p
+        const query = `select p.id, p.description, p.price, c.id as category_id, 
+            c.description as category_description from products p
             join categories c on c.id = p.category_id`;
         let results = await pool.query(query);
         return results.rows;
@@ -29,8 +30,11 @@ module.exports = function ProductService(pool){
             product.id
         ];
         
-        let updateQuery = `UPDATE products SET category_id = $1, 
-            description = $2, price = $3 WHERE id = $4`;
+        let updateQuery = `UPDATE products 
+            SET category_id = $1, 
+                description = $2, 
+                price = $3 
+            WHERE id = $4`;
 
         return pool.query(updateQuery, data);
     }
