Forem: Chris López

Actualizando la versión de PHP al proyecto Pokedex.

Chris López — Fri, 26 May 2023 06:05:58 +0000

Hace ya tiempo, hice una publicación en la cual desarrolle un Pokedex con simple y llano PHP, solo usando ciertas librerías que sirvieron como herramientas para agregar funcionalidad al proyecto.

Como contexto general, es como un mini framework donde solo tiene funcionalidad de crear rutas, hacer requests y responses y crear controllers.

El repositorio del proyecto lo puedes consultar aquí:
https://github.com/krsrk/pokedex-vanilla-php

Nos vamos a dar a la tarea de actualizar la versión de PHP a la mas actual, que es la 8.2(actualmente la versión que maneja el pokedex es la 7.2).

Después de actualizar las librerías y la versión de PHP, refactorizaremos código basados en las nuevas características de la versión 8.2 de PHP.

Pre requisitos

Tener PHP 8.2 instalado en CLI
Tener GIT instalado en CLI
Tener la versión mas actual de composer instalado en CLI

Manos a la obra

Los primeros pasos que debemos hacer, es actualizar el composer.json con las versiones de las librerías mas actuales y la versión o versiones de PHP que vamos a manejar.

Entonces actualizamos nuestro composer.json con lo siguiente:

"require": {
        "php": "^8.1||^8.2",
        "twig/twig": "^v3.6.0",
        "illuminate/database": "^v10.10.1",
        "vlucas/phpdotenv": "^v5.5.0"
    },

Después ejecutamos el siguiente comando:

composer install

Con estos pasos ya tendríamos actualizadas las librerías que se usaron, así como también la versión de PHP requerida para el proyecto.

Si quieres revisar estos cambios puedes ver el Pull Request en el siguiente link:
https://github.com/krsrk/pokedex-vanilla-php/pull/2

Actualizando código

Instalando nuestra suite de pruebas

Para este paso necesitaremos la librería de PEST, que es una librería o super set de PHPUnit que nos ayuda hacer pruebas unitarias y pruebas de integración. Con esto crearemos las pruebas unitarias del actual código(src/Utils) para poder validar y probar los cambios el código actual.

Instalamos la librería:

composer require pestphp/pest --dev --with-all-dependencies

Despues ejecutamos el siguiente comando:

./vendor/bin/pest --init

El comando anterior nos inicializa la configuración de PEST para empezar a crear nuestros tests.

Ahora, probamos la instalación de PEST con el siguiente comando:

./vendor/bin/pest

Creando nuestra primer prueba

Ya teniendo PEST instalado, vamos a hacer cambios en la clase Response. Estos cambios aplicarían lo siguiente:

Implementar el contrato de la clase(crear la interface de la clase Response)
Agregar tipado de datos en métodos, propiedades y parámetros(esto se puede hacer desde la versión 8.1).
Refactorización de procesos internos de la clase.

Con estos requerimientos definidos, creamos nuestra prueba:

<?php
//tests/Unit/ResponseTest

test('it can create a response object', function (){
    $response = new \Utils\Response();

    expect($response)->toBeObject();
});

Actualizando nuestra clase Response

Como anteriormente mencionamos, el primer requerimiento es hacer el contrato de la clase o interface:

<?php

namespace Utils;

interface ResponseInterface
{
    public function setClosure(): void;

    public function send(Request $request): void;

    public function getClosure(): mixed;

    public function json(mixed $dataResponse, int $codeResponse = 200): void;
}

Implementamos la interface en nuestra clase Response:

class Response implements ResponseInterface
{
  ...

Cambiamos la definición de nuestros métodos:

// Antes
public function send($request)
{

// Después
public function send(Request $request): void
{
  ...

Cambiamos también el constructor de la clase:

// Antes
protected $closure;

public function __construct($closure = null)
{
        if(!is_null($closure)) {
            $this->setClosure($closure);
        }
}

// Después
public function __construct(protected mixed $closure = null)
{
        if(!is_null($this->closure)) {
            $this->setClosure();
        }
}

Cuando inicializamos la propiedad "closure" en el método "setClosure", se le asignan varios valores de "closure types" que son de tipo string; actualmente están escritos sin ninguna asignación directo en el código, o lo que se conoce en el ambiente dev como valores "hardcodeados", para arreglar esto usaremos Enums con los valores de los closure types:

Creamos la clase Enum para implementar los valores:

<?php

namespace Utils\ValueObjects;

enum ClosureTypes: string
{
    case CLOSURE_STRING = 'string';

    case CLOSURE_ARRAY = 'array';

    case CLOSURE_CONTROLLER = 'controller';

    case CLOSURE_FUNCTION = 'function';
}

En nuestro metodo "setClosure" cambiamos esos valores:

...

if (is_array($closure)) {
    // Antes: $closureType = 'array'

    // Después
    $closureType = ClosureTypes::CLOSURE_ARRAY->value;
}

if (is_callable($closure)) {
    // Antes: $closureType = 'closure'

    // Después
    $closureType = ClosureTypes::CLOSURE_FUNCTION->value;
}

Modificamos nuestro archivo de test con lo siguiente:

test('it can create a response object with closure', function (){
    $response = new \Utils\Response('Hello World');

    expect($response)->toBeObject();
});

test('it can create a response object with string closure', function (){
    $response = new \Utils\Response('Hello World');
    $closure = $response->getClosure();

    expect($closure['closure_type'])->toBe(\Utils\ValueObjects\ClosureTypes::CLOSURE_STRING->value);
});

test('it can create a response object with array closure', function (){
    $response = new \Utils\Response(['pokemon' => 'Bulbasaur']);
    $closure = $response->getClosure();

    expect($closure['closure_type'])->toBe(\Utils\ValueObjects\ClosureTypes::CLOSURE_ARRAY->value);
});

test('it can create a response object with function closure', function (){
    $response = new \Utils\Response(fn() => 'Hello World');
    $closure = $response->getClosure();

    expect($closure['closure_type'])->toBe(\Utils\ValueObjects\ClosureTypes::CLOSURE_FUNCTION->value);
});

test('it can create a response object with controller closure', function (){
    $response = new \Utils\Response('PokemonController@index');
    $closure = $response->getClosure();

    expect($closure['closure_type'])->toBe(\Utils\ValueObjects\ClosureTypes::CLOSURE_CONTROLLER->value);
});

test('it expects "unknown" if there is an unknown closure', function (){
    $response = new \Utils\Response(1);
    $closure = $response->getClosure();

    expect($closure['closure_type'])->toBe('unknown');
});

Ejecutamos nuestro test y deberíamos ver algo como lo siguiente:

Refactorizando el método send()

Una vez que tengamos nuestros test validados, debemos refactorizar el código de nuestra clase.

Para efectos prácticos lo vamos hacer con el método send(), que es el que se encargará de ejecutar el response dependiendo su tipo de closure(string, array, json, function, controller).

El código original del método es el siguiente:

public function send($request)
{
        if ($this->closure['closure_type'] == 'string') {
            echo $this->closure['closure'];
        } elseif ($this->closure['closure_type'] == 'array') {
            echo json_encode($this->closure['closure']);
        } elseif ($this->closure['closure_type'] == 'closure' || $this->closure['closure_type'] == 'controller') {
            $this->_executeClosure($request);
        } else {
            header("HTTP/1.0 404 Not Found");
            exit('<h3>404 - Not Found</h3>');
        }
}

Para refactorizar las sentencias "if" implementaremos un tipo factory para poder instanciar una clase dependiendo algún parámetro de funcionalidad o comportamiento.

Entonces, si por ejemplo tengo un closure_type = 'string' el Factory va instanciar la clase ClosureTypeString y va a ejecutar su método execute().

De esta forma quedaría el código refactorizado del método send():

if (is_null(ClosureTypes::tryFrom($this->closure['closure_type']))) {
    header("HTTP/1.0 404 Not Found");
    exit('<h3>404 - Not Found</h3>');
}

ClosureType::from($this->closure['closure_type'], $this->closure['closure'])->execute($request->getParams());

Agregamos el test de este método ya refactorizado:

test('it can send a string response', function (){
    $_SERVER['REQUEST_URI'] = '/orders/products/1';
    $response = new \Utils\Response('Hello World');
    $response->send(request());
})->expectNotToPerformAssertions();

test('it can send an array response', function (){
    $_SERVER['REQUEST_URI'] = '/orders/products/1';
    $response = new \Utils\Response(['message' => 'Hello World']);
    $response->send(request());
})->expectNotToPerformAssertions();

...

Ejecutamos las pruebas y vemos que todas pasaron:

Ahora, iniciamos el servidor y ejecutamos nuestro proyecto con alguna ruta que venga registrada en el routes/web.php, deberíamos de ver lo siguiente:

Ejecutamos todas nuestras pruebas con el siguiente comando:

 ./vendor/bin/pest

Y deberíamos de ver algo como esto:

Con estos pasos, podríamos decir, que tenemos cubiertos los cambios al integrar las pruebas al código. Es muy importante, que en cambios mayores al código se tengan integradas este tipo de pruebas, ya que estas son las que nos pueden salvar de varios dolores de cabeza y ahorrar tiempo a la hora de hacer algún deploy.

Los cambios los puedes consultar en el siguiente PR:

https://github.com/krsrk/pokedex-vanilla-php/pull/5

PHP 8.2 Liberación Nov. 2022

Chris López — Mon, 19 Sep 2022 22:07:38 +0000

Para noviembre 24, se libera la nueva versión de PHP 8.2, la cual traerá nuevas características que mejoran mucho el lenguaje y lo harán mas robusto.

Puedes ver el estatus de este release en este link: https://wiki.php.net/todo/php82

También puedes revisar el timelapse de las versiones de PHP en este link: https://www.php.net/supported-versions.php

A continuación, se describen algunas de las características mas importantes de la versión.

Readonly classes

Esta característica introducida en la versión 8.1, hace que las propiedades de nuestra clase sean de solo lectura, evitando la sobreescritura de los valores asignados a nuestras propiedades, eso se usa con bastante frecuencia en las clases DTO.

Esta característica en la versión 8.1 se define de la siguiente manera:

class User
{
    public function __construct(
        public readonly string $name, 
        public readonly string $email,
    ) {}
}

En la versión 8.2 se refactoriza de la siguiente manera:

readonly class User
{
    public function __construct(
        public string $name, 
        public string $email,
    ) {}
}

Propiedades dinámicas de las clases deprecadas

Otra característica importante de la versión 8.2, es que ya no podríamos crear propiedades dinámicas, al menos te generaría un "Warning Deprecated".

En versiones futuras este "Warning Deprecated", se convertiría en error. Hasta el momento podemos realizar lo siguiente:

class User 
{
   public string $name;
}


$user = new User();
$user->last_name = 'Jhon Snow';

Con la versión 8.2, si hacemos lo anterior arrojaría un warning, salvo que en nuestra clase usemos los "Magic Methods" "get" y "set", ejemplo;

class User
{
    private array $properties = [];

    public function __set(string $name, mixed $value): void
    {
        $this->properties[$name] = $value;
    }
}

// …

$user->last_name = 'Bruce Wayne';

Probando la versión 8.2 en Docker

Si quieres probar las características de la nueva versión, el contenedor de PHP 8.2 se encuentra ya disponible en el Docker Hub, con esto ya no tendrás que instalar esta versión en tu equipo para hacer pruebas, puedes consultarlo en el siguiente link:

https://hub.docker.com/_/php/tags

Probamos nuestros ejemplos de esta publicación en el contenedor de Docker y este fue el resultado:

¿Y tu proyecto ya esta preparado para este cambio?

Pokedex: Utilizando Livewire para el front.

Chris López — Tue, 13 Sep 2022 00:09:48 +0000

Ya que en previas publicaciones actualizamos el Pokedex a versiones mas actuales del stack de tecnologías de Laravel, ahora probaremos una herramienta que nos ayudará bastante a crear nuestras aplicaciones en el lado del front-end, en el caso, que no se desee aprender o no sabemos Javascript, pero si PHP.

Esta herramienta es del mismo ecosistema de Laravel y se llama Livewire. Su funcionalidad es controlar el front-end por medio de Blade y de PHP.

Puedes revisar la anterior publicación aquí: https://dev.to/krsrk/pokedex-migracion-de-mix-a-vite-40ab

Puedes saber más sobre Livewire aquí: https://laravel-livewire.com/docs/2.x/quickstart

Configuración e Instalación

Para tener Livewire en nuestro proyecto, tenemos que instalar la librería de Livewire:

composer require livewire/livewire

Y en el caso que queramos configurar Livewire, ejecutamos este comando:

php artisan livewire:publish --config

Ahora, modificaremos el archivo layout.blade, ya que debemos de agregar los recursos de Livewire y quitar los de Vite:

<head>
  ...
  <!-- Styles -->
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  @livewireStyles
</head>

<body> 
  ...
  <div id="app">
    ...
  </div>
  @livewireScripts
</body>

Ya con Livewire instalado y configurado en nuestro proyecto, el paso siguiente es la creación de componentes.

Creación de componentes

Los componentes como mencionamos anteriormente, están tratados por Blade y PHP. Cuando se crea un componente, se genera una clase en PHP con sus respectivos eventos y la vista del componente en Blade.

Para crear un componente ejecutamos el siguiente comando:

php artisan make:livewire PokedexNav

Esto, nos generaría los siguientes archivos:

Vista del componente livewire/pokedex-nav.blade.php:

<div class="relative bg-red-600">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="flex justify-between items-center border-b-1 border-gray-100 py-6 md:justify-start md:space-x-10">
            <div class="lg:w-0 lg:flex-1 rounded-full text-white shadow-solid">
                <a href="#" class="flex">
                    <img class="h-12 w-12" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Pok%C3%A9_Ball_icon.svg" alt="Workflow">
                </a>
            </div>

            <div class="md:flex items-center justify-center space-x-8 md:flex-1 lg:w-0">
                <h1 class="text-white text-3xl">The Pokedex</h1>
            </div>

            <div class="md:flex items-center justify-center space-x-8 md:flex-1 lg:w-0">
                &nbsp;
            </div>
        </div>
    </div>
</div>

Clase para programar eventos del componente, se encuentra en app/Http/Livewire/PokedexNav.php:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class PokedexNav extends Component
{
    public function render()
    {
        return view('livewire.pokedex-nav');
    }
}

Si no se requiere crear un archivo Blade por componente, simplemente creamos un Inline Component de la siguiente manera:

Se ejecuta el siguiente comando:

php artisan make:livewire PokedexNav --inline

Nos generaría el siguiente código:

class PokedexNav extends Component
{
    public function render()
    {
        return <<<'blade'
            <nav>...</nav>
        blade;
    }
}

Como vemos, inyectaremos el código Html en el return del método render, esto sería algo similar a como lo hace React o Vue con JSX.

Programando los componentes

Así como en Vue se programan las propiedades, métodos, computed, etc, con Livewire se hace con clases en PHP, y la estructura es algo similar que con las tecnologías de Front antes mencionadas.

Las propiedades del componente se definirán de la siguiente manera:

class PokedexContent extends Component
{
    public $pokemons;

Y esta propiedad la podemos usar en el componente Blade:

<div class="m-5 grid grid-cols-3 gap-4">
        @foreach ($pokemons as $pokemon)
            ...
        @endforeach
</div>

Tiene la misma metodología como cuando pasamos variables a Blade desde el controller.

Para definir un componente en la vista es con el tag "livewire:nombre-del-componente":

<livewire:the-items-data />

Al igual que hacemos en Vue, podemos definir sus propiedades y pasarle valores:

<livewire:the-items-data :pokemon="$pokemon"/>

Para hacer un propiedad reactiva como lo hacemos en Vue, tenemos que definirla de la siguiente manera:

<input
   wire:model="search"

En este ejemplo, lo que escribamos en el "input" actualizará el valor de la propiedad "search".

El wire:model tiene la propiedad de debounce, por defecto, lo hace cada 150 ms. Esto ocasiona un re render de la vista cada vez que se ejecuta algún evento relacionado con la propiedad reactiva.

Para configurarlo hacemos lo siguiente:

<input
   wire:model.debounce.250ms="search"

Conclusión

Livewire, es una herramienta que trata de abarcar el "Full-Stack" en el ecosistema de Laravel. Como podrás observar, no necesitas ningún lenguaje extra (como Javascript para el front), ni mucho menos un compilador de assets (Como Laravel Mix o Vite). En si, el render de la vista es rápido ya que cuenta con la información al momento que se hace el request.

Hasta el momento, hay muchos proyectos interesantes que se realizaron con esta herramienta; como paneles de administración, stacks de tecnología y componentes.
Ha ido creciendo desde su lanzamiento, quizá en un futuro, ya se podrá adoptar esta tecnología como default en el stack de Laravel.

Pueden ver el crecimiento de Livewire y los proyectos en estos links: https://trends.builtwith.com/framework/Laravel-Livewire https://www.libhunt.com/topic/livewire

Sin embargo, por el momento carece de características que otros frameworks en el front tienen, por ejemplo; en Vue o React, sería la reactividad, ya que en Livewire si la tiene pero no funciona como estamos acostumbrados en estos frameworks, y cada que se aplica se hace una llamada Ajax para re renderizar la vista en cualquier cambio de algún evento.

un dato mas sobre la reactividad, es que no se puede aplicar de un componente hijo a un componente padre por medio de Props, y tampoco permite tener demasiada abstracción de niveles de componentes anidados.
Por ende, tampoco tiene manejo de estados entre componentes como lo tiene Vue con Vuex y con Pinia.

Estas condiciones las podrás encontrar al inicio de su documentación de la sección "Nesting Components": https://laravel-livewire.com/docs/2.x/nesting-components

Ahora la mayor de las dudas, ¿Cómo puedo hacer que funcione Livewire en un entorno que este separado el Front del Back?, ¿Se tendría que usar el paquete Http de Laravel directo en algún método del componente, y hacer la llamada al api?, ¿Cómo afectaría el rendimiento el "re render" que hace cuando se actualiza el componente?.

Todo esto, desde mi punto de vista, hace dudar si es bueno escoger a Livewire como herramienta por default para un proyecto real. Desconozco si en versiones posteriores lo vayan a mejorar,ahora ya es cuestión de un análisis "costo-beneficio" a la hora de usar esta herramienta en cualquier proyecto.

Puedes revisar los cambios del código de este artículo en el siguiente enlace:

https://github.com/krsrk/pokedex-laravel/tree/pokedex-livewire-version

Pokedex: Migración de Mix a Vite

Chris López — Thu, 08 Sep 2022 17:48:27 +0000

En la anterior publicación nos dimos a la tarea de actualizar la versión de "Vue"(de Vue 2 a Vue 3).

Puedes ver la publicación aquí: https://dev.to/krsrk/pokedex-actualizar-vue-de-la-version-2-a-la-3-58gj

Ahora, requerimos actualizar la herramienta de compilación de los recursos de "Javascript".

Desde la versión 9.19 de Laravel cambio la herramienta para compilar los recursos de Javascript, dejando "Laravel Mix" a un lado, e integrando "Vite" como la herramienta oficial para esta tarea en Laravel.

Las diferencias entre estas es que "Vite" te da un entorno de desarrollo y compilación mas rápido que "Laravel Mix" y "Webpack".

Aquí puedes obtener información sobre Vite:
https://vitejs.dev/guide/why.html
https://laravel.com/docs/9.x/vite

Configuración

Para integrar Vite a un proyecto ya existente, solamente necesitamos instalar dos paquetes; para lograr esto debemos ejecutar lo siguiente:

npm install --save-dev vite laravel-vite-plugin

También necesitaremos instalar el plugin de Vite para Vue:

npm install --save-dev @vitejs/plugin-vue

Creamos el archivo "vite.config.js":

touch vite.config.js && nano vite.config.js

Lo editamos con el siguiente contenido:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        vue()
    ],
});

Actualizamos el archivo "package.json" en su sección de "scripts" con lo siguiente:

"scripts": {
        "dev": "vite",
        "build": "vite build"
    },

Configuración en código

Otro requerimiento para que funcione correctamente "Vite", es quitar en el proyecto los "require y sustituirlos por "import". Además los archivos de los componentes en los "import" deben terminar con ".vue", Ejemplos:

//bootstrap.js
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

//app.js
import './bootstrap';

import PokedexNav from "./components/PokedexNav.vue";
import PokedexContent from "./components/PokedexContent.vue";
import PokedexFooter from "./components/PokedexFooter.vue";

Ahora, reemplazaremos "mix()" o "asset()" por "@vite" en el "layout.blade":

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Pokedex</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Eliminamos Laravel Mix y su configuración:

npm remove laravel-mix && rm webpack.mix.js

Configuramos Tailwind:

npx tailwindcss init -p

Configurar Sail

Para que Vite se ejecute en el contenedor de Sail, necesitamos realizar unas configuraciones para que funcione la integración.

Nos aseguramos que en el archivo "docker-compose.yml" tenga esta línea en el servicio "laravel.test":

- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'

Abrimos el "vite.config.js" y agregamos lo siguiente en la sección de "defineConfig":

server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
    },

Vite por default tiene configurado un host, y asignándole dicha configuración va a convivir con el contenedor de Sail.

Nota: La configuración "hmr" sirve para cuando se usa WSL2 en Windows.

Borramos caché y ejecutamos Vite:

sailartisan optimize:clear && sail npm run dev

Y Voila!, ya tenemos corriendo el Pokedex con Vite y nuestros recursos de Javascript se compilan casi al instante.

Otra de las ventaja de tener Vite en nuestro proyecto, es que el "hot reload" lo hace casi instantáneo en cuanto guardas los cambios de algún archivo.

Si quieres ver la diferencia de archivos para esta configuración lo puedes consultar aquí:

https://github.com/krsrk/pokedex-laravel/pull/8

Pokedex: Actualizar Vue de la versión 2 a la 3

Chris López — Wed, 07 Sep 2022 01:07:35 +0000

Anteriormente actualizamos la versión de Laravel de la 8.x a la 9.27, ahora toca el turno para actualizar la versión de Vue.

La publicación anterior la puedes consultar aquí:

https://dev.to/krsrk/pokedex-update-laravel-from-8x-to-9x-4018

Actualmente la versión 3 de Vue, viene con "composition API", la cual en términos generales, es una funcionalidad que hace que tu app de Vue2 no se rompa con lo nuevo del Vue3.

Uno de los primeros cambios que podremos notar, será como se define la instancia de Vue.

A continuación, actualizaremos a la versión 3, configurando lo básico.

Configuración

Inicialmente, debemos modificar el archivo "package.json" con lo siguiente:

"devDependencies": {
     "@vue/compiler-sfc": "^3.2.38",
     "axios": "^0.21.4",
     "css-loader": "^6.7.1",
     "laravel-mix": "^6.0.0-beta.17",
     "postcss": "^8.1.14",
     "resolve-url-loader": "^3.1.2",
     "sass": "^1.32.11",
     "sass-loader": "^11.0.1",
     "vue": "^3.2.36",
     "vue-loader": "^17.0.0"
},
"dependencies": {
     "tailwindcss": "^2.2.4",
     "vuex": "^4.0.0"
}

Como podemos observar, actualizamos varias versiones de paquetes existentes, y agregamos otros paquetes que nos sirven para usar Vue 3.
En el caso de Vue, actualizamos los paquetes de "vue" y "vue-loader", quitamos "vue-template-compiler", agregamos "@vue/compiler-sfc" y actualizamos "vuex".

Una vez que hemos realizado lo anteriormente descrito, borraremos los siguientes archivos:

node_modules
public/css/app.css
public/js/app.js(todo lo que contenga esta carpeta)

Una vez borrados los archivos tendremos que ejecutar lo siguiente:

npm install

Si todo se realizó de forma correcta, ejecutamos el siguiente comando:

npm run dev

Configuración de punto de entrada de Javascript

Como se mencionó anteriromente, la creación de la instancia de Vue3 es un poco diferente a la versión anterior, por tal motivo tendremos que modificar el punto de entrada de la app.

Para lograrlo, modificaremos el archivo resources/js/app.js con lo siguiente:

require('./bootstrap');
import { createApp } from 'vue';
import store from './store/store';

import PokedexNav from "./components/PokedexNav.vue";
import PokedexContent from "./components/PokedexContent.vue";
import PokedexFooter from "./components/PokedexFooter.vue";

createApp({
    components: {
        'pokedex-nav': PokedexNav,
        'pokedex-content': PokedexContent,
        'pokedex-footer': PokedexFooter,
    }
}).use(store).mount('#app')

La diferencia consiste que antes usábamos "new Vue" para crear nuestra app, en esta versión tenemos que usar el método "createApp" de la versión 3.

Modificación de los componentes

Otro de los cambios en la versión 3 de Vue, es la definición de componentes, aunque en teoría no debe afectar si los dejamos así, vamos a modificar uno de ellos, para ver la diferencia.

Modificamos el componente "PokedexNav" con lo siguiente:

<script>
import { defineComponent } from 'vue';

export default defineComponent({
    name: "PokedexNav"
});
</script>

Usamos la función "defineComponent" para configurar y programar nuestro componente, anteriormente simplemente lo exportábamos como un objeto.

Modificación del Store

La llamada al "store" definida por "Vuex" también cambio, aquí antes inyectábamos la store definida global en el objeto del componente, ahora tendremos que usarla en el "setup" del componente.

Definimos nuestra store modificando el archivo "store.js"

import { createStore } from 'vuex';
import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"

const store = createStore({
    state,
    getters,
    mutations,
    actions,
})

export default store

Usamos la función "createStore" para definir y configurar nuestra "store". Previamente en "app.js" la habíamos configurado en la función de "createApp" de nuestro punto de entrada.

Ahora modificamos el componente "PokedexContent" con lo siguiente:

<script>
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

import TheItemData from "./TheItemData";
import TheSearchBox from "./TheSearchBox";

export default defineComponent({
    name: "PokedexContent",
    components: {
        'the-item-data': TheItemData,
        'the-search-box': TheSearchBox,
    },
    created() {
        this.$store.dispatch('getPokemonsData')
    },
    setup() {
        const store = useStore();
        let items = computed(function () {
            return store.state.pokemonsWithSearchFilter;
        });

        return {
            store,
            items,
        }
    }
})
</script>

La "store" la definimos con la función "useStore" en "setup()", toda la configuración de la misma, fue definida en el archivo "app.js". Después definimos nuestra propiedad "computed"(otra función de "vue") y le pasamos el "state" del store a esta propiedad.

Cabe destacar que aunque tenemos definido el store en el setup, todavía funciona la llamada al store de la versión 2 con "this.$store".

Al terminar de realizar todo lo anteriormente descrito, ya podremos ejecutar nuestro Pokedex con Vue actualizado a la versión 3.

Si deseas visualizar la diferencia de los archivos cuando se actualizó la versión de Vue, la puedes consultar en el siguiente PR:

https://github.com/krsrk/pokedex-laravel/pull/7

Pokedex: Actualizar Laravel de la versión 8.x a la 9.x

Chris López — Mon, 05 Sep 2022 21:21:03 +0000

Hace un año estuve realizando algunas publicaciones, las cuales hacen referencia a Laravel, en dichas publicaciones construimos un "Pokedex" desde 0.

Estas publicaciones se pueden consultar en el siguiente enlace:

Pokedex con Laravel

Ahora que ha pasado este periodo de tiempo, me propuse a actualizar el proyecto, el cual contaba con la versión de Laravel 8.x, por tal motivo, el requerimiento principal, será actualizar a la versión mas reciente.
De igual forma, estarémos actualizando a la versión 8.1 de PHP.

Cuando se escribió este articulo, la versión mas actual de Laravel es la 9.27 con versión mínima de PHP, que es la 8.0.

Prerrequisitos

Para poder hacer esta actualización se debe tener instalado lo siguiente:

PHP 8.1
Ubuntu 20.04 o WSL2 en Windows
Composer
Git

Primeros pasos

Antes de continuar, les recomiendo que sigan la guía de instalación que tiene Laravel para cuando liberan las versiones, en este caso fue de 8 a 9, les dejo el link:

Upgrade Guide Laravel From 8.x to 9.x

Si actualmente no usas tantos paquetes, en esa guía simplemente van a llegar al paso que dice "Upgrade Dependencies", en caso contrario, les recomiendo una auditoría exhaustiva con los paquetes que usan y revisar los repositorios de los mismos, para ver si tienen versiones para Laravel 9 en este caso.

Instalación

Siguiendo estas recomendaciones; el "Pokedex" no usa paquetes externos, es un proyecto sencillo que nos da una inducción a Laravel, por lo cual vamos a codificar, y lo primero que vamos realizar es la modificación del archivo "composer.json".

Sustituimos con lo siguiente en la sección de "require" del archivo:

"require": {
        "php": "^8.0||^8.1",
        "fruitcake/laravel-cors": "^v2.0.5",
        "guzzlehttp/guzzle": "^7.5.0",
        "laravel/framework": "^v9.27.0",
        "laravel/tinker": "^v2.7.2",
        "laravel/ui": "^3.3"
    },

Si ponemos atención a la diferencia, solamente actualizamos versiones y quitamos un paquete llamado "fideloper/proxy", mas adelante sabremos porqué eliminamos esta librería.

Ahora modificamos la sección de "require-dev":

"require-dev": {
        "spatie/laravel-ignition": "^1.4.0",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^v6.2.1",
        "phpunit/phpunit": "^9.5.24"
    },

En esta parte, actualizamos versiones y sustituimos el paquete "facade/ignition" por "spatie/laravel-ignition".

Una vez modificado el archivo "composer.json" borramos el archivo "composer.lock", ya que está ligado a la versión 8 y nos puede arrojar errores en la instalación si lo dejamos así.

Después de borrar el archivo "composer.lock" ejecutamos el siguiente comando:

composer install

Instalamos las dependencias de Javascript:

npm install

Copiamos el archivo de configuración de Laravel:

cp .env.example .env

Probamos que sirva la configuración:

php artisan key:generate

Test en browser de la instalación

Aunque de cierta manera nos sirva el comando "artisan" después de configurar la versión de Laravel, tendremos que probar que todo nuestro Pokedex se ejecute sin errores en el browser.

Para esto utilizaremos "Laravel Sail", la configuración como tal no la mencionaré aquí, ya que previamente en las publicaciones del "Pokedex" se mostro como se configura; solamente configuraremos el servicio de MariaDb.

Pueden encontrar la publicación de Pokedex con Sail aquí:

The Pokedex Project — Desplegando nuestro ambiente de desarrollo con Laravel Sail(2)

Una vez configurado, levantamos los servicios de Sail:

sail up -d

En este caso, se uso un alias para ejecutar el comando de Sail, recordemos que se encuentra en vendor/bin

Probamos que los servicios se hayan levantado correctamente:

sail ps

Ya con los servicios levantados, abrimos nuestro browser y ponemos el localhost que nos indica el comando anterior y nos arrojará un error:

Para la versión 9, dejaron de usar "fideloper/proxy" y usaron una librería que ya viene en el core de Laravel, la cual se encuentra en "Illuminate/Http/Middleware/TrustProxies".

Entonces, para que ya no arroje dicho error, modificaremos el archivo TrustProxies.php, el cual se encuentra en la carpeta de Middleware con lo siguiente:

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Middleware\TrustProxies as Middleware;

Realizando estos cambios, probamos de nuevo en nuestro browser y tendremos el "Pokedex" con la versión mas reciente de Laravel:

Los cambios que se realizaron en esta publicación, los puedes encontrar en el siguiente PR:

https://github.com/krsrk/pokedex-laravel/pull/3