LoopBack4ReactAdminExample

عينة مثال Backoffice ومولد API 2020

أقل من رمز وهندسة مرنة لمطور الهاتف المحمول الذي يرغب في تطوير الويب بسهولة ، بالنسبة للشركات التي تريد بنية سهلة توفر المال والوقت لم يعد هناك حاجة لمطور النهاية الخلفية في عام 2020 ، لا تحتاج إلا إلى مطور في النهاية الأمامية أو مطورًا على شبكة الإنترنت إذا كنت ترغب فقط في الحصول على واجهة برمجة تطبيق كعكة.

رد فعل المسؤول ورباك 4 عينة crud

ابدء

هذه عينة بها مسؤول React و Loopback4 لتنفيذ عمليات CRUD على products users من خلال طلب واجهات برمجة التطبيقات مع مزود Loopback4 الذي يمكنك تثبيته باستخدام npm install react-admin-loopback4-adapted .

التركيبات

تثبيت العقدة V12.18.3 مع NVM

اتبع الإرشادات للحصول على عقدة في جهازك المحلي 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 .

تثبيت NPM

قم بتثبيت Manager Node Package مع الأمر sudo apt install npm ، وتحقق من إصدار NPM باستخدام npm -v .

إعداد mongodb

قم بتثبيت mongodb من الموقع الرسمي https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ واتبع الدليل للحصول على الإصدار النهائي MongoDB 4.4 .

ملاحظة : إذا حدث خطأ عند محاولة فتح وحدة التحكم MongoDB مع الأمر ، تحقق من mongo إذا كان mongod.service في حالة نشطة مع command sudo systemctl status mongod.service ، إذا كنت تريد تنشيط mongod.service تلقائيًا على eBuntu sudo systemctl start mongod.service ، إذا كنت ترغب في تنشيط mongod.service the sudo the sudo on ubystu on lebtu on sudo systemctl enable mongod.service yiter. sudo systemctl enable mongod.service ثم sudo systemctl start mongod.service .

إعداد بوصلة mongodb

قم بتثبيت MongoDB Compass من الموقع الرسمي https://www.mongodb.com/try/download/compass واتبع التعليمات للحصول عليها على جهازك المحلي. تساعدك هذه الأداة على إدارة قاعدة البيانات الخاصة بك بسهولة.

تثبيت التبعيات

بعد استنساخ المشروع باستخدام git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git احصل على مجلد ecommerce في كل من مجلدات Frontreactadmin و BackendLoopbackV4 وتثبيت حزم العقدة مع npm install .

إطلاق التطبيقات

في هذا المشروع ، حاولنا تقليل التعقيد بالنسبة لك للحصول على كل من خادم الواجهة الأمامية وخادم الخلفية في نفس الجهاز المحلي للقيام بذلك ، نقوم بإجبار منفذ الربط لخادم Loopback4 إلى 3001 في ملف LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts .

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

هذا لأنك لا تستطيع ربط عمليتين لنفسهم [IP:PORT] ، في حالتنا ، IP الربط هو 127.0.0.1 يُعرف باسم localhost ، سيؤدي هذا الإعداد إلى CORS blocks من جانبك ، لحل هذه المشكلة ، نستخدم بروكية العقدة المدمجة عن طريق إضافة هذا الخط "proxy": "http://localhost:3001" LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json :

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

ابدأ الخوادم

بعد إعداد التغييرات التي نذكرها في القسم السابق user نبدأ في تحويل الخوادم واكتشاف مدى سهولة create product أو modify أو delete

أنا- ابدأ خادم الواجهة الخلفية

احصل على LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce وقم بتشغيل الأمر npm start

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

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

i- ابدأ خادم الواجهة الأمامية

احصل على LoopBack4ReactAdminExample/Frontreactadmin/ecommerce وقم بتشغيل الأمر 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- اختبر طلبك

انسخ هذا الرابط http://localhost:3000 إلى متصفحك للحصول على تطبيق admin React والبدء في إدارة products users .

ملف التطبيق app.js

في تطبيق REACT ASMANCE ، يتم تصدير src/app.js إلى نقطة الإدخال src/index.js حيث تبدأ العقدة في حل ورسم الخرائط imports exports ، انظر إلى أعلى ملف index.js لمعرفة استيراد وظيفة App :

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

داخل app.js ستجد كل ما تريد معرفته حول كيفية حل التطبيق عن العناصر من واجهات برمجة التطبيقات عن طريق استيراد الوحدة react-admin-loopback4-adapted
lb4Provider الذي يأخذ عنوان URL إلى خادم الواجهة الخلفية http://localhost:3001 :

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

هذا هو محتوى 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 ;

ملاحظة في هذه العينة ، لم يتم دمج المصادقة في البرنامج التعليمي التالي

ملاحظة لمعرفة المزيد حول React Admin ، يرجى اتباع هذا الرابط: https://marmelab.com/react-admin/readme.html

اتصال

إذا كان لديك أي سؤال أو تريد أن تكون ميزة خدماتنا ، فيرجى الاتصال بنا

 Site : https : //planetconectus . com

E - mail : mohamedali . chaabani @planetconectus . com

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