فرادرسایجاد آدرس کوتاه و منحصر به فرد برای هر مکان با AngularJS و PHP – راهنمای جامع
آدرسهای پستی معمولاً طولانی هستند و در اغلب مواقع به خاطر سپردن آنها کار دشواری است. چند سناریو هستند که در آنها نیاز به آدرسهای کوتاهتر است. برای مثال امکان ارسال آدرسی که تنها از چند کاراکتر تشکیل یافته است، موجب میشود که خدمات اضطراری آمبولانس در موارد بحرانی به سرعت مورد دسترسی قرار گیرد. پیتر گیلِن (Pieter Geelen) و هارولد گوودین (Harold Goddijn) در سال 2001 سیستم mapcode را توسعه دادند که امکان ساخت آدرسهای کوتاه برای هر آدرس فیزیکی در دنیا را به سهولت فراهم ساخته است.
در این آموزش به همراه یکدیگر برنامهای میسازیم که از API نقشه گوگل برای تولید آدرسهای دیجیتالی کوتاه برای هر آدرسی در دنیا استفاده میکند. این کار از طریق کلون کردن کد مبنا برای این برنامه از گیتهاب و سپس افزودن کدی که کارکردهای عملیاتی به آن اضافه میکند، ممکن خواهد بود. این برنامه همچنین توانایی بازنویسی آدرسهای فیزیکی اصلی را از روی mapcode مفروض دارد.
پیشنیازها
برای تکمیل کردن این راهنما به موارد زیر نیاز دارید:
- دسترسی به سرور اوبونتو 18.04. این سرور باید یک کاربر غیر root با دسترسیهای sudo داشته باشد و فایروالی برای آن پیکربندی شده باشد.
- یک استک LAMP باید روی این سیستم نصب شود. این امر ضروری است، زیرا برنامهای که قصد داریم در این آموزش بنویسیم از آنگولارجیاس (AngularJS) و پیاچپی بهره میگیرد و آدرسهای دیجیتالی که برنامه تولید میکند در پایگاه داده مایاسکیوال (MySQL) ذخیره میشوند.
- با نصب موارد فوق در سرور در ادامه باید Git را نیز روی سرور خود نصب و راهاندازی کنید. بدین منظورمی توانید از این آموزش فرادرس کمک بگیرید.
مرحله 1: دریافت کلید API نقشه گوگل
در این آموزش از جاوا اسکریپت برای ایجاد رابطی با نقشههای گوگل استفاده خواهیم کرد. سرویس نقشه گوگل از کلیدهای API برای ایجاد امکان استفاده توسعهدهندگان از API جاوا اسکریپت استفاده میکند. شما میبایست این کلید را دریافت کرده و به کد برنامه وب خود اضافه کنید.
برای دریافت کلید API شخصی به صفحه get-api-key مراجعه کنید. دقت کنید که این خدمات برای آیپیهای ایران فیلتر شده است. سپس بر روی Get Started کلیک کنید تا صفحهای مانند تصویر زیر باز شود:
با کلیک بر روی کادر انتخاب، گزینه maps را انتخاب کنید و بر روی CONTINUE کلیک کنید. اگر وارد حساب کاربری گوگل خود نشده باشید، از شما تقاضا میشود که وارد حساب گوگل شوید. سپس در این پنجره از شما خواسته میشود که نامی برای پروژه خود تعیین کنید. میتوانید از هر نامی مانند زیر استفاده کنید:
در ادامه از شما خواسته میشود که اطلاعات صورتحساب را وارد کنید. توجه کنید که گوگل کلیدهای API را به عنوان بخشی از یک برنامه قیمتگذاری که در استفادههای کمتر، رایگان است ارائه میکند؛ اما در هر صورت لازم است که اطلاعت بانکی خود را در این مرحله وارد کنید.
پس از وارد کردن اطلاعات فوق کلیدهای API شما بر روی صفحه ظاهر میشوند. آنها را کپی کرده و در مکانی ذخیره کنید که بعدها بتوانید به سهولت بازیابی کنید، چون بعدتر هنگام ایجاد پروژه به آنها نیاز خواهید داشت. پس از دریافت کلیدهای API گوگل میتوانید با ایجاد پایگاه داده مایاسکیوال، شروع با ساخت شالوده اپلیکیشن خود بکنید.
مرحله 2: ایجاد یک پایگاه داده
برنامه وبی که در این آموزش توصیف میشود یک آدرس را از کاربر میگیرد و mapcode آن را به همراه طول و عرض جغرافیایی و موقعیت موصوف تولید میکند. شما این دادهها را در پایگاه داده مایاسکیوال ذخیره میکنید تا بتوانید تنها با وارد کردن آدرس دیجیتالی مربوطه آن را بازیابی کنید.
ابتدا با باز کردن یک پوسته مایاسکیوال کار خود را آغاز میکنیم و با وارد کردن رمز عبور خود وارد Shell میشویم:
mysql -u root -p
در خط فرمان یک پایگاه داده به نام digitaladdress با استفاده از دستور زیر ایجاد کنید:
CREATE DATABASE IF NOT EXISTS `digitaladdress`;
سپس پایگاه داده جدید را انتخاب کرده و جدولی درون آن بسازید:
USE `digitaladdress`;
پس از انتخاب کردن پایگاه داده digitaladdress میتوانید جدولی به نام locations درون آن برای ذخیرهسازی آدرسهای فیزیکی، طول و عرض جغرافیایی و mapcode که برنامه شما از روی این دادهها میسازد، ایجاد کنید. دستور CREATE TABLE زیر را برای ایجاد جدول locations درون پایگاه داده وارد نمایید:
CREATE TABLE `locations` ( `digitaladdress` varchar(50) DEFAULT NULL, `state` varchar(30) DEFAULT NULL, `zip` varchar(30) DEFAULT NULL, `street` varchar(30) DEFAULT NULL, `town` varchar(30) DEFAULT NULL, `house` varchar(30) DEFAULT NULL, `latitude` varchar(30) DEFAULT NULL, `longitude` varchar(30) DEFAULT NULL, KEY `digitaladdress` (`digitaladdress`) );
این جدول هشت ستون دارد: digitaladdress، state، zip، street، town، house، latitude و longitude. ستون نخست یعنی digitaladdress با استفاده از دستور KEY اندیسگذاری شده است. اندیسها در مایاسکیوال کارکردی شبیه به اندیسهای دائرهالمعارف یا دیگر کتب مرجع دارد. هر زمان که در برنامه خود یک کوئری بسازید که شامل دستور WHERE باشد، مایاسکیوال همه مداخل را در هر ستون، به صورت ردیف به ردیف میخواند که با افزایش تعداد مدخلهای جدول، به سرعت تبدیل به یک فرایند به شدت پر هزینه میشود. اندیس کردن یک چنین ستونی بدین صورت است که دادهها از ستون گرفته میشوند و به صورت الفبایی در یک ستون دیگر مرتب میشوندلدین ترتیب مایاسکیوال دیگر مجبور نیست برای یافتن یک مقدار همه ردیفهای جدول را بخواند. در صورت وجود یک چنین کوئری، مایاسکیوال میتواند به اندیس نگاه کرده و سپس مستقیماً به ردیف مربوطه مراجعه کند.
پس از افزودن این جدول، با دستور زیر میتوانید از خط فرمان مایاسکیوال خارج شوید:
Exit
در این مرحله که پایگاه داده مایاسکیوال ایجاد شده و کلیدهای API گوگل نیز در دست هستند، آماده ساخت پروژه هستیم.
مرحله 3: ایجاد پروژه
همان طور که در مقدمه این آموزش اشاره کردیم کد مبنایی را برای این پروژه از مخزن گیتهاب مربوطه کلون میکنیم و مقداری کد به آن اضافه میکنیم تا کارکردهای نهایی برنامه ایجاد شوند. دلیل این مسئله آن است که به جای این که وقت خود را صرف فرایند ایجاد تکتک فایلها و افزودن همه کد بکنیم، از این صرفهجویی در جهت تسریع فرایند اجرای نهایی پروژه بهرهبرداری میکنیم. این وضعیت همچنین به ما اجازه میدهد که بر روی افزایش و درک کدی تمرکز کنیم که به اپلیکیشن ما امکان ارتباط با سرویس نقشه گوگل و همچنین API های mapcode را میدهد.
کد پایه پروژه کامل را میتوانید در این صفحه گیتهاب بیابید. از دستور git برای کلون کردن پروژه در سرور خود استفاده کنید.
git clone https://github.com/do-community/digiaddress.git
بدین ترتیب یک پوشه جدید به نام digiaddress در دایرکتوری home سرور شما ایجاد میشود. این دایرکتوری را به root وبسرور انتقال دهید. اگر از استک LAMP استاندارد استفاده میکنید، دایرکتوری root شما در آدرس /var/www/html خواهد بود:
sudo mv digiaddress/ /var/www/html/
این پروژه شامل چندین فایل پیاچپی و جاوا اسکریپت است که در ادامه این آموزش کدهایی را به آن اضافه خواهیم کرد. برای مشاهده ساختار دایرکتوری ابتدا بسته tree را با استفاده از دستور apt نصب کنید:
sudo apt install tree
سپس دستور tree را در دایرکتوری digiaddress به عنوان یک آرگومان وارد کنید:
tree /var/www/html/digiaddress/
Output digiaddress/ ├── README.md ├── db.php ├── fetchaddress.php ├── findaddress.php ├── generateDigitalAddress.php ├── geoimplement.php ├── index.php └── js ├── createDigitialAddressApp.js └── findAddressApp.js
در خروجی فوق مشخص است که پروژه شامل شش فایل پیاچپی و دو فایل جاوا اسکریپت است. این فایلها به همراه همدیگر دو کارکرد اصلی اپلیکیشن یعنی ایجاد یک mapcode از یک آدرس فیزیکی و دیکُد کردن mapcode برای بازیابی یک آدرس فیزیکی را ایجاد میکنند. فایلهای زیر کارکرد نخست را ارائه میکنند:
- index.php
- geoimplement.php
- generateDigitialAddress.php
- db.php
- createDigitialAddressApp.js
فایل index.php شامل کدی برای رابط کاربری (UI) اپلیکیشن است و از یک فرم تشکیل یافته که کاربران در آن یک آدرس فیزیکی وارد میکنند. فایل index.php، فایل geoimplement.php را هر زمان که کاربر فرمی را ارسال کند، فراخوانی میکند. geoimplement.php یک فراخوانی به API نقشه گوگل ارسال میکند و آدرس را درون آن میفرستد. سپس سرور گوگل با یک رشته JSON که شامل اطلاعات دقیق آدرس موصوف است، پاسخ میدهد. این اطلاعت شامل طول و عرض جغرافیایی آدرس است.
در مرحله بعد این اطلاعات به فایل generateDigitalAddress.php ارسال میشود که API مربوط به mapcode را برای دریافت mapcode برای مکان مورد نظر که بر اساس طول و عرض جغرافیایی مشخص شده است، فراخوانی میکند. mapcode بازگشتی همراه با طول و عرض جغرافیایی و آدرس فیزیکی در پایگاه دادهای که در مرحله 2 ایجاد شده ذخیره میشود. db.php به عنوان یک helper برای این عملیات استفاده میشود. فایل createDigitalAddressApp.js چند عملیات اجرا میکند که اجزای UX مشاهده شده در برنامه را کنترل میکند که شامل راهاندازی یک نشانگر و مستطیل محدوده، روی رابط نقشه گوگل است. فایلهای باقیمانده، کارکرد دوم این اپلیکیشن یعنی بازیابی آدرس فیزیکی از یک mapcode مفروض را فراهم میسازند:
- findaddress.php
- fetchaddress.php
- findAddressApp.js
فایل findaddress.php رابط کاربری اپلیکیشن را تعریف میکند که از آنچه در index.php تعریف شده متفاوت است. این اپلیکیشن یک mapcode قبلاً ایجاد شده را به عنوان ورودی میگیرد و آدرس فیزیکی متناظر ذخیره شده در پایگاه داده را باز میگرداند. هر زمان که کاربری این فرم را ارسال کند، فایل findaddress.php یک فراخوانی به fetchaddress.php ارسال میکند که mapcode متناظر را از پایگاه داده استخراج میکند. فایل findAddressApp.js شامل کد helper برای تعیین یک نشانگر و یک مستطیل محدوده بر روی رابط نقشه گوگل است.
با مراجعه به آدرس http://your_server_ip/digiaddress در مرورگر میتوانید وضعیت نصب موارد مختلف را بررسی کنید که در این آدرس به جای your_server_ip باید آدرس آیپی سرور خود را وارد کنید.
توجه کنید که اگر آدرس آیپی سرور خود را نمیدانید، میتوانید با استفاده از دستور curl زیر آن را بیابید. این دستور محتوای صفحه icanhazip.com را نمایش میدهد. این وبسایتی است که آدرس آیپی رایانههایی که به آن متصل میشوند را نشان میدهد:
curl http://icanhazip.com
زمانی که به این مرحله رسیدید این عنوان را در بخش فوقانی پنجره مرورگر خود میبینید:
Generate Digital Address
این مسئله ثابت میکند که فایلهای پروژه را به درستی دانلود نمودهاید. بدین ترتیب در ادامه به توسعه نخستین کارکرد برنامه خودمان یعنی تولید یک mapcode میپردازیم.
مرحله 4: توسعه رابط کاربری اپلیکیشن
با این که فایلهای اصلی مورد نیاز برای رابط کاربری اپلیکیشن، در فایلهایی که در مرحله قبلی دانلود کردید موجود هستند؛ ولی همچنان به چند تغییر و افزودن کد به برخی فایلها نیاز داریم تا برنامه کارکردهای خود را بیابد و کاربران بتوانند از آن استفاده کنند. این مرحله را با بهروزرسانی کد برای توسعه رابط کاربری اپلیکیشن شروع میکنیم. فایل index.php را با برنامه ویرایشگر مورد علاقه خود باز کنید. در این مثال ما از nano استفاده میکنیم:
nano /var/www/html/digiaddress/index.php
به دنبال خط کد زیر بگردید:
. . . <script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>"></script> . . .
عبارت <YOUR KEY> را با کلید API گوگل که در مرحله 1 به دست آوردید جایگزین کنید. پس از افزودن کلید API وضعیت این خط کد به صورت زیر در خواهد آمد:
. . . <script async defer src="https://maps.googleapis.com/maps/api/js?key=ExampleAPIKeyH2vITfv1eIHbfka9ym634Esw7u"></script> . . .
سپس دستور زیر را در فایل index.php بیابید:
. . . <!-- add form code here --> . . .
در بخش زیر این توضیح، چند خط کد اضافه میکنیم. این خطوط فرمی ایجاد میکنند که کاربر میتواند آدرس موقعیت فیزیکی را در آن وارد کند تا اپلیکیشن از آن برای تولید mapcode استفاده کند. زیر این توضیح، کد هایلایت شده زیر را اضافه میکنیم که یک عنوان به صورت Enter Address در بخش بالای فرم ایجاد میکند:
. . . <!-- add form code here --> <div class="form-border spacing-top"> <div class="card-header" style="background:#cc0001; color:#ffff"> <h5>Enter Address</h5> </div> <div class="extra-padding"> . . .
در ادامه کد HTML زیر را وارد میکنیم. این کد فرمی با پنج فیلد متنی (همراه با برچسبهای مربوطه) ایجاد میکند که کاربران میتوانند اطلاعاتشان را در آنها وارد نمایند:
. . . <form> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state"/> </div> <div class="form-group input-group-sm"> <label for="zip" class="animated-label">Zip</label> <input type="text" class="form-control rounded-0 textbox-depth textbox-border" id="zip" ng-model="address.zip" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="town">Town</label> <input type="text" class="form-control rounded-0 textbox-border" id="town" ng-model="address.town" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="street">Street</label> <input type="text" class="form-control rounded-0 textbox-border" id="street" placeholder="" ng-model="address.street" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="house">House</label> <input type="text" class="form-control rounded-0 textbox-border" id="house" placeholder="" ng-model="address.house" disabled="disabled"/> </div> . . .
در بخش زیر کد فرم، خطوط زیر را اضافه کنید. این کدها دو کنترل مخفی ایجاد میکنند که اطلاعات طول و عرض جغرافیایی منبعث از هر آدرس تحویل شده از طریق فرم را ارسال میکنند:
. . . <div class="form-group input-group-sm"> <input type="hidden" ng-model="address.lat"/> </div> <div class="form-group input-group-sm"> <input type="hidden" ng-model="address.long"/> </div> . . .
در نهایت این بخش را با افزودن کد زیر میبندیم. بدین ترتیب یک دکمه Generate ایجاد میشود که به کاربران امکان ارسال فرم را میدهد:
. . . <button type="submit" disabled="disabled" class="btn btn-color btn-block rounded-0" id="generate" style="color:#ffff;background-color: #cc0001;">Generate </button> </form> </div> </div> . . .
پس از افزودن این عناصر، این بخش از فایل به شکل زیر در میآید:
. . . <!-- add form code here --> <div class="form-border spacing-top"> <div class="card-header" style="background:#cc0001; color:#ffff"> <h5>Enter Address</h5> </div> <div class="extra-padding"> <form> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state"/> </div> <div class="form-group input-group-sm"> <label for="zip" class="animated-label">Zip</label> <input type="text" class="form-control rounded-0 textbox-depth textbox-border" id="zip" ng-model="address.zip" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="town">Town</label> <input type="text" class="form-control rounded-0 textbox-border " id="town" ng-model="address.town" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="street">Street</label> <input type="text" class="form-control rounded-0 textbox-border" id="street" placeholder="" ng-model="address.street" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="house">House</label> <input type="text" class="form-control rounded-0 textbox-border" id="house" placeholder="" ng-model="address.house" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <input type="hidden" ng-model="address.lat"/> </div> <div class="form-group input-group-sm"> <input type="hidden" ng-model="address.long"/> </div> <button type="submit" disabled="disabled" class="btn btn-color btn-block rounded-0" id="generate" style="color:#ffff;background-color: #cc0001;">Generate </button> </form> </div> </div> <br> </div> <!-- add google map control --> . . .
این فایل را با کلیدهای CTRL+O ذخیره کنید و اینتر را بزنید. سپس یک بار دیگر برنامه را در مرورگر خود بررسی کنید:
http://your_server_ip/digiaddress
فیلدهای اخیراً اضافه شده و دکمه Generate را میبینید و ظاهر اپلیکیشن شبیه زیر خواهد بود:
در این مرحله اگر اطلاعات آدرس را در فرم وارد کنید و بر روی دکمه Generate کلیک کنید، هیچ اتفاقی رخ نمیدهد. کارکرد تولید mapcode را در ادامه اضافه خواهیم کرد؛ اما ابتدا اجازه بدهید از طریق افزودن نقشهای که کاربران بتوانند با آن تعامل داشته باشند، بر روی جذابتر ساختن ظاهر این صفحه تمرکز کنیم.
مرحله 5: افزودن کنترلهای نقشه گوگل
زمانی که نقشهای از طریق API جاوا اسکریپت سرویس نقشه گوگل در صفحهای نمایش مییابد، دارای یک رابط کاربری است که به بازدیدکنندگان امکان تعامل با نقشهای که میبینند را ارائه میکنند. این ویژگیها به نام controls شناخته میشوند. ما با ویرایش کردن فایل index.php برای افزودن کنترلهای نقشه گوگل به این اپلیکیشن به کار خود ادامه میدهیم و زمانی که این کار را تمام کردیم، کاربران خواهند توانست در کنار فرم ورود اطلاعات یک نقشه را مشاهده کنند، آن را بکشند تا مکانهای مختلف را ببینند، در آن بزرگنمایی و کوچکنمایی کنند و بین حالتهای نقشه، ماهواره و نمای خیابان گوگل (Street view) سوئیچ کنند.
دستور زیر را در فایل index.php پیدا کنید:
. . . <!-- add google map control --> . . .
کد هایلایت شده زیر را در بخش زیر این توضیح اضافه کنید:
. . . <!-- add google map control --> <div class="col-sm-8 map-align" ng-init="initMap()"> <div id="map" class="extra-padding" style="height: 100%; margin-bottom: 15px;"></div> <label id="geocoordinates" ng-show="latlng" ng-model="lt"></label><br/> <label id="geoaddress" ng-show="address" ng-model="padd"></label> </div> </div> . . .
فایل را ذخیره کنید و سپس در مرورگر خود بار دیگر به اپلیکیشن مراجعه کنید. تصویر زیر را خواهید دید:
همان طور که میبینید ما با موفقیت یک نقشه به اپلیکیشن خود اضافه کردهایم. شما میتوانید این نقشه را به مکانهای مختلف بکشید، بزرگنمایی و کوچکنمایی کنید و یا بین حالتهای مختلف نمایش نقشه انتخاب نمایید. اگر مجدداً به کدی که به فایل اضافه کردیم دقت کنید، متوجه میشوید که دو کنترل برچسب نیز به آن افزودهایم که مختصات جغرافیایی و آدرس فیزیکی که در فرم وارد شده را نمایش میدهد:
. . . <label id="geocoordinates" ng-show="latlng" ng-model="lt"></label><br/> <label id="geoaddress" ng-show="address" ng-model="padd"></label> . . .
بار دیگر در مرورگر خود به اپلیکیشن مراجعه کنید و نام یک ایالت را در فیلد اول وارد کنید. زمانی که ماوس خود را به فیلد دوم ببرید، برچسب طور و عرض جغرافیایی، دیگر نمایش نمییابد. همچنین مکانی که روی نقشه وجود دارد برای نمایش اطلاعاتی که وارد کردهاید، تغییر نمییابد. در ادامه این موارد را فعال خواهیم کرد.
مرحله 6: افزودن شنوندههای رویداد (Event Listeners)
افزودن اجزای تعاملی به یک اپلیکیشن به سهولت بیشتر کار با اپلیکیشن کمک میکند. ما در این بخش از طریق شنوندههای رویداد چند رفتار تعاملی به اپلیکیشن اضافه میکنیم. منظور از رویداد (event) هر اقدامی است که در یک صفحه وب انجام میشود. رویدادها میتوانند هر چیزی باشند که از سوی کاربر یا خود مرورگر اجرا میشود. نمونههایی از رویدادهای رایج شامل موارد زیر هستند:
- کلیک کردن روی یک دکمه اچتیامال
- تغییر دادن محتوای یک فیلد ورودی
- تغییر دادن فوکوس از یک عنصر صفحه به عنصر دیگر
یک شنونده رویداد عنصری است که به برنامه میگوید زمانی که رویداد خاصی در صفحه رخ میدهد، اقدام معینی را اجرا کند. در آنگولارجیاس شنوندههای رویداد با directive هایی تعریف میشوند که فرمت عمومی آن به صورت زیر است:
ng-event_type=expression
در این مرحله یک شنونده رویداد به برنامه اضافه میکنیم که کمک میکند اطلاعاتی که از سوی کاربر وارد میشود را در زمان ارسال فرم به صورت یک mapcode پردازش کند. همچنین چند شنونده رویداد دیگر اضافه میکنیم که باعث میشوند اپلیکیشن ما تعاملپذیرتر باشد. به طور خاص ما از این شنوندهها برای تغییر دادن مکان نمایش یافته روی نقشه اپلیکیشن استفاده میکنیم، یک نشانگر روی نقشه قرار میدهیم و یک مستطیل پیرامون مکانی روی نقشه که کاربر اطلاعاتش را در فرم اپلیکیشن وارد کرده ترسیم میکنیم. ما این شنوندههای رویداد را به فایل index.php اضافه میکنیم. بنابراین اگر فایل را بستهاید آن را مجدداً باز کنید:
nano /var/www/html/digiaddress/index.php
اسکرول کنید تا به نخستین دسته از کدها برسید و بلوکی را پیدا کنید که با تگ <form> آغاز میشود. این کد ظاهری به صورت زیر دارد:
. . . <form> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state"/> </div> <div class="form-group input-group-sm"> <label for="zip" class="animated-label">Zip</label> <input type="text" class="form-control rounded-0 textbox-depth textbox-border" id="zip" ng-model="address.zip" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="town">Town</label> <input type="text" class="form-control rounded-0 textbox-border" id="town" ng-model="address.town" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="street">Street</label> <input type="text" class="form-control rounded-0 textbox-border" id="street" placeholder="" ng-model="address.street" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="house">House</label> <input type="text" class="form-control rounded-0 textbox-border" id="house" placeholder="" ng-model="address.house" disabled="disabled"/> </div> </form> . . .
در آغاز شنونده رویداد زیر را به تگ بازکننده <form> اضافه میکنیم. این کد به برنامه میگوید که هر زمان کاربری اطلاعاتی را از طریق فرم ارسال کرد، تابع processForm را فراخوانی کند. processForm در فایل createDigitalAddressApp.js تعریف شده و به عنوان یک تابع کمکی (helper) عمل میکند که اطلاعات تحویل شده از سوی کاربران را به فایل مناسبی ارسال میکند تا آن را به صورت یک mapcode پردازش کند. در مرحله 7 نگاهی نزدیک به این تابع خواهیم داشت:
. . . <form ng-submit="processForm()" class="custom-form"> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state" </div> . . .
سپس به ویرایش این بلوک کد با افزودن شنونده رویداد blur ادامه میدهیم. رویداد blur زمانی رخ میدهد که یک عنصر فوکوس برنامه را از دست میدهد. خطوط هایلایت شده زیر را به تگهای input بلوک form اضافه کنید. این خطوط به برنامه میگویند که هر زمان کاربر فوکوس برنامه را از روی فیلدهای تعریف شده برنامه در مرحله 4 برمیدارد، تابع geocodeAddress را فراخوانی کند. توجه داشته باشید که شما باید اسلشها و علامتهای (/>) که هر یک از تگهای input را میبندند حذف کنید. اگر این کار را نکنید، برنامه نمیتواند رویدادهای blur را به درستی ثبت کند:
. . . <form ng-submit="processForm()" class="custom-form"> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state" ng-blur="geocodeAddress(address,'state')" required=""/> </div> <div class="form-group input-group-sm"> <label for="zip" class="animated-label">Zip</label> <input type="text" class="form-control rounded-0 textbox-depth textbox-border" id="zip" ng-model="address.zip" disabled="disabled" ng-blur="geocodeAddress(address,'zip')" required=""/> </div> <div class="form-group input-group-sm"> <label for="town">Town</label> <input type="text" class="form-control rounded-0 textbox-border" id="town" ng-model="address.town" disabled="disabled" ng-blur="geocodeAddress(address,'town')" required=""/> </div> <div class="form-group input-group-sm"> <label for="street">Street</label> <input type="text" class="form-control rounded-0 textbox-border" id="street" placeholder="" ng-model="address.street" disabled="disabled" ng-blur="geocodeAddress(address,'street')" required=""/> </div> <div class="form-group input-group-sm"> <label for="house">House</label> <input type="text" class="form-control rounded-0 textbox-border" id="house" placeholder="" ng-model="address.house" disabled="disabled" ng-blur="geocodeAddress(address,'house')" required=""/> </div> . . .
نخستین خط از این خطوط:
(ng-blur="geocodeAddress(address,'state')" required=""/>)
به این معنی است که «وقتی کاربر فیلد state را ترک کرد تابع geocodeAddress را فراخوانی کن.» خطوط جدید دیگر نیز زمانی که کاربر فیلدهای متناظر را ترک میکند، فراخوانیهایی به تابع geocodeAddress ایجاد میکنند.
تابع geocodeAddress مانند تابع processForm در فایل createDigitalAddressApp.js اعلان شده است؛ اما هنوز هیچ کدی در آن فایل وجود ندارد که آن را تعریف کند. ما این تابع را طوری تکمیل میکنیم که یک نشانگر روی نقشه قرار دهد و پس از رخ دادن این رویدادهای blur، برای نشان دادن اطلاعات وارد شده در فرم، مستطیلی را روی نقشه اپلیکیشن ترسیم کند. همچنین برخی کدها را اضافه میکنیم که اطلاعات آدرس را گرفته و آن را به صورت mapcode پردازش میکند.
فایل index.php را ذخیره کرده و از آن خارج شوید (دکمههای CTRL+Y و سپس ENTER را بزنید) و سپس فایل createDigitalAddressApp.js را باز کنید:
nano /var/www/html/digiaddress/js/createDigitalAddressApp.js
در این فایل خط زیر را پیدا کنید:
. . .
$scope.geocodeAddress = function (address, field) {
. . .
این خط جایی است که تابع geocodeAddress در آن اعلان شده است. چند خط پایین آن یک متغیر به نام fullAddress اعلان میکنیم که از اطلاعات وارد شده از سوی کاربر در فیلدهای فرم اپلیکیشن، یک آدرس پستی قابل خواندن برای انسان تولید میکند. این کار از طریق یک سری دستورهای if صورت میپذیرد:
. . .
var fullAddress = "";
if (address ['house']) {
angular.element(document.getElementById('generate'))[0].disabled = false;
fullAddress = address ['house'] + ",";
}
if (address ['town']) {
angular.element(document.getElementById('street'))[0].disabled = false;
fullAddress = fullAddress + address ['town'] + ",";
}
if (address ['street']) {
angular.element(document.getElementById('house'))[0].disabled = false;
fullAddress = fullAddress + address ['street'] + ",";
}
if (address ['state']) {
angular.element(document.getElementById('zip'))[0].disabled = false;
fullAddress = fullAddress + address ['state'] + " ";
}
if (address ['zip']) {
angular.element(document.getElementById('town'))[0].disabled = false;
fullAddress = fullAddress + address ['zip'];
}
. . .
درست پس از این خطوط، دستور زیر قرار دارد:
. . . // add code for locating the address on Google maps . . .
در بخش زیر این توضیح خط زیر را اضافه میکنیم که بررسی میکند آیا fullAddress مقداری به جز null دارد یا نه.
. . .
if (fullAddress!== "") {
. . .
کد زیر را در زیر این خط اضافه کنید. این کد اطلاعات وارد شده در فرم را در صورتی که null نباشند، با استفاده از متد HTTP POST به فایل geoimplement.php ارسال میکند.
. . .
$http({
method: 'POST',
url: 'geoimplement.php',
data: {address: fullAddress},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(results) {
. . .
سپس خط زیر را اضافه میکنیم که بررسی میکند آیا فراخوانی PHP با موفقیت بازگشت یافته است یا نه.
. . .
if (results.data!== "false") {
. . .
اگر فراخوانی PHP با موفقیت بازگشت یابد، ما خواهیم توانست نتیجه را پردازش کنیم. خط زیر را اضافه کنید که هر گونه مستطیل محاط را که ممکن است قبلاً روی نقشه ترسیم شده باشد با فراخوانی removeRectangle حذف میکند. این تابع در بخش بالای فایل createDigitalAddressApp.js تعریف شده است:
. . . removeRectangle(); . . .
در زیر فایل removeRectangle();، چهار خط کد زیر را اضافه کنید که یک نشانگر برای یک مکان جدید روی کنترل نقشه ایجاد میکنند:
. . .
new google.maps.Marker({
map: locationMap,
position: results.data.geometry.location
});
. . .
سپس کد زیر را اضافه کنید که اطلاعات طول و عرض جغرافیایی را از نتیجه به دست میآورد و آن را با دو برچسب HTML که در فایل index.php در مرحله 5 ایجاد کردهایم، نمایش میدهد:
. . .
lat = results.data.geometry.location.lat;
lng = results.data.geometry.location.lng;
$scope.address.lat = lat;
$scope.address.lng = lng;
geoCoordLabel = angular.element(document.querySelector('#geocoordinates'));
geoCoordLabel.html("Geo Coordinate: " + lat + "," + lng);
geoAddressLabel = angular.element(document.querySelector('#geoaddress'));
geoAddressLabel.html("Geo Address: " + fullAddress);
$scope.latlng = true;
. . .
در نهایت زیر این خطوط محتوای زیر را اضافه کنید. این کد یک ویوپورت اضافه میکند که مستطیل کران را روی نقشه مشخص میکند:
. . .
if (results.data.geometry.viewport) {
rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 0.5,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: locationMap,
bounds: {
north: results.data.geometry.viewport.northeast.lat,
south: results.data.geometry.viewport.southwest.lat,
east: results.data.geometry.viewport.northeast.lng,
west: results.data.geometry.viewport.southwest.lng
}
});
var googleBounds = new google.maps.LatLngBounds(results.data.geometry.viewport.southwest, results.data.geometry.viewport.northeast);
locationMap.setCenter(new google.maps.LatLng(lat, lng));
locationMap.fitBounds(googleBounds);
}
} else {
errorLabel = angular.element(document.querySelector('#lt'));
errorLabel.html("Place not found.");
$scope.latlng = true;
removeRectangle();
}
}, function errorCallback(results) {
console.log(results);
});
}
. . .
پس از افزودن این محتوا، در این بخش ظاهر فایل ما شبیه زیر خواهد بود:
. . .
// add code for locating the address on Google maps
if (fullAddress!== "") {
$http({
method: 'POST',
url: 'geoimplement.php',
data: {address: fullAddress},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(results) {
if (results.data!== "false") {
removeRectangle();
new google.maps.Marker({
map: locationMap,
position: results.data.geometry.location
});
lat = results.data.geometry.location.lat;
lng = results.data.geometry.location.lng;
$scope.address.lat = lat;
$scope.address.lng = lng;
geoCoordLabel = angular.element(document.querySelector('#geocoordinates'));
geoCoordLabel.html("Geo Coordinate: " + lat + "," + lng);
geoAddressLabel = angular.element(document.querySelector('#geoaddress'));
geoAddressLabel.html("Geo Address: " + fullAddress);
$scope.latlng = true;
if (results.data.geometry.viewport) {
rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 0.5,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: locationMap,
bounds: {
north: results.data.geometry.viewport.northeast.lat,
south: results.data.geometry.viewport.southwest.lat,
east: results.data.geometry.viewport.northeast.lng,
west: results.data.geometry.viewport.southwest.lng
}
});
var googleBounds = new google.maps.LatLngBounds(results.data.geometry.viewport.southwest, results.data.geometry.viewport.northeast);
locationMap.setCenter(new google.maps.LatLng(lat, lng));
locationMap.fitBounds(googleBounds);
}
} else {
errorLabel = angular.element(document.querySelector('#lt'));
errorLabel.html("Place not found.");
$scope.latlng = true;
removeRectangle();
}
}, function errorCallback(results) {
console.log(results);
});
}
. . .
فایل را ذخیره کنید، اما آن را فعلاً همچنان باز نگه دارید. اگر اینک مجدداً به اپلیکیشن در مرورگر وب خود سر بزنید، هیچ تغییر جدیدی در ظاهر یا رفتار آن نمیبینید. بدین ترتیب اگر بخواهید آدرسی را وارد کنید یا بر روی دکمه Generate کلیک کنید، این اپلیکیشن همچنان یک mapcode تولید کرده یا نمایش نمیدهد. دلیل این امر آن است که ما در حال حاضر باید چند فایل را به برنامه خود اضافه کنیم تا کارکرد mapcode بتواند کار کند. در ادامه این تغییرات را اجرا میکنیم و همچنین نگاهی دقیقتر به شیوه تولید این mapcode ها خواهیم داشت.
مرحله 7: درک تولید mapcode
در حالی که همچنان مشغول کار روی فایل createDigitalAddressApp.js هستیم، به بخش قبلی کد که در مرحله قبل اضافه کردیم سر بزنید و کدی را که اطلاعات ارسال شده از طریق فرم را دریافت و آن را به صورت یک mapcode پردازش میکرد پیدا کنید. هر زمان که کاربری دکمه Generate را کلیک کند، کد درون فایل index.php فرم را تحویل میدهد و تابع processForm را فراخوانی میکند که در این جا در فایل createDigitalAddressApp.js تعریف شده است:
. . .
$scope.processForm = function () {
. . .
سپس processForm یک درخواست HTTP POST به فایل generateDigitalAddress.php ایجاد میکند:
. . .
$http({
method: 'POST',
url: 'generateDigitalAddress.php',
data: $scope.address,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
. . .
بنیاد Stichting Mapcode یک API ارائه کرده است که mapcode های همه آدرسهای فیزیکی را به صورت یک سرویس وب رایگان ارائه میکند. برای درک چگونگی فراخوانی این سرویس وب mapcode، فایل createDigitalAddressApp.js را بسته و فایل generateDigitialAddress.php را باز کنید:
nano /var/www/html/digiaddress/generateDigitalAddress.php
در بخش فوقانی فایل کد زیر را میبینید:
<?php
include("db.php");
. . .
خطی که کد include("db.php") در آن قرار دارد به پیاچپی میگوید که همه متن، کد و نشانهگذاریها را از فایل db.php درون فایل generateDigitalAddress.php بخواند. فایل db.php اطلاعات ورود به پایگاه داده مایاسکیوال را که در مرحله 2 ایجاد کردیم، نگهداری میکند و با گنجاندن آن درون generateDigitalAddress.php میتوانید اطلاعات آدرسی را که از طریق فرم تحویل شده است، به پایگاه داده اضافه کنید.
در زیر دستور include چند خط کد هستند که برای به دست آوردن اطلاعات طول و عرض جغرافیایی بر اساس درخواست ارسالی از سوی createDigitalAddressApp.js عمل میکنند:
. . .
$data = json_decode(file_get_contents("php://input"));
$lat = $data->lat;
$long = $data->lng;
. . .
به دنبال دستور زیر در فایل generateDigitalAddress.php بگردید.
. . . // call to mapcode web service . . .
خط کد زیر را در زیر توضیح اضافه کنید. این کد یک فراخوانی به API مربوط به mapcode انجام میدهد و طول و عرض جغرافیایی (lat و lon) را به عنوان پارامتر به آن ارسال میکند:
. . .
// call to mapcode web service
$digitaldata = file_get_contents("https://api.mapcode.com/mapcode/codes/".$lat.",".$long."?include=territory,alphabet&allowLog=true&client=web");
. . .
این وبسرویس یک رشته داده JSON باز میگرداند که به digitaldata اختصاص دارد و دستور زیر این جیسون را دیکُد میکند:
. . . $digitalAddress["status"] = json_decode($digitaldata, TRUE)['local']['territory']." ".json_decode($digitaldata, TRUE)['local']['mapcode']; . . .
این دستور یک mapcode برای موقعیت مورد اشاره از سوی کاربر بازمیگرداند. سپس خطوط زیر این اطلاعات را در پایگاه داده ذخیره میکنند:
. . . $obj = new databaseConnection(); $conn = $obj->dbConnect(); $obj->insertLocation($conn, $digitalAddress["status"],$data->state,$data->zip,$data->street,$data->town,$data->house,$lat,$long); . . .
این کد در مرحله بعد و در خط آخر، mapcode را به تابع فراخواننده باز میگرداند:
. . . echo json_encode($digitalAddress);
این فایل را ذخیره کرده و ببندید، سپس فایل createDigitalAddressApp.js را مجدداً باز کنید:
nano /var/www/html/digiaddress/js/createDigitalAddressApp.js
زمانی که mapcode با موفقیت بازیابی شد، خطوط زیر در فایل createDigitalAddressApp.js آن را در یک کادر گفتوگو به کاربر نشان میدهند:
. . .
digiAddress = response.data.status;
. . .
$('#digitalAddressDialog').modal('show');
. . .
گرچه یک خط جدید به فایل generateDigitalAddress.php اضافه کردهایم؛ اما همچنان هیچ تغییرات کارکردی در هنگام بازدید و تعامل با اپلیکیشن در مرورگر شاهد نیستیم. دلیل این امر آن است که هنوز کلید API گوگل را به فایل geoimplement.php اضافه نکردهایم تا فراخوانی واقعی به API نقشههای گوگل صورت بگیرد.
مرحله 8: فعالسازی فراخوانی به API نقشه گوگل
این اپلیکیشن به API نقشه گوگل برای ترجمه آدرس فیزیکی به مختصات مناسب طول و عرض جغرافیایی نیاز دارد. سپس این مختصات به API مربوط به mapcode ارسال میشوند که از آنها برای تولید mapcode استفاده میکند. در نتیجه اگر اپلیکیشن بتواند با API نقشه گوگل برای تولید مختصات طول و عرض جغرافیایی ارتباط برقرار کند؛ هر گونه تلاش برای تولید mapcode با شکست مواجه خواهد شد.
از مرحله 6 به خاطر داریم که پس از ساخت دادههای address، نتیجه را همراه با یک درخواست HTTP POST به فایل createDigitalAddressApp.js ارسال کردیم.
$http({
method: 'POST',
url: 'geoimplement.php',
data: {address: fullAddress},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(results) {
این بلوک کد دادههای آدرس وارد شده از سوی کاربر را به فایل geoimplement.php میفرستد که شامل کدی است که API نقشه گوگل را فراخوانی میکند. در ادامه این فایل را باز میکنیم:
nano /var/www/html/digiaddress/geoimplement.php
میبینید که این فایل در ابتدا address را که از طریق درخواست POST دریافت کرده است دیکد میکند:
. . .
$data=json_decode(file_get_contents("php://input"));
. . .
سپس فیلد address، دادههای ورودی را به یک تابع geocode ارسال میکند که اطلاعات جغرافیایی را در مورد آدرس بازمیگرداند:
. . . $result = geocode($data->address); . . .
سپس نتیجه به فراخوان کننده بازگردانده میشود:
. . . echo json_encode($result); . . .
تابع geocode در ادامه address را کدگذاری میکند و آن را به همراه کلید اپلیکیشن به API نقشه گوگل میفرستد:
. . .
// url encode the address
$address = urlencode($address);
// google map geocode api url
$url = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=<YOUR KEY>";
. . .
پیش از مطالعه ادامه این راهنما به فایل مربوطه مراجعه کرده و کلید API را در زیر بخش توضیح // google map geocode api url اضافه کنید:
. . .
// google map geocode api url
$url = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=ExampleAPIKeyH2vITfv1eIHbfka9ym634Esw7u";
. . .
پس از ارسال فراخوان به API، پاسخ دیکد میشود و مقدار آن از طریق تابع بازگشت داده میشود:
. . .
// get the json response
$resp_json = file_get_contents($url);
// decode the json
$resp = json_decode($resp_json, true);
if ($resp['status'] == 'OK') {
return $resp['results'][0];
} else {
return false;
}
. . .
این فایل را ذخیره کنید و یک بار دیگر به اپلیکیشن مراجعه نمایید. در فیلد ایالت، مقدار US-NY را وارد کنید و سپس دکمه TAB را بزنید تا فوکوس برنامه به فیلد بعدی منتقل شود. در این لحظه میبینید که خروجی زیر نمایش مییابد:
توجه کنید که مختصات جغرافیایی و آدرس فیزیکی که وارد کردهاید، زیر نقشه ظاهر میشوند. این امر باعث میشود که ظاهر برنامه بسیار گیراتر و تعاملیتر شود.
توجه کنید که وقتی از اختصارات نام مکانها استفاده میکنید، mapcode از استاندارد ISO 3166 استفاده میکند. این بدان معنی است که ممکن است برخی اختصارات بسیار متداول را چنان که انتظار دارید تفسیر نکند. برای نمونه اگر بخواهید یک mapcode برای آدرسی در لوئیزیانا ایجاد کنید و بدین منظور کلمه LA را وارد نمایید، این نقشه به جای لوئیزیانا به شهر لسآنجلس در ایالت کالیفرنیا میرود.
علیرغم بهینهسازیهایی که در مورد روش نمایش مکانها در کد خود ایجاد کردهایم، این اپلیکیشن هنوز نواقصی دارد. مرحله آخری که باید پیش از فراهم ساختن امکان تولید mapcode انجام دهید، این است که فایل db.php را ویرایش کنید تا به اپلیکیشن امکان دسترسی به پایگاه داده خود را بدهید.
مرحله 9: افزودن مشخصات نام کاربری و رمز عبور پایگاه داده و تست کردن تولید mapcode
به خاطر داشته باشید که این اپلیکیشن همه آدرسهایی که در فرم وارد شدهاند را همراه با طول و عرض جغرافیایی و mapcode در پایگاه دادهای که در مرحله 2 ایجاد کردید، ذخیره میکند. این کار از طریق کد درون فایل db.php میسر شده است که اطلاعات رمز عبور پایگاه داده شما را درون خود ذخیره کرده است و به اپلیکیشن امکان دسترسی به جدول locations درون آن را میدهد.
در مرحله آخر برای فعالسازی کارکرد تولید mapcode، فایل db.php را برای ویرایش باز کنید:
nano /var/www/html/digiaddress/db.php
در نزدیکی بخش بالای این فایل خطی را پیدا کنید که با عبارت $pass آغاز میشود. این خط اطلاعات اعتباری ورود مایاسکیوال را در جهت ایجاد مکان دسترسی اپلیکیشن به پایگاه داده ذخیره میکند. عبارت your-password را با رمز عبور کاربر مایاسکیوال root تعویض کنید:
. . . $username = "root"; $pass = "your_password"; . . .
این آخرین تغییری است که در جهت تولید یک mapcode از یک آدرس فیزیکی باید اعمال کنیم. این فایل را ذخیره کرده و ببندید و اپلیکیشن را یک بار دیگر در مرورگر خود رفرش کنید. یک آدرس به انتخاب خود وارد کنید و بر روی دکمه Generate کلیک کنید. خروجی چیزی شبیه زیر خواهد بود:
در این مرحله اپلیکیشن ما کامل شده است و میتوانید آدرس دیجیتالی کوتاهی را برای هر مکان فیزیکی در دنیا بسازید. میتوانید هر آدرسی را که دوست دارید امتحان کنید. آخرین کاری که برای فعال ساختن کارکرد دوم این اپلیکیشن باید انجام دهیم، آن است که با استفاده از mapcode متناظر، یک آدرس را از پایگاه داده دریافت کنیم.
مرحله 10: بازیابی یک آدرس فیزیکی
اینک که میتوانید یک mapcode را از هر آدرس فیزیکی به دست آورید، مرحله نهایی که باید انجام دهید این است که آدرسهای فیزیکی اصلی را که از mapcode گرفته شده بازیابی کنید. برای اجرای این کار ما یک رابط کاربری PHP توسعه دادهایم که در تصویر زیر مشخص است:
کد این رابط کاربری در فایل findaddress.php قرار دارد. از آنجا که این UI درون همین فایل تعریف شده، شباهت زیادی به آن رابط کاربری دارد که در مرحله 4 بررسی کردیم. گرچه در مورد همه جزییات چگونگی عملکرد آن دقیق نشدیم؛ با این حال در این بخش این سه فایل را برای توصیف کلی چگونگی عملکردشان بررسی میکنیم.
برای فعالسازی کارکرد بازیابی آدرس باید کلید API گوگل خود را به فایل findaddress.php اضافه کنید. بنابراین فایل را در ویرایشگر ترجیحی خود باز کنید:
nano /var/www/html/digiaddress/findaddress.php
در نزدیکیهای بخش انتهایی فایل خطی را که با عبارت <script async defer src= آغاز میشود پیدا کنید. این خط به صورت زیر است:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>"></script>
عبارت <YOUR KEY> را همانند مرحله قبل با کلید API گوگل خود جایگزین کنید و سپس فایل را ذخیره کنید. پیش از بستن فایل، نگاهی دقیقتر به چگونگی عملکرد کلی این فایل خواهیم داشت.
زمانی که کاربر با فعالسازی رویداد submit، فرم را تحویل میدهد، یک شنونده رویداد تابع fetchadd را فراخوانی میکند:
. . . <form ng-submit="fetchadd()" class="custom-form"> . . .
تابع fetchadd آدرس دیجیتال را به همراهی درخواست HHTP POST به فایل fetchaddress.php میفرستد:
. . .
$http({
method: 'POST',
url: 'fetchaddress.php',
data: {digiaddress: $scope.digiaddress}
}).then(function(response){
. . .
اگر POST موفقیتآمیز باشد؛ این تابع یک پاسخ JSON باز میگرداند. خط زیر این پاسخ را تجزیه میکند:
. . . var jsonlatlng = JSON.parse(response.data.latlng); . . .
خطوط بعدی نشانگر نقشه را تنظیم میکنند:
. . .
marker = new google.maps.Marker({
position: new google.maps.LatLng(jsonlatlng.latitude, jsonlatlng.longitude),
map: locationMap
});
. . .
و خطوط زیر مختصات جغرافیایی آدرس فیزیکی را نمایش میدهند:
. . .
geoCoordLabel = angular.element(document.querySelector('#geocoordinates'));
geoCoordLabel.html("Geo Coordinate: "+ jsonlatlng.latitude +","+ jsonlatlng.longitude);
geoAddressLabel = angular.element(document.querySelector('#geoaddress'));
geoAddressLabel.html("Geo Address: " + jsonlatlng.house +","+ jsonlatlng.town +","+ jsonlatlng.street +","+ jsonlatlng.state + " " + jsonlatlng.zip);
. . .
اینک در مرورگر خود با وارد کردن آدرس زیر به اپلیکیشن مراجعه کنید:
http://your_server_ip/digiaddress/findaddress.php
با وارد کردن mapcode که قبلاً به دست آوردهاید، برنامه را امتحان کنید. تصویر زیر یک چنین خروجی را نشان میدهد:
بدین ترتیب کار نوشتن اپلیکیشنمان به پایان رسیده است. اینک میتوانید یک mapcode منحصربهفرد برای هر موقعیت در دنیا ایجاد کنید و سپس از mapcode برای بازیابی آدرس فیزیکی آن مکان استفاده کنید.
نتیجهگیری
در این آموزش از API نقشه گوگل برای یافتن یک موقعیت جغرافیایی و یافتن اطلاعات طول و عرض آن استفاده کردیم. این اطلاعات برای تولید یک آدرس دیجیتال و منحصربهفرد با استفاده از API ارائه شده از سوی mapcode مورد استفاده قرار گرفت. موارد کاربرد عملی زیادی برای mapcode ها وجود دارند که از ارائه خدمت اضطراری تا پیمایشهای باستانشناسی را شامل میشوند. بنیاد Stichting Mapcode چند مورد از این کاربردها را به صورت فهرستوار مشخص ساخته است که برای مطالعه بیشتر میتوانید به صفحه مربوطه مراجعه کنید.
اگر این نوشته مورد توجه شما قرار گرفته است، احتمالاً به موارد زیر نیز علاقهمند خواهید بود:
- مجموعه آموزش های آموزش های سیستم اطلاعات جغرافیایی (GIS)
- آموزش مقدماتی AngularJS برای ساخت اپلیکیشن های تک صفحه ای
- ۱۰ کتابخانه و فریمورک جاوا اسکریپت که باید آنها را بشناسید
- آموزش سیستم اطلاعات جغرافیایی در علوم محیطی و جغرافیا
- طراحی و برنامه نویسی وب
==
