آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش اجرای React Native App روی موبایل

دوره های مرتبط با این مقاله

اجرای React Native App روی موبایل

همیشه قبل از انتشار نهایی application بهتر است آن را بر روی یک device واقعی آزمایش کنید. این بخش آموزش به مراحل لازم برای اجرای برنامه React Native روی یک device واقعی و آماده سازی آن برای تولید، می پردازد.

اگر برنامه EXPO CLI یا Create React Native را برای راه اندازی پروژه خود استفاده کردید، می توانید پیش نمایش آن را روی یک device با اسکن Code QR با برنامه Expo ببینید. به منظور ساخت و اجرای برنامه خود در روی device، باید eject کنید و پیش نیازهای لازم برنامه نویسی تحت زبان native را از بخش شروع توسعه با React Native نصب کنید.

براساس سیستم عامل توسعه و سیستم عامل هدف، یکی از آموزش های زیر را دنبال کنید:


توجه: ساخت application برای iOS تنها روی Mac امکان پذیر است. می توانید برای ساخت application خود، بخش آموزش شروع توسعه React Native با Expo CLI را دنبال کنید. در آن صورت می توانید application خود را با کمک Expo client app اجرا کنید.


اجرای برنامه های تحت React Native روی iOS

سیستم عامل توسعه: macOS

1. device خود را از طریق USB وصل کنید

device iOS خود را با استفاده از یک کابل USB به Mac متصل کنید. به پوشه ios در پروژه خود بروید، سپس فایل .xcodeproj را باز کنید، یا اگر از CocoaPods استفاده می کنید فایل .xcworkspace را با استفاده از Xcode باز کنید.

اگر اولین باری است که در حال اجرای یک برنامه در device iOS خود هستید، ممکن است لازم باشد device خود را برای توسعه register کنید. منوی Product را از Menubar Xcode باز کنید، سپس به Destination بروید. device خود را از فهرست انتخاب کنید. پس از این Xcode ، device تان را برای توسعه register می کند.

2. تنظیمات مربوط به امضای کد

اگر هنوز یک حساب کاربری ندارید یک Apple developer account بسازید.

در Xcode ، پروژه خود را ازProject Navigator انتخاب کنید، سپس target اصلی خود را انتخاب کنید (باید هم نام پروژه باشد). به Tab "General" بروید. به بخش "Signing" بروید و اطمینان حاصل کنید که حساب شما یا تیم توسعه دهنده در زیر Team Menu انتخاب شده است. همین کار را برای tests target انجام دهید.


اجرای برنامه های تحت React  Native روی iOS

3. application خود را Build و اجرا کنید

اگرهمه چیز به درستی انجام شده باشد، device شما به عنوان build target در نوار ابزار Xcode لیست شده و همچنین در بخش Devices ظاهر می شود(⇧⌘2). اکنون می توانید دکمه Build and run (⌘R) را فشار دهید یا از منوی Product گزینه Run را انتخاب کنید. برنامه شما به زودی بر روی device راه اندازی خواهد شد.


اجرای برنامه های تحت React  Native روی iOS

اگر به مشکلی برخوردید، نگاهی به Documentation Apple برای راه اندازی application روی یک device بیندازید.

اتصال به سرور توسعه

کافی است به همان شبکه Wi-Fi وصل باشید که کامپیوترتان وصل است. device خود را تکان دهید تا Developer menu باز شود، سپس Live Reload را فعال کنید. هر بار که کد جاوا اسکریپت تغییر کند، برنامه شما reload خواهد شد.


Developer Menu در React Native

خطایابی

اگر به مشکل برخوردید، اطمینان حاصل کنید که کامپیوتر و موبایل در یک شبکه قرار دارند و می توانند به یکدیگر متصل شوند. بسیاری از شبکه های Wirless طوری تنظیم شده اند که مانع از دسترسی device ها به سایر device ها در شبکه می شوند. می توانید از Hotspot برای این کار استفاده کنید.

هنگام وصل شدن به سرور توسعه ممکن است صفحه ای قرمز با خطای زیر نمایش داده شود:


Connection to http://localhost:8081/debugger-proxy?role=client timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in RCTWebSocketExecutor.m.

برای رفع این مشکل نکات زیر را بررسی کنید:

1. WiFi

مطمئن شوید لپ تاپ و موبایل به یک شبکه وصل هستند.

2. آدرس IP

مطمئن شوید build script آدرس IP موبایل را درست شناسایی کرده است (برای مثال 10.0.1.123)


اجرای React Native app روی iOS

تب Report navigator را باز کنید، آخرین Build را انتخاب کنید و دنبال xip.io بگردید. آدرس IP که درون application قرار می گیرد باید با آدرس device + دامنه .xip.io یکی باشد (برای مثال 10.0.1.123.xip.io)

3. تنظیمات شبکه/ router

React Native از xip.io (یک wildcard DNS service) برای آدرس دهی به device استفاده می کند، چرا که Apple ATS جلوی URL های به شکل IP، به جای نام دامنه، را می گیرد، و شبکه ی توسعه دهندگان معمولا طوری تنظیم نشده که local hostname را به IP تبدیل کند. بعضی router ها تنظیماتی امنیتی دارند که جلوی resolve به هرچیزی در رنج local IP را می گیرد.

حال با اجرای دستور nslookup چک کنید آیا می توانید آدرس xip.io را resolve کنید:


$ nslookup 10.0.1.123.xip.io

اگر local IP را به شما نداد، یا سرویس xip.io مشکل دارد، یا احتمالا router جلوی آن را میگیرد.

برای اینکه همچنان بتوانید از xip.io پشت router استفاده کنید:


  • موبایل را تنظیم کنید که از Google DNS (8.8.8.8) استفاده کند.
  • تنظیمات امنیتی router را غیرفعال کنید.

ساخت application برای Production

فرضا یک برنامه عالی با استفاده از React Native ساخته اید، و اکنون می خواهید آن را در App Store منتشر کنید. این فرآیند همانند سایر برنامه های iOS است، اما نکاتی را که باید در نظر گرفت.

اگر از Expo استفاده می کنید، راهنمای Expo برای ساختن برنامه های مستقل را بخوانید.

1. فعال سازی App Transport Security

این یک ویژگی امنیتی است که در9 iOS معرفی شد و همه ی HTTP request هایی را که روی HTTPS ارسال نشده اند، رد می کند. این ممکن است باعث block شدن trafic HTTP شود، که این شامل سرور توسعه ی React Native نیز می شود. ATS به طور پیش فرض در پروژه های React Native برای localhost غیرفعال است.

هنگام آماده سازی application برای فاز تولید، باید با حذف entry localhost از دیکشنری NSExceptionDomains در فایل Info.plist در پوشه ی ios/ ، ATS را فعال کنید. همچنین می توانید ATS را از داخل Xcode ، با باز کردن target properties در بخش Info و ویرایش App Transport Security Settings ، فعال کنید.

اگر application تان نیاز دارد به resource HTTP ها در فاز تولید دسترسی داشته باشد، این مطلب را بخوانید.

2.config release scheme

ساخت یک application برای توزیع در App Store نیاز به استفاده از release scheme در Xcode دارد. application های build شده برای Release به طور خودکار Developer menu داخل برنامه را حذف می کنند. بعلاه جاوااسکریپت را روی سیستم bundle می کند و سپس می توانید آن را در application بگذارید و بدون اتصال به کامپیوتر application را تست کنید.

برای تنظیم application برای build شدن با Release scheme، به Product → Scheme → Edit Scheme بروید. Tab Run را از منوی کناری انتخاب کنید، Build Configuration را روی Release بگذارید.


اجرای React Native app روی iOS

نکات حرفه ای

هربار که application را روی یک device فیزیکی اجرا می کنید، bundle ساخته می شود، حتی وقتی در فاز debug هستید. برای جلوگیری از این ساخت bundle هنگام debug ، script زیر را به Xcode Build Phase Bundle React Native code and images ، اضافه کنید:


if [ "$ {CONFIGURATION}" == "Debug" ]; then
  export SKIP_BUNDLING=true
 fi

3. Build application برای release

حال می توانید application تان را برای release ، Build کنید. برای اینکار ⌘B را بزنید یا Product → Build را از منو انتخاب کنید. حال می توانید application را برای Beta Test توزیع کنید و آن را در App Store بگذارید.

همچنین می توانید از React Native CLI برای انجام این کار با استفاده از گزینه ی –configuration با مقدار Release استفاده کنید (مثلا react-native run-ios --configuration Release).


اجرای یک React Native Application روی موبایل android

سیستم عامل توسعه: Linux

1. USB Debugging را فعال کنید

اغلب device های android تنها می توانند application هایی را که از google play دانلود شده اند نصب و اجرا کنند. می توانید با فعال کردن USB Debugging روی موبایل این محدودیت را رفع کنید.

برای فعال کردن USB Debugging روی device، ابتدا باید "Developer options" را فعال کنید. به Settings → About phone بروید و سپس روی Build Number هفت بار ضربه بزنید. سپس به Settings → Developer options بروید و "USB debugging" را فعال کنید.

2. device خود را از طریق USB وصل کنید

device android خود را با استفاده از یک کابل USB به کامپیوتر متصل کنید.

سپس کد سازنده را با استفاده از دستور lsusb چک کنید (در Mac باید ابتدا lsusb را نصب کنید ). خروجی باید چیزی شبیه زیر باشد:


$ lsusb
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

این خط ها device هایی که با USB به سیستم شما وصل هستند را، نشان می دهد . اگر خطی که مربوط به موبایلتان هست را پیدا نمی کنید یک بار آن را قطع و دوباره وصل کنید.


$ lsusb
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

پس از قطع کردن موبایل از سیستم، خطی که مدل device را نشان می دهد ناپدید می شود.( در مثال ما "Motorola PCS"). این خطی است که برای ما اهمیت دارد.


Bus 001 Device 003: ID 22b8:2e76 Motorola PCS

از خط بالا 4 عدد اول را از ID device می خواهیم: 22b8:2e76

در این مثال، منظور 22b8 است. این شناسه ی Motorola است.

آن را در udev rule ها قرار دهید:


echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

مطمئن شوید 22b8 را با شناسه خودتان جایگزین کرده اید.

حال با اجرای دستور adb devices چک کنید که device به درستی به ADB وصل است.


$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

دیدن device در ستون راست به این معناست که device وصل است. باید فقط در لحظه یک device وصل شده باشد.

3. application خود اجرا کنید

دستور زیر را در ترمینال اجرا کنید تا application روی device تان نصب و اجرا شود.


$ react-native run-android

اگر خطای "bridge configuration isn't available" گرفتید، این بخش را ببینید.

راهنمایی: می توانید از React Native CLI برای تولید و اجرای build Release استفاده کنید. (مثلا react-native run-android --variant=release)

اتصال به سرور توسعه

راه های مختلفی برای این کار وجود دارد، بسته به این که کابل USB استفاده کنید یا از طریق WiFi این کار را انجام دهید.

1. روش اول: استفاده از adb reverse (توصیه می شود)

اگر روی موبایل نسخه اندروید 5.0 (Lollipop) یا جدید تر اجرا میشود، USB debugging فعال است، و موبایل با USB به سیستم وصل است، می توانید از این روش استفاده کنید.

دستور زیر را در ترمینال اجرا کنید:


$ adb -s < device name> reverse tcp:8081 tcp:8081

برای یافتن نام device، دستور زیر را اجرا کنید:


$ adb devices

می توانید از Developer menu، Live reloading را فعال کنید. application تان با تغییر کد جاوااسکریپت reload می شود.

2.روش دوم: اتصال به WiFi

می توانید از طریق WiFi به سرور توسعه تان وصل شوید. ابتدا باید application را با USB روی device نصب کنید. اما پس از آن می توانید با دنبال کردن دستورالعمل های زیر از طریق Wifi، debug کنید. IP سیستم که روی آن توسعه انجام می دهید را لازم دارید.

ترمینال را باز کنید و /sbin/ifconfig را تایپ کنید تا آدرس IP را بیابید.

  1. مطمئن شوید لپ تاپ و موبایل به یک شبکه وصل هستند
  2. application React Nativeتان را روی device باز کنید.
  3. یک صفحه قرمز با خطا می بینید. مشکلی نیست. ادامه دهید.
  4. Developer menu داخل application را باز کنید.
  5. به Dev Settings → Debug server host & port for device بروید.
  6. آدرس IP سیستم تان و port مربوط به server را بزنید(مثلا 10.0.1.1:8081)
  7. به Developer menu برگردید و Reload JS را بزنید.

حال می توانید Live Reload را فعال کنید. هر بار که کد جاوا اسکریپت تغییر کند، برنامه شما reload خواهد شد.

ساخت application برای production

فرضا یک برنامه عالی با استفاده از React Native ساخته اید، و اکنون می خواهید آن را در App Store منتشر کنید. این فرآیند همانند سایر برنامه های iOS است، اما نکاتی را که باید در نظر گرفت. راهنمای ایجاد یک signed APK را برای مطالعه بیشتر ببینید.


اجرای یک React Native Application روی موبایل android

سیستم عامل توسعه: Mac

1. USB Debugging را فعال کنید

اغلب device های android تنها می توانند application هایی را که از google play دانلود شده اند نصب و اجرا کنند. می توانید با فعال کردن USB Debugging روی موبایل این محدودیت را رفع کنید.

برای فعال کردن USB Debugging روی device، ابتدا باید "Developer options" را فعال کنید. به Settings → About phone بروید و سپس روی Build Number هفت بار ضربه بزنید. سپس به Settings → Developer options بروید و "USB debugging" را فعال کنید.

2. device خود را از طریق USB وصل کنید

device android خود را با استفاده از یک کابل USB به کامپیوتر متصل کنید. با اجرای دستور زیر چک کنید که device به درستی به ADB (Android Debug Bridge) وصل شده:


$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

دیدن device در ستون راست به این معناست که device به درستی وصل شده. فقط باید در لحظه یک device وصل شده داشته باشید.

3. application خود اجرا کنید

دستور زیر را در ترمینال اجرا کنید تا application روی device تان نصب و اجرا شود.


$ react-native run-android

اگر خطای "bridge configuration isn't available" گرفتید، این بخش را ببینید.

راهنمایی

می توانید از React Native CLI برای تولید و اجرای Build Release استفاده کنید. (مثلا react-native run-android --variant=release)

اتصال به سرور توسعه

راه های مختلفی برای این کار وجود دارد، بسته به این که کابل USB استفاده کنید یا از طریق WiFi این کار را انجام دهید.

1. روش اول: استفاده از adb reverse (توصیه می شود)

اگر روی device تان نسخه اندروید 5.0 (Lollipop) یا جدید تر اجرا میشود، USB debugging فعال است، و با موبایل با USB به سیستم وصل است، می توانید از این روش استفاده کنید.

دستور زیر را در ترمینال اجرا کنید:


$ adb -s < device name> reverse tcp:8081 tcp:8081

برای یافتن نام device، دستور زیر را اجرا کنید:


$ adb devices

می توانید از Developer menu، Live reloading را فعال کنید. application تان با تغییر کد جاوااسکریپت reload می شود.

2. روش دوم: اتصال به WiFi

می توانید از طریق WiFi یه سرور توسعه تان وصل شوید. ابتدا باید application را با USB روی device نصب کنید. اما پس از آن می توانید با دنبال کردن دستورالعمل های زیر از طریق WiFi، debugکنید. آدرس IP سیستمی که برای توسعه استفاده می کنید را لازم دارید.

می توانید از مسیر System Preferences → Network آدرس IP را بیابید.

  1. مطمئن شوید لپ تاپ و موبایل به یک شبکه وصل هستند
  2. application React Native تان را روی device باز کنید.
  3. یک صفحه قرمز با خطا می بینید. مشکلی نیست. ادامه دهید.
  4. Developer menu داخل application را باز کنید.
  5. به Dev Settings → Debug server host & port for device بروید.
  6. آدرس IP سیستم تان و port مربوط به server را بزنید(مثلا 10.0.1.1:8081)
  7. به Developer menu برگردید و Reload JS را بزنید.

حال می توانید Live Reload را فعال کنید. هر بار که کد جاوا اسکریپت تغییر کند، برنامه شما reload خواهد شد.

ساخت application برای production

فرضا یک برنامه عالی با استفاده از React Native ساخته اید، و اکنون می خواهید آن را در App Store منتشر کنید. این فرآیند همانند سایر برنامه های iOS است، اما نکاتی را که باید در نظر گرفت. راهنمای ایجاد یک signed APK را برای مطالعه بیشتر ببینید.


اجرای یک React Native Application روی موبایل android

سیستم عامل توسعه: Windows

1. USB Debugging را فعال کنید

اغلب device های android تنها می توانند application هایی را که از google play دانلود شده اند نصب و اجرا کنند. می توانید با فعال کردن USB Debugging روی موبایل این محدودیت را رفع کنید.

برای فعال کردن USB Debugging روی device، ابتدا باید "Developer options" را فعال کنید. به Settings → About phone بروید و سپس روی Build Number هفت بار ضربه بزنید. سپس به Settings → Developer options بروید و "USB debugging" را فعال کنید.

2. device خود را از طریق USB وصل کنید

device android خود را با استفاده از یک کابل USB به کامپیوتر متصل کنید. با اجرای دستور زیر چک کنید که device به درستی به ADB (Android Debug Bridge) وصل شده:


$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

دیدن device در ستون راست به این معناست که device به درستی وصل شده. فقط باید در لحظه یک device وصل شده داشته باشید.

3. application خود اجرا کنید

دستور زیر را در ترمینال اجرا کنید تا application روی device تان نصب و اجرا شود.


$ react-native run-android

اگر خطای "bridge configuration isn't available" گرفتید، این بخش را ببینید.

راهنمایی: می توانید از React Native CLI برای تولید و اجرای build Release استفاده کنید. (مثلا react-native run-android --variant=release)

اتصال به سرور توسعه

راه های مختلفی برای این کار وجود دارد، بسته به این که کابل USB استفاده کنید یا از طریق WiFi این کار را انجام دهید.

1. روش اول: استفاده از adb reverse (توصیه می شود)

اگر روی موبایل نسخه اندروید 5.0 (Lollipop) یا جدید تر اجرا میشود، USB debugging فعال است، و موبایل با USB به سیستم وصل است، می توانید از این روش استفاده کنید.

دستور زیر را در ترمینال اجرا کنید:


$ adb -s < device name> reverse tcp:8081 tcp:8081

برای یافتن نام device، دستور زیر را اجرا کنید:


$ adb devices

می توانید از Developer menu، Live reloading را فعال کنید. application تان با تغییر کد جاوااسکریپت reload می شود.

2.روش دوم: اتصال به WiFi

می توانید از طریق WiFi به سرور توسعه تان وصل شوید. ابتدا باید application را با USB روی device نصب کنید. اما پس از آن می توانید با دنبال کردن دستورالعمل های زیر از طریق Wifi، debug کنید. IP سیستم که روی آن توسعه انجام می دهید را لازم دارید.

در ترمینال با استفاده از دستور ipconfig آدرس IP را بیابید.

  1. 1. مطمئن شوید لپ تاپ و موبایل به یک شبکه وصل هستند
  2. 2. application React Nativeتان را روی device باز کنید.
  3. 3. یک صفحه قرمز با خطا می بینید. مشکلی نیست. ادامه دهید.
  4. 4. Developer menu داخل application را باز کنید.
  5. 5. به Dev Settings → Debug server host & port for device بروید.
  6. 6. آدرس IP سیستم تان و port مربوط به server را بزنید(مثلا 10.0.1.1:8081)
  7. 7. به Developer menu برگردید و Reload JS را بزنید.

حال می توانید Live Reload را فعال کنید. هر بار که کد جاوا اسکریپت تغییر کند، برنامه شما reload خواهد شد.

ساخت application برای production

فرضا یک برنامه عالی با استفاده از React Native ساخته اید، و اکنون می خواهید آن را در App Store منتشر کنید. این فرآیند همانند سایر برنامه های iOS است، اما نکاتی را که باید در نظر گرفت. راهنمای ایجاد یک signed APK را برای مطالعه بیشتر ببینید.

  • 1010
  •    0
  • تاریخ ارسال :   1398/06/04

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .