The Pokedex Project(1). Creación de un Pokedex con PHP y Laravel.
Realizare una serie de publicaciones, donde se creara un Pokedex(la Wiki de los Pokemon) en PHP Vanilla y luego en Laravel. Esto para dar una visión diferente de lo que es armar un proyecto con un framework contra el lenguaje puro, en el cual la diferencia general seria el tiempo de desarrollo. Y otras de las diferencias entre lenguaje puro y framework seria el análisis de costo-beneficio; que tanto impacta(en todos sus aspectos) en tu proyecto el adaptar un lenguaje puro o simplemente usar un framework.
Porque un Pokedex?
Porque todo mundo ama a los Pokemon …
Estuve analizando un proyecto que no fuera ordinario(todos los tutoriales o publicaciones están basados en TODO App o en un simple CRUD de Usuario); entonces el Pokedex es interesante en cuanto a estructura de datos, ya que no nada mas esta indexado el nombre del Pokemon sino que también esta guardado su nivel base(ataque, defensa, ataque especial, etc …), sus características y evoluciones, y esto hace interesante el proyecto porque se puede agregar características especiales para mejorar el pokedex. Aquí un ejemplo del Pokedex:
En esta primera publicación solo le agregaremos la estructura principal del Pokedex, que es el nombre del Pokemon, su descripción y sus características(altura, peso, habilidad, sexo) y su tipo. Una vez desarrollado el Pokedex en lenguaje puro y despues framework, hare publicaciones para mejorar el proyecto y se abarcaran otros temas que puedan ayudar a escalar el proyecto.
También trataremos de usar lo esencial de buenas practicas y estándares de codificación, están abiertos los comentarios y opiniones por cualquier error que tenga o mejora en el código.
Y como es de costumbre(una muy buena) se ira guardando todo el código en Github, para su previa consulta y ejecución.
Stack de Tecnologías
No entraremos en detalle sobre la instalación de dicho stack, asumiremos que ya se tiene instalado.
Todo comando se ejecutara en Ubuntu 20.04. Por lo general yo uso Laradock un entorno de desarrollo basado en Docker y Docker Compose. Todo script va estar probado bajo esta plataforma(Ubuntu, Docker, Docker Compose), pero puede funcionar con cualquier otro entorno que tengas instalado.
En tu entorno debes tener instalado lo siguiente:
- Composer
- Node y Npm
- Git
- PHP >= 7.2
- MySQL >= 5.7
Configuración inicial del proyecto
Para empezar a configurar el proyecto ejecutaremos lo siguiente en la consola:
1.- Creamos el directorio del proyecto y nos cambiamos al directorio creado:
Copiar código:mkdir pokedex && cd pokedex
2.- Creamos el archivo composer.json
Copiar código:touch composer.json
3.- Editamos el archivo “composer.json”:
Copiar código:nano composer.json
4.- Agregamos el siguiente contenido y lo guardamos:
Copiar código:{
"name": "pokedex-tuto",
"description": "Pokedex Php Vanilla Tuto",
"require": {
"php": "^7.2",
"twig/twig": "^3.0",
"illuminate/database": "^7.20"
},
"autoload": {
"psr-4": {
"App\\": "app/",
"Pokedex\\": "src/Pokedex",
"Utils\\": "src/Utils"
}
}
}
5.- Instalamos las dependencias:
Copiar código:composer install
Con esto ya tenemos nuestra configuración inicial de nuestro proyecto basado en Composer. Ahora crearemos los directorios y archivos base de nuestro proyecto.
Creación de Directorios y Archivos
1.- Creamos los directorios:
Copiar código:mkdir app && mkdir config && mkdir routes && mkdir src && mkdir src/Pokedex && mkdir src/Utils
2.- Creamos los scripts base:
Copiar código:touch index.php && touch bootstrap.php && touch config/database.php && touch routes/web.php
Con esto ya tenemos configurado nuestro proyecto con sus archivos base.
Sobre los directorios del proyecto.
/: se refiere al directorio raíz de nuestro proyecto, aquí tendremos el index.php donde recaerá las peticiones del usuario así como también el bootstrap.php que iniciara la carga de nuestras librerías.
app: este directorio contendrá todos nuestros models y controllers de nuestra aplicación así como también clases helpers.
routes: este directorio podremos configurar las rutas de nuestra aplicación en el archivo web.php.
src: tendrá la lógica del negocio del proyecto(src/Pokedex) y las librerías base para manejar requests, routes y responses(src/Utils) como también helpers generales.
vendor: contiene las librerías externas instaladas en pasos previos, también tiene un autoload.php el cual se encarga de las cargas de las clases indicadas en el composer.json sección autoload.
Carga del autoload de Composer y bootstrap.php
Abrimos el archivo index.php con nuestro IDE favorito y escribimos lo siguiente:
Copiar código:<?php
require __DIR__ . '/vendor/autoload.php';
Esto hace que carguemos el autoload.php para la carga automática de clases configurada en el composer.json.
El autoload nos ayuda para usar la convención “use” y “namespace” y no estar usando en cada archivo la sentencia “require” e “include” de PHP. Esto también ayuda a mantener una convención de nombramiento de archivos y clases dado el estándar “psr-4”; el cual dicta en groso modo como debes nombrar tus archivos de las clases, nombre de clases y estándares de codificación.
Aunque no tiene código por el momento también cargamos el bootstrap.php:
Copiar código:<?php
require __DIR__ . '/vendor/autoload.php';require __DIR__ . '/bootstrap.php';
Este archivo se encargará de inicializar nuestra aplicación, rutas(configuradas en routes/web.php) y librerías generales de la aplicación(src/Utils).
Con esto ya tenemos nuestro esqueleto para nuestro proyecto, obviamente se puede ir subiendo estos cambios a un repositorio de Git(Bitbucket, Gitlab o Github).
Espero que les haya gustado esta publicación, denle like, claps y comentarios por favor. En la próxima publicación vamos a codificar los puntos de entrada de nuestro proyecto.
Puedes revisar el codigo en el siguiente repositorio de Github:
https://github.com/krsrk/pokedex-vanilla-php
En la siguiente publicación empezaremos a codificar nuestros puntos de entrada de nuestra app:
