LoopBack4ReactAdminExample

Exemplo de exemplo de backoffice e gerador de API 2020

Less Code and Flexible Architecture for a Mobile Developer who want to develop Web Easily , for companies who want an easy architecture that save money and time No more need for Back End Developer at 2020, Only Need a Front End Developer If you have a Web Application If you want only an API (Web Services & BackOffice) no need for neither a Front End Developer or a BackEnd Developer you can just CLic on Watch & Star We will Share many UseCases that simplify Web Development after this Web Development will be a peace of bolo.

Reactar a amostra de administrador e loopback 4 CRUD

Começando

Esta é uma amostra com um react admin e loopback4 para implementar operações do CRUD em products e users solicitando APIs com o provedor Loopback4 que você pode instalar com npm install react-admin-loopback4-adapted .

Instalações

Instale o nó v12.18.3 com NVM

Siga as instruções para obter o nó na sua máquina local 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 .

Instale o NPM

Instale o gerenciador de pacotes do Node com o comando sudo apt install npm e verifique a versão NPM com npm -v .

Configurando o MongoDB

Instale o MongoDB no site oficial https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ e siga o guia para obter o lançamento final MongoDB 4.4 .

NOTA : Se ocorrer um erro quando você tentar abrir o console do sudo systemctl status mongod.service com o comando mongo , mongod.service sudo systemctl start mongod.service mongod.service sudo systemctl enable mongod.service mongod.service sudo systemctl enable mongod.service Então sudo systemctl start mongod.service .

Configurando bússola MongoDB

Instale o MongoDB Compass no site oficial https://www.mongodb.com/try/download/compass e siga as instruções para obtê -lo em sua máquina local. Esta ferramenta ajuda você a gerenciar facilmente seu banco de dados.

Instalar as dependências

Depois de clonar o projeto com git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git entre na pasta de ecommerce em ambas as pastas Frontreactadmin e BackendLoopbackV4 e instale as embalagens de nó com a npm install .

Lançando os aplicativos

Neste projeto, tentamos reduzir a complexidade para você obter o servidor front -end e o servidor de back -end na mesma máquina local para fazer isso, forçamos a porta de ligação do servidor Loopback4 a 3001 no LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts : arquivo:

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

Isso ocorre porque você não pode vincular dois processos ao mesmo [IP:PORT] ; no nosso caso, o IP de ligação é 127.0.0.1 É conhecido como localhost , essa configuração causará CORS blocks por seu navegador, para resolver esse problema que usamos o proxy de nó integrado: adicionando esta linha "proxy": "http://localhost:3001" LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json :

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

Inicie os servidores

Depois de configurar as alterações que mencionamos na seção anterior, começamos a transformar os servidores e descobrir como é fácil create e modify ou delete um product ou um user

Eu- inicio o servidor de back-end

Get no LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce e execute o comando npm start

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

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

Ii- Iniciar o servidor de front-end

Entre no LoopBack4ReactAdminExample/Frontreactadmin/ecommerce e execute o comando 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- Teste seu aplicativo

Copie este link http://localhost:3000 para o navegador para obter o aplicativo React Admin e comece a gerenciar os products e users .

O Application File App.js

No aplicativo de administrador do React, o src/app.js é exportado para o ponto de entrada src/index.js onde o nó começa a resolver e mapear as imports e exports , observe a parte superior do arquivo index.js para ver a importação da função App :

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

Dentro do app.js você encontrará tudo o que deseja saber sobre como o aplicativo resolve os itens das APIs, importando o módulo react-admin-loopback4-adapted e instanciar um objeto de
O lb4Provider que toma como @param o URL para o servidor de back -end http://localhost:3001 :

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

Este é o conteúdo do 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 ;

Observe nesta amostra que a autenticação não está integrada, vamos completá -la no próximo tutorial

Nota Para saber mais sobre o React Admin, siga este link: https://marmelab.com/react-admin/readme.html

CONTATO

Se você tiver alguma dúvida ou deseja ter vantagem de nossos serviços, entre em contato conosco

 Site : https : //planetconectus . com

E - mail : mohamedali . chaabani @planetconectus . com

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