Construire une application React avec un back-end RESTful de Laravel: partie 1, API Laravel 5.5

() translation by (you can also view the original English article)

Laravel et React sont deux technologies de développement Web populaires utilisées pour créer des applications Web modernes. Laravel est un framework PHP côté serveur, alors que React est une bibliothèque JavaScript côté client. Ce tutoriel est une introduction à Laravel et à React, en les combinant pour créer une application Web moderne.

Dans une application Web moderne, le serveur a un travail limité de gestion du back-end via certains points de terminaison API (Application Programming Interface). Le client envoie des demandes à ces ordinateurs d'extrémité et le serveur renvoie une réponse. Cependant, le serveur ne s'inquiète pas de la manière dont le client rend la vue, ce qui est parfaitement conforme au principe de séparation des préoccupations. Cette architecture permet aux développeurs de créer des applications robustes pour le Web et pour différents appareils.

Dans ce didacticiel, nous allons utiliser la dernière version de Laravel, version 5.5, pour créer une API dorsale RESTful. L'extrémité avant comprendra des composants écrits dans React. Nous allons construire une application inventive de listage de produits. La première partie du didacticiel se concentrera davantage sur les concepts de Laravel et le back-end. Commençons.

introduction

Laravel est un framework PHP développé pour le Web moderne. Sa syntaxe expressive privilégie la convention par rapport au paradigme de configuration. Laravel possède toutes les fonctionnalités dont vous avez besoin pour démarrer un projet immédiatement. Mais personnellement, j'aime bien Laravel, car il transforme le développement avec PHP en une expérience et un flux de travail totalement différents.

De son côté, React est une bibliothèque JavaScript populaire développée par Facebook pour la création d’applications d’une page. React vous aide à décomposer votre vue en composants, chaque composant décrivant une partie de l'interface utilisateur de l'application. L'approche par composant présente l'avantage supplémentaire de la réutilisabilité et de la modularité des composants.

Pourquoi Laravel et React?

Si vous développez pour le Web, vous voudrez peut-être utiliser une base de code unique pour le serveur et le client. Cependant, toutes les entreprises ne donnent pas au développeur la liberté d'utiliser la technologie de son choix, et ce pour de bonnes raisons. Utiliser une pile JavaScript pour un projet entier est la norme actuelle, mais rien ne vous empêche de choisir deux technologies différentes pour le côté serveur et le côté client.

Alors, comment Laravel et React vont-ils bien ensemble? Assez bien, en fait. Bien que Laravel ait documenté la prise en charge de Vue.js, un autre framework JavaScript, nous utiliserons React pour le front-end car il est plus populaire.

Conditions préalables

Avant de commencer, je suppose que vous avez une compréhension de base de l’architecture RESTful et du fonctionnement des points de terminaison des API. De plus, si vous avez déjà utilisé React ou Laravel, vous pourrez tirer le meilleur parti de ce didacticiel.

Cependant, si vous êtes nouveau dans les deux cadres, ne vous inquiétez pas. Le tutoriel est écrit du point de vue du débutant et vous devriez être capable de vous rattraper sans trop de peine. Vous pouvez trouver le code source du tutoriel sur GitHub.

Installation et configuration de votre projet Laravel

Laravel utilise Composer pour gérer toutes les dépendances. Avant de commencer à utiliser Laravel, téléchargez et installez Composer sur votre ordinateur. Vous devrez peut-être également configurer la variable d’environnement du chemin afin que Composer soit accessible de manière globale.

Exécutez la commande suivante pour télécharger le programme d’installation de laravel.

1	composer global require "laravel/installer"

Si vous avez correctement configuré la variable $PATH et ajouté ~/.composer/vendor/bin dans votre chemin, vous devriez pouvoir générer un nouveau projet Laravel comme suit:

1	laravel new PROJECT-NAME

Alternativement, vous pouvez utiliser Composer pour créer un nouveau projet sans le programme d’installation de laravel.

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

Si tout se passe bien, vous devriez pouvoir servir votre application sur un serveur de développement à l'adresse http://localhost:8000.

1	php artisan serve

Remarque: Artisan est un outil de ligne de commande sans lequel vous ne pouvez pas vivre lorsque vous travaillez avec Laravel. Artisan accepte une grande liste de commandes vous permettant de générer du code pour votre application. Exécuter php artisan list pour afficher toutes les commandes artisan disponibles.

Configuration de l'environnement

Votre application aura un fichier .env dans le répertoire racine. Toutes les informations de configuration spécifiques à l'environnement sont déclarées ici. Créez une base de données pour votre application si ce n'est déjà fait et ajoutez les détails de la base de données dans le fichier .env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sampledb
DB_USERNAME=root
DB_PASSWORD=

Compréhension des modèles, itinéraires et contrôleurs

Laravel est un framework qui suit l'architecture MVC (Model-View-Controller). De manière générale, MVC vous aide à séparer les requêtes de base de données (le modèle) de la logique relative au traitement des requêtes (le contrôleur) et au rendu de la présentation (la vue). L'image ci-dessous montre le fonctionnement d'une application Laravel typique.

Overview of Laravels architecture for building RESTful API endpoints — L'architecture de Laravel. Le contrôleur renvoie la réponse et la couche de vue n'est donc pas requise.

Puisque nous construisons une API en utilisant Laravel, nous limiterons notre discussion au modèle et au contrôleur. Nous passerons en revue nos options pour créer la vue dans la deuxième partie de ce didacticiel.

Le routeur

Lorsque le serveur reçoit une requête HTTP, Laravel tente de la faire correspondre à une route enregistrée dans l'un des fichiers de route. Tous les fichiers de route sont situés dans le répertoire des routes. routes/web.php héberge la route de l'interface Web, tandis que routes/api.php héberge la route de l'API. Les itinéraires enregistrés dans api.php seront précédés de /api (comme dans localhost: 3000 / api). Si vous devez modifier ce comportement, vous devez vous rendre dans la classe RouteServiceProvider dans /app/Providers/RouteServiceProvider.php et y apporter des modifications.

Puisque nous construisons une application de liste de produits, voici les points de terminaison de l'API et les actions HTTP associées à ces points de terminaison.

GET /products/: Récupérer tous les produits.
GET /product/{id}: Récupère le produit correspondant à l'id.
POST /products: créez un nouveau produit et insérez-le dans la base de données.
PUT /products/{id}: met à jour un produit existant correspondant à l'id.
DELETE /products/{id}: Supprime le produit avec l'id donné.

Mettons la terminologie au point. GET, POST, PUT et DELETE sont les verbes HTTP (plus couramment appelés méthodes HTTP) essentiellement nécessaires à la création d'un service RESTful. /products est l'URI associé à la ressource products. Les méthodes HTTP demandent au serveur d'effectuer l'action souhaitée sur une ressource donnée.

HTTP actions acting on the Product resource — GET, POST, PUT et DELETE sont les actions REST couramment utilisées.

Le routeur vous permet de déclarer des itinéraires pour une ressource avec les méthodes HTTP qui ciblent cette ressource. Voici un exemple de fichier de routes qui renvoie des données codées en dur.

routes/api.php

/**
** 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 vous souhaitez vérifier que les itinéraires fonctionnent comme prévu, vous devez utiliser un outil tel que POSTMAN ou curl.

Le modèle de produit

La ressource produits a besoin d’un modèle capable d’interagir avec la base de données. Le modèle est la couche qui repose sur la base de données, masquant tout le jargon spécifique à la base de données. Laravel utilise Eloquent ORM pour modéliser la base de données.

Eloquent ORM fourni avec Laravel fournit une implémentation simple et élégante d’ActiveRecord pour travailler avec votre base de données. Chaque table de base de données a un "Modèle" correspondant qui est utilisé pour interagir avec cette table. Les modèles vous permettent de rechercher des données dans vos tables, ainsi que d'insérer de nouveaux enregistrements dans la table.
— Laravel Docs

Qu'en est-il de la définition du schéma de base de données? La migration de Laravel s'en occupe. Artisan dispose d'une commande de migration qui vous permet de définir votre schéma et de le mettre à jour de manière incrémentielle ultérieurement. Créons un modèle et une migration pour l'entité Produit.

1	$ php artisan make:model Product -m

Remarque: Il existe de nombreuses commandes Artisan et il est facile de se perdre. Ainsi, chaque commande artisanale inclut un écran d'assistance qui affiche des informations supplémentaires telles que les options et les arguments disponibles. Pour accéder à la page d’aide, le nom de la commande doit être précédé de help. Exécutez la commande d'aide suivante pour voir ce que l'option -m représente: $ php artisan help make: model.

Voici le fichier de migration généré.

database/migrations/timestamp_create_products_table.php

<?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');
    }
}

La méthode up est appelée lors de la migration de nouvelles tables et colonnes dans la base de données, tandis que la méthode down est appelée lors de la restauration d'une migration. Nous avons créé un schéma pour une table avec trois lignes: id, created_at et updated_at. La méthode $table->timestamps() est responsable de la maintenance des colonnes created_at et updated_at. Ajoutons quelques lignes à la définition du schéma.

   /* 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');
        });
    }

Nous avons mis à jour le schéma avec quatre nouvelles colonnes. Le générateur de schéma de Laravel prend en charge une variété de types de colonnes tels que string, text, integer, boolean, etc.

Pour exécuter les migrations en attente, vous devez exécuter la commande suivante:

1	php artisan migrate

Par convention, Laravel suppose que le modèle Produit est associé à la table des produits. Toutefois, si vous devez associer le modèle à un nom de table personnalisé, vous pouvez utiliser la propriété $table pour déclarer le nom de la table. Le modèle sera ensuite associé à une table nommée custom_products.

1	protected $table = 'custom_products';

Mais nous allons garder les choses simples et aller avec la convention. Le modèle de produit généré est situé dans le répertoire app/. Bien que la classe de modèle puisse sembler vide, elle est équipée de diverses méthodes de création de requêtes que vous pouvez utiliser pour interroger la base de données. Par exemple, vous pouvez utiliser Product::all() pour récupérer tous les produits ou Product::find(1) pour récupérer un produit particulier portant l'identifiant 1

Les modèles Laravel disposent d'un mécanisme de protection intégré contre les vulnérabilités d'attribution en masse. La propriété fillable est utilisée pour déclarer les noms d'attribut pouvant être affectés en masse en toute sécurité.

app/Product.php

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

Le code ci-dessus liste blanche les attributs title, description, price et availability et les traite comme assignables en masse. Nous pouvons maintenant utiliser la méthode Product::create pour insérer de nouvelles lignes dans la table products.

Base de données

Laravel vous permet de renseigner votre base de données de développement et de production avec des données factices que vous pouvez ensuite utiliser pour tester vos points de terminaison d'API. Vous pouvez créer une classe de base en exécutant la commande Artisan suivante.

1	$ php artisan make:seeder ProductsTableSeeder

Les fichiers de semis générés seront placés dans le répertoire database/seed.

Pour générer les données factices, vous pouvez utiliser quelque chose comme str_random(10) qui renvoie une chaîne aléatoire. Mais si vous avez besoin de données suffisamment proches des données réelles, vous devriez utiliser quelque chose comme la bibliothèque faker. Faker est une bibliothèque tierce fournie avec le framework Laravel pour générer de fausses données.

database/seeds/ProductsTableSeeder.php

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)
            ]);
        }
    }
}

Exécutez la commande db:seed artisan pour renseigner la base de données.

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

Revenons à routes/api.php et complétons les éléments manquants.

routes/api.php

/**
**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;

});

Le controlle

Le fichier de routage héberge actuellement la logique de routage et de traitement des demandes. Nous pouvons déplacer la logique de traitement des demandes vers une classe Controller afin que notre code soit mieux organisé et plus lisible. Générons d'abord une classe de contrôleur.

1	$ php artisan make:controller ProductsController

La classe Controller comprend diverses méthodes (index, show, store, update et delete) correspondant à différentes actions HTTP. J'ai déplacé la logique de traitement des demandes de la route vers le contrôleur.

app/HTTP/Controllers/ProductsController.php

<?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);
	}

}

routes/api.php

/**
**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 vous ne l'avez pas remarqué, j'ai injecté une instance de Product dans les méthodes du contrôleur. Ceci est un exemple de la liaison implicite de Laravel. Laravel tente de faire correspondre le nom d'instance de modèle Product $product au nom de segment d'URI {product}. Si une correspondance est trouvée, une instance du modèle Product est injectée dans les actions du contrôleur. Si la base de données n'a pas de produit, une erreur 404 est renvoyée. Le résultat final est le même que précédemment mais avec moins de code.

Ouvrez POSTMAN et les points de terminaison du produit devraient fonctionner. Assurez-vous que l'en-tête Accept: application/ json est activé.

Validation et gestion des exceptions

Si vous vous dirigez vers une ressource inexistante, voici ce que vous verrez.

The error page displayed for the NotFoundHTTPException

La NotFoundHTTPExceptionest la façon dont Laravel affiche l’erreur 404. Si vous souhaitez que le serveur renvoie une réponse JSON à la place, vous devrez modifier le comportement de gestion des exceptions par défaut. Laravel a une classe Handler dédiée à la gestion des exceptions située à app/Exceptions/Handler.php. La classe a principalement deux méthodes: report()et render(). La méthode report est utile pour signaler et consigner les événements d'exception, tandis que la méthode de rendu est utilisée pour renvoyer une réponse en cas d'exception. Mettez à jour la méthode de rendu pour renvoyer une réponse JSON:

app/Exceptions/Handler.php

public function render($request, Exception $exception)
  {
    
      if ($exception instanceof \Illuminate\Database\Eloquent\ModelNotFoundException) 
      {
       return response()->json([
            'message' => 'Resource not found'
        ], 404);
      }
      
      return parent::render($request, $exception);
  }

Laravel nous permet également de valider les requêtes HTTP entrantes à l'aide d'un ensemble de règles de validation et de renvoyer automatiquement une réponse JSON si la validation échoue. La logique de validation sera placée à l'intérieur du contrôleur. L’objet Illuminate/Http\Request fournit une méthode de validation que nous pouvons utiliser pour définir les règles de validation. Ajoutons quelques contrôles de validation à la méthode store.

app/HTTP/Controllers/ProductsController.php

public function store(Request $request)
    {
		$this->validate($request, [
        'title' => 'required|unique:products|max:255',
        'description' => 'required',
        'price' => 'integer',
        'availability' => 'boolean',
    ]);
	    $product = Product::create($request->all());

	    return response()->json($product, 201);
	}

Résumé

Nous avons maintenant une API fonctionnelle pour une application de liste de produits. Cependant, l'API manque de fonctionnalités de base telles que l'authentification et la restriction de l'accès aux utilisateurs non autorisés. Laravel prend immédiatement en charge l'authentification et la construction d'une API est relativement facile. Je vous encourage à implémenter l'API d'authentification à titre d'exercice.

Pour ceux d'entre vous qui débutent avec Laravel ou qui souhaitent développer leurs connaissances, leur site ou leur application avec des extensions, nous pouvons étudier de nombreuses choses sur le marché Envato.

Maintenant que nous en avons terminé avec le back-end, nous allons nous concentrer sur les concepts front-end. Restez à l'écoute pour la deuxième partie de la série. Partagez votre opinion dans les commentaires.