LoopBack4ReactAdminExample

Exemple d'exemple de backoffice et générateur API 2020

Moins de code et une architecture flexible pour un développeur mobile qui souhaite développer facilement le Web, pour les entreprises qui veulent une architecture facile qui économise de l'argent et du temps, pas plus de besoin pour le développeur back-up au 2020, n'a besoin que d'un développeur frontal si vous n'avez pas une application Web si vous ne voulez qu'une API (Services Web et BackOffice) Aucun besoin pour ne pas partager de nombreux développeurs ou un développeur de backend. de gâteau.

React admin and Loopback 4 CRUD

Commencer

Il s'agit d'un échantillon avec un administrateur React et Loopback4 pour implémenter les opérations CRUD sur products et users en demandant des API avec le fournisseur Loopback4 que vous pouvez installer avec npm install react-admin-loopback4-adapted .

Installations

Installez le nœud v12.18.3 avec NVM

Suivez les instructions pour obtenir le nœud dans votre machine locale sudo apt install curl , curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash , source ~/.profile , nvm install v12.18.3 , nvm use v12.18.3 .

Installer NPM

Installez le gestionnaire de package de nœuds avec la commande sudo apt install npm et vérifiez la version NPM avec npm -v .

Configuration de MongoDB

Installez MongoDB à partir du site officiel https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ et suivez le guide pour obtenir la version finale MongoDB 4.4 .

Remarque : Si une erreur se produit lorsque vous essayez d'ouvrir la console MongoDB avec la commande mongo Vérifiez si le mongod.service est en état actif avec la commande sudo systemctl status mongod.service , vous pouvez activer le mongod.service avec la commande sudo systemctl start mongod.service sudo systemctl enable mongod.service si vous voulez activer le système de mongod.service . sudo systemctl enable mongod.service puis sudo systemctl start mongod.service .

Configuration de la boussole MongoDB

Installez MongoDB Compass sur le site officiel https://www.mongodb.com/try/download/compass et suivez les instructions pour l'obtenir sur votre machine locale. Cet outil vous aide à gérer facilement votre base de données.

Installer les dépendances

Après le clonage du projet avec git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git entrez dans le dossier de ecommerce dans les dossiers de Frontreactadmin et BackendLoopbackV4 et installez les packages de nœuds avec l' npm install .

Lancement des applications

Dans ce projet, nous avons essayé de réduire la complexité pour vous d'obtenir à la fois le serveur Frontend et le serveur backend dans la même machine locale pour ce faire, nous obligeons le port de liaison du serveur Loopback4 à 3001 dans le LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts fichier:

 const app = new EcommerceApplication ( {
    rest : {
      port : 3001
    }
  } ) ;

En effet, vous ne pouvez pas lier deux processus au même [IP:PORT] , dans notre cas, l'IP de liaison est 127.0.0.1 Il est connu sous le nom de localhost , cette configuration provoquera CORS blocks par votre navigateur, pour résoudre ce problème, nous utilisons le Node intégré Proxy en ajoutant cette ligne "proxy": "http://localhost:3001" dans le "proxy" LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json :

 {
 .
 .
 .
 . ,
  "proxy" : "http://localhost:3001" , // <~~~ here we add the proxy field in package . json
 
.
.
.
}

Démarrer les serveurs

Après avoir configuré les modifications que nous mentionnons dans la section précédente, nous commençons à tourner les serveurs et à découvrir à quel point il est facile de create et modify ou delete un product ou un user

I- Démarrez le serveur backend

Get In LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce et exécutez la commande npm start

> node - r source - map - support / register .

Server is running at http :/ / [ :: 1 ] : 3001
Try http : // [ :: 1 ] : 3001 / ping

II- Démarrez le serveur Frontend

Mettez-vous dans le LoopBack4ReactAdminExample/Frontreactadmin/ecommerce et exécutez la commande npm start

 Compiled successfully!

You can now view ecommerce in the browser .

  Local :            http : //localhost : 3000
  On Your Network :  http :// 172.18 . 25.22 :3000

Note that the development build is not optimized .
To create a production build , use npm run build .

`

III- Testez votre application

Copiez ce lien http://localhost:3000 à votre navigateur pour entrer dans l'application React Admin et commencer à gérer les products et users .

Le fichier d'application app.js

Dans l'application d'administration React, le src/app.js est exporté vers le point d'entrée src/index.js où le nœud commence à résoudre et à mapper les imports et exports , consultez le haut du fichier index.js pour voir l'importation de la fonction App :

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import * as serviceWorker from './serviceWorker' ;

À l'intérieur de l' app.js vous trouverez tout ce que vous voulez savoir sur la façon dont l'application résout les éléments des API en important le module react-admin-loopback4-adapted et instancie un objet à partir d'un objet à partir d'un objet à partir d'un objet à partir d'un objet
Le lb4Provider qui prend en tant qu'URL @param sur le serveur backend http://localhost:3001 :

 const dataProvider = lb4Provider ( 'http://localhost:3001' ) ;

Ceci est le contenu d'App.js

 import * as React from 'react' ;
import { Admin , Resource } from 'react-admin'
import PostIcon from '@material-ui/icons/Book'
import './App.css' ;

import Dashboard from './dashboard'
import { ProductList , ProductCreate , Productedit } from './productlist'
import { Userlist , Useredit , Usercreate } from './user'

import lb4Provider from 'react-admin-loopback4-adapted'

const dataProvider = lb4Provider ( 'http://localhost:3001' ) ;

const App = ( ) => (
  < Admin dataProvider = { dataProvider } dashboard = { Dashboard } >
    < Resource name = "products" list = { ProductList } create = { ProductCreate }
      edit = { Productedit } icon = { PostIcon } />
    <Resource name="users" list={Userlist} edit={Useredit}
      create={Usercreate} / >
  </ Admin >
)
export default App ;

Remarque Dans cet échantillon, l'authentification n'est pas intégrée, nous la terminerons dans le prochain tutoriel

Remarque Pour en savoir plus sur React Admin, veuillez suivre ce lien: https://marmelab.com/react-admin/readme.html

CONTACT

Si vous avez une question ou si vous souhaitez avoir l'avantage de nos services, veuillez nous contacter

 Site : https : //planetconectus . com

E - mail : mohamedali . chaabani @planetconectus . com

Phone : [phone]
Phone : + 33 970 440 431