Geliştirici deneyimi
Artık kendi başına mini uygulamaları ele aldığıma göre, çeşitli süper uygulama platformlarına yönelik geliştirici deneyimine odaklanmak istiyorum. Tüm platformlarda mini uygulama geliştirme süreci, süper uygulama platformları tarafından ücretsiz olarak sağlanan IDE'lerde gerçekleştirilir. Dahası da vardır ancak en popüler dördüne ve karşılaştırma amacıyla Quick App ile ilgili beşincisine odaklanmak istiyorum.
Mini uygulama IDE'leri
Süper uygulamalar gibi IDE'lerin çoğu da yalnızca Çincedir. Hatta bazen İngilizce (veya başka ülkelerde) bulabileceğiniz bir sürüm değil, Çince sürümü yüklediğinizden emin olmak istersiniz, çünkü güncel olmayabilir. macOS geliştiricisiyseniz tüm IDE'lerin imzalanmadığını, yani macOS'in yükleyiciyi çalıştırmayı reddettiğini unutmayın. Bu işlemi tüm risk size ait olmak üzere, Apple Yardım Merkezi'nde açıklandığı şekilde atlayabilirsiniz.
- WeChat Geliştirici Araçları
- Alipay Geliştirici Araçları
- Baidu Geliştirici Araçları
- ByteDance Geliştirici Araçları
- Hızlı Uygulama Geliştirme Araçları
Mini uygulama başlatıcı projeleri
Tüm süper uygulama sağlayıcıları, mini uygulama geliştirmeye hızla başlamak için hemen indirilip test edilebilen ve bazen çeşitli IDE'lerin "Yeni Proje" sihirbazlarına entegre edilebilen demo uygulamalar sunar.
Geliştirme akışı
IDE'yi başlattıktan ve bir (demo) mini uygulama (demo) yükledikten veya oluşturduktan sonra ilk adım her zaman giriş yapmaktır. Genellikle sadece IDE tarafından oluşturulan süper uygulamayla (oturum açmış olduğunuz yer) bir QR kodunu taramanız gerekir. Çok nadiren şifre girmeniz gerekir. Giriş yaptıktan sonra IDE, kimliğinizi bilir ve programlamaya, hata ayıklamaya, test etmeye ve uygulamanızı incelenmek üzere göndermeye başlamanıza olanak tanır. Aşağıdaki bölümde, 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. Her zaman Monaco Düzenleyici'yi temel alan bir kod düzenleyiciniz vardır. Aynı proje, VS Code'u da destekler. Tüm IDE'lerde, Chrome Geliştirici Araçları ön ucunu temel alan ve bazı değişiklikler yapılan bir hata ayıklayıcı bulunur. Daha sonra bunlar üzerinde daha fazla değişiklik yapılabilir (Hata Ayıklayıcı bölümüne bakın). IDE'ler se NW.js ya da Electron uygulamaları olarak uygulanır. IDE'lerdeki simülatörler bir
NW.js <webview> etiketi veya
Electron <webview> etiketi olarak oluşturulur. Bu etiketler de Chromium <webview> etiketini temel alır. IDE dahili bileşenleriyle ilgileniyorsanız, çoğu zaman Control+Alt+I (veya Mac'te Command+Option+I) klavye kısayoluyla Chrome Geliştirici Araçları'nı kullanarak bunları inceleyebilirsiniz.
<webview> etiketi olarak oluşturulduğunu görürsünüz.
Simülatör ve gerçek cihaz testi ve hata ayıklama
Simülatör, Chrome Geliştirici Araçları'nın cihaz modundan bildiğimiz özelliklere benzer. 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 basıncını, barkod okuma etkinliğini, beklenmedik sonlandırmaları ve koyu modu simüle edebilirsiniz.
Yerleşik simülatör, uygulamanın nasıl davrandığı konusunda genel bir fikir edinmek için yeterli olsa da, normal web uygulamalarında olduğu gibi cihaz üzerinde test yapılması da vazgeçilmezdir. Geliştirilme aşamasındaki bir mini uygulamayı test etmek
yalnızca QR kodu taraması kadar uzaktadır. Örneğin, ByteDance DevTools'da, IDE 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, cihazda hemen test edilebilir. ByteDance için bu yöntem, QR kodunun (örnek) arkasındaki URL'nin, Douyin veya Toutiao gibi çeşitli ByteDance süper uygulamalarındaki mini uygulamayı önizlemek için snssdk1128:// gibi özel URI şemalarına sahip bağlantılar içeren barındırılan bir sayfaya (örnek) yönlendirmesidir (burada bir örnek verilmiştir).
Diğer süper uygulama sağlayıcılar, ara sayfalardan geçmez, bunun yerine önizlemeyi doğrudan açar.
Daha da çekici bir özellik ise bulut tabanlı önizleme uzaktan hata ayıklamadır. Benzer şekilde IDE tarafından oluşturulmuş özel bir QR kodunu taradıktan sonra mini uygulama fiziksel cihazda açılır. Bilgisayarınızda uzaktan hata ayıklama için Chrome Geliştirici Araçları penceresi açılır.
Hata Ayıklayıcı
Öğelerde hata ayıklama
Mini uygulama hata ayıklama deneyimi, Chrome Geliştirici Araçları ile çalışan herkese çok tanıdık gelir. Bununla birlikte, iş akışını mini uygulamalara uygun hale getiren bazı önemli farklılıklar vardır. Mini uygulama IDE'leri, Chrome Geliştirici Araçları'ndaki Öğeler paneli yerine, kendi HTML diyalektine göre uyarlanmış özelleştirilmiş bir panele sahiptir. Örneğin, WeChat'te panel, WeiXin Biçimlendirme Dili anlamına gelen Wxml olarak adlandırılır. Baidu Geliştirici Araçları'nda bu özelliğin adı Kuğu Öğesi. ByteDance DevTools buna Bxml adını veriyor. Alipay bunu AXML olarak adlandırıyor ve Quick App panele sadece UX olarak atıfta bulunuyor. Bu işaretleme dillerini daha sonra ayrıntılı bir şekilde ele alacağım.
<image> öğesini inceleme.
Gelişmiş özel öğeler
about://inspect/#devices sayfası aracılığıyla Web Görünümü gerçek bir cihazda incelendiğinde WeChat Geliştirici Araçları'nın gerçeği kasten gizlediği ortaya çıktı. WeChat Geliştirici Araçları'nın bir <image> gösterdiği yerde, tek alt öğesi <div> olan <wx-image> adlı özel bir öğeye bakıyorum. Bu özel öğenin Gölge DOM'u kullanmadığını belirtmek ilginçtir. Bu bileşenler hakkında daha sonra daha fazla bilgi edineceksiniz.
<image> öğesi incelendiğinde, bunun aslında bir <wx-image> özel öğesi olduğu ortaya çıkıyor.
CSS hata ayıklaması
Diğer bir fark da CSS'nin çeşitli diyalektlerinde duyarlı piksel için yeni uzunluk birimi rpx'dir (bu birim hakkında daha fazla bilgiyi daha sonra bulabilirsiniz). WeChat DevTools, farklı cihaz boyutları için geliştirme sürecini daha sezgisel hale getirmek amacıyla cihazdan bağımsız CSS uzunluk birimleri kullanır.
200rpx 0) cinsinden belirtilen dolgusunu inceleme.
Performans denetimi
Mini uygulamaların en önemli özelliği performanstır. Bu yüzden WeChat Geliştirici Araçları ve diğer bazı Geliştirici Araçları, Lighthouse'dan esinlenen entegre bir denetleme aracına sahip. Denetimlerin odak noktaları Toplam, Performans, Deneyim ve En İyi Uygulamadır. IDE görünümü özelleştirilebilir. Aşağıdaki ekran görüntüsünde, denetim aracı için daha fazla ekran alanına sahip olmak amacıyla kod düzenleyiciyi geçici olarak gizledim.
API modeli
Sahte API yanıtları, geliştiricinin ayrı bir hizmet oluşturmasını istemek yerine 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 örnek yanıtları ayarlayabilir.
Teşekkür
Bu makale, Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.