معرفی فریم ورک های موبایل و API-موسسه چشم انداز-آموزش کاربردی GIS و RS
مقدمه
در این بخش بعضی از مفاهیم پایه‌ای و پشت پرده وب موبایل مانند فریم ورک‌ها و APIهای موقعیت جغرافیایی را توضیح می‌دهیم.
مطالب تحت پوشش در این فصل عبارتند از:
1- ArcGIS JavaScript API شرکت Esri
2-Dojo و jQuery Mobile
3- Bootstrap و طراحی واکنشی و تعاملی
4- API موقعیت جغرافیایی
ArcGIS JavaScript API شرکت Esri
این API مجموعه ابزار قدرتمندی برای ساخت اپلیکیشن‌های موبایل GIS فراهم می‌کند. همانطور که بعداً توضیح می‌دهیم این APIها روی فریم ورک Dojo ساخته می‌شوند و برای ساخت اپلیکیشن‌های وب موبایل و اپلیکیشن‌های وب دسکتاپ استفاده می‌شوند. در این بخش فریم ورک Dojo و APIها و کتابخانه‌های جاوااسکریپتی را معرفی می‌کنیم. توضیحات بیشتر در مورد Arc Gis API را در لینک زیر دنبال کنید:
https://developers.arcgis.com/javascript/jshelp/
نقشه‌های مورد استفاده در لینک مذکور، نقشه‌های شرکت esri هستند. این نقشه‌ها به صورت توکار جاسازی شده‌اند و در ArcGIS Online و ArcGIS Server و دیگر سرورها وجود دارند. از لینک بالا می‌توانید JavaScript API را دانلود کنید.
Esri نسخه‌های متعددی از JavaScript API مانند 3.7 و 3.9 و به تازگی نسخه 4 را تولید کرده است که جهت انجام توابع بر روی داده‌های سه بعدی ارائه شده است. این APIها نصب شدنی نیستند و تنها کافی است جهت استفاده از API، پوشه‌ی زیپ شده‌ای که از سایت Esri دانلود کردید را از حالت فشرده خارج کنید و در مسیر C:\inetpub\wwwroot کپی کنید.
فریم ورک‌ها، کتابخانه‌ها و جعبه ابزارها همگی در جاوااسکریپت ساخته شده‌اند و ساختار‌ها و ابزارهایی هستند که ایجاد و توسعه برنامه‌های وب را سریع و آسان می‌کنند. ArcGIS API با استفاده از کتابخانه جاوااسکریپتی Dojo ساخته شده است. Dojo یکی از بهترین فریم ورک‌های متن باز است که با زبان برنامه نویسی جاوااسکریپت درست شده است. رابط‌های کاربری پویا و تعاملی با این فریم ورک ایجاد می‌شوند.
وقتی کد زیر را به برنامه خود اضافه کنید، به فایل‌های جاوااسکریپتی فریم ورک Dojo دسترسی پیدا خواهید کرد و در واقع ارجاع می‌دهید و می‌توانید فایل‌های جاوااسکریپتی فریم ورک Dojo را در برنامه خود استفاده کنید. این فایل‌ها از کتابخانه‌ها تشکیل شده‌اند که کتابخانه‌ها نیز مجموعه‌ای از توابع، متدها، ویژگی‌ها و کلاس‌ها هستند.
<script src=”//ajax.googleapis.com/ajax/libs/dojo/1.9.4/dojo/dojo.js” data-dojo-config=”async: true”></script>
کد بالا به فایل‌های جاوااسکریپتی فریم ورک dojo ارجاع کرده است. تگ اسکریپت بالا از پارامتر src استفاده کرده است که در این پارامتر، مسیر فایل جاوااسکریپت فریم ورک dojo را قرار دادیم. این فایل‌های جاوااسکریپتی و فریم ورک‌ها درون API هستند. API شامل یک پوشه است که چندین زیر پوشه دارد. پس از دانلود API آن را در مسیر C:\inetpub\wwwroot کپی کنید. Dojo اخیراً قالب Asynchronous Module Definition AMD) را برای کد خود اعمال کرده که برای توسعه وب ماژولار است و در اسناد Dojo به AMD ارجاع داده شده است. توسعه دهندگان با استفاده از ماژول‌های dojo، کد ویژه‌ای را فراخوانی می‌کنند و کد خود را به بلوک‌های مجزایی تقسیم بندی کرده که هر کدام وظیفه‌ی خاصی را اجرا می‌کنند. در واقع یک حجم بزرگی از کد را به چند زیرمجموعه منطقی تقسیم می‌کنند. این زیرمجموعه‌ها هیچ تداخل و ناسازگاری با هم ندارند. ماژول‌های جاوااسکریپت در قالب AMD نوشته می‌شوند. یک ماژول با یک ارجاع قابل دسترس است. ماژول‌ها می‌توانند به یک اپلیکیشن موجود یا جدید اضافه و استفاده شوند. اگر بخواهید عارضه‌ای را با اطلاعاتش نمایش دهید مثلاً نوعش را بیان کنید و یا بخواهید متدهایی را به عارضه اضافه کنید، باید همه کد خود را در یک فایل بگذارید. وقتی به فایل جاوااسکریپتی dojo.js ارجاع می‌دهید، به بارگذار AMD دسترسی پیدا می‌کنید که شامل دو تابع عمومی 1-تابع require برای فراخوانی و بارگذاری ماژول‌ها 2- تابع define برای ایجاد و تعریف ماژول می‌باشد.
بارگذار Dojo شامل دو API1-AMD API2- legacy Dojo API است. AMD API ماژول‌ها را ناهمگام (غیر همزمان) فراخوانی می‌کند و زمان بارگذاری صفحات برنامه را کاهش داده و برای پشتیبانی چندین پلتفرم است. اطلاعات بیشتر در مورد این API در لینک زیر وجود دارد:
https://dojotoolkit.org/referenceguide/1.8/loader/
بیائید جفت ماژول‌های اساسی Dojo را استفاده کنیم: dojo/domو dojo/dom-construct
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Dojo Hello</title>
</head>
<body>
<h1 id=”greeting”>Dojo</h1>
<!– load Dojo –>
<scriptsrc=”//ajax.googleapis.com/ajax/libs/dojo/1.9.4/dojo/dojo.js”datadojoconfig=”async:true”></script>
<script>
require([‘dojo/dom’, ‘dojo/dom-construct’], function (dom, domConstruct) {
var greetingNode = dom.byId(‘greeting’);
domConstruct.place(‘<i> Hello!</i>’, greetingNode);
});
</script>
</body>
</html>
در خط مشخص شده در کد بالا، دو ماژول بارگذاری و فراخوانی شده اند. توضیحات مربوط به بقیه خطوط کد در ادامه و در فصل‌های بعدی آمده است.
برای مرورگرهای جاوااسکریپتی، (Document Object Model (DOM مانند صفحه‌ی سفید و دست نخورده‌ای است که رابط کاربری را روی آن ترسیم می‌کنیم. وقتی DOM فراخوانی می‌شود، می‌توانیم رابط کاربری را دستکاری و مدیریت کنیم. Dojo کارکردن با DOM را آسان‌تر کرده است. ماژول dojo/dom، برای دستکاری و مدیریت DOM استفاده می‌شود. ماژول dojo/dom-construct، هسته‌ی ساخت و ایجادDom است. در مثال قبلی در خط 13ماژول dojo/dom عنصر صفحه را از طریق ID آن عنصر پیدا می‌کند و در خط 14ماژول dojo/dom-construct یک عنصر جدید را روی صفحه قرار می‌دهد. در لینک زیر اطلاعات بیشتری در مورد اسناد Dojo وجود دارد:
https://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/.
در کد قبلی، اولین پارامتر تابع require، ID ماژول‌های dojo/dom و dojo/dom-construc است. اینID همان نام ماژول موجود در API است. فایل‌های ماژول‌های Dojo در پوشه‌ای به نام Dojo قرار دارند. این پوشه در همان API که دانلود کردید و در مسیر C:\inetpub\wwwrootکپی کردید، وجود دارد.
دومین پارامتر تابع require، یک تابع است. توابعی که AMD را بارگذاری می‌کنند، همزمان با هم انجام نمی‌شوند. در جاوااسکریپت، عملیات ناهمزمان پس از اتمام اجرایشان باید یک پاسخ برگردانند. پارامتر دوم تابع require، تابعی است که غیرهمزمان با دیگر توابع انجام می‌شود و یک پاسخ برمی‌گرداند که توابع بازخوردی نام دارند.
بازخورد، یک تکه کد اجرایی است که باید مانند یک آرگومان مقداری را به تابع برگرداند. در کد قبلی در تابع بازخوردی ماژول‌هایی را می‌بینید که ارجاعی به گره DOM دارند.
عناصر کلیدی Dojo
ویجت‌ها و پلاگین‌ها، عناصر کلیدی هستند. تصویر زیر کتابخانه‌ها و جعبه ابزار‌های Dojo را نشان می‌دهد.
پلاگین‌ها، نوعی ماژول خاص برای بارگذاری ویژگی‌های جدید هستند. پلاگین‌ها در واقع درون ماژول‌ها قرار می‌گیرند.
تکه کد زیر پلاگین‌های مشخص شده را درخواست می‌کند.
define([“dojo/dom”, “dojo/domReady!”], function(dom){
//This function does not execute until the DOM is
//ready
dom.byId(“someElement”);
});
پلاگین‌های مهم و کاربردی عبارتند از : dojo/text, dojo/i18n, dojo/ hasو dojo/domReady
ویجت‌ها، اشیایی برای طرح بندی رابط کاربری هستند که توسط HTML و CSS پیاده سازی می‌شوند.
GUI-Graphic User Interface: رابط کاربری یک اپلیکیشن، متشکل از گرافیک‌ها، عناصر و انیمیشن است تا رابط را کاربر پسند کنند. منظور از رابط کاربری همان ظاهر برنامه است که شامل سبک، رنگ، مکان عناصر نمایشی و موارد قابل نمایش دیگر است. ویجت‌ها عناصر قدرتمند GUI هستند که نیازی به جاوا اسکریپت ندارند. Dijit یک فریم ورک رابط کاربری است که درون فریم ورک Dojo قرار می‌گیرد. در اینجا دو اصطلاح “ویجت Dijit” و ” فریم ورک رابط کاربری” می‌توانند به جای هم استفاده شوند.
Dijit به دو روش 1- اعلانی 2- برنامه نویسی اجرا می‌شود.
1. اعلانی
Dijit در رویکرد اعلانی با استفاده از پارامترهای موجود در تگ‌های HTML اجرا می‌شود. در خط مشخص شده‌ی کد زیر، Dijit به روش اعلانی پیاده سازی شده است که یک کلید ایجاد می‌کند.
<script>
require([“dojo/parser”,”dijit/form/Button”]);
</script>
<button id=”clickBtn” data-dojo-type=”dijit/form/Button”type=”button”>Click me first!
<script type=”dojo/on” data-dojo-event=”click” data-dojoargs=”evt”>
require([“dojo/dom”], function(dom){
dom.byId(“result1”).innerHTML += “Thanks! “;
});
</script>
</button>
<div id=”result1”></div>
در تگ بالا، پارامترهای ID، Type و data-dojo-type مقدار دهی شده‌اند. به ماژول dijit/form/button در تابع require دقت کنید.
2. برنامه نویسی
در روش برنامه نویسی، Dijit با جاوااسکریپت پیاده سازی می‌شود. قطعه کد زیر را ببینید:
<script>
require([“dijit/form/Button”, “dojo/dom”, “dojo/domReady!”],
function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
id: “clickBtn”,
label: “Click me second!”
}, “progButton”);
});
myButton.on(“click”, function(){dom.byId(“result2”).innerHTML +=
“Thanks!”;});
myButton.startup();
</script>
<button id=”progButton” type=”button”></button>
<div id=”result2″></div>
در خطوط مشخص شده از یک تابع که با جاوااسکریپت نوشته شده است، برای ایجاد یک دکمه استفاده شده است. و پارامترهای ID و Label مقدار دهی شده اند.
در لینک زیر یک نمونه کد کامل با استفاده از روش برنامه نویسی وجود دارد:
https://webmapsolutions.com/book/mobilearcgis/chapter2/programmaticsample.html
jQuery Mobile
jQuery جایگزینی برای Dojo است. اگر برای ساخت اپلیکیشن خود از jQuery استفاده می‌کنید، باز هم باید از Dojoبرای ارتباط با Arc Gis JavaScript API استفاده کنید. همانند Dojo باید یک ارجاع به کتابخانه‌یjQuery داشته باشید. قطعه کد زیر برای برای دسترسی و ارجاع به کتابخانه جاوااسکریپتی jQuery است.
<script type=”text/javascript” src=”https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js”></script>
قطعه کد زیر را در نظر بگیرید:
$(“#jqSlider”).slider(“value”, map.getLevel());
این قطعه کد با نحوه دستوری jQuery نوشته شده است که به عنصری با ID=jqSlider ارجاع می‌کند. سطح زوم فعلی نقشه در عنصر jqSlider قرار می‌گیرد. برنامه‌های وب GIS می‌توانند با jQuery نوشته شوند، اما باز هم استفاده از عناصر Dojo ضروری است.Arc Gis API بر پایه jQuery نیست. پس بهتر است از اصطلاح “پیاده سازی Arc Gis با jQuery ” استفاده کنیم. قطعه کد زیر سعی دارد که اصطلاح مذکور را نشان دهد.
<script>
require([“esri/map”, “dojo/on”, “dojo/domReady!”],
function (Map, on) {
var map;
map = new Map(“map”, {
basemap: “streets”,
center: [2.352, 48.87],
zoom: 12,
slider: false
});
//Map load event
map.on(“load”, function () {
// Hook up jQuery
$(document).ready(jQueryReady);
});
// jQuery Integration
function jQueryReady () {
// Create jQuery Slider
createSlider();
}
function createSlider () {
$(“#jqSlider”).slider({
min: 0,
max: map.getLayer(map.layerIds[0]).tileInfo.lods.length – 1,
value: map.getLevel(),
orientation: “vertical”,
range: “min”,
change: function (event, ui) {
map.setLevel(ui.value);
}
});
map.on(“zoomEnd”, function () {
$(“#jqSlider”).slider(“value”, map.getLevel());
});
}
});
</script>
<div id=”jqSlider” style=”position: absolute; right: 20px; top: 40px;
height: 180px; z-index: 2; font-size: 9px;”></div>
از لینک زیر می‌توانید نمونه کدهای jQuery را ببینید:
https://github.com/Esri/jquery-mobile-map-js.
Dojo و ArcGIS API for JavaScript
شرکت Esri برای APIهای نقشه ای، Dojo را انتخاب کرده است. در کدهای نمونه کتاب نیز از Dojo استفاده کردیم. اطلاعات بیشتر در مورد Dojo و کتابخانه GFX را در لینک زیر ببینید:
https://dojotoolkit.org/documentation/
شرکت Esri به دلایل زیر Dojo را انتخاب کرده است:
1- Dojo مجموعه وسیعی از ویژگی‌ها و ابزارها را فراهم کرده است.
2- در اپلیکیشن‌های بزرگ، از ماژول AMD برای مدیریت کد استفاده می‌کند.
3- گرافیک‌های وکتوری تولید می‌کند. dojox/gfx برای سادگی ترسیم گرافیک‌های وکتوری از Scalable Vector Graphics (SVG)، CanvasوVector Markup Language(VML) استفاده می‌کند.
4- Dojo و Dijit هر دو کاملاً در دسترس هستند.
توسعه دهندگان برای تعامل و محاوره با API JavaScript شرکت Esri فقط کافی است از Dojo استفاده کنند. هر چیزی با جاوااسکریپت یا فریم ورک‌های رابط کاربر قابل پیاده سازی است.
BootStrap و طراحی تعاملی
Bootstrap فریم‌ورک محبوبی برای ساخت رابط‌های وب است. این فریم ورک ترکیبی از جاوااسکریپت و CSS و فونت‌ها است وHTML5 و CSS3 را پشتیبانی می‌کند. این فریم ورک محدودیت‌های دستگاه و رفتار کاربر را به دقت زیر نظر می‌گیرد. کلید محبوبیت BootStrap تعاملی بودنش است. بدین معنی که برنامه‌های وب موبایل GIS روی انواع دستگاه‌های موبایل با اندازه‌های صفحه متفاوت، بدون هیچ مشکلی اجرا می‌شوند. تصویر زیر اجرای اپلیکیشن بر روی اندازه‌های متفاوت صفحه نمایش را نشان می‌دهد.
فریم ورک تصویر را به چند ستون تقسیم می‌کند. عرض یک ستون را می‌توان هم بصورت تعداد پیکسل و هم به صورت درصد تعیین کرد که این فریم ورک به صورت درصد تعیین می‌کند. هم چنین تغییر جهت دستگاه موبایل را مشخص و مدیریت می‌کند.
پیاده سازی اپلیکیشن با استفاده از jQuery Mobileبه جای رویکرد طراحی تعاملی از رویکرد افزایش تصاعدی استفاده می‌کند. در این رویکرد اپلیکیشن برای دستگاهی با اندازه صفحه خاصی ایجاد و اجرا می‌شود.
کار با Geolocation API
این API روی نقشه موقعیت جغرافیایی کاربر را با امنیت توکار تعیین می‌کند. Geolocation API بخشی از جاوااسکریپت است و ربطی به Arc Gis ندارد. امنیت توکار در این API بدین معنی است که کاربر باید مجوزی را تأئید کند تا موقعیت جغرافیایی فعلی کاربر در اپلیکیشن مشخص شود. مثلا یک Popup به کاربر پیام می‌دهد که سایت می‌خواهد موقعیت جاری شما را داشته باشد، کاربر با تأئید این پیام به اپلیکیشن مجوز شناسایی موقعیت جغرافیایی فعلی خود را می‌دهد. کاربر در اپلیکیشن‌های ساخته شده با Geolocation API، می‌تواند نقشه را پیمایش کند و موقعیتش را ببیند.
بیشتر مرورگرهای موبایل از Geolocation API پشتیبانی می‌کنند. مرورگرهایی که از Geolocation و توابع مربوطه اش پشتیبانی می‌کنند، در لینک زیر قرار دارند:
https:// caniuse.com/#search=geolocation
کد زیر کاربرد ساده‌ای از Geolocation را نشان می‌دهد:
<p id=”geolocate”>Click the button to get your coordinates:</p>
<button onclick=”getLocation()”>Find my Location</button>
<script>
var x = document.getElementById(“geolocate”);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = “Geolocation is not supported by this browser.”;
}
}
function showPosition(position) {
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>
کد بالا 4 عمل را انجام می‌دهد:
1- آیا مرورگر فعلی Geolocation API را پشتیبانی می‌کند؟
2- در صورت پشتیبانی مرورگر از Geolocation API، متد getCurrentPosition() اجرا می‌شود. و اگر پشتیبانی نمی شود، پیامی مبنی بر عدم پشتیبانی نمایش داده می‌شود.
3- اگر متد getCurrentPosition() با موفقیت انجام شود، مختصات‌ها را به تابع showPosition می‌فرستد. پارامتر ورودی این تابع، شی position است که مختصات عرض جغرافیایی و طول جغرافیایی در این پارامتر قرار می‌گیرد.
4- در نهایت تابع showPosition طول و عرض جغرافیایی را نشان می‌دهد.
برگرفته از کتاب تولید وب اپلیکیشن های موبایل با ArcGIS
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک