Geliştirici deneyimi
Mini uygulamalardan bahsettikten sonra, çeşitli süper uygulama platformlarındaki geliştirici deneyimine odaklanmak istiyorum. Tüm platformlarda mini uygulama geliştirme, süper uygulama platformları tarafından ücretsiz olarak sağlanan IDE'lerde yapılır. Daha fazla olsa da en popüler dört tanesine ve karşılaştırma için bir beşinciye odaklanmak istiyorum.
Mini uygulama IDE'leri
Süper uygulamalar gibi, IDE'lerin çoğu yalnızca Çince olarak kullanılabilir. Bazen kullanılabilen İngilizce (veya yurt dışı) sürüm yerine Çince sürümü yüklediğinizden emin olmanız gerekir. Aksi takdirde, güncel olmayan bir sürüm yükleyebilirsiniz. macOS geliştiricisiyseniz tüm IDE'lerin imzalanmadığını ve bu nedenle macOS'in yükleyiciyi çalıştırmayı reddettiğini unutmayın. Tüm riski size ait olmak üzere, Apple yardımında belirtildiği gibi bu adımı atlayabilirsiniz.
Mini uygulama başlangıç projeleri
Mini uygulama geliştirmeye hızlı bir şekilde başlamak için tüm süper uygulama sağlayıcılar, hemen indirip test edebileceğiniz ve bazen çeşitli IDE'lerin "Yeni Proje" sihirbazlarına da entegre edilen demo uygulamalar sunar.
Geliştirme akışı
IDE'yi başlattıktan ve bir (demo) mini uygulamayı yükledikten veya oluşturduktan sonraki ilk adım her zaman oturum açmaktır. Genellikle IDE tarafından oluşturulan QR kodunu süper uygulamayla (zaten oturum açmış olduğunuz) taramanız yeterlidir. Çok nadiren şifre girmeniz gerekir. Oturum açtıktan sonra, IDE kimliğinizi bilir ve programlamaya, hata ayıklamaya, test etmeye ve uygulamanızı incelemeye göndermeye başlamanıza olanak tanır. Aşağıda, yukarıdaki paragrafta bahsedilen beş IDE'nin ekran görüntülerini görebilirsiniz.
Gördüğünüz gibi, tüm IDE'lerin temel bileşenleri birbirine çok benzer. Monaco Editor'a dayalı bir kod düzenleyiciye her zaman sahip olursunuz. Bu düzenleyici, VS Code'u da destekleyen aynı projedir. Tüm IDE'lerde, Chrome Geliştirici Araçları ön ucuna dayalı ve bazı değişiklikler yapılmış bir hata ayıklayıcı bulunur. Bu değişiklikler hakkında daha fazla bilgiyi sonraki bölümlerde bulabilirsiniz (bkz. Hata Ayıklayıcı). IDE'ler tek başına NW.js veya Electron uygulamaları olarak uygulanır. IDE'lerdeki simülatörler ise NW.js <webview> etiketi veya Electron <webview> etiketi olarak gerçekleştirilir. Bu etiketler de Chromium <webview> etiketine dayanır. IDE'nin iç işleyişiyle ilgileniyorsanız bunları genellikle klavyedeki Control+Alt+I (veya Mac'te Command+Option+I) klavye kısayoluyla Chrome Geliştirici Araçları'nda inceleyebilirsiniz.
<webview> etiketi olarak gerçekleştirildiği görülüyor.
Simülatör ve gerçek cihaz testi ile hata ayıklama
Simülatör, Chrome Geliştirici Araçları'ndaki cihaz modu ile benzerdir. Farklı Android ve iOS cihazları simüle edebilir, ölçeği ve cihaz yönünü değiştirebilir, ayrıca çeşitli ağ durumlarını, bellek baskısını, barkod okuma etkinliğini, beklenmedik sonlandırmayı ve koyu modu simüle edebilirsiniz.
Yerleşik simülatör, uygulamanın nasıl davrandığına dair kabaca bir fikir edinmek için yeterli olsa da normal web uygulamalarında olduğu gibi cihaz üzerinde testin yerini hiçbir şey tutmaz. Geliştirme aşamasındaki bir mini uygulamayı test etmek için QR kodunu taramanız yeterlidir. Örneğin, ByteDance Geliştirici Araçları'nda, entegre geliştirme ortamı tarafından dinamik olarak oluşturulan bir QR kodunun gerçek bir cihazla taranması, mini uygulamanın bulutta barındırılan bir sürümüne yönlendirir. Bu sürüm daha sonra cihazda hemen test edilebilir. ByteDance'te bu işlem, QR kodunun arkasındaki URL'nin (örnek) barındırılan bir sayfaya (örnek) yönlendirilmesiyle çalışır. Bu sayfa, Douyin veya Toutiao gibi çeşitli ByteDance süper uygulamalarında mini uygulamayı önizlemek için snssdk1128:// gibi özel URI şemaları içeren bağlantılar içerir (örnek).
Diğer süper uygulama sağlayıcılar ara sayfadan geçmez ancak önizlemeyi doğrudan açar.
Daha da ilgi çekici bir özellik ise bulut tabanlı önizleme uzaktan hata ayıklamadır. IDE tarafından oluşturulan özel bir QR kodu tarandıktan sonra mini uygulama, fiziksel cihazda açılır. Uzaktan hata ayıklama için bilgisayarda Chrome Geliştirici Araçları penceresi çalışır.
Hata Ayıklayıcı
Öğelerde hata ayıklama
Mini uygulama hata ayıklama deneyimi, Chrome DevTools ile çalışmış olan herkes için çok tanıdıktır. Ancak, iş akışını mini uygulamalara göre uyarlayan bazı önemli farklılıklar vardır. Chrome Geliştirici Araçları'ndaki Öğeler paneli yerine, mini uygulama IDE'lerinde HTML'nin kendi lehçesine göre uyarlanmış özelleştirilmiş bir panel bulunur. Örneğin, WeChat'te panelin adı Wxml'dir. Bu ad, WeiXin Biçimlendirme Dili'nin kısaltmasıdır. Baidu Geliştirici Araçları'nda bu özelliğe Swan Element adı verilir. ByteDance Geliştirici Araçları, buna Bxml adını veriyor. Alipay bu panele AXML, Quick App ise UX adını veriyor. Bu işaretleme dillerini daha sonra ayrıntılı olarak ele alacağım.
<image> öğesini inceleme.
Özel öğelerin işleyiş şekli
about://inspect/#devices üzerinden gerçek bir cihazda WebView'ı incelediğimizde WeChat Geliştirici Araçları'nın gerçeği kasıtlı olarak gizlediği ortaya çıkıyor. WeChat DevTools'un <image> gösterdiği yerde, baktığım şey aslında tek alt öğesi <div> olan <wx-image> adlı özel bir öğe. Bu özel öğenin Shadow DOM kullanmadığını belirtmekte fayda var. Bu bileşenler hakkında daha fazla bilgiyi ilerleyen bölümlerde bulabilirsiniz.
<image> öğesi incelendiğinde aslında <wx-image> özel öğesi olduğu ortaya çıkıyor.
CSS hata ayıklama
Bir diğer fark ise CSS'nin çeşitli lehçelerinde duyarlı piksel için yeni uzunluk birimi rpx'dir (bu birim hakkında daha sonra bilgi verilecektir). WeChat DevTools, farklı cihaz boyutları için geliştirme sürecini daha sezgisel hale getirmek amacıyla cihazdan bağımsız CSS uzunluk birimlerini kullanır.
200rpx 0) belirtilen dolguyu inceleme.
Performans denetimi
Performans, mini uygulamalar için çok önemlidir. Bu nedenle, WeChat Geliştirici Araçları ve diğer bazı geliştirici araçlarında Lighthouse'tan ilham alınarak geliştirilmiş bir denetim aracı bulunması şaşırtıcı değildir. Denetimlerin odak alanları Toplam, Performans, Deneyim ve En İyi Uygulama'dır. IDE'nin görünümü özelleştirilebilir. Aşağıdaki ekran görüntüsünde, denetim aracı için daha fazla ekran alanı sağlamak amacıyla kod düzenleyiciyi geçici olarak gizledim.
API sahteciliği
Geliştiricinin ayrı bir hizmet ayarlaması gerekmez. API yanıtlarını taklit etmek doğrudan WeChat Geliştirici Araçları'nın bir parçasıdır. Geliştirici, kullanımı kolay bir arayüz aracılığıyla API uç noktalarını ve istenen sahte yanıtları ayarlayabilir.
Teşekkür
Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.