The Pokedex Project(10) — Desarrollando nuestro front end. Parte 1.

En publicaciones anteriores ya hemos configurado y desarrollado nuestro controller y modelo y refactorizado nuestro acceso a la capa de datos.

Ahora toca turno de desarrollar el front end(que es la V(View)en el patrón MVC). Usaremos el siguientes stack de tecnologías:

• Npm: instalador de paquetes de node. https://nodejs.org/es/
• Vue 2(latest): framework reactivo de JS. https://v3.vuejs.org/guide/introduction.html
• Tailwind Css: Utility first framework. https://tailwindcss.com/docs/
• Laravel Mix: manejador de transpilers de JS basado en Webpack. https://laravel-mix.com/docs/5.0/installation

Instalación de Dependencias.

Instalaremos las dependencias para nuestro proyecto, entonces crearemos los siguientes archivos:

Crear el archivo package.json:

Copiar código:
touch package.json

Editar el archivo con lo siguiente:

{
  "name": "pokedex",
  "version": "1.0.0",
  "description": "Pokedex en Vanilla PHP.",
  "main": "index.js",
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/krsrk/pokedex-vanilla-php.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/krsrk/pokedex-vanilla-php/issues"
  },
  "homepage": "https://github.com/krsrk/pokedex-vanilla-php#readme",
  "devDependencies": {
    "cross-env": "^7.0.2",
    "laravel-mix": "^5.0.7",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "tailwindcss": "^1.9.6",
    "vue": "^2.6.12"
  }
}

Una editado el archivo package.json instalaremos las dependencias, estas estan listadas en el archiv en el apartado “devDependencies” y “dependencies”:

npm install

Una vez que termine el proceso de instalación tendremos una carpeta llamada “node_modules” en nuestra raíz del proyecto.

Ahora copiamos el archivo de configuración de Laravel Mix a la raíz del proyecto:

cp node_modules/laravel-mix/setup/webpack.mix.js ./

Este archivo de configuración de Laravel Mix compilara todos nuestros Javascript y los pondra en la carpeta “dist”, este archivo habrá que editarlo con lo siguiente:

let mix = require('laravel-mix')
mix.js('resources/js/app.js', 'dist/js').setPublicPath('dist')

mix.postCss('resources/css/app.css', 'dist/css', [
    require('tailwindcss'),
])

Aquí le decimos que nuestro punto de entrada para javascript sera app.js y la compilación del mismo sera en la carpeta “dist/js” en raíz. Aparte configurara y enlazara la librería de Tailwind CSS.

Creando y configurando nuestros archivos de Javascript y CSS

Para crear nuestros recursos de Js y Css haremos lo siguiente:

cd resources && mkdir js && cd js && touch app.js && cd .. && mkdir css && cd css && touch app.css

Abrimos app.js y le ponemos el siguiente contenido:

import Vue from "vue"
new Vue({
    el: "#app",
    delimiters: ['${', '}'],
    data () {
        return {
            message: "Hello Pokedex!!!"
        }
    },
})

Twig usa los mismos caracteres para la interpolación de variables(“{{ }}”), si no se cambia los delimitadores en la instancia de Vue, las variables de Vue no se podrán imprimir en la vista.

Abrimos app.css y lo editaremos con el siguiente contenido:

@tailwind base;

@tailwind components;

@tailwind utilities;

Probaremos que realmente compile nuestros archivos medio de Laravel Mix, así que ejecutamos:

npm run dev

Deberíamos de ver algo como esto:

Prueba de app.js y app.css en la vista

Ligaremos en nuestra vista el archivo de app.js y app.css para probar que realmente sirven, apuntaremos a los archivos generados en la carpeta “dist”.

Editaremos el archivo resources/views/layouts/app.html con lo siguiente:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Pokedex</title>

        <link href="dist/css/app.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            ${ message }
        </div>
    </body>
    <script src="dist/app.js"></script>
</html>

Si probamos nuestro proyecto veríamos algo como esto:

Con esto ya tendríamos instalado y configurado, Laravel Mix, Vue y Tailwind CSS. En el siguiente capitulo le daremos ya mas diseño a nuestra Pokedex por medio de Tailwind y agregaremos componentes de Vue.

Ya puedes leer nuestro siguiente capitulo, en el cual empezaremos a usar nuestras librerías de javascript y armar nuestro Pokedex: https://link.medium.com/r1ifkDtJVab

Pueden consultar el código de esta publicación en este repositorio: https://github.com/krsrk/pokedex-vanilla-php

Si les gusto la publicación denle claps, likes y comentarios.