Live Dev - هر ذخیره را روی گوشی ببینید

1Live Dev چیست#

Live Dev یک اپلیکیشن توسعه برای گوشی خودتان می‌سازد. به‌جای بسته‌بندی فایل‌ها داخل APK، اپلیکیشن آن‌ها را از سرور توسعه‌ای که روی کامپیوتر شما اجرا می‌شود بارگذاری می‌کند - پس هر بار فایلی را ذخیره کنید، تغییر روی گوشی نشان داده می‌شود. بدون ساخت دوباره، بدون نصب دوباره، بدون کپی کردن ZIP.

این پوسته واقعی AppMint است، نه یک تب مرورگر: دوربین، موقعیت مکانی، اعلان‌ها، تبلیغات، دکمه بازگشت، منوی کناری و هر پل AppMint دقیقاً همان‌طور رفتار می‌کند که در اپلیکیشن نهایی شما رفتار خواهد کرد.

آن را یک بار می‌سازید. پس از آن فقط وقتی به AppMint برمی‌گردید که چیزی بومی را تغییر دهید - یک مجوز، آیکون، اسپلش، شناسه‌های تبلیغات.

2اپلیکیشن توسعه را بسازید (یک‌بار)#

1. در صفحهٔ اصلی روی «Live Dev» بزنید (یا Create APK ← کاشی «Live Dev»).
2. پورت سرور توسعه خود را انتخاب کنید. با یک ضربه ابزارهای رایج: Vite 5173، React / Next 3000، Angular 4200، Vue CLI 8080، Live Server 5500، Python 8000، Astro 4321. هر پورتی از 1024 به بالا کار می‌کند.
3. اختیاری: یک صفحهٔ شروع مثل /admin/index.html، و آدرس کامپیوتر شما. آدرس را خالی بگذارید - اپلیکیشن خودش کامپیوتر شما را پیدا می‌کند.
4. نام بسته‌ای بدهید که به .dev ختم شود (مثلاً com.myshop.dev) تا بعداً کنار اپلیکیشن واقعی شما بنشیند.
5. در مرحلهٔ Access مجوزهایی را که می‌خواهید آزمایش کنید تیک بزنید (دوربین، موقعیت، اعلان‌ها…). این‌ها بومی‌اند، پس هنگام ساخت ثابت می‌شوند.
6. APK را بسازید و روی گوشی خود نصب کنید.

ساخت Live Dev هرگز بستهٔ Play (AAB) تولید نمی‌کند: فقط کنار کامپیوتر شما کار می‌کند، پس هرگز نباید منتشر شود.

3سرور توسعه را طوری اجرا کنید که گوشی بتواند به آن برسد#

به‌طور پیش‌فرض بیشتر سرورهای توسعه فقط به خود کامپیوتر گوش می‌دهند. سوئیچ «host» را اضافه کنید تا دستگاه‌های دیگر روی Wi-Fi شما بتوانند وصل شوند:

• Vite (React، Vue، Svelte، Astro): npm run dev -- --host
• Next.js: npx next dev -H 0.0.0.0
• Angular: ng serve --host 0.0.0.0
• Create React App / Vue CLI: از قبل روی شبکه گوش می‌دهند

فقط یک پوشه HTML دارید؟ هر یک از این‌ها آن را به سرور تبدیل می‌کند - داخل پوشه اجرا کنید:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: «Live Server» را نصب کنید، سپس روی «Go Live» کلیک کنید

Windows یک‌بار می‌پرسد آیا اجازه دهد سرور از فایروال رد شود - «Private networks» را تیک بزنید و اجازه دهید. اگر Cancel زدید، تا وقتی Node (یا Python) را در Windows Security ← Firewall ← Allow an app مجاز نکنید گوشی نمی‌تواند وصل شود.

npm run dev -- --host

4اتصال از طریق Wi-Fi - بدون کابل، بدون نصب چیزی#

1. گوشی را روی همان Wi-Fi کامپیوتر بگذارید.
2. اپلیکیشن Live Dev خود را باز کنید.

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

چیزی پیدا نشد؟ صفحهٔ اتصال هر دو ثانیه دوباره تلاش می‌کند و به‌محض در دسترس شدن سرور، صفحه را خودش باز می‌کند - سرور را روشن کنید و تماشا کنید. «Find my PC» پورت‌های متداول دیگر را هم بررسی می‌کند. همیشه می‌توانید آدرسی را که Vite زیر «Network:» چاپ می‌کند در «Enter it yourself» تایپ کنید.

چرا این روش بهتر از تایپ http://192.168.1.5:5173 در یک اپلیکیشن وب‌سایتی است: صفحه همچنان روی گوشی به صورت http://localhost:PORT اجرا می‌شود (اپلیکیشن آن را به کامپیوتر شما تونل می‌کند). localhost یک زمینه امن (SECURE CONTEXT) است، پس دوربین، میکروفون، موقعیت مکانی، کلیپ‌بورد، service workerها و passkeyها کار می‌کنند. روی یک نشانی ساده 192.168… موتور مرورگر همه این‌ها را مسدود می‌کند.

5اتصال از طریق USB - بدون هیچ Wi-Fi کار می‌کند#

وقتی از این روش استفاده کنید که کامپیوتر و گوشی در شبکه‌های متفاوتی هستند، روی Wi-Fi مهمانی که دستگاه‌ها را از دیدن یکدیگر باز می‌دارد، یا اصلاً شبکه‌ای وجود ندارد.

1. روی گوشی: تنظیمات ← درباره تلفن ← هفت بار روی «Build number» بزنید، سپس Developer options ← «USB debugging» را روشن کنید.
2. گوشی را به کامپیوتر وصل کنید و پیام «Allow USB debugging» را بپذیرید.
3. روی کامپیوتر دستور زیر را اجرا کنید (از پورت خود استفاده کنید). adb همراه Android Studio می‌آید، یا «SDK Platform-Tools» را از Google دانلود کنید - یک ZIP کوچک است.
4. اپلیکیشن Live Dev خود را باز کنید. اتصال USB را تشخیص می‌دهد و پیش از امتحان Wi-Fi از آن استفاده می‌کند.

پس از جدا کردن کابل یا راه‌اندازی دوباره گوشی، دستور را دوباره اجرا کنید. با USB به سوئیچ «host» از مرحله 3 نیازی ندارید.

اگر صفحه اتصال می‌گوید «پیوند USB برقرار است، اما هیچ چیزی روی پورت کامپیوتر شما پاسخ نمی‌دهد» - بخش کابل درست کار می‌کند و سرور توسعه شما فقط اجرا نشده است.

adb reverse tcp:5173 tcp:5173

دانلود SDK Platform-Tools (adb) ←

6دکمهٔ DEV#

یک دکمه کوچک DEV در لبه اپلیکیشن شناور است - آن را به هر جا که می‌خواهید بکشید. وقتی صفحه شما خطایی ثبت کند، قرمز می‌شود و یک عدد نشان می‌دهد. برای دیدن این گزینه‌ها آن را بزنید:

• بارگذاری مجدد - همیشه یک نسخه تازه از هر فایل می‌گیرد، هرگز نسخه کش‌شده را.
• Console - همهٔ آنچه صفحه‌تان لاگ می‌کند، خطاها و هشدارها رنگی، با فایل و خط (src/App.tsx:42). «Errors» فیلتر می‌کند، «Copy» کل لاگ را در کلیپ‌بورد می‌گذارد - آن را در گفتگو یا گزارش باگ جای‌گذاری کنید.
• Run JavaScript - یک خط در پایین کنسول. هر عبارتی را تایپ کنید و نتیجه را همان‌جا روی گوشی ببینید. Promiseها منتظر می‌مانند و ثبت می‌شوند.
• Refresh on save - مرحلهٔ بعد را ببینید.
• تغییر سرور - کامپیوتر یا پورت دیگر، بدون ساخت دوباره.
• پاک کردن داده‌های سایت و بارگذاری مجدد - کوکی‌ها، localStorage و IndexedDB را برای یک آزمایش اجرای اول تمیز پاک می‌کند.
• اطلاعات اتصال - نشانی، USB یا Wi-Fi، و IP این گوشی.

برای DevTools کامل (عناصر، شبکه، breakpointها) کابل را وصل کنید، chrome://inspect را در Chrome روی کامپیوتر باز کنید و اپلیکیشن خود را انتخاب کنید.

7Refresh on save - حتی برای HTML ساده#

Vite، Next، Angular و webpack تغییرات شما را خودشان در صفحه اعمال می‌کنند (hot reload). اپلیکیشن این را تشخیص می‌دهد و مزاحم نمی‌شود.

پوشهٔ ساده‌ای که با python، 'npx serve' یا هر سرور ایستای دیگری ارائه می‌شود hot reload ندارد - معمولاً باید هر بار ذخیره کنید، سپس برای refresh بکشید. Live Dev این کار را برای شما می‌کند: به یاد می‌آورد صفحه کدام فایل‌ها را بارگذاری کرده، هر ثانیه از سرور شما می‌پرسد آیا یکی تغییر کرده، و وقتی تغییر کرد refresh می‌کند. فایل .css تغییریافته بدون بارگذاری مجدد در جا جایگزین می‌شود، پس هنگام استایل‌دهی موقعیت اسکرول و ورودی فرم خود را نگه می‌دارید.

نیازی به نصب چیزی روی کامپیوتر نیست. اگر خواستید کنترل دستی داشته باشید، آن را از دکمه DEV خاموش کنید. تا وقتی یک اپلیکیشن Live Dev باز است، صفحه نمایش هم روشن می‌ماند.

8وقتی تمام شد: اپلیکیشن واقعی را بسازید#

اپلیکیشن Live Dev فقط کنار کامپیوتر شما کار می‌کند - هرگز آن را به کاربران ندهید. وقتی پروژه آماده شد:

• پروژهٔ فریم‌ورک (Vite، React، Vue…): «npm run build» را اجرا کنید، پوشهٔ dist را ZIP کنید (یا کل پروژهٔ سورس را ZIP کنید)، و آن را در Create APK ← Offline ZIP بسازید.
• پوشه HTML ساده: آن را با index.html در بالاترین سطح ZIP کنید ← Offline ZIP. فقط یک فایل دارید؟ از کاشی HTML استفاده کنید.
• از قبل روی آدرس واقعی https:// مستقر شده: Create APK ← Website.

برای آن ساخت از نام بستهٔ واقعی خود استفاده کنید. چون بستهٔ اپلیکیشن توسعه به .dev ختم می‌شود، هر دو می‌توانند کنار هم نصب بمانند.

9اگر وصل نشد#

• Wi-Fi: «Waiting for your dev server» برای همیشه ← سرور فقط به کامپیوتر گوش می‌دهد. آن را با سوئیچ host از مرحلهٔ ۳ دوباره راه‌اندازی کنید (وقتی درست باشد Vite یک خط «Network:» چاپ می‌کند).

• Wi-Fi: هنوز هیچ ← فایروال Windows آن را مسدود کرده (مرحلهٔ ۳)، یا روتر دستگاه‌ها را ایزوله می‌کند (در Wi-Fi مهمان، اداری و هتل رایج است). از USB استفاده کنید، یا هات‌اسپات گوشی را روشن کنید و کامپیوتر را به آن وصل کنید.

• USB: اگر «adb» شناخته نمی‌شود ← Platform-Tools را نصب کنید و دستور را از همان پوشه اجرا کنید. اگر «no devices» می‌بینید ← پیام USB debugging را روی گوشی تأیید کنید، یا کابل دیگری امتحان کنید (بسیاری از کابل‌ها فقط شارژ می‌کنند).

• «Port … is busy on this phone» ← اپلیکیشن دیگری روی گوشی از آن پورت استفاده می‌کند. سرور توسعه را روی پورت دیگری اجرا کنید و آن را زیر «Enter it yourself» وارد کنید.

• Vite «Blocked request. This host is not allowed» نشان می‌دهد ← آدرس کامپیوتر را در مرورگر معمولی یا اپلیکیشن وب‌سایت باز کرده‌اید. اپلیکیشن Live Dev هرگز این را فعال نمی‌کند، چون همیشه localhost را می‌خواهد.

• صفحه بارگذاری می‌شود اما فراخوانی‌های API شما ناموفق است ← فهرست CORS بک‌اند شما باید http://localhost:PORT را مجاز کند (بیشتر محیط‌های توسعه از قبل این کار را می‌کنند)، و نشانی API که به صورت http://localhost:4000 نوشته شده باشد یعنی خود گوشی. آن پورت را هم فوروارد کنید (adb reverse tcp:4000 tcp:4000) یا برای API از نشانی کامپیوتر استفاده کنید.

• صفحه خالی پس از تعویض پروژه روی همان پورت ← DEV ← پاک کردن داده‌های سایت و بارگذاری مجدد (یک service worker قدیمی پاسخ می‌دهد).