آخرین مطالب
developer

ارتباط با Rest API شیرپوینت در محیط React Development

یک راهنمای سریع برای راه‌اندازی React جهت دسترسی به داده‌ها و API های شیرپوینتی. برای خواندن دیتاها و استفاده از API های شیرپوینتی در محیط Development (local) از طریق Rest API محدودیت‌هایی وجود دارد که امکان ارتباط با سایت شیرپوینتی را به شما نمی‌دهد و باید هر بار از پروژه Build  بگیرید و در شیرپوینت قرار دهید. با انجام تنظیمات زیر می‌توانید به صورت Live Preview تغییرات را ببینید و دیگر نیازی به بیلد گرفتن برای دیدن تغییرات نیست. به عبارت دیگر با استفاده از این راه می‌توانید علاوه بر پیش نمایش پروژه خود به صورت لایو بر روی لوکال هاست هم زمان به صفحه API های شیرپوینت هم دسترسی داشته باشید.


قطعا نیاز دارید تا NPM و Node Js را بر روی سیستم خود نصب کنید.

1 – ابتدا برنامه React خود را بسازید:

Create-react-app sharepoint-react-app && cd sharepoint-react-app

2 -پکیج sp-rest-proxy و concurrently را نصب کنید:

npm install sp-rest-proxy concurrently -–save-dev
npm install -–save socket.io-client

* از نسخه ۳.۰.۶ پکیج sp-rest-proxy نیاز به نصب socket.io-client خواهید داشت.

3 -اسکریپت زیر را به فایل Package.json اضافه کنید:

{
  "scripts": {
    ...
    "proxy": "node ./api-server.js",
    "startServers": "concurrently --kill-others \"npm run proxy\" \"npm run start\""
    ...
  }
}

4 – تنظیمات API Proxy را برای نمایش صفحه SharePoint Rest  داخل Package.json بگذارید:

{
  "proxy": "http://localhost:8081"
}

5 -داخل فایل پروژه خارج از پوشه src فایلی با نام api-server.js بسازید و کد زیر را داخل آن کپی کنید:

const RestProxy = require('sp-rest-proxy');

const settings = {  
  port: 8081
};	

const restProxy = new RestProxy(settings);  
restProxy.serve();

6 -سپس در ترمینال دستور npm run proxy را اجرا کرده و اطلاعات را به شکل زیر وارد کنید:

siteUrl: آدرس سایت مورد نظر

strategy: براساس نسخه شیرپوینت یکی از موارد انتخاب می‌شود.

username: نام کاربری همراه با نام دامنه وارد شود.

password: پسورد یوزر وارد می‌شود که در فایل کانفیگ به صورت هش شده ذخیره می‌شود.

پس از وارد کردن اطلاعات لازم و راه‌اندازی پروژه با دستور CTRL + C آن را متوقف کنید. خواهید دید پوشه config ساخته شده است.

توجه داشته باشید که در صورت عوض کردن پسورد یا آدرس یا به هر شکل که نیاز به تغییر اطلاعات وارد شده داشتید فایل Config.json را حذف کنید و مجدداً دستور

npm run proxy

را بزنید و اطلاعات جدید را وارد کنید.

7 – در قدم نهایی با اجرای دستور

npm run startServers

بر روی localhost:3000 پیش نمایش پروژه خود را خواهید دید و به صورت هم زمان بر روی localhost:8081 به صفحه SharePoint Rest دسترسی خواهید داشت.

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها