Klasörü açın
Proje klasörünü yeni bir sohbetin çalışma dizini olarak seç ve Ask first modunu etkinleştir; böylece dosya yazan her değişiklik senin kararını bekler. Başlamadan önce ABI dosyasını bu klasöre yerleştir.
İş Akışları
Boş bir klasörden test edilmiş bir ekrana dApp oluşturun
03
Boş bir proje klasöründen başlayın
Bir dApp oluşturmak için, içinde sadece kendi sözleşmenizin ABI dosyası bulunan boş bir klasörle başlayın. Bu klasörü yeni bir sohbetin çalışma dizini olarak açın, Ask first modunu seçin ve görmek istediğiniz sayfayı tanımlayın: cüzdan bağlama düğmesi, bakiye gösterimi ve işlem durumu satırı. Aracı klasörü tarar, dosyaları fark (diff) olarak önerir ve her değişikliği sen onaylayana kadar sayfayı oluşturmaz. Başlamadan önce projenin nerede çalışacağını belirle. Bilgisayarındaki yerel zincir ilk deneme için uygundur çünkü üzerindeki coinlerin bir değeri yoktur; sayfa çalıştıktan sonra bir sonraki adım halka açık bir test ağıdır. Her iki ortamda da tek kullanımlık hesaplar kullan, gerçek varlık barındıran bir hesap kullanma; özel anahtarını ve kurtarma ifadesini (seed phrase) klasörde, sohbette ve depoda saklama. Sonuçta küçük, test edilmiş bir sayfa ve başka birinin takip edebileceği bir README dosyası elde edersin.
Ekranı tanımlayın
Sayfanın hangi verileri göstereceğini ve hangi işlem durumlarını yönetmesi gerektiğini düz cümlelerle yaz. Çağracağı sözleşme fonksiyonunu ve bağlanacağı ağı, örneğin yerel zincirini, belirt.
Her farkı gözden geçirin
Sohbetteki her dosya değişikliğini oku, ardından kısa bir notla kabul et veya reddet. Tam farkı görmek için kartı genişlet ve bir cümleyle açıklayamadığın herhangi bir değişikliği reddet.
Çalıştırın ve kontrol edin
Shell'in derleme ve test komutlarını çalıştırmasına izin ver ve her karttaki çıkış kodunu (exit code) kontrol et. Sayfayı yerel zincire bağla ve gösterdiği sonuçları beklentilerinle karşılaştır. Bir sonraki özelliği eklemeden önce hata veren kısımları düzelt.
Başlangıç için küçük bir ABI dosyası
ABI'den balanceOf'u oku ve sonucu sayfada göster.
- read_file
balance-abi.jsonyüklenmiş - write_file
app.jskaydedildi - edit_file
index.html+4 satır - Shell
your build commandexit 0
bir sonraki adımdan önce onayınızı bekliyorReddetKabul et
balance-abi.json
[
{
"type": "function",
"name": "balanceOf",
"stateMutability": "view",
"inputs": [{ "type": "address", "name": "account" }],
"outputs": [{ "type": "uint256" }]
}
]Bu JSON parçası, tek okunabilir (read-only) bir fonksiyon olan balanceOf'u tanımlar; bu, ERC-20 tokenlerin kullandığı bakiye okuma fonksiyonudur. account adında bir adres parametresi alır ve uint256 döndürür. Bir ön uç (front end), sözleşmeyi çağırmak için bu tür bir ABI kullanır ve dosya anahtar veya gizli bilgi içermez. Sayfa çalışana kadar bunu proje klasörüne balance-abi.json olarak kaydet; gerçek bir sözleşmede genellikle çok daha fazla fonksiyon bulunduğundan, sayfa çalıştıktan sonra kendi sözleşmenizin tam ABI'si ile değiştir.
İlk dApp için adım adım rehberler
Klasörü eşleyin ve ABI'yi okuyun
web3 öğrenmeye başlamanın iyi bir yolu, hiçbir şey yazmadan önce küçük bir ABI dosyası okumaktır. Aracıdan balance-abi.json'u açmasını iste. read_file dosyayı gösterir, list_dir klasördeki diğer dosyaları listeler ve grep fonksiyonun tam adını doğrular. Aracı daha sonra sohbette balanceOf'un bir view fonksiyon olduğunu açıklar: veri okur ve işlem göndermez, bu nedenle çağırmak zincirde hiçbir şey değiştirmez. Henüz hiçbir şey yazılmaz. Ayrıca sayfanın neye ihtiyacı olduğunu listeler: bir düğüme bağlantı, dağıtılmış sözleşmenin adresi ve bakılacak bir hesap. Her ifadeyi karttaki JSON ile karşılaştır; çünkü bir model bir türü yanlış okuyabilir veya dosyada bulunmayan bir fonksiyon adlandırabilir. Devam etmeden önce düzeltme iste.
Sayfayı yerel bir zincire bağlayın
Tek kullanımlık bir test hesabının bakiyesini okuyan bir sayfa iste. write_file, JSON-RPC üzerinden yerel zincirine bir çağrı içeren app.js oluşturur ve edit_file index.html'e bir betik satırı ekler. Bir dApp'in birden fazla zincirle iletişim kurması için zincirler arası araçlara ihtiyacın vardır; tek bir yerel zincirdeki ilk projeye bunların hiçbiri gerekmez, bu yüzden onları çıkar. Ask first modunda her iki değişiklik de fark olarak bekler. Oku ve kabul et. Shell daha sonra derleme komutunu çalıştırır ve kart gerçek çıkış kodunu gösterir. Sayfayı aç, gösterdiği sayıyı yerel zincirinin aynı hesap için bildirdiği sayıyla karşılaştır ve ikisi farklıysa aracıdan sayfayı düzeltmesini iste. Zincir adresini tek bir yerde tut; böylece ağ değiştirmek yalnızca tek bir satırı düzenlemek anlamına gelir.
İşlem durumlarını yönetin
Bir geliştirici olarak web2'den web3'e geçiş, çoğunlukla zaten nasıl oluşturulacağını bildiğin ekranlara bir cüzdan, bir ağ ve bir işlem durumu eklemek demektir. Aracıdan 5 durumlu bir durum satırı eklemesini iste: gönderilmedi, cüzdan bekleniyor, bekliyor (pending), onaylandı ve başarısız oldu. edit_file betiği ve stil sayfasını değiştirir, grep ise bir durumun hala eksik olduğu herhangi bir yeri bulur. Cüzdan imzalar; kodun özel anahtara veya tohum ifadesine (seed phrase) dokunmaz. Ayrıca eksik cüzdan, yanlış ağ ve reddedilen imza durumları için mesajlar iste; çünkü gerçek bir kullanıcı bunlara erken veya geç rastlayacaktır. Sayfayı tek kullanımlık bir hesapla bir test ağı üzerinde çalıştır, kasıtlı olarak bir imzayı reddet ve başarısız durumun net bir mesajla görünüp görünmediğini kontrol et.
Test edin, ardından projeyi belgeleyin
Aracıdan her durum için bir ön uç testi ve projenin nasıl çalıştırılacağını açıklayan kısa bir README yazmasını iste. write_file her iki dosyayı da oluşturur, Shell test komutunu çalıştırır ve kart gerçek çıkış kodunu bildirir. Bir ay sonra projeye dönen bir geliştirici önce bu README'yi okuyacaktır; bu yüzden yalnızca gerçekten kullandığın komutları adlandırdığından ve sayfanın hangi ağı beklediğini belirttiğinden emin ol. Herhangi bir dosya oluşturulmadan önce adım listesini görmek istiyorsan önce Plan only modunu kullan, ardından uygulamak için Ask first'e geç. Her farkı oku, testleri tek kullanımlık hesaplarla bir test ağı üzerinde kendi başına bir kez çalıştır ve README dosyasını ABI dosyasının yanında tut; böylece ikisi senkronize kalsın.
