Skip to content

Documentación

Jump to bottom
Luis Manuel Tapia Bautista edited this page Aug 19, 2021 · 13 revisions

Video

Historias de usuario

  • Mostrar en la UI un input para ingresar texto y un botón para generar la búsqueda.
  • Utilizar la siguiente API para obtener los resultados: TheMealDB
  • Mostrar los resultados usando las imágenes de las recetas.
  • Al seleccionar una imagen se deben desplegar los detalles de la receta, es decir, los ingredientes y las instrucciones.
  • Mostrar en la UI un botón secundario para desplegar una receta aleatoria.

Instrucciones

Para clonar este repositorio se debe abrir la consola y ejecutar los siguientes comandos:

git clone https://github.com/14030598/santander-back-proyecto

Abrir el folder en el editor de su preferencia y en la terminal ejecutar los siguientes comandos: (Nota: debe tener instalado node con npm incluído)

npm install
npm run start

npm install instala todas las dependencias incluidos en package.json npm run start es el script para ejecutar el servidor de webpack y carga el bundle de webpack

Webpack Dependencies

  • webpack: Esta es la librería principal.
  • webpack-cli: Nos permite ejecutar webpack desde la línea de comandos.
  • html-webpack-plugin: Simplifica la creación de archivos HTML que ejecuten bundles de webpack.
  • css-loader
  • html-loader
  • html-webpack-plugin
  • sass
  • sass-loader
  • style-loader

Configuración de webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/js/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      filename: 'detalles.html',
      template: './src/detalles.html',
      excludeChunks: ['main']
    })
  ],
  module: {
    rules: [
      {
        test: /.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
  }
}

Babel

  • @babel/core: Esta es la librería principal.
  • @babel/preset-env: Preset con las características más recientes de JavaScript.
  • babel-loader: Loader de webpack.
  • @babel/plugin-transform-runtime
  • @babel/runtime

Para instalar los componentes a utilizar:

npm install --save-dev dependencias dependencias

ó también se puede utilizar

npm i -D dependencias dependencias Donde -D: Development, i: install

Instalación de dependencias

npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server sass ...todas las dependencias separadas por espacio

//loaders
npm i -D css-loader style-loader sass-loader html-loader @babel/core @babel/preset-env babel-loader ...todas las dependencias separadas por espacio

Scripts

"start": "webpack serve --mode development --open",
"build": "webpack --mode production",

Semantic UI

El diseño de interfaces del sitio web está basado en el framework Semantic UI que trabaja de forma responsiva elementos de HTML y CSS. Proporciona soporte intuitivo para desktop, tablet y mobile, haciendo aun más fácil la integración con las interfaces.

A continuación, se listan los elementos utilizados en el proyecto:

Elements

Collections

Views

Modules

APIs consumidas de TheMealDB

# Target Link Use
1 Search meal by name www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata Search only meal name
2 Get the 25 first meals www.themealdb.com/api/json/v1/1/search.php?s Get first 25 recipes
3 List all meals by first letter www.themealdb.com/api/json/v1/1/search.php?f=a Get all the recipes whose food name begins with the search letter
4 Lookup full meal details by id www.themealdb.com/api/json/v1/1/lookup.php?i=52772 Get recipe by id
5 Lookup a single random meal www.themealdb.com/api/json/v1/1/random.php Use general for get a single random meal
6 List all meal categories www.themealdb.com/api/json/v1/1/categories.php Use general for get categories with details
7 Ingredient Thumbnail Images (www.themealdb.com/images/ingredients/Lime.png/)
(www.themealdb.com/images/ingredients/Lime-Small.png)		 Mode of obtaining the images of the ingredients

Estructura del sitio (Páginas, scripts, hojas de estilo, Webpack, Babel)

Estructura del Sitio

Donde:

  • el archivo search se encarga de hacer las peticiones al API a través de la función getConsulta(url)

Flujo de trabajo

Para gestión de proyectos (organización) de trabajo se propuso utilizar Kanban

Para creación de funcionalidades y mejoras se utilizaron issues

Para aprobación de cambios se hicieron mediante Pull request

Clone this wiki locally