دسترسی به موقعیت جغرافیایی در React Native و Expo — راهنمای کاربردی

موقعیت‌های جغرافیایی به صورت یک API ارائه شده‌اند که متدهای مختلفی برای استفاده در یک وب اپلیکیشن دارند. به طور مشابه، React Native از این API بهره می‌گیرد و در آن به صورت polyfill ارائه شده است. موقعیت جغرافیایی قابلیتی ضروری برای اپلیکیشن‌های موبایل محسوب می‌شود. برخی از اپلیکیشن‌های مشهور موبایل که برای اغلب کارکردهای خود از آن استفاده می‌کنند، شامل گوگل مپس، اوبر و... هستند. در این مقاله، با دو روش مختلف برای یکپارچه‌سازی API مختصات جغرافیایی در یک اپلیکیشن React Native آشنا می‌شویم. این کار با استفاده از Expo و همچنین از طریق react-native-cli اجرا خواهد شد. همچنین با روش درخواست مجوز‌های اپلیکیشن آشنا می‌شویم.

در همین راستا قصد داریم یک قابلیت آنی را پیاده‌سازی کنیم که در این نوع اپلیکیشن‌ها به صورت متداول استفاده می‌شود و آن درخواست «مجوز‌های کاربر» (USER Permissions) است. درخواست مجوز در react-native-cli ممکن است کمی پیچیده باشد، اما پس از خواندن این مقاله مطمئناً پیاده‌سازی آن برای شما آسان‌تر خواهد بود.

آغاز کار با Expo

ما در این مقاله از expo-cli استفاده می‌کنیم. با اجرای دستورهای زیر می‌توانید یک پروژه Expo را پیکربندی کرده و راه‌اندازی کنید.

npm install -g expo-cli
expo-cli init find-me
# select blank template & traverse into a newly created directory
npm run ios
# for Window users، run
npm run android

در این مرحله با صفحه خوشامدگویی مواجه می‌شوید. ما کار خود را از همین جا آغاز می‌کنیم و ابتدا فایل App.js را ویرایش می‌کنیم.

یک فایل جدید برای کامپوننت FindMe در مسیر src -> screens -> FindMe -> index.js ایجاد می‌کنیم. درون این فایل صرفاً یک متن را نمایش خواهیم داد.

بدین ترتیب اپلیکیشن ما اکنون این‌گونه به نظر می‌رسد:

دسترسی به API موقعیت جغرافیایی

API مربوط به Geolocation به صورت یک شیء سراسری به نام navigator در React Native حضور دارد و این وضعیت مشابه وب است. این API از طریق navigator.geolocation در کد منبع ما قابل دسترسی است و نیازی به ایمپورت کردن آن وجود ندارد.

فیلم آموزش مقدماتی ری اکت نیتیو – طراحی نرم افزارهای اندروید و iOS در React Native در فرادرس

کلیک کنید

ما در این مقاله با توجه به مقاصد آموزشی خود، از متد getCurrentPosition از API مربوط به Geolocation استفاده می‌کنیم. این متد به اپلیکیشن موبایل امکان می‌دهد که مکان کاربر را درخواست کند و سه پارامتر به صورت callback موفقیت، callback شکست و یک شیء پیکربندی نیز می‌پذیرد.

نخستین callback یک آرگومان position دارد که شیئی با مشخصه‌های زیر است:

1{
2  "timestamp": 1533729980953.91
3  "coords": {
4    "accuracy": 5,
5    "altitude": 0,
6    "altitudeAccuracy": -1,
7    "heading": -1,
8    "latitude": 37.785834,
9    "longitude": -122.406417,
10    "speed": -1
11  }
12}

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

کار خود را با ایمپورت کردن TouchableOpcaity آغاز می‌کنیم. این یک پوشش است که به طور صحیحی به لمس‌های کاربر پاسخ می‌دهد. در یک اپلیکیشن موبایل می‌توان از این موارد بهره‌برداری کرد. آن را می‌توان مانند یک دکمه در وب اپلیکیشن تصور کرد. این پوشش اخیراً ایمپورت شده یک prop به نام onPress می‌پذیرد که از آن برای فراخوانی تابعی که مانند مقدار تعریف شده استفاده خواهد شد. در این مثال نام آن findCurrentLocation است.

تابع findCurrentLocation منطق مربوط به واکشی مکان کاربر را نگهداری می‌کند. همچنین از حالت محلی برای نمایش مختصات دریافتی از شیء position استفاده می‌کنیم. متن Where Am I اکنون قابل کلیک کردن است.

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

استفاده از Expo Permissions

در زمان ارسال درخواست برای دریافت اطلاعات یک کاربر چه مکان باشد و چه هر اطلاعات حساس دیگر روی دستگاه، شما به عنوان توسعه‌دهنده موظف هستید ابتدا درخواست مجوز‌ بکنید. این فرایند چه در زمان توسعه اپلیکیشن و چه در زمان استفاده از اپلیکیشن یک بار رخ می‌دهد. اغلب دسترسی‌ها زمانی درخواست می‌شوند که کاربر اپلیکیشن را برای اولین بار اجرا می‌کند.

فیلم آموزش ساخت پروژه با فریم ورک React Native (رایگان) در فرادرس

کلیک کنید

Expo همه API-های دسترسی که برای این اپلیکیشن دمو یا هر اپلیکیشن دیگری که با Expo ساخته می‌شود را یکپارچه‌سازی کرده است. این API متدهای مختلفی برای انواع دستگاه‌ها که ممکن است نیاز به درخواست مجوز‌ داشته باشند را شامل می‌شود. این مجوز دسترسی‌ها می‌توانند شامل مکان دوربین، ضبط صدا، مخاطبین، گالری تصاویر، تقویم، یادآوری‌ها (فقط iOS) و اعلان‌ها باشد. ما قصد داریم از Location استفاده کنیم.

در این مرحله ما «حالت» (State) خود را کمی تغییر می‌دهیم. بدین ترتیب دیگر کل شیء geolocation و errorMessage را در صوت بروز خطا نگهداری نخواهد کرد. findCurrentLocation بدون تغییر باقی می‌ماند. در واقع ما از آن استفاده نخواهیم کرد. Expo متدی دارد که این کار را برای ما انجام می‌دهد. این متد getCurrentPositionAsync نام دارد. این متد صرفاً مکان کاربر و مشخصه‌های دیگر ارائه شد از سوی getCurrentPosition را در صورتی که مجوز‌ اعطا شده باشد، واکشی می‌کند. در متد رندر prop به نام onPress یک متد دیگر را فراخوانی می‌کند که findCurrentLocationAsync نام دارد و منطق مربوط به درخواست مجوز‌ و واکشی داده‌های مکان را پس از این که دسترسی کاربر اعطا شد اجرا می‌کند. اگر مجوز‌ ارائه نشده باشد، پیام خطایی صادر می‌شود و در غیر این صورت مکان به‌روزرسانی خواهد شد.

آخرین گام مربوط به کاربران اندروید است. فایل app.json را باز کنید و به بخش permissions بروید.

اگر دکمه Allow فشرده شود، نتیجه زیر عاید می‌شود:

توجه کنید که در حالت توسعه و اجرا کردن اپلیکیشن در شبیه‌ساز، دسترسی‌ها تنها یک بار تقاضا می‌شوند. برای اجرای مجدد آن، باید اپلیکیشن را از شبیه‌ساز حذف کرده و دستور شروع اپلیکیشن Expo را مجدداً بدهید.

کد کامل این اپلیکیشن را از این آدرس (+) دانلود کنید.

استفاده از react-native-cli

استفاده از react-native-cli به این معنی است که باید مجوز‌ها را خودتان تنظیم کنید، با این حال، منطق دریافت مکان کاربر همان خواهد بود.

npm install -g react-native-cli
react-native init findCoordsApp

هیچ قالبی در react-native-cli وجود ندارد از این رو زمانی که دایرکتوری ایجاد شود، آن را بررسی کرده و دستور npm start را اجرا کنید تا ببینید آیا همه چیز به درستی نصب شده است یا نه. زمانی که این پروژه را در یک IDE یا ویرایشگر کد باز کنید، نخستین چیزی که متوجه خواهید شد این است که تغییرهای زیادی در ساختار فایل‌ها و پوشه‌ها وجود دارد. Expo در مقایسه با این روش ساختار پروژه کوچک‌تری دارد. پوشه‌های مختلف build مانند /android و /ios برای هر پلتفرم وجود دارند. همچنین می‌توانید از flow استفاده کنید که مشابه TypeScript است و از سوی فیسبوک به صورت متن‌باز عرضه شده است.

ما صرفاً فایل App.js را با درج کد زیر اصلاح می‌کنیم:

توجه داشته باشید که findCoordinates به روشی مانند اپلیکیشن Expo عمل می‌کند و ضمناً کد موجود در تابع ()render دقیقاً همان است. گام بعدی ما تنظیم مجوز‌ها است.

موقعیت جغرافیایی در iOS به صورت پیش‌فرض در زمان ایجاد پروژه با استفاده از react-native-cli فعال شده است. برای استفاده از آن کافی است یک کلید را در info.plist قرار دهید که درون دایرکتوری ios/findCoordsApp قرار دارد.

برای اندروید باید خط زیر را در فایل android/app/src/AndroidManifest.xml اضافه کنیم:

1<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

اکنون اگر اپلیکیشن را اجرا کنید با صفحه زیر مواجه می‌شوید:

روی متن کلیک کنید تا از شما سؤال شود آیا می‌خواهید به اپلیکیشن دسترسی به مکان بدهید یا نه. ما به منظور نمایش موضوع، از یک شبیه‌ساز اندروید استفاده می‌کنیم، چون قبلاً در بخش Expo دیدیم که روی شبیه‌ساز iOS چگونه عمل می‌کند.

اگر دکمه Allow را بزنید، نتیجه زیر حاصل می‌شود:

کد کامل این اپلیکیشن را در این ریپازیتوری گیت‌هاب (+) ملاحظه کنید. اگر قصد دارید در مورد API موقعیت جغرافیایی در اپلیکیشن‌های ری‌اکت نیتیو بیشتر بدانید به مستندات رسمی (+) مراجعه کنید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش مقدماتی فریمورک React Native
• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• ۶ روش آسان برای سرعت بخشیدن به اپلیکیشنهای React Native
• چگونه با React Native اپلیکیشن اندرویدی بنویسیم؟ — به زبان ساده

==