ساخت آزمایشی
ساخت آزمایشی-موسسه چشم انداز هزاره سوم ملل-آموزش کاربردی GIS و RS
برای ایجاد پروژه عبارت >cordova build –release android را در پنجره Command و در مسیر پوشه‌یfoo بنویسید.
نکته: از لینک https://code.google.com/p/winant/ نصب WinAnt را انجام دهید. نصب WinAnt ضروری است. پس از نصب WinAnt، یک پنجره command جدید باز کنید.
پس از انجام مرحله اول مقدار زیادی خروجی خواهید دید که با داده‌های موجود در تصویر زیر تمام می‌شود:
ایجاد گواهینامه‌‌ی اندروید
ابتدا دستور زیر را اجرا کنید:
>keytool -genkey -v -keystore my-release-key.keystore -alias alias_name-keyalg RSA -keysize 2048 -validity 10000
شما تعدادی سوال خواهید پرسید و باید هر سوال تکمیل شود. این سوال‌ها برای رمز طراحی می‌شوند. این رمز با مواردی که به‌خاطر آوردن آنها آسان است، تنظیم می‌شود. در حقیقت دو رمز یکی در آغاز و دیگری در پایان نیاز است. این رمزها باید یکسان باشند. پس از انجام مرحله بالا، اگر در پوشه‌ی جاری نگاه کنید یک فایل جدید به نام phonegapkey.keystore می‌بینید.
دقت کنید که در پوشه‌ی جاری شما CordovaApp-release-unsigned.apk و فایل phonegapkey.keystore وجود دارند.
حال دستور زیر را اجرا کنید:
>jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore myrelease- key.keystore CordovaApp-releaseunsigned.apk alias_name
حال CordovaApp-release-unsigned.apk باید روی اپلیکیشن موبایل شما قابل نصب باشد. یک راه آسان برای کپی کردن این apk به دستگاه موبایلتان، ایمیل کردن این فایل به خودتان است. روی تبلت یا تلفن هوشمند اندروید خود بررسی کنید که در تنظیمات امنیت، گزینه‌ی منابع نامشخص تیک خورده باشد. با فعال کردن این گزینه اپلیکیشن‌هایی که در Googe Play نیستند نیز می‌توانند بر روی دستگاه شما نصب شوند.
برای دیدن اطلاعات بیشتر در مورد ورود به اپلیکیشن یا همان Sign in لینک زیر را ببینید:
https://developer.android.com/tools/publishing/app-signing.html.
در دستگاه اندروید خود، ایمیل را باز کنید. فایل apk را که قبلا به ایمیل خود ارسال کرده بودید را دانلود و نصب کنید.
پس از نصب، اپلیکیشن را باز کنید. تصویر زیر را خواهید دید.
در این بخش فقط اندروید را پوشش دادیم. همانطور که قبلاً نیز گفتیم PhoneGap/Cordova بسیاری از پلتفرم‌های دیگر مانند Windows،iOS و BlackBerry را نیز پشتیبانی می‌کنند.
اسناد Cordova برای توسعه و ایجاد دیگر پلتفرم‌ها را در لینک زیر ببینید.
https://cordova.apache.org/docs/en/3.1.0/
تنظیم و برپاییPhoneGap کافی است یک بار انجام شود و از اینجا به بعد توسعه‌ی اپلیکیشن با راه هموار و آسانی ادامه خواهد داشت. زمان شروع کد نویسی فرا رسیده است.
ایجاد اپلیکیشن‌های چند جزئی موبایل
بیائید درون کد فایل index.html که درون پوشه‌یwww مربوط به پروژه‌ی foo است، نگاهی بیندازیم.
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”format-detection” content=”telephone=no” />
<meta name=”msapplication-tap-highlight” content=”no” />
<!– WARNING: for iOS 7, remove the width=device-width and
height=device-height attributes. See https://issues.apache.org/jira/
browse/CB-4323 –>
<meta name=”viewport” content=”user-scalable=no, initialscale=1, maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi” />
<link rel=”stylesheet” type=”text/css” href=”css/index.css” />
<title>Hello World</title>
</head>
<body>
<div class=”app”>
<h1>Apache Cordova</h1>
<div id=”deviceready” class=”blink”>
<p class=”event listening”>Connecting to Device</p>
<p class=”event received”>Device is Ready</p>
</div>
</div>
<script type=”text/javascript” src=”cordova.js”></script>
<script type=”text/javascript” src=”js/index.js”></script>
</body>
</html>
کد ساده‌ای است. در این نوع کد، ارجاعی به فایل‌های cordova.js, js/index.jsو css/index.css می‌بینید. یک فایل HTML جدید به نام indexmap.html در پوشه‌ی www اضافه کنید. در مسیر C:\Cordova_ripple\foo قرار بگیرید. در پوشه‌ی foo فایل config.xml را باز کنید و در تگ
<content src=”indexmap.html” />مقدار پارامتر src را برابر صفحه‌ای قرار دهید که می‌خواهید اپلیکیشن از آن صفحه شروع شود. در این مثال، مقدار پارامتر src را indexmap.html قرار دادیم.
حال در فایل indexmap.html کد زیر را قرار دهید:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
<meta name=”viewport” content=”width=device-width, initialscale=1, maximum-scale=1, user-scalable=no”/>
<title>Basic Map</title>
<style type=”text/css”>
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#mapDiv {
height: 100%;
width: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id=”mapDiv”></div>
<!– Load the library and CSS references for ArcGIS API for
JavaScript –>
<link rel=”stylesheet” type=”text/css” href=”https://js.arcgis.
com/3.8/js/esri/css/esri.css”>
<script src=”https://js.arcgis.com/3.8compact”></script>
<script type=”text/javascript” src=”cordova.js”></script>
<script type=”text/javascript”>
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common
events are:
// ‘load’, ‘deviceready’, ‘offline’, and ‘online’.
bindEvents: function() {
document.addEventListener(‘deviceready’, this.
onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of ‘this’ is the event. In order to call the
‘receivedEvent’
// function, we must explicity call ‘app.
receivedEvent(…);’
onDeviceReady: function() {
app.receivedEvent(‘deviceready’);
},
// Update DOM on a Received Event
receivedEvent: function(id) {
console.log(‘Cordova device ready event: ‘ + id);
require([“esri/map”],
function(Map) {
// Create map
var map = new Map(“mapDiv”,{
basemap: “satellite”,
center: [-122.69, 45.52],
zoom: 3
});
}
);
}
};
app.initialize();
</script>
</body>
</html>
توجه داشته باشید که ارجاعاتی به CSSها و کتابخانه‌های ArcGIS داریم که در بخش‌های قبل استفاده کردیم. این نمونه کد تفاوت کوچکی با نمونه‌های قبلی دارد. در اینجا یک تابع مقداردهی اولیه داریم که بصورت app.initialize() صدا زده می‌شود. وقتی دستگاه آماده می‌شود رویدادی به نام deviceready اتفاق می‌افتد. با استفاده از تابع initialize() توابعی را برای رویداد deviceready فراهم می‌کنیم. در آخر وقتی دستگاه آماده است، یک نقشه‌ی مبنای ماهواره‌ای بارگذاری می‌کنیم. تصویر زیر مربوط به اپلیکیشن مورد بحث ما است.
عالی است. اولین اپلیکیشن چندجزئی ArcGis را نصب کردیم.
نمونه کدهای بیشتر
نمونه کدهای بیشتری را بر مبنای نمونه کدهای قبلی فراهم کردیم. این نمونه کدها در پوشه‌ی chapter7 قرار دارند.
بعد از اینکه یکی از فایل‌های html موجود در این پوشه را در مرورگر باز کردید، در مرورگر راست کلیک کنید و view source code را بزنید. مشابه کارهایی که در کد قبلی انجام دادیم، این کد را در یک صفحه HTML کپی کنید. فایل را با پسوند html ذخیره کنید و این فایل را به پارامتر src در تگ <content> فایل config.xml معرفی کنید.
مختصراً پلاگین‌ها را توضیح می‌دهیم. پلاگین‌ها ویژگی‌های پیشرفته و راه‌های ساده‌ای در اپلیکیشن‌های چندجزئی ArcGIS برای توزیع و نشر آنها فراهم کرده‌اند.
پلاگین‌ها
پلاگین‌هایی برای ایجاد ارتباط با ویژگی‌های مختلف دستگاه، باید به اپلیکیشن اضافه شوند تا به PhoneGap/Cordova API دسترسی داشته باشند.
این پلاگین‌ها شامل موقعیت جغرافیایی، اطلاعات شبکه، وضعیت باتری، دوربین و جهت‌های چرخش موبایل است. پلاگین کدی است که حکم یک رابط را دارد.
در لینک زیر لیست کاملی از 500 پلاگین را می‌بینید:
https://plugins.cordova.io/#/viewAll
یک پلاگین با استفاده از خط دستور اضافه می‌شود. مثلاً برای اضافه کردن یک پلاگین geolocation در خط دستوری عبارت زیر را بنویسید:
>cordova plugin add org.apache.cordova.geolocation
توجه داشته باشید که در مسیر پوشه‌ی پروژه‌ی cordova یا همان پوشه‌ی foo قرار داشته باشید.
PhoneGap Build
شرکت adobe سرویسی به نام PhoneGap Build فراهم کرده است که اپلیکیشن‌های PhoneGap را تفسیر میکند. ایجاد اپلیکیشن‌های موبایل باPhoneGap آسان است. اما یک چالش وجود دارد. PhoneGap Buildبرای نگهداری و امنیت اشیاء به ما کمک میکند.
در لینک https://build.phonegap.com/ ، می‌توانید PhoneGap Build را پیدا کنید.
PhoneGap Build برای مدیریت اپلیکیشن‌هایی است که در پلتفرم‌های مختلف موبایل استفاده شوند.
برگرفته از کتاب تولید وب اپلیکیشن های موبایل با ArcGIS
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک