added front

Frenzoid · Nov 15, 2022 · f17a17d · f17a17d
1 parent b49bcb4
commit f17a17d
Show file tree

Hide file tree

Showing 15 changed files with 1,368 additions and 6 deletions.
diff --git a/ejemplo_apirest/package-lock.json b/ejemplo_apirest/package-lock.json
diff --git a/ejemplo_apirest/package.json b/ejemplo_apirest/package.json
@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^1.1.3",
+    "cors": "^2.8.5",
     "express": "^4.18.2"
   }
 }
diff --git a/ejemplo_apirest/server.js b/ejemplo_apirest/server.js
@@ -17,27 +17,41 @@ const express = require("express");
  *  */
 const app = express();
 
+/**
+ * Habilitamos CORS
+ */
+const cors = require('cors')
+
 /**
  * Configuramos el body parser, esta configuracion nos permite leer el body de las peticiones ( POST, PUT, PATCH ).
- * 
+ * Configuramos CORS para permitir el acceso desde el mismo dominio.
  * https://expressjs.com/es/api.html#express.json
  *  */
 app.use(express.json());
+app.use(cors())
 
 
 // Array de usuarios.
-const users = [
+let users = [
   {
     name: "Frenzoid",
     age: 21,
+    id: 0,
   },
   {
     name: "Pepito",
     age: 22,
+    id: 1,
   },
   {
     name: "Juanito",
     age: 23,
+    id: 2,
+  },
+  {
+    name: "Pedrito",
+    age: 23,
+    id: 3,
   },
 ];
 
@@ -78,7 +92,7 @@ app.get("/users/:id", (req, res) => {
  * */
 app.post("/users", (req, res) => {
   users.push(req.body);
-  res.send("Usuario creado");
+  res.send(users[users.length - 1]);
 });
 
 /**
@@ -87,16 +101,16 @@ app.post("/users", (req, res) => {
 app.put("/users/:id", (req, res) => {
   const id = req.params.id;
   users[id] = req.body;
-  res.send("Usuario actualizado");
+  res.send(users[id]);
 });
 
 /**
  * DELETE /users/:id
  */
 app.delete("/users/:id", (req, res) => {
   const id = req.params.id;
-  users.splice(id, 1);
-  res.send("Usuario eliminado");
+  users = users.filter((user) => user.id != id);
+  res.send(users);
 });
 
 

diff --git a/ejemplo_frontend/.gitignore b/ejemplo_frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/ejemplo_frontend/README.md b/ejemplo_frontend/README.md
@@ -0,0 +1,31 @@
+## Dependencias.
+
+Para arrancar el siguiente ejemplo es necesario tener instalado node y npm.
+Para instalarlos en ubuntu se puede hacer con el siguiente comando:
+
+    sudo apt-get install nodejs npm
+
+## Ejecución.
+
+Primero hay que instalar las dependencias del proyecto con el siguiente comando ( ejecutado dentro de la carpeta del proyecto ):
+
+    npm i
+
+### Ejemplo 1.
+
+Para ejecutar el solo hay que ejeuctar el siguiente comando:
+
+    npm run dev
+
+Este programa arranca un entorno de desarollo web, usando svelte y vite, que se puede acceder desde el navegador en la dirección [http://localhost:5000](http://localhost:5000).
+
+## Explicación.
+En este ejemplo se muestra como se puede usar svelte para crear una aplicación web que se conecta a un servidor APIRest que usa el protocolo http. En este caso se usa el servidor web que se encuentra en el ejemplo [ejemplo_apirest](ejemplo_apirest). Para ello se usa un cliente apirest nativo de cada navegador (fetch) para hacer peticiones http.
+[fetch](https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Using_Fetch)
+
+## Referencias.
+
+[Official Svelte Tutorial](https://svelte.dev/tutorial/basics)
+[Svelte.dev](https://svelte.dev/)
+[Vite](https://vitejs.dev/)
+
diff --git a/ejemplo_frontend/index.html b/ejemplo_frontend/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+    crossorigin="anonymous"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ejemplo Frontend by Frenzoid</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/ejemplo_frontend/jsconfig.json b/ejemplo_frontend/jsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}