Canli Gelistirme - her kaydi telefonunuzda gorun

1Canli Gelistirme nedir#

Canli Gelistirme, kendi telefonunuz icin bir GELISTIRME UYGULAMASI olusturur. Dosyalarinizi APK'nin icine paketlemek yerine, uygulama onlari PC'nizde calisan gelistirme sunucusundan yukler; boylece bir dosyayi her kaydettiginizde degisiklik telefonda gorunur. Yeniden derleme yok, yeniden kurulum yok, ZIP kopyalama yok.

Bu bir tarayıcı sekmesi değil, gerçek AppMint kabuğudur: kamera, konum, bildirimler, reklamlar, geri düğmesi, yan menü ve her AppMint köprüsü, bitmiş uygulamanızda nasıl çalışacaksa tam öyle çalışır.

Uygulamayı bir kez derlersiniz. Ondan sonra AppMint'e yalnızca yerel bir şeyi değiştirdiğinizde dönersiniz - bir izin, simge, açılış ekranı, reklam kimlikleri.

2Gelistirme uygulamasini derleyin (bir kez)#

1. Ana ekranda 'Canli Gelistirme'ye dokunun (veya APK Olustur → 'Canli Gelistirme' kutucugu).
2. Geliştirme sunucunuzun portunu seçin. Yaygın araçlar için tek dokunuş: Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321. 1024 ve üzeri her port çalışır.
3. Istege bagli: /admin/index.html gibi bir baslangic sayfasi ve PC'nizin adresi. Adresi bos birakin; uygulama PC'nizi kendiliginden bulur.
4. Daha sonra gercek uygulamanizin yaninda durabilmesi icin .dev ile biten bir paket adi verin (ornegin com.myshop.dev).
5. Erisim adiminda test etmek istediginiz izinleri isaretleyin (kamera, konum, bildirimler…). Bunlar yereldir, bu yuzden derleme sirasinda sabitlenirler.
6. APK'yi derleyin ve telefonunuza kurun.

Canli Gelistirme derlemesi asla bir Play paketi (AAB) uretmez: yalnizca PC'nizin yaninda calisir, bu yuzden asla yayinlanmamalidir.

3Telefonun erişebilmesi için geliştirme sunucunuzu başlatın#

Varsayilan olarak cogu gelistirme sunucusu yalnizca PC'nin kendisini dinler. Wi-Fi'nizdeki diger cihazlarin baglanabilmesi icin 'host' anahtarini ekleyin:

• 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: zaten agi dinler

Yalnizca bir HTML dosyalari klasoru mu var? Bunlardan herhangi biri onu sunucuya donusturur; klasorun icinde calistirin:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: 'Live Server' kurun, sonra 'Go Live'a tiklayin

Windows, sunucuya guvenlik duvarindan gecis izni verip vermeyeceginizi bir kez sorar; 'Ozel aglar'i isaretleyin ve izin verin. Iptal'e tiklarsaniz, Windows Guvenligi → Guvenlik duvari → Bir uygulamaya izin ver bolumunde Node'a (veya Python'a) izin verene kadar telefon baglanamaz.

npm run dev -- --host

4Wi-Fi üzerinden bağlanın - kablo yok, kurulacak bir şey yok#

1. Telefonu PC ile ayni Wi-Fi'a baglayin.
2. Live Dev uygulamanızı açın.

Hepsi bu kadar. Uygulama geliştirme sunucunuzu seçtiğiniz portta arar, bilgisayarınızı bulur ve sayfayı yükler. Bir sonraki sefer için bilgisayarı hatırlar. Sunucunuz farklı bir portta ise veya birden fazla bilgisayar yanıt veriyorsa, hepsini gösterir ve sizinkine dokunursunuz.

Bir sey bulunamadi mi? Baglanti ekrani iki saniyede bir denemeye devam eder ve sunucunuza ulasilabilir oldugu anda sayfayi kendiliginden acar; sunucuyu baslatin ve izleyin. 'PC'mi bul' diger yaygin portlari da kontrol eder. Vite'in 'Network:' altinda yazdirdigi adresi her zaman 'Kendiniz girin'e yazabilirsiniz.

Bunun bir web sitesi uygulamasına http://192.168.1.5:5173 yazmaktan neden daha iyi olduğu: sayfa telefonda hâlâ http://localhost:PORT olarak çalışır (uygulama bunu bilgisayarınıza tüneller). localhost bir GÜVENLİ BAĞLAMDIR; bu yüzden kamera, mikrofon, konum, pano, service worker'lar ve geçiş anahtarları (passkey) çalışır. Düz bir 192.168… adresinde tarayıcı motoru bunların hepsini engeller.

5USB üzerinden bağlanın - hiç Wi-Fi olmadan çalışır#

Bilgisayar ve telefon farklı ağlardaysa, cihazların birbirini görmesini engelleyen bir misafir Wi-Fi'ında veya hiç ağ yoksa bunu kullanın.

1. Telefonda: Ayarlar → Telefon hakkında → 'Derleme numarası'na yedi kez dokunun, ardından Geliştirici seçenekleri → 'USB hata ayıklama'yı açın.
2. Telefonu PC'ye takin ve 'USB hata ayiklamaya izin ver' istemini kabul edin.
3. PC'de asagidaki komutu calistirin (portunuzu kullanin). adb, Android Studio ile gelir ya da Google'dan 'SDK Platform-Tools' indirin; kucuk bir ZIP'tir.
4. Canli Gelistirme uygulamanizi acin. USB baglantisini fark eder ve Wi-Fi'yi denemeden once onu kullanir.

Kabloyu çıkardıktan veya telefonu yeniden başlattıktan sonra komutu tekrar çalıştırın. USB ile 3. adımdaki 'host' anahtarına ihtiyacınız YOK.

Bağlantı ekranında 'USB bağlantısı kuruldu, ancak bilgisayarınızın portunda yanıt veren yok' yazıyorsa - kablo kısmı çalışıyor, geliştirme sunucunuz sadece çalışmıyor.

adb reverse tcp:5173 tcp:5173

SDK Platform-Tools'u (adb) indirin →

6DEV dugmesi#

Uygulamanın kenarında küçük bir DEV düğmesi durur - istediğiniz yere sürükleyin. Sayfanız bir hata kaydettiğinde kırmızıya döner ve bir sayı gösterir. Dokunun:

• Yeniden yükle - her dosyanın her zaman yeni bir kopyasını getirir, asla önbellektekini değil.
• Konsol - sayfanizin kaydettigi her sey, hatalar ve uyarilar renkli, dosya ve satirla (src/App.tsx:42). 'Hatalar' filtreler, 'Kopyala' tum gunlugu panoya koyar; bir sohbete veya hata raporuna yapistirin.
• JavaScript calistir - konsolun altinda bir satir. Herhangi bir ifade yazin ve sonucu dogrudan telefonda gorun. Promise'ler beklenir ve kaydedilir.
• Kaydetmede yenileme - sonraki adima bakin.
• Sunucuyu değiştir - yeniden derlemeden başka bir bilgisayar veya başka bir port.
• Site verilerini temizle ve yeniden yükle - temiz bir ilk çalıştırma testi için çerezleri, localStorage'ı ve IndexedDB'yi siler.
• Bağlantı bilgisi - adres, USB veya Wi-Fi ve bu telefonun IP'si.

Tam DevTools icin (ogeler, ag, kesme noktalari) kabloyu takin, PC'deki Chrome'da chrome://inspect adresini acin ve uygulamanizi secin.

7Kaydetmede yenileme - duz HTML icin bile#

Vite, Next, Angular ve webpack değişikliklerinizi sayfaya kendiliğinden gönderir (hot reload). Uygulama bunu algılar ve araya girmez.

python, 'npx serve' veya herhangi bir statik sunucuyla sunulan duz bir klasorde sicak yeniden yukleme yoktur; normalde her seferinde kaydeder, sonra cekerek yenilersiniz. Canli Gelistirme bunu sizin yerinize yapar: sayfanin hangi dosyalari yukledigini hatirlar, sunucunuza saniyede bir bunlardan birinin degisip degismedigini sorar ve biri degistiginde yeniler. Degisen bir .css dosyasi yeniden yuklenmeden yerinde degistirilir; boylece stil verirken kaydirma konumunuzu ve form girdinizi korursunuz.

Bilgisayara hiçbir şey kurmanız gerekmez. Elle kontrol isterseniz DEV düğmesinden kapatın. Live Dev uygulaması açıkken ekran da uyanık kalır.

8Isiniz bitince: gercek uygulamayi derleyin#

Canli Gelistirme uygulamasi yalnizca PC'nizin yaninda calisir; asla kullanicilara vermeyin. Proje hazir oldugunda:

• Framework projesi (Vite, React, Vue…): 'npm run build' calistirin, dist klasorunu ZIP'leyin (veya tum kaynak projeyi ZIP'leyin) ve APK Olustur → Cevrimdisi ZIP'te derleyin.
• Düz HTML klasörü: index.html en üstte olacak şekilde ZIP'leyin → Çevrimdışı ZIP. Tek dosya mı? HTML kutucuğunu kullanın.
• Zaten gercek bir https:// adresine yayinlandi: APK Olustur → Web Sitesi.

O derleme icin gercek paket adinizi kullanin. Gelistirme uygulamasinin paketi .dev ile bittigi icin ikisi de yan yana kurulu kalabilir.

9Baglanmazsa#

• Wi-Fi: 'Gelistirme sunucunuz bekleniyor' sonsuza dek → sunucu yalnizca PC'yi dinliyor. 3. adimdaki host anahtariyla yeniden baslatin (Vite dogru oldugunda bir 'Network:' satiri yazdirir).

• Wi-Fi: hala hicbir sey yok → Windows guvenlik duvari engelliyor (3. adim) ya da yonlendirici cihazlari yalitiyor (misafir, ofis ve otel Wi-Fi'larinda yaygin). USB kullanin ya da telefonun hotspot'unu acip PC'yi ona baglayin.

• USB: 'adb' tanınmıyor → Platform-Tools'u kurun ve komutu o klasörden çalıştırın. 'no devices' → telefondaki USB hata ayıklama istemini kabul edin veya başka bir kablo deneyin (birçok kablo yalnızca şarj içindir).

• '… portu bu telefonda mesgul' → telefondaki baska bir uygulama o portu kullaniyor. Gelistirme sunucunuzu baska bir portta calistirin ve 'Kendiniz girin' altina yazin.

• Vite 'Blocked request. This host is not allowed' gosteriyor → PC'nin adresini normal bir tarayicida ya da web sitesi uygulamasinda actiniz. Canli Gelistirme uygulamasi bunu asla tetiklemez, cunku her zaman localhost ister.

• Sayfa yükleniyor ama API çağrılarınız başarısız oluyor → arka ucunuzun CORS listesi http://localhost:PORT adresine izin vermeli (çoğu geliştirme ortamında zaten vardır) ve http://localhost:4000 şeklinde yazılmış bir API URL'si TELEFONU ifade eder. O portu da yönlendirin (adb reverse tcp:4000 tcp:4000) veya API için bilgisayarın adresini kullanın.

• Aynı portta proje değiştirdikten sonra boş sayfa → DEV → Site verilerini temizle ve yeniden yükle (eski bir service worker yanıt veriyor).