LoopBack4ReactAdminExample
1.0.0
Lebih sedikit kode dan arsitektur fleksibel untuk pengembang seluler yang ingin mengembangkan Web dengan mudah, untuk perusahaan yang menginginkan arsitektur mudah yang menghemat uang dan waktu tidak perlu lagi untuk pengembang akhir pada tahun 2020, hanya memerlukan pengembang ujung depan jika Anda memiliki aplikasi web jika Anda hanya menginginkan API (Layanan Web & Backoffice tidak perlu untuk pengembang ujung depan atau pengembang backing yang tidak dapat Anda kuasai. kue.
Ini adalah sampel dengan Admin React dan Loopback4 untuk mengimplementasikan operasi CRUD pada products dan users dengan meminta API dengan penyedia LoopBack4 yang dapat Anda instal dengan npm install react-admin-loopback4-adapted .
Ikuti instruksi untuk mendapatkan node di mesin lokal Anda 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 .
Instal Node Package Manager dengan perintah sudo apt install npm , dan periksa versi NPM dengan npm -v .
Instal MongoDB dari situs web resmi https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ dan ikuti panduan untuk mendapatkan rilis akhir MongoDB 4.4 .
Catatan : Jika terjadi kesalahan ketika Anda mencoba membuka konsol MongoDB dengan perintah mongo memeriksa apakah mongod.service dalam keadaan aktif dengan sudo systemctl status mongod.service mongod.service mongod.service sudo systemctl start mongod.service sudo systemctl enable mongod.service kemudian sudo systemctl start mongod.service .
Instal MongoDB Compass dari situs web resmi https://www.mongodb.com/try/download/compass dan ikuti instruksi untuk mendapatkannya di mesin lokal Anda. Alat ini membantu Anda mengelola dengan mudah basis data Anda.
Setelah mengkloning proyek dengan git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git dapatkan di dalam folder ecommerce di kedua Frontreactadmin dan BackendLoopbackV4 folder dan pasang paket node dengan npm install commande.
Dalam proyek ini kami mencoba mengurangi kompleksitas bagi Anda untuk mendapatkan server Frontend dan server backend di mesin lokal yang sama untuk melakukan ini, kami memaksa port pengikatan server Loopback4 ke 3001 di file LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts : File:
const app = new EcommerceApplication ( {
rest : {
port : 3001
}
} ) ; Ini karena Anda tidak dapat mengikat dua proses dengan [IP:PORT] yang sama, dalam kasus kami IP yang mengikat adalah 127.0.0.1 itu dikenal sebagai localhost , pengaturan ini akan menyebabkan CORS blocks oleh Anda navigator, untuk menyelesaikan masalah ini kami menggunakan proxy simpul yang terintegrasi dengan menambahkan line ini "proxy": "http://localhost:3001" LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json :
{
.
.
.
. ,
"proxy" : "http://localhost:3001" , // <~~~ here we add the proxy field in package . json
.
.
.
} Setelah menyiapkan perubahan yang kami sebutkan di bagian sebelumnya, kami mulai memutar server dan menemukan betapa mudahnya create dan modify atau delete product atau user
I- Mulai server backend
Dapatkan di LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce dan jalankan perintah npm start
> node - r source - map - support / register .
Server is running at http :/ / [ :: 1 ] : 3001
Try http : // [ :: 1 ] : 3001 / pingII- Mulai server frontend
Dapatkan di LoopBack4ReactAdminExample/Frontreactadmin/ecommerce dan jalankan perintah 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 .
`II- Uji Aplikasi Anda
Salin tautan ini http://localhost:3000 ke browser Anda untuk masuk ke aplikasi react admin dan mulai mengelola products dan users .
Dalam aplikasi react admin src/app.js diekspor ke titik masuk src/index.js di mana simpul mulai menyelesaikan dan memetakan imports dan exports , lihat bagian atas file index.js untuk melihat impor fungsi App :
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import * as serviceWorker from './serviceWorker' ; Di dalam app.js Anda akan menemukan semua yang ingin Anda ketahui tentang bagaimana aplikasi menyelesaikan item dari API dengan mengimpor modul react-admin-loopback4-adapted dan instantiate objek dari
lb4Provider yang mengambil @param URL ke server backend http://localhost:3001 :
const dataProvider = lb4Provider ( 'http://localhost:3001' ) ;Ini adalah konten 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 ;
Catatan dalam sampel ini otentikasi tidak terintegrasi kami akan menyelesaikannya di tutorial berikutnya
Catatan untuk mempelajari lebih lanjut tentang react admin silahkan ikuti tautan ini: https://marmelab.com/react-admin/readme.html
Site : https : //planetconectus . com
E - mail : mohamedali . chaabani @planetconectus . com
Phone : 00216 26 410 947
Phone : + 33 970 440 431
