پارسی‌مپ

مستندات پارسی‌مپ

مستندات / فریم‌ورک ریکت / راهنما / نصب و راه‌اندازی

نصب و راه‌اندازی

جهت بکارگیری نقشه پارسی‌مپ نیاز به داشتن پکیج react-parsimap به همراه یک API Key یا Token است که باید در هنگام import کلاس Parsimap مجوز در دسترس، به آن افزوده شود. تعیین مجوز بهتر است در فایل index.js یا نقطه آغازین پروژه انجام شود تا هنگام استفاده از نقشه‌های متعدد نیاز به تعیین مجدد API Key برای هر فایل نباشد.

وابستگی‌ها

پکیج react-parsimap جهت بکارگیری نیاز به وابستگی‌های زیر دارد که باید در پروژه نصب شده باشند.هر پروژه react شامل وابستگی‌های زیر است و هنگام راه‌اندازی به طور خودکار آنها را نصب می‌کند.

  • react
  • react-dom

دریافت Package

برای بکارگیری پکیج و استفاده از کامپوننت‌ها لازم است که فایل react-parsimap.zip دریافت شود. محتوای فایل دانلود شده پس از استخراج و خارج شدن از حالت فشرده شامل دایرکتوری react-parsimap است که باید در دایرکتوری node_modules پروژه کپی شود که با این‌کار پکیج به پروژه افزوده خواهد شد. 

PROJECT_NAME
└── node_modules
    ├── ...
  + ├── react-parsimap
    └── ...

نمونه‌ای از ساختار دایرکتوری پروژه react به همراه جایگاه قرار گیری package.

افزودن API Key

نقشه برای بارگزاری نیاز به API Key معتبری دارد که برای تعیین آن از متد setKey کلاس Parsimap استفاده می شود و ساختار آن در ادامه شرح یافته است، مجوز بنابر نوع استفاده می‌تواند به دو روش اختصاص یابد.

setKey(key)

پارامترها:

  • string key

مقدار بازگشتی: فاقد مقدار

API Key مدنظر را برای استفاده از نقشه تنظیم می‌کند.

تعیین مجوز برای هر فایل

قبل از استفاده از کامپوننت‌های نقشه لازم است کلاسParsimap در ماژول یا فایلی که نقشه در آن نمایش می‌یابد import شده و توسط متد setKey مربوط به آن که به صورت static ارائه یافته، مقدار apiKey را تعیین نمود. 

// Importing `Parsimap` class from installed `react-parsimap` Package.
import { Parsimap } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');

API_KEY باید با مقدار معتبر جایگزین شود.

تعیین مجوز برای کل پروژه

اگر نیاز است که نقشه در پروژه به دفعات بکار گرفته شود، در این صورت نیاز نیست که در هر فایل توسط متد setKey مقدار API key را جهت استفاده از نقشه تعیین نمود. در این حالت برای تعیین یکباره API Key برای کل پروژه، تابع setKey در Entry Point یا ابتدائی ترین نقطه‌ای که اجرای پروژه از آنجا شروع می‌شود، قرار داده می‌شود. نقطه آغازین برای اغلب پروژه ها فایل index.js است که در داخل دایرکتوری src پروژه واقع است. 

PROJECT_NAME
└── src
    ├── App.js
    ├── App.css
  > └── index.js

نمونه‌ای از ساختار دایرکتوری پروژه react به همراه جایگاه فایل index.js به عنوان Entry Point

جهت تعیین مجوز در کل پروژه، کلاس Parsimap در فایل index.js یا فایل مربوط به نقطه آغازین پروژه باید import شده، سپس توسط متد setKey این کلاس که به صورت static ارائه یافته، API Key را تعیین نمود. 

// Importing react requirement.
import React from 'react';
import ReactDOM from 'react-dom';
// Importing project file.
import App from './App';
// Importing `Parsimap` class from installed `react-parsimap` Package.
import { Parsimap } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');
// Render Imported App into root div element.
ReactDOM.render(<App />, document.getElementById('root'));