Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Laravel
Code

Crea una aplicación React con Laravel RESTful Back End: Parte 1, Laravel 5.5 API

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel Back End: Part 2, React

Spanish (Español) translation by CYC (you can also view the original English article)

Laravel y React son dos tecnologías de desarrollo web populares que se utilizan para crear aplicaciones web modernas. Laravel es prominentemente un framework de PHP del lado del servidor, mientras que React es una biblioteca de JavaScript del lado del cliente. Este tutorial sirve como introducción a Laravel y React, combinándolos para crear una aplicación web moderna.

En una aplicación web moderna, el servidor tiene un trabajo limitado de administración del back-end a través de algunos puntos finales API (Application Programming Interface). El cliente envía solicitudes a estos puntos finales y el servidor devuelve una respuesta. Sin embargo, al servidor no le preocupa la forma en que el cliente representa la vista, lo que coincide perfectamente con el principio de Separación de Preocupaciones. Esta arquitectura permite a los desarrolladores construir aplicaciones robustas para la web y también para diferentes dispositivos.

En este tutorial, utilizaremos la última versión de Laravel, versión 5.5, para crear una API RESTful back-end. La interfaz comprenderá componentes escritos en React. Construiremos una aplicación ingeniosa de listado de productos. La primera parte del tutorial se centrará más en los conceptos de Laravel y en el back-end. Empecemos.

Introducción

Laravel es un framework PHP desarrollado para la web moderna. Tiene una sintaxis expresiva que favorece la convención sobre el paradigma de configuración. Laravel tiene todas las características que necesitas para comenzar con un proyecto desde el primer momento. Pero personalmente, me gusta Laravel porque convierte el desarrollo con PHP en una experiencia y flujo de trabajo completamente diferentes.

Por otro lado, React es una biblioteca popular de JavaScript desarrollada por Facebook para crear aplicaciones de una sola página. React te ayuda a dividir su vista en componentes donde cada componente describe una parte de la interfaz de usuario dentro de la aplicación. El enfoque basado en componentes tiene el beneficio adicional de la reutilización y modularidad de los componentes.

¿Por qué Laravel y React?

Si estás desarrollando para la web, puedes inclinarte por utilizar una única base de código tanto para el servidor como para el cliente. Sin embargo, no todas las compañías le dan al desarrollador la libertad de usar una tecnología de su elección, y por algunas buenas razones. Usar un stack de JavaScript para un proyecto completo es la norma actual, pero no hay nada que te impida elegir dos tecnologías diferentes para el lado del servidor y del lado del cliente.

Entonces, ¿qué tan bien encajan Laravel y React? Muy bien, de hecho. Aunque Laravel ha documentado el soporte para Vue.js, que es otro framework de JavaScript, usaremos React para el front-end porque es más popular.

Requisitos previos

Antes de comenzar, voy a suponer que tienes una comprensión básica de la arquitectura RESTful y cómo funcionan los puntos finales API. Además, si tienes experiencia previa en React o Laravel, podrás sacar el máximo provecho de este tutorial.

Sin embargo, si eres nuevo en ambos frameworks, no te preocupes. El tutorial está escrito desde la perspectiva de un principiante, y deberías poder lograrlo sin demasiados problemas. Puedes encontrar el código fuente para el tutorial en GitHub.

Instalación y configuración de tu proyecto Laravel

Laravel usa Composer para administrar todas las dependencias. Entonces, antes de comenzar con Laravel, descarga e instala Composer en tu computador. Es posible que también debas configurar la variable de entorno de ruta para que se puedas acceder a Composer de forma global.

Ejecuta el siguiente comando para descargar el instalador laravel.

Si has configurado correctamente la variable $PATH y has agregado ~/.composer/vendor/bin en tu ruta, deberías poder generar un proyecto Laravel nuevo de la siguiente manera:

Alternativamente, puedes usar Composer para crear un nuevo proyecto sin el instalador de laravel.

Si todo va bien, deberías poder iniciar tu aplicación en un servidor de desarrollo en http://localhost:8000.

Nota: Artisan es una herramienta de línea de comandos con la que no puedes vivir sin trabajar con Laravel. Artisan acepta una gran lista de comandos que le permiten generar código para tu aplicación. Ejecuta la lista de comando disponibles en artisan mediante php artisan list.

Configurando el entorno

Tu aplicación tendrá un archivo .env dentro del directorio raíz. Toda la información de configuración específica del entorno se declara aquí. Crea una base de datos para tu aplicación si aún no lo has hecho y agrega los detalles de la base de datos en el archivo .env.

Entendiendo los modelos, rutas y controladores

Laravel es un framework que sigue la arquitectura Modelo-Vista-Controlador (MVC). En términos generales, MVC le ayuda a separar las consultas de la base de datos (el Modelo) de la lógica relacionada con la forma en que se deben procesar las solicitudes (el Controlador) y cómo se debe representar el diseño (la Vista). La siguiente imagen muestra el funcionamiento de una aplicación típica de Laravel.

Overview of Laravels architecture for building RESTful API endpoints
Arquitectura de Laravel. El controlador devuelve la respuesta y, por lo tanto, la capa de vista no es necesaria.

Dado que estamos construyendo una API usando Laravel, limitaremos nuestra discusión al Modelo y al Controlador. Revisaremos nuestras opciones para crear la Vista en la segunda parte de este tutorial.

Las rutas

Cuando el servidor recibe una solicitud HTTP, Laravel intenta hacerla coincidir con una ruta registrada dentro de cualquiera de los archivos de ruta. Todos los archivos de ruta se encuentran dentro del directorio de rutas. routes/web.php aloja la ruta para la interfaz web, mientras que routes/api.php aloja la ruta para la API. Las rutas registradas en api.php tendrán el prefijo /api (como en localhost: 3000/api). Si necesitas cambiar este comportamiento, debes dirigirte a la clase RouteServiceProvider en /app/Providers/RouteServiceProvider.php y realizar cambios allí.

Dado que estamos construyendo una aplicación de listado de productos, aquí están los puntos finales para la API y las acciones HTTP asociadas con esos puntos finales.

  • GET /products/: recupera todos los productos.
  • GET /product/{id}: recupera el producto que coincide con el id.
  • POST /products: crea un nuevo producto y lo inserta en la base de datos.
  • PUT /products/{id}: actualiza un producto existente que coincida con el id.
  • DELETE /products/{id}: elimina el producto con el id proporcionado.

Consigamos la terminología correcta. GET, POST, PUT y DELETE son los verbos HTTP (más conocidos popularmente como métodos HTTP) esencialmente necesarios para construir un servicio RESTful. /products es la URL asociado al recurso de productos. Los métodos HTTP solicitan al servidor que realice la acción deseada en un recurso determinado.

HTTP actions acting on the Product resource
GET, POST, PUT y DELETE son las acciones REST comúnmente utilizadas

El enrutador te permite declarar rutas para un recurso junto con los métodos HTTP que se dirigen a ese recurso. Aquí hay un archivo de rutas de muestra que devuelve algunos datos codificados.

routes/api.php

Si deseas verificar que las rutas funcionan como se espera, debes usar una herramienta como POSTMAN o curl.

El modelo Product

El recurso de productos necesita un modelo que pueda interactuar con la base de datos. El modelo es la capa que se encuentra en la parte superior de la base de datos, ocultando toda la jerga específica de la base de datos. Laravel usa Eloquent ORM para modelar la base de datos.

El ORM Eloquent incluido con Laravel proporciona una implementación de ActiveRecord bella y sencilla para trabajar con tu base de datos. Cada tabla de la base de datos tiene un "Modelo" correspondiente que se utiliza para interactuar con esa tabla. Los modelos te permiten consultar datos en tus tablas, así como insertar nuevos registros en la tabla.
Documentación de Laravel

¿Qué pasa con la definición del esquema de la base de datos? La migración de Laravel se ocupa de eso. Artisan tiene un comando de migración que te permite definir tu esquema y actualizarlo incrementalmente en una etapa posterior. Vamos a crear un modelo y una migración para la entidad Product.

Nota: Hay muchos comandos Artisan por ahí, y es fácil perderse. Por lo tanto, cada comando de artisan incluye una pantalla de ayuda que muestra información adicional, como las opciones y los argumentos disponibles. Para llegar a la página de ayuda, el nombre del comando debe ir precedido de ayuda help. Ejecuta el siguiente comando de ayuda para ver qué significa la opción -m: $ php artisan help make:model.

Aquí está el archivo de migración generado.

database/migrations/timestamp_create_products_table.php

El método up se llama al migrar nuevas tablas y columnas a la base de datos, mientras que el método down se invoca al revertir una migración. Creamos un esquema para una tabla con tres filas: id, created_at y updated_at. El método $table->timestamps() es responsable de mantener las columnas created_at y updated_at. Agreguemos un par de líneas más a la definición del esquema.

Hemos actualizado el esquema con cuatro columnas nuevas. El generador de esquemas de Laravel admite una variedad de tipos de columna como string, text, integer, boolean, etc.

Para ejecutar las migraciones pendientes, debes ejecutar el siguiente comando:

Por convención, Laravel supone que el modelo Product está asociado a la tabla de Products. Sin embargo, si necesitas asociar el modelo con un nombre de tabla personalizado, puedes usar la propiedad $table para declarar el nombre de la tabla. El modelo se asociará con una tabla llamada custom_products.

Pero vamos a mantener las cosas simples y vamos a seguir con la convención. El modelo Product generado se encuentra dentro de app/ directorio. Aunque la clase modelo puede parecer vacía, viene equipada con varios métodos de creación de consultas que puedes usar para consultar la base de datos. Por ejemplo, puedes usar Product::all() para recuperar todos los productos o Product::find(1) para recuperar un producto en particular con id = 1.

Los modelos Laravel tienen un mecanismo de protección incorporado contra la vulnerabilidad de asignación masiva. La propiedad fillable se utiliza para declarar los nombres de los atributos que se pueden asignar en masa de forma segura.

app/Product.php

El código anterior incluye los atributos de título, descripción, precio y disponibilidad y los trata como asignables en masa. Ahora podemos usar el método Product::create para insertar nuevas filas en la tabla de productos.

Base de datos

Laravel te permite completar tu base de datos de desarrollo y producción con datos ficticios que luego puedes usar para probar los puntos finales API. Puedes crear una clase semilla al ejecutar el siguiente comando Artisan.

Los archivos semilla generados se colocarán en el directorio database/seeds.

Para generar los datos ficticios, puedes usar algo como str_random(10) que devuelve una cadena aleatoria. Pero si necesitas datos que estén lo suficientemente cerca de los datos reales, deberías usar algo como la biblioteca faker. Faker es una biblioteca de terceros que se envía con el framework de Laravel para generar datos falsos.

database/seeds/ProductsTableSeeder.php

Ejecuta el comando artisan db:seed para llenar la base de datos.

Regresemos a routes/api.php y rellenemos las piezas faltantes.

routes/api.php

El controlador

El archivo de ruta actualmente alberga la lógica para el enrutamiento y el manejo de solicitudes. Podemos mover la lógica de manejo de solicitudes a una clase Controller para que nuestro código esté mejor organizado y sea más legible. Primero generemos una clase para el controlador.

La clase Controller se compone de varios métodos (índice, mostrar, almacenar, actualizar y eliminar) que corresponden a diferentes acciones HTTP. He movido la lógica de manejo de solicitudes de la ruta al controlador.

app/HTTP/Controllers/ProductsController.php

routes/api.php

Si no lo has notado, he inyectado una instancia de Product en los métodos del controlador. Este es un ejemplo de la vinculación implícita de Laravel. Laravel intenta hacer coincidir el nombre de instancia del modelo Product $product con la URL del segmento nombrado {producto}. Si se encuentra una coincidencia, se inyecta una instancia del modelo Product en las acciones del controlador. Si la base de datos no tiene un producto, devuelve un error 404. El resultado final es el mismo que antes pero con menos código.

Abre POSTMAN y los puntos finales para el producto deberían estar funcionando. Asegúrate de tener activado el encabezado Accept : application/jso.

Validación y manejo de excepciones

Si te diriges a un recurso inexistente, esto es lo que verás.

The error page displayed for the NotFoundHTTPException

La excepción NotFoundHTTPException muestra el error 404 por defecto en Laravel. Si deseas que el servidor devuelva una respuesta JSON en su lugar, tendrás que cambiar el comportamiento de manejo de excepciones predeterminado. Laravel tiene una clase Handler dedicada al manejo de excepciones ubicada en app/Exceptions/Handler.php. La clase tiene principalmente dos métodos: report() y render(). El método report es útil para informar y registrar eventos de excepción, mientras que el método de representación se utiliza para devolver una respuesta cuando se encuentra una excepción. Actualiza el método de renderizado para devolver una respuesta JSON:

app/Exceptions/Handler.php

Laravel también nos permite validar las solicitudes HTTP entrantes utilizando un conjunto de reglas de validación y devolver automáticamente una respuesta JSON si la validación falla. La lógica para la validación se colocará dentro del controlador. El objeto Illuminate\Http\Request proporciona un método de validación que podemos usar para definir las reglas de validación. Agreguemos algunas verificaciones de validación al método de la tienda.

app/HTTP/Controllers/ProductsController.php

Resumen

Ahora tenemos una API en funcionamiento para una aplicación de listado de productos. Sin embargo, la API carece de funciones básicas como autenticación y restricción de acceso a usuarios no autorizados. Laravel tiene un soporte fuera-de-caja para usar para autenticación, y construir una API es relativamente fácil. Te animo a implementar la API de autenticación como un ejercicio.

Para aquellos de ustedes que recién están comenzando con Laravel o buscan ampliar su conocimiento, sitio o aplicación con extensiones, tenemos una variedad de cosas que pueden estudiar en Envato Market.

Ahora que hemos terminado con el back-end, cambiaremos nuestro enfoque a los conceptos de front-end. Estén atentos para la segunda parte de la serie. Comparte tu opinión en los comentarios.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.