دسترسی به وب اپ ری‌اکت روی لوکال هاست با اندروید

  1. خانه
  2. کامپیوتر
  3. برنامه نویسی وب
  4. دسترسی به وب اپ ری‌اکت روی لوکال هاست با اندروید
دسترسی به لوکال هاست روی اندروید

چند وقت پیش، داشتم روی یه اپ که با React.JS  نوشته شده بود کار می‌کردم و برای تست یک ویژگی، احتیاج داشتم که اپ رو (که روی لوکال هاست بود) روی موبایل امتحان کنم و ببینم که آیا همه چیز درست کار میکنه یا نه؟!

شروع کردم به سرچ کردن تا راهی برای دسترسی به لوکال هاست رو موبایل پیدا کنم. راه هایی وجود داشت که براساس اونها، باید موبایل و لپتاپ هر دو به یک شبکه وصل میشدن، بعد باید IPv4 لپتاپ رو پیدا می‌کردم و روی مرورگر موبایل به اون آدرس IP و پورت مشخص شده می رفتم تا بتونم بهش دسترسی پیدا کنم.

اما به هر دلیلی،‌ این راه برای من کار نکرد و نمی‌تونستم وب اپی که نوشته بودم رو روی موبایلم تست کنم. تا اینکه یکی از همکارا یه راه خیلی خوب بهم نشون داد و بوم! مشکل حل شد!

استفاده از این راه حل خیلی ساده‌ست و از یه ویژگی در مرورگر کروم به اسم port forwarding استفاده می‌کنیم.

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

۱. اول باید Developer Options رو توی موبایل اندرویدی‌تون فعال کنین.

معمولا این کار به این شکله که باید وارد بخش About Phone بشید و از اونجا، Build Number رو پیدا کنین و چند باری روش کلیک کنین تا Developer Options فعال بشه.

دسترسی به لوکال هاست روی اندروید

البته ممکنه توی گوشی های مختلف،‌ فعال کردن این ویژگی یه مقدار متفاوت باشه. مثلا برای موبایل من (برند شیائومی) باید روی MIUI Version کلیک میشد.

در هر صورت، راحت ترین راه اینه که مدل گوشی‌تون رو با عبارت Developer Options گوگل کنید تا خیلی سریع به جواب برسین.

۲. بعد از اینکه Developer Options فعال شد، باید داخلش دنبال USB Debugging بگردین و فعالش کنین.

به طور خیلی خلاصه (و البته غیر دقیق!)، USB Debugging امکان رد و بدل کردن دیتا و ایجاد تغییرات مهم توی موبایل از طریق کامپیوتر رو در اختیارمون میذاره.

درموردش اینجا بیشتر می‌تونید بخونید.

دسترسی به لوکال هاست روی اندروید

۳. بعد از انجام دادن قدم های ۱ و ۲، وقتشه که توی کامپیوترتون، مرورگر کروم رو باز کنین و وارد این آدرس بشین: chrome://inspect#devices

۴. وقتی که اون آدرس رو باز کردین،‌ با یه صفحه نسبتا عجیب روبرو میشین که بهتون امکان Port Forwarding رو میده. خود کروم این ویژگی رو به این شکل تعریف می‌کنه:

Port forwarding works by creating a listening TCP port on your Android device that maps to a TCP port on your development machine. Traffic between the ports travel through the USB connection between your Android device and development machine, so the connection doesn’t depend on your network configuration.

ترجمه این متن به شکل کاملا درست و دقیق کار سختیه اما به طور خلاصه، منظورشون اینه که یه پورت TCP روی اندروید باز میشه که به یک پورت TCP دیگه روی کامپیوتر وصل میشه و دیتایی که روی لوکال هاست وجود دارد از طریق این دوتا پورت (و البته کابل USB) بین دستگاه ها منتقل میشه.

دسترسی به لوکال هاست روی اندروید

۵. توی این صفحه،‌ روی دکمه Port forwarding کلیک کنین و آدرس IP و پورتی که وب اپ شما از طریق اون قابل دسترسیه رو وارد کنین.

مثلا اگه اپ روی localhost:3000 باز میشه، توی فیلد IP address and port، دقیقا همین آدرس رو تایپ کنین (localhost:3000) و توی فیلد مربوط به Port، عدد ۳۰۰۰ باید تایپ بشه.

بعدش دکمه Done رو بزنین!

دسترسی به لوکال هاست روی اندروید

۶. توی همین صفحه، چک کنین که حتما گزینه Discover USB devices فعال باشه.

۷. حالا وقتشه که موبایل رو با کابل USB به کامپیوتر وصل کنیم. وقتی اینکار انجام شد، احتمالا یه پیامی میاد که ازتون می‌پرسه آیا اجازه می‌دین USB Debugging روی موبایل‌تون فعال بشه یا نه؟

توجه کنین که لوکال هاست فقط در صورتی روی موبایل قابل دسترسه که شما اجازه فعال شدن USB Debugging رو داده باشین!

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

۹. اگه همه چی اوکی بود و کروم، موبایل‌تون رو شناخت، وقتشه که مرورگر رو توی موبایلتون باز کنین و وارد آدرسی بشین که اپ از طریق اون قابل دسترسیه (مثلا localhost:3000)

به این ترتیب، خیلی راحت و ساده می‌تونید اپ ری‌اکت رو بر روی موبایل اندرویدی تست و بررسی کنین.

اگه موبایلم شناخته نشد چیکار کنم؟

اگه به هر دلیلی اطلاعات گوشی توی صفحه chrome://inspect#devices نشون داده نشد، اول از همه چک کنین که حتما USB Debugging توی موبایل فعال باشه، که اگه نباشه تمام قدم های دیگه تبدیل به باد هوا میشه!

اما اگه فعال بود،‌ این کارها رو انجام بدین:

  1. یک بار کابل USB رو بیرون بکشین و دوباره وصلش کنین. این قضیه مثل ریستارت عمل میکنه که دوای درد ۹۰ درصد مشکلاته!
  2. چک کنین که اصلا کابل سالمه یا نه. سعی کنین گوشی رو باهاش شارژ کنین یا اینکه یه سری فایل از کامپیوتر به گوشی انتقال بدین. اگر نشد،‌ احتمالا کابل مشکل داره و باید یکی دیگه رو امتحان کنین.
  3. اگه از سیستم عامل ویندوز استفاده می‌کنین، یک بار به شکل دستی درایور USB موبایل‌تون رو بر روی کامپیوتر نصب کنین. این لینک احتمالا می‌تونه کمک‌تون کنه.
  4. بعضی از گوشی های سامسونگ (و شاید برندهای دیگه) یکمی توی این داستان به مشکل برمیخورن و باید یه سری کار اضافه براشون انجام بدین تا به نتیجه‌ای که میخواین برسین. این صفحه در استک اورفلو اطلاعات خوبی در مورد این شرایط در اختیارتون میذاره.
  5. توی موبایل‌تون وارد Developer Options بشین و گزینه Revoke USB Debugging Authorizations رو انتخاب کنین و تایید رو بزنین تا تمام دسترسی های قبلی از بین بره و تنظیمات مربوط به USB Debugging ریست بشه. حالا دوباره امتحان کنین!

اگر هم با تمام راه های بالا نتونستین به نتیجه برسین، وقتشه که دست به دامن علامه گوگل بشین و یه سرچ مفصل بکنین :))

مطالب مشابه

پاسخی بگذارید

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

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.
You need to agree with the terms to proceed

فهرست