ایجاد اولین برنامه موبایل GIS-موسسه چشم انداز هزاره سوم ملل-آموزش کاربردی GIS و RS
مقدمه
توسعه وب موبایل، تفاوت‌های آن با وب متداول، فریم ورک‌های کلیدی جاوا اسکریپت و جعبه ابزارها را توضیح دادیم و حالا زمان ایجاد اولین اپلیکیشن موبایل فرا رسیده است.
در این بخش مباحث زیر بیان می‌شوند:
1- توسعه و بازبینی کدنویسی
2- بررسی Arc Gis JavaScript API
3- لایه‌های نقشه‌ای Arc Gis
4- بررسی رویدادهای نقشه
5- بررسی Geolocation API
توسعه و بازبینی کدنویسی
قبل از اینکه به قسمت اصلی بحث برویم، بعضی مفاهیم پایه‌ای توسعه وب را مختصراً توضیح می‌دهیم و زیر بخش‌های زیر را پوشش می‌دهیم:
1- ابزارهای توسعه جاوااسکریپت
2- HTML، CSS و Viewport(تگ‌های meta)
3- مرورگرها و webKit
4- نصب وب سرور
ابزارهای توسعه جاوااسکریپت
وقتی برنامه نویس‌ها می‌خواهند یک پروژه برنامه نویسی را شروع می‌کنند، محیط کدنویسی را انتخاب می‌کنند.IDE(Integration Development Environment یا همان محیط توسعه، فضایی جهت نوشتن برنامه‌ها و کدنویسی است. IDEهای زیادی در دنیای جاوااسکریپت مانندIDEA, Aptana, WebStorm و Visual Studio وجود دارند. یکی ازجذابیت‌های توسعه جاوااسکریپت این است که هر ویرایشگر متنی اکتفاء می‌کند. ++Notepad ویرایشگر کد خوبی است.
DevToolsChrome’s مجموعه‌ای از مولفه‌های وب و ابزارهای خطایابی است که درون Google Chrome قرار دارد.
کدنویسی خود را در ++Notepad انجام می‌دهیم و برای بررسی برنامه خود در مرورگر اینترنت از Google Chrome استفاده خواهیم کرد. برای دسترسی به DevToolsChrome’s نسخه جاری Google Chrome را از لینک زیر دانلود کنید:
https://www.google.com/ chrome/
برای دسترسی به DevToolsChrome’s بر روی که در گوشه بالایی سمت راست پنجرهی این مرورگر قرار دارد کلیک کنید. در منوی ظاهر شده از more tools گزینه Developer tools را انتخاب کنید. می‌توانید از کلیدهای میانبر Ctrl+Shift+I نیز استفاده کنید.
DevToolsChrome’s شامل ابزارهای خطایابی است. Break Point یا نقاط شکست، نقاط خطادار و مشکل ساز برنامه را نشان می‌دهد. ویژگی دیگر DevToolsChrome’s، شبیه سازی موبایل است. با این ویژگی می‌توانید اجرای اپلیکیشن خود را بر روی انواع دستگاه‌های موبایل شبیه سازی کنید. تصویر زیر گزینه‌های خطایاب DevToolsChrome’s را نشان می‌دهد که اپلیکیشن موبایل را شبیه سازی کرده است. ابزارهای زیادی برای توسعه اپلیکیشن‌های شما وجود دارد. اگر مایل به داشتن Chrome’s DevToolsهای بهتر و پیشرفته‌تری هستید می‌توانید از لینک زیر استفاده کنید.
https://developer.chrome.com/devtools
HTML،CSS و Viewport
مختصراً بلاک‌های ایجاد اپلیکیشن مانند: CSS3، HTML5 و ViewPort را توضیح می‌دهیم.HTML ، پایه و اساس همه‌ی اپلیکیشن‌های وب است. HTML5 استاندارد جدید HTML است که خصوصیات جدیدی برای تگ‌ها در نظر گرفته است و با استفاده از (Document Object Model (DOM با جاوااسکریپت در ارتباط است.
وقتی یک صفحه‌ی وب بارگذاری می‌شود، همه‌ی عناصر HTML که درون صفحه هستند بارگذاری و تفسیر می‌شوند. این موضوع به عنوان DOM شناخته شده است. ضروری است که تا زمانی که تمام عناصر صفحه بارگذاری نشده‌اند، جاوااسکریپت نتواند به عناصر دسترسی داشته باشد. بدیهی است اگر کد جاوااسکریپت بخواهد به عناصری که هنوز بارگذاری نشده اند؛ دستیابی داشته باشد، خطا رخ می‌دهد. برای مدیریت و کنترل این خطا از تابع ready استفاده می‌شود که می‌تواند درون تابع require قرار بگیرد و زمانی که تمام عناصر HTML و ماژول‌ها بارگذاری شدند این تابع اجرا می‌شود. هم‌چنین می‌توانید از پلاگین dojo/domReady! برای تضمین اینکه تمام عناصر HTML بارگذاری شده اند، استفاده کنید.
DOM از تعدادی JavaScript API مانندGeolocation API تشکیل شده است. DOM بخشی از HTML است. CSS3 استانداردی برای طرح بندی اپلیکیشن‌های وب است. بسیاری از مرورگرهای وب موبایل این استانداردهای جدید را پشتیبانی می‌کنند. ترکیب HTML، CSS و JavaScript برای افزایش انعطاف و عملکرد اپلیکیشن‌های موبایل GIS مناسب است.
می‌خواهیم در مورد موضوع جدیدی به نام Viewport صحبت کنیم. مرورگر یک صفحه را با استفاده از Viewport تشخیص می‌دهد. Viewport: فضای قابل نمایش صفحه است و می‌تواند چگونگی زوم‌های مرورگر در یک صفحه را کنترل کند. Viewport می‌تواند کوچک‌تر یا بزرگ‌تر از فضای قابل مشاهده صفحه نمایش دستگاه موبایل باشد اما این مسأله می‌تواند موجب مشکلاتی در سبک نقشه و تغییر جهت دستگاه شود. برای تنظیم ویژگی Viewport از تگ <meta>استفاده می‌شود.
برای نمایش اولیه‌ی اپلیکیشن موبایل باید پارامترهای تگ <meta> را تنظیم کنید. تگ <meta> درون تگ <head> قرار دارد. برای پارامتر initial scale بهتر است مقدار 1.0 را قرار دهید تا اپلیکیشن تمام صفحه موبایل شما را پر کند و به صورت تمام صفحه دیده شود. مقدار پارامتر initial scale بین 0 تا 1 تنظیم می‌شود.
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
</head>
ویژگی عرض، پهنای نقشه را با پهنای صفحه نمایش دستگاه تنظیم می‌کند. ویژگی initial-scale سطح زوم اولیه نقشه را تنظیم می‌کند. درواقع وقتی نقشه برای اولین بار در صفحه بارگذاری می‌شود، سطح زوم اولیه این نقشه با مقدار ویژگی initial-scale تنظیم می‌شود. اگر مقداری برای این ویژگی تنظیم نشود، مقدار پیش فرض یک می‌باشد که در این صورت هیچ زومی برای دیدن نقشه اعمال نمی‌شود و نقشه در اندازه اولیه خودش نمایش داده می‌شود. ویژگی maximum-scale چگونگی بزرگ نمائی (Zoom In) و کوچک نمائی (Zoom Out)کاربران روی صفحه را کنترل می‌کند. می‌توان از زوم کاربر با تنظیم ویژگی user-scalable به مقدار no جلوگیری کرد. همانطور که در کد بالا می‌بینید اجازه زوم بر روی صفحه از کاربر گرفته شده است. بدین ترتیب کاربر نمی تواند کل صفحه نمایش را زوم کند. فقط می‌تواند نقشه را زوم کند.
WebKit و مرورگرها
همه مرورگرها شبیه هم ساخته نشده اند. پس باید تفاوت‌ها و موتور webkit را بررسی کنیم. یکی از چالش‌های توسعه‌ی وب، بحث سازگاری cross-browser می‌باشد. اینکه اپلیکیشن چطور کار می‌کند و در یک مرورگر به خوبی نمایان می‌شود و در مرورگر دیگر به خوبی ظاهر نمی‌شود، مربوط به موضوع cross-browser است. همانطور که قبلاً بحث کردیم بعضی از مرورگرهای جاوااسکریپت در این مورد می‌توانند کمک کنند ولی نمی‌توانند همه‌ی این چالش‌ها را برطرف کنند. استانداردهای وب مرورگرها، متفاوت هستند. استانداردهای وب، قراردادی و عمومی هستند که مفاهیم وب را توضیح و تبیین و سپس تبدیل به بهترین استاندارد برای ایجاد وب سایت می‌کنند. Webkit یکی از بهترین موتورهای ارائه و در دسترس است که در مرورگرها اجرا می‌شود تا استانداردها را اجرا و اعمال کند. مرورگر برای ارائه، خواندن و نمایش کدهای HTML در یک صفحه وب از این موتور استفاده می‌کند. Webkit از استانداردهای جدید HTML5 و CSS3 نیز پشتیبانی می‌کند. مرورگرهای موبایل نیز از موتور Webkit استفاده می‌کنند. البته مرورگر Windows Internet Explorer از موتور Trident استفاده می‌کند. امروزه از تعداد زیاد مرورگرهای استاندارد به این نتیجه می‌رسیم که موضوع سازگاری cross-browserها در حال حاضر اهمیت کمتری نسبت به گذشته دارد. هر چند هنوز نمیتوان آن‌ها را نادیده گرفت. متاسفانه مشکل خطایابی سیستم عامل اندروید ادامه دارد. زیرا مرورگر پیش فرض این سیستم عامل، سازگار نیست. در لینک زیراطلاعات بیشتری در مورد مرورگرهای اندروید وجود دارد.
http://slides.com/html5test/the-androidbrowser#/
قبل از شروع کدنویسی بهتر است که فضایی به نام فضای انعکاسی را توضیح دهیم. این فضا، مقصد نهائی اپلیکیشن شما و همان وب سرور است.
نصب وب سرور
در مورد IDEها و محیط‌های توسعه صحبت کردیم. بهتر است یک وب سرور محلی نصب کنید تا اپلیکیشن خود را در محیط واقعی اجرا کرده و توسعه دهید. Apache یکی از معروفترین وب سرور‌های رایگان است. گزینه دیگر برای دستگاه‌های ویندوز وب سرور (IIS (Internet Information Server است. وب سرور Apache را می‌توانید از لینک زیر دانلود کنید:
http://httpd.apache.org
یک پوشه با نام webroot در ریشه درایو C بسازید. ” c:\webroot “.
پس از دانلود وب سرور Apache، در پوشه‌ای به نام bin یا binaries پکیج نصب MSI را پیدا کنید. روی MSI Installer دوبار کلیک کنید تا فرآیند نصب شروع شود. در طول مراحل نصب گزینه‌های پیش فرض را بپذیرید. در هنگام مراحل نصب، مسیر نصب وب سرور را c:\webroot تعیین کنید.
پس ابزارهای توسعه و محیط را نصب کردیم. پس اولین اپلیکیشن خود را ایجاد می‌کنیم.
برگرفته از کتاب تولید وب اپلیکیشن های موبایل با ArcGIS
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک
3 نظرات