├── README.md ├── frontend ├── styles.css ├── index.html └── script.js ├── utils └── idMaker.js ├── main.js ├── package.json ├── .vscode └── settings.json ├── routes ├── agents.route.js └── directors.route.js ├── LICENSE └── .gitignore /README.md: -------------------------------------------------------------------------------- 1 | # michiagencia -------------------------------------------------------------------------------- /frontend/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #050d36; 3 | } -------------------------------------------------------------------------------- /utils/idMaker.js: -------------------------------------------------------------------------------- 1 | // https://platzi.com/clases/1642-javascript-profesional/22173-generators/ 2 | function* idMaker() { 3 | let id = 4; 4 | 5 | while (true) { 6 | yield id; 7 | id += 1; 8 | } 9 | } 10 | 11 | const actualId = idMaker(); 12 | 13 | function newId() { 14 | return actualId.next().value; 15 | } 16 | 17 | module.exports = newId; 18 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | 4 | const port = process.env.PORT || 8080; 5 | 6 | const directorsRouter = require('./routes/directors.route.js'); 7 | const agentsRouter = require('./routes/agents.route.js'); 8 | const frontend = express.static('frontend'); 9 | 10 | app.use(express.json()); 11 | app.use(express.urlencoded({ extended: true })); 12 | 13 | app.use(directorsRouter); 14 | app.use(agentsRouter); 15 | app.use(frontend); 16 | 17 | app.listen(port, () => { 18 | console.log('backend funcionando en localhost:' + port); 19 | }); 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "michiagencia", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "node main.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/juandc/michiagencia.git" 12 | }, 13 | "author": "@juandc", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/juandc/michiagencia/issues" 17 | }, 18 | "homepage": "https://github.com/juandc/michiagencia#readme", 19 | "dependencies": { 20 | "body-parser": "^1.19.0", 21 | "express": "^4.17.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#3dae49", 4 | "activityBar.activeBorder": "#e9e7f7", 5 | "activityBar.background": "#3dae49", 6 | "activityBar.foreground": "#15202b", 7 | "activityBar.inactiveForeground": "#15202b99", 8 | "activityBarBadge.background": "#e9e7f7", 9 | "activityBarBadge.foreground": "#15202b", 10 | "sash.hoverBorder": "#3dae49", 11 | "statusBar.background": "#308839", 12 | "statusBar.foreground": "#e7e7e7", 13 | "statusBarItem.hoverBackground": "#3dae49", 14 | "statusBarItem.remoteBackground": "#308839", 15 | "statusBarItem.remoteForeground": "#e7e7e7", 16 | "tab.activeBorder": "#3dae49", 17 | "titleBar.activeBackground": "#308839", 18 | "titleBar.activeForeground": "#e7e7e7", 19 | "titleBar.inactiveBackground": "#30883999", 20 | "titleBar.inactiveForeground": "#e7e7e799" 21 | }, 22 | "peacock.color": "#308839" 23 | } -------------------------------------------------------------------------------- /routes/agents.route.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const agentsRouter = express.Router(); 3 | const newId = require('../utils/idMaker'); 4 | 5 | const agents = [ 6 | { 7 | id: 007, 8 | name: 'Bond, Michi Bond', 9 | }, 10 | ]; 11 | 12 | agentsRouter.get('/api/agents', (req, res) => { 13 | res.json({ 14 | agents, 15 | }); 16 | }); 17 | 18 | agentsRouter.get('/api/agents/:id', (req, res) => { 19 | const id = req.params.id; 20 | const agent = agents.find(agent => agent.id == id); 21 | 22 | if (agent) { 23 | res.json(agent); 24 | } else { 25 | res.status(404).json({ 26 | status: 404, 27 | message: "Lo sentimos, no existe ninguna michi agente con el id " + id, 28 | }); 29 | } 30 | }); 31 | 32 | agentsRouter.post('/api/agents', (req, res) => { 33 | console.log(req.body); 34 | 35 | const { name } = req.body; 36 | let id = newId(); 37 | 38 | const newAgent = { id, name }; 39 | 40 | directors.push(newAgent); 41 | 42 | res.json({ 43 | status: 200, 44 | agent: newAgent, 45 | }); 46 | }); 47 | 48 | module.exports = agentsRouter; 49 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Juan David Castro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /routes/directors.route.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const directorsRouter = express.Router(); 3 | const newId = require('../utils/idMaker'); 4 | 5 | const directors = [ 6 | { 7 | id: 001, 8 | name: 'MichiRoboerto', 9 | }, 10 | { 11 | id: 002, 12 | name: 'MichiAlicia', 13 | }, 14 | { 15 | id: 003, 16 | name: 'MichiRogoberto', 17 | }, 18 | ]; 19 | 20 | directorsRouter.get('/api/directors', (req, res) => { 21 | res.json({ 22 | directors, 23 | }); 24 | }); 25 | 26 | directorsRouter.get('/api/directors/:id', (req, res) => { 27 | const id = req.params.id; 28 | const director = directors.find(director => director.id == id); 29 | 30 | if (director) { 31 | res.json(director); 32 | } else { 33 | res.status(404).json({ 34 | status: 404, 35 | message: "Lo sentimos, no existe ninguna michi directora con el id " + id, 36 | }); 37 | } 38 | }); 39 | 40 | directorsRouter.post('/api/directors', (req, res) => { 41 | console.log(req.body); 42 | 43 | const { name } = req.body; 44 | let id = newId(); 45 | 46 | const newDirector = { id, name }; 47 | 48 | directors.push(newDirector); 49 | 50 | res.json({ 51 | status: 200, 52 | director: newDirector, 53 | }); 54 | }); 55 | 56 | module.exports = directorsRouter; 57 | -------------------------------------------------------------------------------- /frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Michiagencia 8 | 9 | 10 | 11 |

Michiagencia

12 | 13 |
14 |

Michidirectores

15 | 16 | 18 | 19 |
20 | 21 | 22 | 23 |
24 |
25 | 26 |
27 |

Michiagentes

28 | 29 | 31 | 32 |
33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /frontend/script.js: -------------------------------------------------------------------------------- 1 | async function loadDirectorsData() { 2 | const directorsList = document.getElementById('directorsList'); 3 | 4 | const res = await fetch('./api/directors') 5 | const { directors } = await res.json(); 6 | 7 | directors.map(michiDirector => { 8 | console.log(michiDirector) 9 | 10 | const li = document.createElement('li'); 11 | const text = document.createTextNode(michiDirector.name); 12 | 13 | li.appendChild(text); 14 | directorsList.appendChild(li); 15 | }); 16 | } 17 | 18 | async function loadAgentsData() { 19 | const agentsList = document.getElementById('agentsList'); 20 | 21 | const res = await fetch('./api/agents') 22 | const { agents } = await res.json(); 23 | 24 | agents.map(michiAgent => { 25 | console.log(michiAgent) 26 | 27 | const li = document.createElement('li'); 28 | const text = document.createTextNode(michiAgent.name); 29 | 30 | li.appendChild(text); 31 | agentsList.appendChild(li); 32 | }); 33 | } 34 | 35 | async function createNewDirector() { 36 | const directorName = document.getElementById('newDirectorName'); 37 | const name = directorName.value; 38 | 39 | const res = await fetch('./api/directors', { 40 | headers: { 41 | 'Content-Type': 'application/json', // -- content type 42 | }, 43 | method: 'POST', 44 | body: JSON.stringify({ name }), 45 | }) 46 | const data = await res.json(); 47 | console.log(data); 48 | 49 | const directorsList = document.getElementById('directorsList'); 50 | 51 | const li = document.createElement('li'); 52 | const text = document.createTextNode(data.director.name); 53 | 54 | li.appendChild(text); 55 | directorsList.appendChild(li); 56 | } 57 | 58 | async function createNewAgent() { 59 | const agentName = document.getElementById('newAgentName'); 60 | const name = agentName.value; 61 | 62 | const res = await fetch('./api/directors', { 63 | headers: { 64 | 'Content-Type': 'application/json', // -- content type 65 | }, 66 | method: 'POST', 67 | body: JSON.stringify({ name }), 68 | }) 69 | const data = await res.json(); 70 | console.log(data); 71 | 72 | const agentsList = document.getElementById('agentsList'); 73 | 74 | const li = document.createElement('li'); 75 | const text = document.createTextNode(data.agent.name); 76 | 77 | li.appendChild(text); 78 | agentsList.appendChild(li); 79 | } 80 | 81 | loadDirectorsData(); 82 | loadAgentsData(); 83 | 84 | 85 | const directorBtn = document.getElementById('newDirectorBtn'); 86 | 87 | directorBtn.addEventListener('click', createNewDirector); 88 | --------------------------------------------------------------------------------