ایجاد اپلیکیشن موبایل با ArcGIS Online-موسسه چشم انداز-آموزش کاربردی GIS و RS
در اینجا دو اپلیکیشن مجزا که احراز هویت و لیست نقشه در یک اپلیکیشن و نمایش نقشه‌ی مبنا در اپلیکیشن دیگر قرار دارد، ایجاد می‌کنیم.
کد مبنایی اپلیکیشن را مینویسیم:
<html>
<head>
<meta name=”viewport” content=”width=device-width, initialscale=1.0″>
<title>ArcGIS Online Map</title>
<!– stylesheets –>
<link rel=”stylesheet” type=”text/css” href=”//js.arcgis.
com/3.11compact/dijit/themes/claro/claro.css”>
<link rel=”stylesheet” href=”https://js.arcgis.com/3.11/esri/css/
esri.css”>
<!– script –>
<script src=”https://js.arcgis.com/3.11compact/”></script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([“dojo/dom-style”, “dojo/dom-attr”, “dojo/dom”, “dojo/
on”, “dojo/_base/array”, “dojo/domReady!”], function(domStyle,
domAttr, dom, on, arrayUtils) {
});
</script>
</head>
<body class=”claro”>
</body>
</html>
توجه داشته باشید که چند ماژول Dojo شامل “dojo/dom-style”،”dojo/dom-attr”، “dojo/dom”، “dojo/on” و “dojo/_base/array” را به تابع require اضافه کردیم. همچنین یک فایل CSS به نام claro.css اضافه کردیم که حاوی جدیدترین سبکDojo است. حال سه تگ div برای قسمت‌های Sign In،Log In و Map Listایجاد می‌کنیم.
<!– Sign In –>
<div id=”anonymousPanel” style=”display: none; padding: 5px; textalign: center;”>
<span id=”sign-in” class=”action”>Sign In</span> and view your
ArcGIS Online items.
</div>
<!– Log In –>
<div id=”personalizedPanel” style=”display: none; padding: 5px;
text-align: center;”>
Welcome <span id=”userId” style=”font-weight: bold;”></span>
–
<span id=”sign-out” class=”action”>Sign Out</span>
</div>
<!– Map List –>
<div id=”itemGallery” class=”esri-item-gallery” style=”width:
100%;”></div>
کد بالا برای sign in, log in و map listعناصر رابط کاربری را می‌سازد. در قدم بعدی باید ماژول‌های جاوا اسکریپتی ArcGIS مربوط به احراز هویت را اضافه کنیم. این ماژول‌ها عبارتند از: “esri/arcgis/Portal”, “esri/arcgis/OAuthInfo” و “esri/IdentityManager”.
ماژول OAuthInfo اطلاعاتی در مورد پیکربندی OAuth فراهم می‌کند. ماژول IdentityManager برای مدیریت مجوزها و اعتبارات کاربر و ماژول Portalبرای کارکردن با محتویات موجود در ArcGIS Online یا ArcGIS Portal استفاده می‌شود.
در قدم بعدی کد زیر را در تابع بازخوردی بنویسید:
var info = new ArcGISOAuthInfo({
//replace this appID
appId: “q244Lb8gDRgWQ8hM”,
popup: false
});
esriId.registerOAuthInfos([info]);
appId مهم است. برای ایجاد یک appId برای این اپلیکیشن مراحل زیر را دنبال کنید:
- وارد حساب ArcGIS Online شوید.
- گزینه‌ی My Contents را از بالای صفحه انتخاب کنید. همانطور که در تصویر زیر میبینید، URL برنامه شما فراهم شده است. گزینه‌ی web mapping را انتخاب کنید.
- در کادر title یک عنوان برای اپلیکیشن خود بنویسید و در تگ descriptive توضیحاتی راجع به اپلیکیشن بنویسید.
از این URL برای آزمایش و بررسی اپلیکیشن خود استفاده خواهید کرد.
- دکمه ADD ITEM را بزنید.
- در صفحه‌ای که باز می‌شود، Register را بزنید.
- در صفحه‌ای که باز می‌شود تنظیمات را مطابق تصویر زیر انجام دهید:
- در قسمت App Type، Browser را انتخاب کنید و در قسمت Redirect URL،URL ای که در تصویر 2-6 میبینید و در مرحله 2 به دست آمد را وارد کنید.ADD را کلیک و سپس دکمه REGISTER را انتخاب کنید.
در صفحه‌ای که ظاهر می‌شود، App ID را میبینید. هر اپلیکیشن یک شناسه منحصر بفرد دارد که App ID اپلیکیشن است.
از این App ID در کد برنامه استفاده خواهید کرد. کد زیر را به تابع بازخوردی اضافه کنید.
esriId.checkSignInStatus(info.portalUrl).then(
function() {
displayItems();
}
).otherwise(
function() {
// Anonymous view
domStyle.set(“anonymousPanel”, “display”, “block”);
domStyle.set(“personalizedPanel”, “display”, “none”);
}
);
//
function displayItems() {
}
این صفحه viewهای صفحه را کنترل می‌کند. در واقع هر view برای یکی از عناصر است. مثلاً عنصر login در یک view و یا عنصر لیست نقشه‌های مبنا در یک view دیگر قرار دارد. هر view به معنی یک صفحه جدید نیست. بلکه تمام این viewها در یک صفحه قرار دارند و هر بار فقط یکی از این viewها قابل مشاهده است و مانند یک صفحه ی مجزا نمایش داده میشوند. تابع displayItems بخشی از فرآیند احراز هویت را انجام می‌دهد.
کد CSS زیر را در یک تگ <style> بنویسید.
.action {
color: blue;
cursor: pointer;
text-decoration: underline;
}
کد بالا لینک Sign In را ایجاد می‌کند. با زدن دکمه‌ی Sign In، به view عنصر LogIn هدایت می‌شوید. درست بالای تابع displayItems کد زیر را اضافه کنید.
on(dom.byId(“sign-in”), “click”, function() {
console.log(“click”, arguments);
// user will be redirected to OAuth Log In page
esriId.getCredential(info.portalUrl);
});
کد کامل برنامه در فایل ArcGISOnlineMap1.html قرار دارد.
در قدم بعدی باید تابع displayItems را کامل کرده و یک تابع جدید به نام queryPortal ایجاد کنیم. ترکیب این دو تابع برای احراز هویت کاربر بر اساس اطلاعات نام کاربری و رمز عبور است. در کد زیر تکمیل شدن فرآیند signIn() را میبینید:
function displayItems() {
new arcgisPortal.Portal(“https://www.arcgis.com”).signIn().then(
function(portalUser) {
console.log(“Signed in to the portal: “, portalUser);
domAttr.set(“userId”, “innerHTML”, portalUser.fullName);
domStyle.set(“anonymousPanel”, “display”, “none”);
domStyle.set(“personalizedPanel”, “display”, “block”);
queryPortal(portalUser);
}
).otherwise(
function(error) {
console.log(“Error occurred while signing in: “, error);
}
);
}
//Query the portal
function queryPortal(portalUser) {
var portal = portalUser.portal;
var queryParams = {
q: “owner:” + portalUser.username,
sortField: “numViews”,
sortOrder: “desc”,
num: 20
};
portal.queryItems(queryParams).then(createGallery);
}
خط portal.queryItems یک جستجو روی Portal انجام می‌دهد و هنگامی که طبق پارامترهای مورد نظر جستجو انجام شد، نتایج جستجو درون یک شی PortalQueryResult قرار می‌گیرند. PortalQueryResult آرایه‌ای از اشیاء PortalItem است که منطبق با جستجوی ورودی است. با استفاده از شی portalUser از کلاس OAuthInfo کاربر را در ArcGIS Portal احراز هویت می‌کنیم. اگر احراز هویت با موفقیت انجام شد متد createGallery() را صدا می‌زنیم. متد createGallery() یک شی JSON از ArcGIS Portal گرفته و لیستی از نقشه‌های وبی در دسترس را نشان می‌دهد.
function createGallery(items) {
var htmlFragment = “”;
arrayUtils.forEach(items.results, function(item) {
htmlFragment += (
“<div class=\”esri-item-container\”>” +
(
item.thumbnailUrl ?
“<div class=\”esri-image\” style=\”background-image:url(” + item.
thumbnailUrl + “);\”></div>” :
“<div class=\”esri-image esri-null-image\”>Thumbnail not
available</div>”
) +
(
item.title ?
“<div class=\”esri-title\”>” + (item.title || “”) + “</div>” :
“<div class=\”esri-title esri-null-title\”>Title not available</
div>”
) +
“</div>”
);
});
dom.byId(“itemGallery”).innerHTML = htmlFragment;
}
اپلیکیشن به صورت زیر خواهد بود:
دقت کنید که در هر دو اپلیکیشن از URL یکسان زیر استفاده کردیم.
https://webmapsolutions.com/book/mobilearcgis/chapter6/ArcGISOnlineMap.html
باید از URL یکسانی که با appID تنظیم شده است، استفاده کرد.
کد برنامه در فایل ArcGISOnlineMap2.html قرار دارد.
اپلیکیشن با کد بالا ظاهر مناسبی ندارد. بهتر است کد CSS زیر را در تگ<style> اضافه کنید.
.esri-item-gallery .esri-item-container {
float: left;
text-align: center;
padding: 10px;
width: 204px;
display: inline-block;
}
.esri-item-gallery .esri-image {
width: 200px;
height: 133px;
border: 2px solid gray;
border-radius: 5px;
}
.esri-item-gallery .esri-null-image {
line-height: 133px;
text-align: center;
color: #999999;
}
.esri-item-gallery .esri-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.esri-item-gallery .esri-null-title {
color: #999999;
}
یک لینک Sign Out نیز در بالای صفحه داریم. بعد از تابع on(dom.byId(“sign-in”) کد زیر را اضافه کنید:
on(dom.byId(“sign-out”), “click”, function() {
esriId.destroyCredentials();
window.location.reload();
});
زمانی که کاربر لینک Sign Out را زد، همه اطلاعات احراز هویت و تمام مجوزها و اعتبارات پاک میشوند و صفحه مجدداً بارگذاری می‌شود.
view لیست نقشه‌ها پس از اضافه کردن خطوط کد به تگ <style> و دیگر خطوط کد، به‌صورت زیر ظاهر می‌شود:
ظاهر برنامه بهتر شد.
در فایل ArcGISOnlineMap3.html کد اپلیکیشن بالا قرار دارد.
خوب، حالا انتخاب نقشه از لیست نقشه‌ها و نمایش نقشه وبی انتخابی در یک Viewer جداگانه باقی مانده است. باید کد موجود را کمی ویرایش کنیم و یک صفحه وب جدید ایجاد کنیم که در واقع اپلیکیشن دوم است. نام این صفحه وب جدید WebMap.html است و برای نمایش نقشه‌ی وب انتخابی کاربر است. می‌خواهیم با کلیک نام نقشه که در زیر تصویر بندانگشتی نقشه قرار دارد، با استفاده از تگ <a> به فایل WebMap.html لینک داده شود و ID نقشه‌ی انتخابی به عنوان پارامتر به این تگ فرستاده شود. پس قطعه کد زیر را به جای کد موجود در خط 144 جایگزین کنید.
“<a href=\”WebMap.html?id=” + item.id + “\” target=\”_blank\”class=\”esri-title\”>” + (item.title || “”) + “</a>” :
تغییراتی که در کد ایجاد کردیم در فایل ArcGISOnlineMap4.html قرار دارد.
حال باید فایل WebMap.html را ایجاد کنیم.
<html>
<head>
<meta name=”viewport” content=”width=device-width, initialscale=1.0″>
<title>Simple WebMap</title>
<!– stylesheets –>
<link rel=”stylesheet” href=”https://js.arcgis.com/3.11/esri/css/
esri.css”>
<!– script –>
<script src=”https://js.arcgis.com/3.11compact/”></script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([“esri/map”, “dojo/ready”, “esri/arcgis/utils”, “dojo/
domReady!”], function(Map, ready, arcgisUtils) {
ready(function(){
//Get the url object passed to the page
var urlObject = esri.urlToObject(document.location.href);
//If the url object has an webmapid. Create a map using this
id
if(urlObject.query.id)
{
arcgisUtils.createMap(urlObject.query.id,”map”).
then(function(response){
var map = response.map;
});
}
});
});
</script>
</head>
<body>
<div id=”map”></div>
</body>
</html>
کد کوچک بالا با استفاده از متدهای سودمند esri.arcgis.utils یک نقشه وب را در اپلیکیشن نشان می‌دهد. متد esri.arcgis.utils.createMap یک نقشه را با استفاده از اطلاعات نقشه وب موجود در ArcGIS.com ایجاد می‌کند. این اطلاعات می‌توانند ID نقشه وب یا مقدار نمایش نقشه وب باشند.
کد فایل WebMap.html را ببینید.
با استفاده از فایل ArcGISOnlineMap.html می‌توانید اپلیکیشن کامل را با حساب ArcGIS Online خود بارگذاری کنید.
برگرفته از کتاب تولید وب اپلیکیشن های موبایل با ArcGIS
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک