تولید اپلیکیشن موبایل GIS کمپ های نوروزی

تولید اپلیکیشن موبایل GIS کمپ های نوروزی

اپ نقشه کمپ های نوروزی را بسازید

پس از این که به شما یاد دادیم اولین اپ موبایل GIS را در یک ساعت بسازید، به شما قول دادیم که می خواهیم برای علاقمندان برنامه نویسی Mobile GIS، آموزش های گام به گام تولید اپلیکیشن موبایل GIS را منتشر نماییم. شما در این آموزش ها یاد می گیرید که چگونه یک اپلیکیشن مکانمند موبایل (همان اپ موبایل GIS) را تولید کنید. تا کنون سه آموزش رایگان، عملی و جذاب زیر را به شما ارایه کرده ایم:

آموزش اول: ایجاد اپلیکیشن نقشه در یک ساعت + فیلم رایگان یک ساعته

آموزش دوم: ساخت صفحه ورود اطلاعات کمپ های نوروزی + فیلم رایگان

آموزش سوم: ساخت پایگاه داده موبایل کمپ های نوروزی با استفاده از SQLite + فیلم رایگان

ما در دو آموزش گذشته، پروژه ای برای تولید اپلیکیشن موبایل GIS تحت عنوان ثبت و نمایش اطلاعات کمپ های نوروزی با قابلیت های زیر تعریف کردیم:

  • امکان ثبت اطلاعات کمپ های نوروزی
  • امکان مشخص کردن مکان کمپ از روی نقشه
  • امکان نمایش کمپ ها بر روی نقشه
  • امکان جستجوی کمپ ها و نمایش بر روی نقشه
  • امکان جستجوی کمپ ها در یک محدوده مشخص از نقشه
  • امکان مسیریابی بر روی نقشه تا کمپ مورد نظر
  • امکان نمایش فاصله ما تا کمپ مورد نظر
  • نمایش نقشه های عمومی گوگل و OSM
  • نمایش نقشه های اختصاصی از سرویس WMS

در نوشته «اپلیکیشن Mobile GIS بسازید» این پروژه را تعریف و ایجاد کردیم، همچنین بخش صفحه دریافت اطلاعات کمپ نوروزی را طراحی کردیم که این بخش همان واسط کاربری یا User Interface (به اختصار UI) اپ کمپ های نوروزی بود.

در نوشته «آموزش SQLite: پایگاه داده موبایل» شما را به پایگاه داده SQLite و نحوه ی اتصال این پایگاه داده به پروژه اندروید کمپ های نوروزی آشنا کردیم. همچنین پایگاه داده موبایل کمپ های نوروزی را برای ذخیره اطلاعات کمپ ها ایجاد کردیم.

در این نوشته که سومین آموزش عملی موبایل GIS است، می خواهیم مهم ترین گام به سمت افزودن قابلیت های Mobile GIS به اپلیکیشن نقشه کمپ های نوروزی را برداریم.

در این آموزش می خواهیم به شما یاد دهیم که برنامه نویسی GIS تحت موبایل را آغاز کنید و چگونگی افزودن نقشه های عمومی شامل Google Map، Open Street Map را به شما آموزش دهیم. این آموزش، آغاز تولید اپلیکیشن موبایل GIS می باشد.

در ادامه این آموزش با ما همراه باشید.

این نوشته از مجموعه آموزش های کلاس Mobile GIS است. برای مشاهده آموزش های پیشین و دانلود فیلم و PDF آن ها، می توانید به صفحه   کلاس Mobile GIS مراجعه نمایید.ورود به کلاس MOBILE GIS

تولید اپلیکیشن موبایل GIS: گام سوم

اینک سومین گام برای شروع افزودن قابلیت های Mobile GIS بر روی اپلیکیشن کمپ های نوروزی را شروع می کنیم.

ما در حال تولید اپلیکیشن اطلاع رسانی برای کمپ های نوروزی هستیم. نقشه یکی از گویاترین روش ها برای اطلاع رسانی می باشد. به جای آن که لیست کمپ های نوروزی را نمایش دهیم، به سادگی می توانیم کمپ های نوروزی را بر روی نقشه نمایش دهیم و مکان فعلی کاربر را نیز نمایش دهیم. حتی اگر هیچ قابلیت GIS نیز به این اپ اضافه نکنیم، به صورت خیلی ساده، کاربر متوجه می شود که الان کجاست و چقدر با کمپ های نوروزی فاصله دارد.

در این بخش از سلسله نوشته های آموزش تولید اپلیکیشن نقشه می خواهیم، آموزش افزودن نقشه در اندروید را به شما ارایه کنیم. ما در این اپلیکیشن نقشه ای، امکان استفاده از نقشه های آنلاین را آموزش می دهیم. نقشه های آنلاین را می توان به دو دسته تقسیم بندی کرد:

  • نقشه های آنلاین عمومی

از جمله این نقشه ها می توان به نقشه های Google و نقشه های Open Street Map (به صورت کوتاه: نقشه OSM) اشاره کرد.

  • نقشه های آنلاین اختصاصی
    این نقشه ها به صورت اختصاصی می باشند. مثلا تصور کنید یک شهرداری می خواهد یک اپ موبایل GIS برای املاک شهر آماده کند و در آن نقشه املاک شهر را نمایش دهد. در این حالت نیازمند لایه نقشه املاک شهر می باشد که اختصاصی آن شهرداری است.

وقتی که می خواهید به صورت تخصصی به تولید اپلیکیشن Mobile GIS بپردازید، می توانید از ابزارها و کتابخانه های مختلف که برای برنامه نویسی GIS تحت موبایل به کار می روند، استفاده نمایید. ما می خواهیم در اینجا، برنامه نویسی GIS موبایل را با استفاده از ابزار ساده و قوی به نام کتابخانه OpenLayers به شما آموزش دهیم. شما با استفاده از OpenLayers می توانید هم برنامه نویسی Web GIS و هم برنامه نویسی Mobile GIS را انجام دهید. یعنی با یادگیری مهارت استفاده از OpenLayers می توانید هم اپ موبایل GIS تولید کنید و هم سایت Web GIS راه اندازی کنید.

کتابخانه OpenLayers یک کتابخانه JavaScript می باشد. یعنی برای استفاده از آن شما می بایست یک صفحه وب ایجاد کنید. لذا ما برای برنامه نویسی قابلیت های Mobile GIS، یک صفحه وب طراحی می کنیم و در آن با استفاده از کتابخانه OpenLayers، پیاده سازی قابلیت های GIS را انجام می دهیم و پس از آن با روش Hybrid، یک اپلیکیشن موبایل تولید می کنیم و در آن صفحه وبی را که طراحی کرده ایم، مورد استفاده قرار می دهیم. به همین سادگی شما یک اپلیکیشن Mobile GIS طراحی می کنید و علاوه بر آن آماده اید تا با آنچه از OpenLayers یاد گرفته اید یک Web GIS راه اندازی کنید!

در تصویر زیر، مراحل انجام این آموزش را مشاهده می کنید:

تولید اپلیکیشن موبایل GIS

پیش نیاز آموزش

برای اینکه بتوانید این آموزش را با موفقیت به اتمام برسانید نیاز است آموزش های پیشین که برای ساخت اپ نقشه کمپ های نوروزی منتشر کرده بودیم را مشاهده نمایید. همچنین بهتر است مهارت های طراحی صفحات وب را نیز بلد باشید و نیز نوشته های آموزش OpenLayers را که پیش تر در سایت قرار داده ایم، خوانده باشید.

البته اگر این مهارت ها را بلد نیستید اصلا نگران نباشید. پیشنهاد می کنیم این آموزش را تا انتها بخوانید و فیلم رایگان آن را هم دانلود کرده و به صورت عملی و گام به گام همراه ما جلو بروید. مطمئن هستیم با آموزش های ساده و روان ما، این آموزش را به اتمام می رسانید و در صدد افزایش مهارت خود برمی آیید. پیش نیازهای این آموزش را در این قسمت آورده ایم:

  • مطالعه نوشته های پیشین برای ساخت پروژه کمپ های نوروزی

شروع ساخت اپلیکیشن موبایل GIS کمپ های نوروزی

طراحی پایگاه داده موبایل برای اپ کمپ های نوروزی

  • آشنایی با طراحی صفحات وب

ما آموزش های رایگان طراحی صفحات وب را برای شما در سایت GISPlus قرار داده ایم. وارد بخش آکادمی Web GIS شوید و سپس بر روی کلید برنامه نویسی وب کلیک کنید و سه نوشته آموزش HTML، آموزش JavaScript و آموزش jQuery را به رایگان دانلود و مشاهده نمایید.

  • نمایش نقشه های Google و OSM با OpenLayers

برای نمایش نقشه گوگل با OpenLayers و نیز نمایش نقشه OSM با OpenLayers می توانید دو نوشته زیر را مطالعه کرده و فیلم های رایگان آن ها را نیز دانلود کرده و مشاهده نمایید.

آموزش OpenLayers برای نمایش نقشه ها در وب

آموزش ایجاد نقشه تحت وب با OpenLayers

شروع کنید

پس از آن که با استفاده از آموزش های فوق توانستید با OpenLayers نقشه های گوگل و OSM را در یک صفحه وب به نمایش بگذارید، فایل HTML و فایل های JavaScript مربوط به OpenLayers را در یک پوشه قراردهید و آن را درون پوشه assets در Android Studio کپی نمایید.

نکته:ما صفحه HTML و فایل های مورد نیاز را به همراه ویدیوی آموزشی قرارداده ایم. می توانید به انتهای این نوشته بروید و فایل ویدیوی این آموزش را دانلود کرده و سورس کدهای پروژه را هم دریافت کنید و به سادگی حتی بدون طراحی صفحه وب و نوشتن کدهای نمایش نقشه های گوگل و OSM تحت وب، آن را مورد استفاده قرار دهید.

خب تا اینجا هنوز مراحل تولید اپلیکیشن موبایل GIS را آغاز نکرده بودیم و تلاش کردیم که شما بتوانید یک صفحه وب طراحی کنید و در آن با استفاده از OpenLayers نقشه های عمومی را در وب به نمایش بگذارید.
برای نمایش صفحه وب در اندروید از کنترل webview استفاده می کنیم. قبل از استفاده از کنترل webview ابتدا یک فرگمنت جدید با نام MapFragment به پروژه خود اضافه می کنیم.

تولید اپلیکیشن موبایل GIS

برای این کار از فرگمنت FormFragment یک کپی تهیه می کنیم.کپی را در قسمت ir.gisplus.norouzicamp با نام جدید MapFragment اضافه می کنیم.

تولید اپلیکیشن موبایل GIS

در MapFragment کد های اضافی که برای ثبت اطلاعات کمپ ثبت کرده بودیم را پاک می کنیم.

متناسب با MapFragment یک واسط کاربری برای آن باید ایجاد شود. به این منظور وارد پوشه res می شویم و در قسمت layout از fragment_form یک کپی ایجاد می کنیم و نام آن را به fragment_map.xml تغییر می دهیم.

تولید اپلیکیشن موبایل GIS

تولید اپلیکیشن موبایل GIS

در این جا هم، مانند قبل به حذف کد های اضافی می پردازیم.

تولید اپلیکیشن موبایل GIS

البته باید در نظر داشته باشید که شما از یک layout خالی به جای استفاده از Layout پروژه ثبت اطلاعات کمپ های نوروزی می توانید استفاده کنید و در این حالت دیگر نیاز به حذف کد های اضافی نخواهید داشت.
برای استفاده از قابلیت های وب در اندروید نیازمند تعریف یک webview هستید.

تولید اپلیکیشن موبایل GIS

عرض و ارتفاع webview را match_parent که تمام صفحه را در بر می گیرد تعیین می کنیم. علاوه بر تعیین عرض و ارتفاع به آن id با نام map را تخصیص می دهیم.

دسترسی به webview و لود کردن صفحه وب داخل webview

برای این کار، داخل MapFragment می شویم و داخل متد onViewCreated کد های مربوط به آن را می نویسیم.

تولید اپلیکیشن موبایل GIS

ابتدا به تعریف یک متغییر سراسری map می پردازیم و متغییر سراسری map را داخل کلاس MapFragment با کلیدهای میانبر Alt +Enter اضافه می کنیم و پس از آن به تعریف map می پردازیم تا به این شکل بتوانیم به map خود دسترسی پیدا کنیم. کنترل webview دارای یکسری پیکربندی است. از جمله این پیکربندی ها می توان به موارد زیر اشاره کرد:

  • مشخص کردن صفحه وب که باید داخل آن نمایش داده شود.
  • فعال کردن امکان استفاده از کدها JavaScript در آن

به این منظور از دو متد استفاده می کنیم و این دو متد را پس از متد()onViewCreated فراخوانی می کنیم.

  • متد ()prepareWebview
  • متد ()initWebViewClients

همچنین کلاس WebAppInterface را به منظور تعریف متدهای اندرویدی و فرخوانی آن ها در صفحه وب به پروژه اضافه می کنیم و با استفاده از کد زیر در متد prepareWebview() تعیین می کنیم که با چه نامی از طریق صفحه وب و کدهای JavaScript بتوان متدهای تعریف شده را فرخوانی کرد.

تولید اپلیکیشن موبایل GIS

در کد فوق مشخص شده است که متدهای موجود در کلاس WebAppInterface با استفاده از نام App فرخوانی گردند.

مثال:به طور مثال اگر یک متد با نام ShowNotify(msg) برای نمایش پیام در کلاس WebAppInterface اضافه کردیم می توانیم با استفاده از کد زیر، آن را در صفحه وب فراخوانی نماییم:
;(‘پیام شما’)App. ShowNotify
نکته:کد هایی که به رنگ قرمز نمایش داده می شود کد های هستند که به activity اضافه نشده اند و با زدن دوبار کلید Alt+Enter اضافه می شوند.

در پایان برای نمایش نقشه وب در webview همانند شکل زیر عمل کرده و با استفاده از متد loadUrl و قرار دادن مسیر فایل html در آن، عمل بارگذاری و نمایش نقشه را انجام می دهیم.

تولید اپلیکیشن موبایل GIS

در واقع با این کد، آدرس صفحه index.html خود را می دهیم که در پوشه map داخل asset است. در این جا قبل از معرفی صفحه html، متدهای پیکربندی ()initWebViewClientsو ()prepareWebview که قبلا تعریف کرده بودیم را فراخوانی می کنیم.

تولید اپلیکیشن موبایل GIS

به این ترتیب صفحه web را داخل webview نمایش می دهیم و با این کار به نقشه ها و قابلیت های GIS که در صفحه وب اضافه کرده بودیم دسترسی پیدا می کنیم. به همین سادگی ما قابلیت های GIS را به اپلیکیشن موبایل می آوریم.

برای نمایش نقشه پس از اجرا برنامه به صورت پیش فرض، باید در MainActivity فرگمنت Map را به عنوان فرگمنت پیش فرض فعال کنیم.

تولید اپلیکیشن موبایل GIS

در نوشته های پیشین یک FrameLayout برای form ایجاد کرده بودیم که الان مجددا باید یک FrameLayout برای map تعریف کنیم.

برای این کار وارد بخش Layout و سپس activity_main.xml می شویم و یک FrameLayout برای map تعریف می کنیم و نام آن را map_fragment می گذاریم.

تولید اپلیکیشن موبایل GIS

مقدار visibilty مربوط بهform_fragment را به طور موقتgone می کنیم که دیده نشود.

تولید اپلیکیشن موبایل GIS

پس از تعریف FrameLayout برای map باید در MainActivity نام FrameLayout را به map_fragment تغییر دهیم.
پس از آن باید داخل MapFragment هم بگوییم Layout آن برابر فرگمنت Map است.

تولید اپلیکیشن موبایل GIS

الان می توانید Genymotion و یا هر شبیه ساز دیگر را که دارید اجرا کنید و یا خروجی را بر روی گوشی اندروید خود ببینید.

در نهایت خواهید دید که نقشه وب شما در نرم افزار اندرویدی همانند شکل زیر به نمایش در می آید.

تولید اپلیکیشن موبایل GIS

فیلم آموزش تولید اپلیکیشن موبایل GIS

به شما پیشنهاد می کنیم که مراحل تولید اپلیکیشن موبایل GIS را با استفاده از فیلم رایگان آموزش تولید اپلیکیشن موبایل GIS به صورت گام به گام و کاملا عملی آموزش ببینید.
در کنار این فیلم آموزشی، سورس کد اپلیکیشن نقشه ای کمپ های نوروزی به همراه فایل apk قابل نصب نیز قرار داده شده است.

تولید اپلیکیشن موبایل GIS

سخن پایانی

ما در این آموزش از سلسله نوشته های آموزش تولید اپلیکیشن موبایل GIS تلاش کردیم برنامه نویسی Mobile GIS را شروع کنیم. ما به شما روشی را یاد دادیم که با آن می توانید امکانات GIS را هم در وب و هم در موبایل، پیاده سازی کنید. این کار را به لطف کتابخانه OpenLayers به انجام رساندیم.

اپلیکیشن نقشه کمپ های نوروزی تا کنون دارای قابلیت های زیر شده است:

  • صفحه ورود اطلاعات کمپ های نوروزی
  • پایگاه داده برای ثبت اطلاعات کمپ های نوروزی
  • امکان نمایش نقشه گوگل و OSM

در آموزش آتی، سایر قابلیت های اپلیکیشن موبایل GIS را پیاده سازی خواهیم کرد و گام به گام، این اپلیکیشن را کامل می کنیم.

همچنین اگر می خواهید آموزش برنامه نویسی Mobile GIS و طراحی جامع و گام به گام یک اپلیکیشن مکان محور را در ۲۰ ساعت یاد بگیرید می توانید از بسته آموزش موبایل GIS که به تازگی در سایت GISPlus قرار گرفته استفاده نمایید و در مدت زمان کم، اپ کمپ های نوروزی را طراحی کرده و مهارت های تولید اپلیکیشن های موبایل مکان محور را فرا بگیرید و بتوانید با طراحی اپ مکان محور برای خودتان درآمدزایی نمایید.

زهرا ابراهیمی کارشناس فناوری اطلاعات از دانشگاه اصفهان است. او در زمینه های طراحی و توسعه وب و برنامه نویسی اندروید فعالیت دارد.

برو بریم

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند

۷۱۰

مقاله های مرتبط :

دیدگاه خود را بیان کنید :

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *