M@c -
2020-12-29 21:42:28

laravel primeros pasos

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.

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.

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.

 
Advertisement

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.

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.

1
composer global require "laravel/installer"

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:

1
laravel new PROJECT-NAME

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

1
composer create-project --prefer-dist laravel/laravel blog

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

1
php artisan serve

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.

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.

1
2
3
4
5
6
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sampledb
DB_USERNAME=root
DB_PASSWORD=

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.

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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
** Basic Routes for a RESTful service:
**
** Route::get($uri, $callback);
** Route::post($uri, $callback);
** Route::put($uri, $callback);
** Route::delete($uri, $callback);
**
**/
 
Route::get('products', function () {
    return response(['Product 1', 'Product 2', 'Product 3'],200);
});
 
Route::get('products/{product}', function ($productId) {
    return response()->json(['productId' => "{$productId}"], 200);
});
  
 
Route::post('products', function() {
    return  response()->json([
            'message' => 'Create success'
        ], 201);
});
 
Route::put('products/{product}', function() {
  return  response()->json([
            'message' => 'Update success'
        ], 200);
});
 
Route::delete('products/{product}',function() {
    return  response()->json(null, 204);
});

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

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.

1
$ php artisan make:model Product -m

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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateProductsTable extends Migration
{
   
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
        });
    }
 
   
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

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: idcreated_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.

01
02
03
04
05
06
07
08
09
10
11
12
13
/* Let's add columns for title, description, price, availability */
 
public function up()
 {
     Schema::create('products', function (Blueprint $table) {
         $table->increments('id');
         $table->timestamps();
         $table->string('title');
         $table->text('description');
         $table->integer('price');
         $table->boolean('availability');
     });
 }

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

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

1
php artisan migrate

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.

1
protected $table = '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.

1
2
3
/* Add the fillable property into the Product Model */
 
protected $fillable = ['title', 'description', 'price', 'availability'];

El código anterior incluye los atributos de títulodescripciónprecio 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.

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.

1
$ php artisan make:seeder ProductsTableSeeder

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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
use App\Product;
 
class ProductsTableSeeder extends Seeder
{
    public function run()
    {
 
        $faker = \Faker\Factory::create();
 
        // Create 50 product records
        for ($i = 0; $i < 50; $i++) {
            Product::create([
                'title' => $faker->title,
                'description' => $faker->paragraph,
                'price' => $faker->randomNumber(2),
                'availability' => $faker->boolean(50)
            ]);
        }
    }
}

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

1
$ php artisan db:seed --class=ProductsTableSeeder

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/**
**Basic Routes for a RESTful service:
**Route::get($uri, $callback);
**Route::post($uri, $callback);
**Route::put($uri, $callback);
**Route::delete($uri, $callback);
**
*/
Route::get('products', function () {
    return response(Product::all(),200);
});
 
Route::get('products/{product}', function ($productId) {
    return response(Product::find($productId), 200);
});
  
 
Route::post('products', function(Request $request) {
   $resp = Product::create($request->all());
    return $resp;
 
});
 
Route::put('products/{product}', function(Request $request, $productId) {
    $product = Product::findOrFail($productId);
    $product->update($request->all());
    return $product;
});
 
Route::delete('products/{product}',function($productId) {
    Product::find($productId)->delete();
 
    return 204;
 
});

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.

1
$ php artisan make:controller ProductsController

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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Product;
 
class ProductsController extends Controller
{
 
    public function index()
    {
        return Product::all();
    }
 
    public function show(Product $product)
    {
        return $product;
    }
 
    public function store(Request $request)
    {
        $product = Product::create($request->all());
 
        return response()->json($product, 201);
    }
 
    public function update(Request $request, Product $product)
    {
        $product->update($request->all());
 
        return response()->json($product, 200);
    }
 
    public function delete(Product $product)
    {
        $product->delete();
 
        return response()->json(null, 204);
    }
 
}
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
/**
**Basic Routes for a RESTful service:
**Route::get($uri, $callback);
**Route::post($uri, $callback);
**Route::put($uri, $callback);
**Route::delete($uri, $callback);
**
*/
 
 
Route::get('products', 'ProductsController@index');
 
Route::get('products/{product}', 'ProductsController@show');
 
Route::post('products','ProductsController@store');
 
Route::put('products/{product}','ProductsController@update');
 
Route::delete('products/{product}', 'ProductsController@delete');

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.


Commentarios (0)

para emitir comentarios debes de crearte un cuenta e ingresar