Son zamanlarda, beşeri bilimler geçmişine sahip birçok arkadaş, kendi ürünlerini geliştirmek için Codex'i kullanmayı deniyor.
Önceki iki makale Codex'in nasıl kullanılacağını ele almıştı; bu makale pratik uygulamaya odaklanıyor: Codex'i kullanarak bir WeChat Mini Programı nasıl oluşturulur.
Öncelikle sonuca bakalım. Bu sefer "Bir Sayfa" adında bir okuma kontrolü Mini Programı oluşturduk. Aşağıda, WeChat Geliştirici Araçları'ndaki çalışma arayüzü görülüyor.
Bir fikirden kullanılabilir bir Mini Programa giden tüm süreç şu adımlara ayrılabilir:
Figma Prototip Tasarımı → Codex Kod Üretimi → Geliştirici Araçları Simülasyonu → Mobil Önizleme → Denetim ve Yayınlama için Gönderme.
Figma, sayfaların nasıl görüneceğini ve düğmelerin nereye yönlendireceğini belirlemekten sorumludur; Codex, tasarımı koda dönüştürür; WeChat Geliştirici Araçları, Mini Programı çalıştırmak, kontrol etmek ve telefonda önizlemek için kullanılır. Kendi Mini Program hesabınızı hazırladıktan sonra, WeChat arka ucu üzerinden denetim ve yayın için gönderirsiniz.
1. Figma Nedir ve Neden Önce Kullanılır?
Figma, uygulamalar, web siteleri ve Mini Programlar için sayfalar tasarlamak amacıyla yaygın olarak kullanılan bir arayüz tasarımı ve işbirliği aracıdır. Tasarımcılar düzen, renkler ve düğmeler için kullanır; ürün yöneticileri işlem akışlarını tartışmak için kullanır; geliştiriciler sayfaları uygulamak için tasarım boyutlarını, boşlukları ve varlıkları görüntüler.
Ayrıca tıklanabilir ürün prototipleri de oluşturabilir. Örneğin, ana sayfadaki bir düğmeyi başka bir sayfaya bağlayarak tıklandığında bir atlama tetiklenir ve işlemin önceden ne kadar akıcı olduğunu test etmenizi sağlar.
Bu sefer tam olarak bunun için kullanıyoruz. Herhangi bir kod yazmadan önce, birkaç sayfayı bir arada görebilir ve bir düğmenin iyi yerleştirilip yerleştirilmediğini veya bir ekranın çok kalabalık olup olmadığını tartışabilirsiniz.
Önceden, bu tasarım taslağı genellikle bir geliştiriciye teslim edilirdi. Artık onaylanmış taslağı Codex'e vererek kodu yazdırabilirsiniz. Tasarımcılar aşina oldukları Figma'dan başlayabilir; Codex'i kullananlar ise önce bir taslak oluşturmasını sağlayıp ardından Figma'da ayarlama yapabilir.
"Bir Sayfa" böyle yapıldı. Önce üç ana sayfayı belirledik—Kitaplık, Kayıt ve İstatistikler—ve ardından renk şemasını ve düzeni birleştirdik.
Bu, tasarım vitrini. Arka planda krem beyazı, metin ve ana düğmelerde koyu mavi ve mevcut işlemi vurgulamak için açık yeşil kullanıldı. Ana sayfa, okunmakta olan kitabı en belirgin konuma koyarken, istatistiksel bilgiler kullanıcıyı sayılarla boğmamak için ayrı bir sayfaya yerleştirildi.
Bu adım genel etkiyle ilgilidir. Renkler, yazı tipi boyutları ve sayfa düzenlemelerinden memnun kaldıktan sonra ilerleyin.
2. Codex'in bir taslak oluşturmasını sağlayın ve Figma'da prototipi tamamlayın
Arayüz çizemeseniz bile net bir gereksinimle başlayabilirsiniz. Örneğin, bu sefer bol beyaz alanı olan, okuduğum kitabı görebileceğim, ilerlemeyi kolayca kaydedebileceğim ve okuma geçmişimi gözden geçirebileceğim bir okuma günlüğü istedim.
Codex'e gereksinimlerinizi ve görsel yönünüzü birlikte söyleyin:
1"Bir Sayfa" adında, okuma kontrolü için bir WeChat Mini Programı yapmak istiyorum.2Öncelikle üç sayfa tasarla: Kitaplık Ana Sayfası, Okuma Kaydı ve Okuma İstatistikleri. Henüz işlevsel kod yazma.34Görsel stil sessiz bir okuma günlüğü gibi olmalı:5Krem beyazı arka plan, koyu mavi metin, açık yeşil kilit alanlar, bol beyaz alan.6Ana sayfa, okunan kitabı ve kayıt giriş noktasını vurgulamalı. Diğer sayfalar aynı görsel stili korumalı.7Kitap kapakları için orijinal geometrik grafikler kullan; örnek kitaplar için kurgusal içerik kullan.89Öncelikle bana üç sayfanın yan yana olduğu bir önizleme resmi ver.10Ayrıca, Figma'da daha fazla ayarlama için metin, grafik ve düğme gruplarını bozulmadan koruyan üç bağımsız 390×844 SVG dosyası çıktıla. Lütfen ana düğmeleri ayrı ayrı adlandır.
SVG çıktısı istemek, tasarımı Figma'ya koymanızı sağlar. SVG, vektör grafik formatıdır; bu durumda içe aktarmak, ayrı ayrı seçilip ayarlanabilen metin, grafik ve gruplar sağlar.
Taslağı aldıktan sonra, memnun kalana kadar değiştirin. Geri bildirimde mümkün olduğunca spesifik olun, örneğin "ana sayfa başlığını biraz küçült", "ana düğmeleri koyu mavi yap" veya "kitap kapağını büyüt" gibi. Üç sayfa da tatmin edici olduğunda, prototip etkileşimini ele alın.
Tasarımı Figma'ya koymak
Bir Figma Tasarım dosyası açın, soldaki Sayfalar'ın yanındaki "+" işaretine tıklayın ve yeni bir sayfa oluşturun.
Bu örnekte, SVG içeriğini kopyalayıp Figma tuvaline yapıştırarak içe aktarma tamamlanır. Üç çalışma yüzeyini "01-Kitaplık Ana Sayfası", "02-Okuma Kaydı" ve "03-Okuma İstatistikleri" olarak adlandırın ve yatay olarak düzenleyin. Bir çalışma yüzeyi seçtikten sonra, sağdaki Tasarım panelinde genişlik ve yüksekliği kontrol edin.
Figma'yı ilk kez açıyorsanız, şu alanları tanıyın: solda Katmanlar listesi, ortada Tuval, sağda görünüm için Tasarım paneli ve etkileşimleri ayarlamak için Prototip. Herhangi bir metni veya düğmeyi değiştirmek için önce Katmanlar listesinden seçin.
İçe aktardıktan sonra yazı tiplerini kontrol etmeyi unutmayın. Ortama bağlı olarak yazı tipleri değiştirilebilir, bu da başlık sarmasını ve metin genişliğini etkileyebilir. Bu sefer tasarım taslağındaki ve Mini Programdaki yazı tipi oluşturma farklıydı, bu nedenle ayrı ayrı kontrol edilmeleri gerekiyordu.
Düğmelere atlamalar eklemek
Ana sayfadaki "Okumaya Devam Et" kartını örnek alın. Seçin, sağ üstte Prototip'e geçin ve Etkileşimler'in yanındaki "+" işaretine tıklayın.
Açılan Etkileşim panelinde şu üç seçeneği ayarlayın:
- Tetikleyici: "Tıklandığında" seçin.
- Eylem: "Şuraya Git" seçin.
- Hedef: "02-Okuma Kaydı"nı (hedef çalışma yüzeyi) seçin.
Kayıt sayfasındaki kaydet düğmesi ana sayfaya, ana sayfadaki istatistik simgesi ise istatistik sayfasına bağlanır. Aşağıdaki resim, istatistik girişi için kurulumu göstermektedir.
Sağ üstteki üçgen "Sun" simgesine tıklayarak prototip demosunu açın. Ana sayfadan başlayıp geri dönerek sayfalar arasındaki yolları test edin.
Figma prototipi atlamaları gösterir; gerçek giriş, kaydetme ve veri güncellemeleri bir sonraki adımda Mini Program kodu tarafından uygulanacaktır.
3. Tasarım hazır; MCP'yi nerede kullanırım?
MCP, Figma tasarımını Codex'e teslim etme adımında kullanılır. Bağlandıktan sonra Codex, seçilen çalışma yüzeyinin tasarım yapısını, stillerini ve varlıklarını okuyabilir ve tasarım taslağına göre uygulamaya devam edebilir.
Figma'yı nasıl kullanacağınızı zaten biliyorsanız ve hazır bir taslağınız varsa, doğrudan buradan başlayabilirsiniz. Uygulamak istediğiniz çalışma yüzeyini seçin, o çalışma yüzeyinin düğüm bilgilerini içeren bağlantıyı kopyalayın ve Figma bağlantısı etkinken Codex'e gönderin.
1Lütfen Figma MCP aracılığıyla bu çalışma yüzeyinin tasarım bağlamını ve ekran görüntülerini oku.2Öncelikle okuduğun sayfa yapısını, yazı tipi boyutlarını, renkleri, boşlukları ve varlıkları açıkla.3Okuyamadığın kısımlar varsa bana açıkça söyle; tahmin yürütme.45Ardından, WXML, WXSS, JavaScript ve JSON kullanarak yerel bir WeChat Mini Programı oluşturacağız.6Lütfen bu teknoloji yığınına göre uygula, projedeki mevcut stilleri ve varlıkları yeniden kullan.7Önce ana sayfayı tamamla ve onaydan sonra diğer sayfalarla devam et.
"Yerel WeChat Mini Programı"nı belirttiğinizden emin olun. Figma tarafından sağlanan tasarım bilgilerinin hedef platforma göre uygulanması gerekir; bir Mini Program için yalnızca web kodu kullanamazsınız.
Bu örnekte, tasarım SVG aracılığıyla Figma'ya aktarıldı ve kod aynı tasarım dosyasını ve varlıkları takip ediyor; MCP, halihazırda bir Figma tasarım taslağı mevcut olduğunda aradaki boşluğu doldurmanın bir yoludur. Yöntem ne olursa olsun, Codex'e teslim edilen şey onaylanmış bir tasarım olmalıdır.
4. Tasarımı bir Mini Programa yazmak
Proje klasörünü Codex'te açın, tasarım dosyalarını ve kitap kapağı varlıklarını yerleştirin ve uygulamaya başlayabilirsiniz.
Bu adımda, teknolojiyi belirtmenin yanı sıra, ne almak istediğinizi de açıkça belirtmelisiniz: doğrudan WeChat Geliştirici Araçları'na aktarılabilen bir proje.
1Lütfen onaylanan "Bir Sayfa" tasarımına dayalı yerel WeChat Mini Programını tamamla.23WXML, WXSS, JavaScript ve JSON kullan.4Kodu miniprogram klasörüne yerleştir ve doğrudan WeChat Geliştirici Araçları'na aktarılabilmesi için app.json ve project.config.json sağla.56Kitaplık, Okuma Kaydı, İstatistikler ve Kitap Ekle sayfalarını uygula.7Onaylanan renk şemasını, düzeni ve orijinal kitap kapağı varlıklarını takip et.8Verileri şimdilik wx.setStorageSync kullanarak yerel olarak kaydet ve yeniden açıldığında oku.9Giriş doğrulaması, boş durumlar ve kaydetme başarısızlık uyarıları ekle.1011Tamamlandığında kodu kontrol et ve bana hangi dizini içe aktaracağımı ve nasıl derleyeceğimi söyle.12Yapılandırmam gereken öğeler varsa, lütfen bunları ayrı ayrı listele.
Codex tarafından oluşturulan projede, WXML sayfa yapısını, WXSS stilleri, JavaScript tıklamaları ve kaydetmeyi, JSON ise sayfa yollarını yapılandırır. Her dosyanın ne yaptığını tanıdığınızda, teslim edilen dizini anlayabilirsiniz.
Burada bunalmayın; Codex'in sizin için çözmesine izin verin. Kodu anlamanıza gerek yok; sadece istemleri kopyalayın, tasarım taslağınızı ekleyin ve kendi adınızla değiştirin.
5. WeChat Geliştirici Araçları'na koyun ve çalışıp çalışmadığını görün
WeChat Geliştirici Araçları'nı kurup giriş yaptıktan sonra, "Proje" menüsünden "Proje İçe Aktar"ı seçin ve Codex tarafından oluşturulan miniprogram klasörünü bulun.
Proje adı istediğiniz gibi olabilir. AppID, bu Mini Programın kimliğidir: yerel öğrenme için aracın sağladığı test hesabını kullanabilirsiniz, ancak yayınlamaya hazırlanırken kendi Mini Program AppID'nize geçmelisiniz. Bu örnek için arka uç olarak "Bulut hizmetlerini kullanma"yı seçin.
"Oluştur"a tıklayın, projeye girin ve derlemenin tamamlanmasını bekleyin. Sağdaki simülatör sayfayı görüntülediğinde, fare ile doğrudan çalıştırabilirsiniz. Codex kodu değiştirdikten sonra, sonuçları görmek için yeniden derleyin.
Burada esas olarak üç şeyi kontrol edin: sayfaların hizalanıp hizalanmadığı, düğmelerin doğru sayfalara yönlendirip yönlendirmediği ve girilen içeriğin kaydedilip kaydedilemediği. Ayrıca, uzun başlıkların, giriş kutularının ve alt gezinmenin sıkışık olup olmadığını görmek için simülatörün ekran boyutunu değiştirin.
Sorunlar oluşursa, hata metnini veya ekran görüntüsünü, az önce ne yaptığınızı ve ne görmeyi beklediğinizle birlikte Codex'e gönderin. Örneğin:
1Bu, WeChat Geliştirici Araçları'ndaki bir hatanın ekran görüntüsü.2Ana sayfadan kayıt sayfasına girdiğimde kitap kapağı görüntülenmiyor.3Lütfen resim yolunu ve sayfa yükleme zamanlamasını kontrol et. Mevcut düzeni değiştirmeden düzelt.
Bu durumda, aslında bir resim yükleme sorunuyla karşılaştık: kod, sayfa verileri hazır olmadan resim adresini birleştirmeye başladı ve bu da yolda eksik bir kitap kapağı adına neden oldu. Koda, resmi görüntülemeden önce verilerin hazır olmasını beklemesini söylemek sorunu çözdü.
Benzer sorunlar, kodu sıfırdan incelemenizi gerektirmez, ancak nerede oluştuklarını açıkça belirtmelisiniz. Düzeltmeden sonra simülatöre dönün, işlemi tekrarlayın ve normale döndüğünü onaylayın.
6. Bilgisayar simülatöründen mobil önizleme ve yayınlamaya
Bilgisayarda çalıştıktan sonra, telefonunuzda kontrol edin.
Uygun izinlere sahip bir AppID kullanarak, geliştirici araçlarının üst kısmındaki "Önizle"ye tıklayın, QR kodunun oluşturulmasını bekleyin ve ardından izin verilen bir WeChat hesabıyla tarayın. Telefondaki yazı tipi boyutuna, klavye açıldığında giriş alanını engelleyip engellemediğine ve alt düğmelere kolayca ulaşılıp ulaşılamadığına odaklanın.
Bu örnekte, veriler yerel olarak kaydedilir, bu nedenle simülatördeki kayıtlar telefona otomatik olarak senkronize olmaz. Telefonda test içeriğini yeniden girmeniz gerekir; gelecekte verileri cihazlar arasında tutmak isterseniz, bulut senkronizasyonu veya yedekleme işlevleri ekleyebilirsiniz.
Arkadaşlarınızın denemesi için hazır olduğunuzda, geliştirici araçlarının üst kısmındaki "Yükle"ye tıklayın, ardından WeChat Resmi Hesap Platformu'nun Mini Program arka ucuna gidin. Sürüm Yönetimi'ne girin, ilgili geliştirme sürümünü bulun, Deneme Sürümü olarak ayarlayın ve deneme üyeleri ekleyin. Deneme üyelerinin uygun izinlere sahip olması gerekir.
Kullanılabilir olduğu onaylandıktan sonra, arka uçta denetim için gönderin ve onaydan sonra yayınlayın. Hesap bilgilerini ve hizmet kategorilerini arka ucun gerektirdiği şekilde doldurun; bu hesap işlemlerini tamamlamak için Codex'e ihtiyacınız yoktur.
Bu örnek, geliştirici araçlarında çalıştırılabilir aşamaya ulaştı. Okuyucular, kendi Mini Program hesaplarını kullanarak mobil önizleme, yükleme ve denetim için gönderme işlemlerine devam edebilir.
Tüm süreci bağlamak
Öncelikle, sayfaları ve düğme atlamalarını belirlemek için Figma'yı kullanın, tasarımdan memnun kalana kadar; ardından tasarım dosyasını veya çalışma yüzeyi bağlantısını Codex'e teslim ederek bir WeChat Mini Programına dönüştürün; ardından geliştirici araçlarına aktararak simüle edin, çalıştırın ve hataları kontrol edin; son olarak telefonda önizleyin ve onaydan sonra yükleyin, denetleyin ve yayınlayın.
Gelecekte, ister bir kontrol aracı, ister bir yemek tarifi uygulaması veya başka küçük yardımcı programlar yapıyor olun, yine de bu iş akışını takip edebilirsiniz. Tasarım tatmin edici değilse, Figma'ya dönüp ayarlama yapın; işlevsel bir sorun varsa, belirli işlemi ve hatayı Codex'e teslim edin ve ardından değişiklik sonuçlarını geliştirici araçlarında onaylayın.
Ben Miles, büyük bir teknoloji şirketinden FDE'ye geçiş yapmış bir AI algoritma uzmanıyım. Algoritma Ar-Ge, optimizasyon ve dağıtım ile kurumsal eğitim üzerinde çalıştım. Beni takip edin @miles_mazy birlikte büyüyelim ve birlikte para kazanalım.
