آموزش ساخت اپلیکیشن جستجو بر روی نقشه نشان - iOS

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

چنانچه هنوز با سرویس‌های و api نقشه نشان آشنا نیستید می‌توانید ابتدا مطلب سرویس‌های نقشه نشان برای برنامه‌نویسان را مطالعه کنید. همچنین در این صفحه به شیوه راه‌اندازی iOS SDK پرداخته‌ایم.


قسمت اول: نقشه

در ابتدا لازم است تا با توجه به دستورالعمل مقاله قبل یک صفحه نقشه ساده را ایجاد کنید. برای توضیحات بیشتر می‌توانید مطلب قبلی را مطالعه کنید. اما به صورت خلاصه و کلی کدهای نمایش نقشه را در زیر مشاهده می‌کنید.

https://gist.github.com/MMadadi/f8e685283aee83132796a12811b7e099

قسمت دوم: Storyboard

جهت انجام جستجو لازم است تا ۳ عنصر را از طریق Interface Builder نرم افزار xcode به صفحه اصلی خود اضافه کنید.
در ابتدا برای جستجو نیاز به یک TextField دارید تا کاربر از طریق آن کلمه دلخواه خود جهت جستجو را وارد کند. همچنین می‌توان یک ImageView با نشان ضربدر را جهت بسته شدن کیبورد به دلخواه کاربر در مقابل TextField قرار داد.
پس از آن به یک TableView نیاز دارید تا بتوانید نتایج جستجو را در آن نمایش دهید. توضیحات و جزئیات مربوط به راه اندازی TableView از موضوع این مقاله خارج است اما شما می‌توانید با مطالعه مطلب Create a Table View از سایت developer.apple.com و همچنین بررسی کدهای این اپلیکیشن به درک خوبی درباره TableView ها برسید. اما این تازه شروع کار است. دست از پیشرفت برندارید!

قسمت سوم: متغیرها

پس از انجام دو قسمت اول آماده ورود به کدنویسی هستید. تعریف متغیرهای مورد نیاز اولین کاری است که باید انجام دهید. در زیر متغیرهای تعریف شده را می‌بینید.

https://gist.github.com/MMadadi/eb4a99f139a7b0d7bcc26352adf87e39

با متغیر map از نوع NTMapView در مقاله قبل آشنا شدید؛ اما متغیرهای markerLayer و marker و markerId و animSt همگی مربوط به تابع addMarker هستند که در ادامه با آن آشنا خواهید شد.
۳ متغیر finalTitleResult و finalAddressResult و finalLocationResult مربوط به ذخیره داده‌های دریافتی از SDK نشان می‌باشد. همچنین ۲ متغیر table و txtSearch نیز جهت دستیابی به دو عنصر TextField و TableView - که در قسمت قبل ایجاد کردید - می‌باشند که از نوع IBOutlet@ تعریف شده‌اند.

قسمت چهارم: تعریف تابع neshanSearchAPI و ارسال درخواست

قبل از اینکه به تعریف تابع neshanSearchAPI و ارسال درخواست‌ها بپردازید لازم است تا به وسیله تابعی از نوع IBAction@ فیلد ورودی خود را به تغییر متن درون آن حساس کنید تا هرگاه کاربر کاراکتر درون TextField را تغییر داد تابع neshanSearchAPI فراخوانی شده و نتایج جستجو در TableView نمایان شود.

https://gist.github.com/MMadadi/1529b97e018fb56a149b6e580c585796

۳ نکته در تعریف تابع فوق وجود دارد:

  1. باید تمام مقادیری که از قبل در متغیرهای خود ذخیره کردید را پاک کنید تا در نمایش نتایج جستجو دچار مشکل نشوید
  2. هرگاه داخل TextField هیچ متنی نبود لزومی به فراخوانی تابع neshanSearchAPI و نمایش TableView نیست.
  3. برای بهینه سازی جستجو لازم است تا درخواست‌ها با تأخیری کوتاه ارسال شوند چرا که در غیر این صورت مقدار زیادی درخواست بیهوده ارسال می‌شود که نتیجه آن به کاربر نمایش داده نمی‌شود. مثلا فرض کنید کاربری کلمه «پلتفرم نشان» را جستجو می‌کند. در صورتی که از تاخیر استفاده نکرده باشیم به ازای هر حرفی که کاربر وارد می‌کند یک درخواست به سرور ارسال می‌شود در حالی که نیازی به ارسال درخواست‌های اضافه نخواهید داشت.

برای ارسال درخواست‌ها به SDK لازم است تا فرمت پاسخی که از وب‌سرویس جستجو دریافت می‌کنید را بررسی کنید. نمونه یک پاسخ وب‌سرویس در زیر قابل مشاهده است اما جزییات بیشتر را می‌توانید از طریق سایت توسعه دهندگان نشان بخش وب‌سرویس‌ها و از قسمت وب‌سرویس جستجو دریافت نمایید.

https://gist.github.com/MMadadi/f87fd21e393f6953fe66ed58f9e1a3fe

حال پیش‌نیازهای تعریف تابع neshanSearchAPI را گذراندید. این تابع در واقع دو وظیفه اصلی بر عهده دارد. ارسال درخواست به وب‌سرویس جستجو و دریافت و تجزیه پاسخ. در زیر این تابع را مشاهده می‌کنید.

https://gist.github.com/MMadadi/08c5d6e7387e9d4c5dfdf4fb12e483ec

دقت نمایید که برای ارسال درخواست‌ها از پکیج AFNetworking استفاده شده است و شما نیز برای استفاده از این پکیج می‌بایست ابتدا آن را به فایل Podfile خود اضافه کنید.
همانطور که در قطعه کد بالا مشاهده می‌کنید تابع در بخش اول یک درخواست برای ارسال به SDK آماده کرده و آن را همراه با API KEY شما به آدرس مربوطه ارسال می‌کند.
در بخش دوم تابع نیز شاهد هستید که پاسخ دریافتی از سرور را تجزیه و تحلیل می‌کند به این صورت که اگر پاسخی برای عبارت جستجو شده وجود نداشت جدول نتایج نمایش داده نمی‌شود اما در صورت وجود جواب ۳ فیلد Title, Address و Location را درون آرایه‌ی از پیش تعریف شده قرار می‌دهد تا در هنگام ایجاد جدول از آن استفاده کنید.

قسمت پنجم: تنظیم TableView نتیجه جستجو

در قسمت آخر نتایج حاصل را در یک جدول به کاربر نمایش دهید تا کاربر با لمس هر خانه جدول به مکان نظر روی نقشه هدایت شود و با استفاده از تابع addMarker که پیش از این تعریف کرده بودید؛ یک پین در آن نقطه قرار گیرد.
توابع مربوط به تنظیمات TableView را در زیر مشاهده می‌کنید.

https://gist.github.com/MMadadi/49e80e6896a015f2a7f8678d44df07f4

در اولین تابع تعداد سطرهای جدول مشخص می‌گردد.
در تابع cellForRowAt مقادیری که هر سطر نمایش می‌دهد را مشخص کنید و در تابع didSelectRowAt می‌بایست عملیات لمس هر سطر تعریف شود.


سورس کد این اپلیکیشن را می‌توانید در گیت‌هاب پلتفرم نشان در این صفحه مشاهده کنید. همچنین توجه داشته باشید استفاده از SDK نقشه نشان برای توسعه اپلیکیشن‌های مبتنی بر نقشه در iOS و Android کاملاً رایگان است. جهت اطلاع از سایر شرایط و آشنایی با شیوه محاسبه قیمت سایر خدمات پلتفرم نقشه نشان می‌توانید مطلب مدیریت هزینه‌ها در پلتفرم نشان را مطالعه کنید.