ایجاد اپلیکیشن‌های موبایل-موسسه چشم انداز-آموزش کاربردی GIS و RS
ArcGIS Server API for JavaScript با dojox/mobile ادغام شده است تا برای پلتفرم‌های موبایل نیز قابل استفاده باشد. این API از سیستم عامل‌های اندروید، iOS و BlackBerry پشتیبانی می‌کند. به خاطر داشته باشید که اپلیکیشن‌های JavaScript API در تمام مرورگرها ارائه می‌شوند و دستگاه‌های موبایل نیز مرورگر دارند. Geolocation API قسمتی از HTML5 است و برای به دست آوردن موقعیت دستگاه موبایل استفاده می‌شود که آن را با اپلیکیشن ArcGIS Server ادغام می‌کنیم. بیشتر مرورگرهای موبایل از Geolocation API پشتیبانی می‌کنند.
در این فصل مطالب زیر را پوشش می‌دهیم:
1- ArcGIS API for JavaScript و compact build
2- تنظیم مقیاس viewport
3- کار با compact build
4- ادغام Geolocation API با اپلیکیشن
5- کار با Geolocation API
ArcGIS API for JavaScript و compact build
ArcGIS API for JavaScript یک compact build دارد که با رد پای معین API استفاده می‌شود و منجر به دانلودهای سریعتر در دستگاه‌های موبایل می‌شود. این ردپا با حدود معین و کوچک، انتخاب خوبی برای اپلیکیشن‌های موبایل است.
دو تفاوت عمده در API Standard و API compact build وجود دارد.
1- API compact build فقط اشیاء مورد نیاز اپلیکیشن را بارگذاری می‌کند. به عنوان مثال اگر ویجت تقویم را استفاده نمی‌کنید، این ویجت به اپلیکیشن بارگذاری نمی شود.
2- API compact build فقط 32 ماژول از 80 ماژول را بارگذاری می‌کند. در حالی‌که API Standard،80 ماژول را بارگذاری می‌کند. اگر از API compact build استفاده می‌کنید و به ماژولی نیاز دارید که این API آن را بارگذاری نکرده است، می‌توانید با تابع require ماژول مورد نیازتان را به برنامه اضافه کنید.
با اضافه کردن کلمه compact به آخر ارجاع به API می‌توانید از compact build استفاده کنید. استفاده از API در اپلیکیشن‌های موبایل هیچ تفاوتی با تکنیک‌های ایجاد اپلیکیشن‌های وب ندارد. کافی است تکنیک‌های بیشتری برای ایجاد رابط کاربری اپلیکیشن‌های موبایل یاد بگیرید. تعدادی فریم ورک جاوااسکریپتی خاص موبایل مانند dojox و jQuery برای ایجاد رابط کاربری اپلیکیشن موبایل وجود دارد. فریم ورک‌های موبایل محتویات برنامه را با سبک خاصی نشان می‌دهند تا برنامه‌ی شما شبیه یک اپلیکیشن موبایل ظاهر شود. مرورگر safari شبیه یک اپلیکیشن iPhone و مرورگرهای اندروید شبیه یک اپلیکیشن اندروید هستند.
در کد زیر ارجاعی به compact build آمده است.
<script src=”https://js.arcgis.com/3.7compact/”></script>
به کلمه‌ی compact که در آخر ارجاع به API آمده است، دقت کنید.
تنظیمات مقیاس ViewPort
در اصطلاح تگ <meta name=”viewport”>را همان viewport می‌گویند. برای نمایش اولیه‌ی اپلیکیشن موبایل باید ویژگی‌های تگ <meta> را تنظیم کنید. تگ <meta> درون تگ <head> قرار دارد. برای پارامتر initial scale بهتر است مقدار 1.0 را قرار دهید تا اپلیکیشن تمام صفحه موبایل شما را پر کند و به صورت تمام صفحه دیده شود. مقدار پارامتر initial scale بین 0 تا 1 تنظیم می‌شود.
اگر عرض را تنظیم نکنید مرورگر از عرض صفحه موبایل هنگامی که موبایل به صورت عمودی است، استفاده می‌کند؛ و اگر ارتفاع را مشخص نکنید مرورگر از ارتفاع صفحه موبایل هنگامی که موبایل به صورت افقی است، استفاده می‌کند.
<meta name=”viewport” content=”width=device-width, initialscale=1″ maximum-scale=1.0 user-scalable=0>
کار با compact build
در این تمرین پایه‌ای ترین اپلیکیشن موبایل GIS را با استفاده از API compact build ایجاد می‌کنیم. اپلیکیشن فقط شامل یک نقشه به همراه گزینه‌های پیمایش و زوم است. هدف، نمایش ساختار اساسی ایجاد اپلیکیشن موبایل GIS با JavaScript API است.
1- باید روی سیستم تان یک وب سرور داشته باشید. فرض می‌کنیم که روی سیستم تان وب سرور متن باز Apache را نصب کرده اید.
2- پس از نصب وب سرور، https://localhost را در نوار آدرس مرورگر بنویسید تا صفحه‌ی وب سرور را ببینید. این URL آدرس وب سرور نصب شده بر روی سیستمتان را نشان می‌دهد و به پوشه‌ی htdocs در مسیر C:\Program Files\Apache Software Foundation\Apache2.2 اشاره می‌کند.
3- در پوشه‌ی موجود در DVD ضمیمه ی کتاب یک فایل به نام mobile_map.html وجود دارد. مقداری کد که در این بخش استفاده خواهیم کرد، از قبل در این فایل نوشته شده است. از این فایل به عنوان نقطه شروع استفاده می‌کنیم. این فایل را در مسیر C:\Program Files\ Apache Software Foundation\Apache2.2\htdocs کپی کنید.
4- فایل mobile_map.html را در ویرایشگر متنی notepad++ باز کنید.
5- در کد زیر، خطوط کد پررنگ را به برنامه اضافه کنید.
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset-utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=7,IE=9,
IE=10″ />
<title>Simple Map</title>
<link rel=”stylesheet”
href=”https://js.arcgis.com/3.7/js/esri/css/esri.css”>
<link rel=”stylesheet”
href=”https://code.jquery.com/mobile/1.1.0-
rc.1/jquery.mobile-1.1.0-rc.1.min.css” />
<script src=”https://code.jquery.com/jquery-
1.7.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.1.0-
rc.1/jquery.mobile-1.1.0-rc.1.min.js”></script>
<script src=”https://js.arcgis.com/3.7compact/”></script>
6- از تگ <meta> برای تنظیم بعضی ویژگی‌های نمایش اولیه اپلیکیشن استفاده خواهیم کرد. خط کد زیر را درون تگ <head> بنویسید.
<meta name=”viewport” content=”width=device-width, initialscale=1″>
7- در تگ <script> خطوط پررنگ زیر را اضافه کنید تا تابع require ماژول‌های مورد نیاز برنامه را اضافه کند.
<script>
require([
“esri/map”,
“dojo/domReady!”
], function(Map) {
});
</script>
8- مشابه اپلیکیشن‌های وب که قبلاً ایجاد کردید، در اینجا هم از تگ <div> برای نگه داشتن نقشه استفاده می‌کنیم و این تگ وظیفه نگه داشتن نقشه را درون خود دارد. در اپلیکیشن موبایل، نقشه کل صفحه موبایل را پر خواهد کرد. پس باید در تگ <div> مشخصه‌ی عرض و ارتفاع را به مقدار 100% تنظیم کنید. پس خطوط پررنگ را به برنامه اضافه کنید.
<div data-role=”page”>
<div data-role=”header”>
<h1>Simple Map</h1>
</div><!– /header –>
<div data-role=”content”>
<div id=”mapDiv” style=”width:100%;
height:100%;”></div>
</div><!– /content –>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div><!– /footer –>
</div><!– /page –>
9- دستگاه موبایل محتویات برنامه را در حالت استاندارد یا در حالتی که دستگاه را بچرخانید و در حالت افقی قرار بگیرید، نشان می‌دهد. برنامه باید با رویدادهای چرخش دستگاه یا حالت افقی و عمودی صفحه سرو کار داشته باشد پس رویداد onorientationchange() را به تگ <body> اضافه کنید. رویداد onorientationchange() به تابع جاوااسکریپتی orientationChanged() ارجاع می‌کند. پس بیائید این رویداد را اضافه کنیم.
<body onorientationchange=”orientationChanged();”>
10- حال یک شی نقشه ایجاد کنید و آن را با یک نقشه مبنا تنظیم کنید. مرکز و سطح زوم نقشه را نیز تنظیم کنید.
<script type=”text/javascript”>
require([
“esri/map”,
“dojo/domReady!”
], function(Map) {
map = new Map(“mapDiv”, {
basemap: “streets”,
center:[-115.570, 51.178], //long, lat
zoom: 12
});
});
</script>
11- تابع جاوااسکریپتی orientationChanged() را در هر جایی از تگ <script> اضافه کنید.
<script type=”text/javascript”>
require([
“esri/map”,
“dojo/domReady!”
], function(Map) {
map = new Map(“mapDiv”, {
basemap: “streets”,
center:[-115.570, 51.178], //long, lat
zoom: 12
});
function orientationChanged() {
if(map) {
map.reposition();
map.resize();
}
}
});
</script>
12- فایل را ذخیره کنید.
13- مرورگر را باز کنید و یک شبیه ساز را بارگذاری کنید. شبیه ساز iphone4simulator.Com را توصیه می‌کنم. البته شبیه سازهای بسیاری برای استفاده وجود دارند. این سایت‌های شبیه ساز، یک وب سایت یا یک اپلیکیشن موبایل GIS را همانطور که در واقعیت ظاهر می‌شوند و رفتار می‌کنند را نشان می‌دهند.
نکته: اگر می‌خواهید این فایل‌های تمرینی را در دستگاه موبایل مشاهده و بررسی کنید، یک وب سرور بر روی دستگاه موبایل نصب کنید و این فایل‌ها را درون وب سرور کپی کنید.
14- در سیستم ویندوزی خود، اگر از وب سرور آپاچی استفاده می‌کنید، فایل را در مسیر وب سرور کپی کنید. در مسیر C:\Program Files\Apache Software Foundation\Apache2.2\htdocs فایل‌های HTML خود را کپی کنید. سپس برای دسترسی به فایل در مرورگر آدرس https://localhost/mobile_map.html. Type را بنویسید.
اگر می‌خواهید چگونگی نمایش فایل را در مرورگر موبایل خود بررسی کنید، آدرس https://localhost/mobile_map.html را در نوار آدرس شبیه ساز بنویسید. پس آدرس فایل را در نوار آدرس شبیه ساز تایپ کردیم و اجرای برنامه را در تصویر زیر می‌بینید:
15- API Javascript نوار زوم را به طور خودکار به نقشه اضافه می‌کند و نیازی به کدنویسی ندارد. ArcGIS Server API for JavaScript اشاره‌ها و ضربه‌های انگشت کاربر را برای بزرگ نمائی و کوچک نمائی پشتیبانی می‌کند؛ اما به خاطر بسپارید که عمل زوم در شبیه ساز با استفاده از اشاره‌ها و ضربه‌های انگشت اجرا نخواهد شد. بلکه این عمل در دستگاه موبایل انجام خواهد شد. ولی با دکمه‌های بزرگ نمائی و کوچک نمائی که در سمت چپ و بالای نقشه تعبیه شده اند، می‌توانید عملیات زوم را انجام دهید.
16- کد اپلیکیشن در فایل mobile_map_solution.html موجود در پوشه‌ی موجود در DVD ضمیمه ی کتاب قرار دارد.
ادغام Geolocation API با اپلیکیشن موبایل
Geolocation API برای به دست آوردن موقعیت دستگاه موبایل استفاده می‌شود. این API یک امنیت توکار دارد که قبل از موقعیت یابی اپلیکیشن، باید مجوزی از کاربر گرفته شود تا این API بتواند موقعیت کاربر را شناسایی کند. بیشتر مرورگرها از Geolocation API و مجوزهایش پشتیبانی می‌کنند. راه‌های زیادی مانند GPS موبایل و IP Address برای تعیین موقعیت یک دستگاه موبایل وجود دارند. متد Geolocation.getCurrentPosition() موقعیت فعلی دستگاه موبایل را به صورت یک نقطه بر روی نقشه نشان می‌دهد. متد بازخوردی Geolocation.watchPosition() پیمایش‌های کاربر و تغییر موقعیت کاربر را شناسایی می‌کند. پس اگر نیاز به شناسایی تغییر مکان و مسیرهایی که دستگاه موبایل پیمایش کرده است دارید به جای استفاده از متد getCurrentPosition() از متد watchPosition() استفاده کنید.
قطعه کد زیر از Geolocation API استفاده می‌کند. برای استفاده از Geolocation API باید پشتیبانی مرورگر از این API را بررسی کنیم. برای این بررسی از ویژگی navigator.geolocation استفاده می‌کنیم که مقدار true یا false را می‌گیرد.
مرورگرهایی که Geolocation API را پشتیبانی می‌کنند در لینک زیر ببینید:
https://caniuse.com/
اگر مرورگر از Geolocation API پشتیبانی می‌کند و کاربر مجوز شناسایی موقعیتش را به اپلیکیشن بدهد، آنگاه متد geolocation.getCurrentPosition() را صدا می‌زنیم. اولین پارامتری که به این متد فرستاده می‌شود، یک تابع بازخوردی است. اگر دستگاه موبایل با موفقیت موقعیت‌یابی شد، این تابع اجرا خواهد شد و یک شی position به این تابع فرستاده می‌شود. تابع بازخوردی zoomToLocation() شی position حاوی مختصات موقعیت فعلی را به عنوان پارامتر ورودی می‌گیرد و در موقعیت مورد نظر یک نقطه ایجاد می‌کند. اگر تابع بازخوردی با شکست مواجه شود پارامتر locationError را ایجاد می‌کند.
قطعه کد زیر را ببینید:
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(zoomToLocation,
locationError);
}
function zoomToLocation(location) {
var symbol = new SimpleMarkerSymbol();
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setColor(new Color([153,0,51,0.75]));
var pt = esri.geometry.geographicToWebMercator(new
Point(location.coords.longitude, location.coords.latitude));
var graphic = new Graphic(pt, symbol);
map.graphics.add(graphic);
map.centerAndZoom(pt, 16);
}
function locationError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert(“Location not provided”);
break;
case error.POSITION_UNAVAILABLE:
alert(“Current location not available”);
break;
case error.TIMEOUT:
alert(“Timeout”);
break;
default:
alert(“unknown error”);
break;
}
}
کار با Geolocation API
در این تمرین Geolocation API را با استفاده از ArcGIS Server API for JavaScript در اپلیکیشن ضمیمه می‌کنیم.
1- Javascript sandbox را از لینک زیر باز کنید.
https://developers.ArcGIS.com/en/javascript/sandbox/sandbox.html
2- محتویات تگ <script> را پاک کرده و خطوط کد زیر را درون تگ بگذارید:
<script>
dojo.require(“esri.map”);
function init(){
var map = new esri.Map(“mapDiv”, {
center: [-56.049, 38.485],
zoom: 3,
basemap: “streets”
});
}
dojo.ready(init);
</script>
3- ارجاع به اشیاء و ماژول‌ها را مطابق زیر در یک تگ <script> قرار دهید.
<script>
require([
“dojo/dom”,
“esri/map”,
“esri/geometry/Point”,
“esri/symbols/SimpleMarkerSymbol”,
“esri/graphic”, “esri/geometry/webMercatorUtils”,
“dojo/_base/Color”,
“dojo/domReady!”
], function(dom, Map, Point, SimpleMarkerSymbol, Graphic,
webMercatorUtils, Color) {
});
</script>
4- یک شی جدید map اضافه کنید که درون این شی San Diego و CA قرار خواهند گرفت. یک نقشه‌ی مبنای streets نیز ایجاد کنید. اگر مرورگر مورد استفاده‌ی شما از Geolocation API پشتیبانی نمی‌کند یا برای تعیین موقعیت، کاربر مجوزی به اپلیکیشن ندهد، این نقشه‌ی مبنا مانند یک نقشه‌ی پیش فرض به کار می‌رود و در اپلیکیشن نمایش داده می‌شود. پس کد زیر را برای انجام این اهداف بنویسید:
<script>
require([
“dojo/dom”,
“esri/map”,
“esri/geometry/Point”,
“esri/symbols/SimpleMarkerSymbol”,
“esri/graphic”,
“esri/geometry/webMercatorUtils”,
“dojo/_base/Color”,
“dojo/domReady!”
], function(dom, Map, Point, SimpleMarkerSymbol,
Graphic, webMercatorUtils, Color) {
map = new Map(“mapDiv”, {
basemap: “streets”,
center:[-117.148, 32.706], //long, lat
zoom: 12
});
});
</script>
5- یک عبارت if برای بررسی پشتیبانی مرورگر از Geolocation API ایجاد کنید که در صورت پشتیبانی مرورگر، مجوزی برای دستیابی به موقعیت فعلی دستگاه می‌گیرد. ویژگی Navigator.geolocation مقدار true یا false برمی‌گرداند. اگر مرورگر از Geolocation API پشتیبانی کند و مجوز هم از کاربر گرفته شود، مقدار این ویژگی true خواهد بود.
map = new Map(“mapDiv”, {
basemap: “streets”,
center:[-117.148, 32.706], //long, lat
zoom: 12
});
if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(zoomToLocation,
locationError);
}
6- همانطور که در کد بالا می‌بینید، تابع Geolocation.getCurrentPosition() دو تابع بازخوردی یکی برای اجرای موفقیت آمیز عملیات و دیگری برای شکست عملیات تعریف می‌کند. در این مرحله تابع بازخوردی zoomToLocation را برای اجرای موفقیت آمیز عملیات ایجاد می‌کنیم.
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(zoomToLocation,
locationError);
}
function zoomToLocation(location) {
var symbol = new SimpleMarkerSymbol();
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setColor(new dojo.Color([153,0,51,0.75]));
var pt = webMercatorUtils.geographicToWebMercator(new
Point(location.coords.longitude,
location.coords.latitude));
var graphic = new Graphic(pt, symbol);
map.graphics.add(graphic);
map.centerAndZoom(pt, 16);
}
7- حال تابع اجرای ناموفق عملیات را ایجاد می‌کنیم. این تابع برای هر نوع خطا یک پیام مناسب می‌دهد. این تابع را دقیقاً بعد از براکت بسته‌ی تابع zoomToLocation بنویسید:
function locationError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert(“Location not provided”);
break;
case error.POSITION_UNAVAILABLE:
alert(“Current location not available”);
break;
case error.TIMEOUT:
alert(“Timeout”);
break;
default:
alert(“unknown error”);
break;
}
}
8- می توانید از فایل geolocation.html موجود در پوشه‌ی موجود در DVD ضمیمه ی کتاب برای صحت کد خود استفاده کنید.
9- دکمه‌ی Run را بزنید. پیامی مانند زیر نمایش داده می‌شود.
10- روی Share Location کلیک کنید و اگر مرورگر شما از Geolocation API پشتیبانی می‌کند، موقعیت جاری شما به صورت یک گرافیک بر روی نقشه ظاهر می‌شود. بسته به موقعیتی که دارید، تصویر زیر متفاوت خواهد بود.
برگرفته از کتاب تولید و طراحی اپلیکیشن های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک