چند وقت پیش، داشتم روی یه اپ که با 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، عدد ۳۰۰۰ باید تایپ بشه.
چند وقت پیش، داشتم روی یه اپ که با 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، عدد ۳۰۰۰ باید تایپ بشه.
پیش نیازهای یادگیری جاوا اسکریپت