Web3 dapp'inize kullanıcı geri bildirim döngüsü nasıl eklenir

Kullanıcı geri bildirimlerini toplamak, ürün-pazar uyumunu sağlamanın ve başarılı bir uygulama oluşturmanın en kritik adımlarından biridir. UX tasarım standartlarının hâlâ şekillendiği ve tanımlanmadığı web3 dünyasında bu durum çok daha büyük bir önem taşımaktadır.

Web3 geliştiricileri için dapp'leri hakkında kullanıcı geri bildirimi toplamanın en popüler yöntemi, Google ve Mailchimp gibi şirketlerin sunduğu merkezi çözümler olmaya devam etmektedir. Ancak artık zincir üstü geri bildirim formları da kullanılabilir hâle gelmiştir. Gelin bu web3'e özgü geri bildirim formlarına, dapp'inizin başarısı için neden önemli olduklarına ve nasıl kullanılacaklarına birlikte bakalım.

Daha önce yayımladığımız bir yazıda, Consensys tarafından geliştirilen yeni bir açık kaynaklı, merkeziyetsiz web3 formu olan Form-xChange'i tanıtmış ve MetaMask SDK kullanarak dapp'inize nasıl entegre edeceğinizi göstermiştik.

Bu eğitimde, söz konusu adımları bir adım ileri taşıyarak geri bildirim formunu frontend'inize nasıl deploy edeceğinizi ve kullanıcıların dapp'iniz hakkında görüşlerini paylaşabilmesi için yeni bir form nasıl oluşturacağınızı göstereceğiz. Ancak önce, ürün geliştirme ve yönetimi açısından kullanıcı geri bildirimi toplamanın önemi hakkında kısa bir hatırlatma yapalım.

Kitlesel benimsemeye yardımcı olacak web3 kullanıcı geri bildirim formları

Web3'te yerel, merkeziyetsiz geri bildirim formlarına büyük bir ihtiyaç vardır. Peki neden?

1. Maliyetleri önemli ölçüde düşürürler: Form oluşturmayla ilişkili tek maliyet, akıllı sözleşmenin deploy edilmesi sırasında gerçekleşen (ve yalnızca bir kez ödenen) maliyettir. Linea gibi bir L2 üzerinde deploy edildiğinde bu maliyet genellikle birkaç doları geçmez.

2. Neredeyse sonsuz özelleştirme imkânı sunarlar: Formunuzu istediğiniz türde geri bildirim toplayacak şekilde tasarlayabilirsiniz (metin, tepkiler, bağlantılar vb.). Ayrıca sözleşmeden tamamen bağımsız olan frontend'inizi ihtiyacınıza göre özelleştirebilirsiniz.

3. Yalnızca kullandığınız kadar ödersiniz: Merkeziyetsiz formlarda yanıt sayısına göre belirlenen ödeme kademeleri yoktur. Teorik olarak istediğiniz kadar yanıt kaydedebilirsiniz. Müşterilerin gas ödediği bir model benimsiyorsanız, sözleşme deploy maliyetinin ötesinde herhangi bir masrafla karşılaşmazsınız. Müşterileriniz adına ödemeyi siz yapmayı tercih ederseniz, maliyet açısından verimli bir ağda çalışırken bu maliyet yine birkaç sent düzeyinde kalır.

4. Token gating uygulayabilirsiniz: Merkeziyetsiz formlar sayesinde, formunuzdaki sorulara kimlerin yanıt verebileceğini kısıtlayabilirsiniz. Bu sayede teorik olarak erişimi; koleksiyonunuzdan NFT sahibi olan cüzdanlarla, belirli miktarda sıfırdan fazla ETH bakiyesine sahip cüzdanlarla veya seçtiğiniz bir ERC-20 token'ına sahip cüzdanlarla sınırlayabilirsiniz.

Eğitim: Kendi merkeziyetsiz kullanıcı geri bildirim formunuzu oluşturma

Adım 1: MetaMask'ı yükleyin

Sözleşmelerimizi Linea üzerinde deploy edip bunlarla etkileşime geçeceğiz. Bunun için Linea ağıyla yapılandırılmış ve küçük miktarda LineaETH bakiyesine sahip bir kripto cüzdanına ihtiyacımız olacak.

İlk olarak bir web3 cüzdanına ihtiyacınız var. Bu eğitimde, Linea ile otomatik olarak yapılandırılmış şekilde gelen ücretsiz ve kullanımı kolay bir cüzdan olan MetaMask'ı kullanacağız. MetaMask'ı buradan tarayıcı uzantısı olarak yükleyebilirsiniz.

Not: Bu eğitim için Brave dışında bir tarayıcı kullanmanızı öneririz (örneğin Edge, Chrome, Safari vb.). Bu yazının hazırlandığı tarihte Form-xChange'in Brave tarayıcısında çalışırken bilinen sorunları bulunmaktadır.

Uzantıyı ekledikten sonra MetaMask, cüzdan kurtarma ifadenizi almanız da dahil olmak üzere bir dizi adımı tamamlamanızı isteyecektir. Bu ifadeyi dikkatlice saklayın. Kaybolursa kurtaramazsınız. Çalınırsa başkası fonlarınıza erişebilir.

Cüzdanınızı kurduktan sonra MetaMask uzantısının sol üst köşesindeki ağ açılır menüsüne gidin ve test ağlarını göster seçeneğini açın. Yeni açılır menüden Linea Goerli ağını seçin. Her şey yolunda giderse cüzdanınız şuna benzer bir görünüm alacaktır:

Adım 2: Bir faucet'ten LineaETH edinin

Linea ile ilk kez çalışıyorsanız cüzdanınızın LineaETH bakiyesi (elbette) 0 olacaktır.

Bunu değiştirelim. Infura'nın bir faucet'i bulunmakta olup her gün ücretsiz 0,5 LineaETH almanızı sağlar. Bu faucet'e erişmek için ücretsiz bir Infura hesabı oluşturmanız istenebilir.

Yükleme tamamlandıktan sonra küçük bir LineaETH bakiyesi görmeniz gerekir:

Adım 3: Linea RPC endpoint'i edinin

Önceki adımda oluşturduğunuz hesapla Infura'ya tekrar giriş yapın. Ana panoya otomatik olarak yönlendirileceksiniz.

Burada, sağ üst köşeden yeni bir API anahtarı oluşturarak yeni bir proje başlatın.

Ağ için web3 API'yi seçin. Anahtara istediğiniz ismi verebilirsiniz.

Anahtarınız oluşturulduktan sonra, bir dizi endpoint içeren proje panosuna yeniden yönlendirileceksiniz. Buradan Linea testnet ile ilişkili endpoint'i not alın. Form-xChange sözleşmelerimizi deploy etmek için sonraki bir adımda buna ihtiyaç duyacağız.

Adım 4: Node ve npm'i yükleyin

Form-xChange çözümü, Infura, Next.js, Truffle ve Dapp API'den oluşan bir teknoloji yığını üzerinde çalışır. Bu teknolojileri yükleyip kullanabilmek için yerel makinemizde node ve npm'e ihtiyacımız olacak.

Her iki aracı da işletim sisteminiz için buradan indirebilirsiniz.

İşlem tamamlandıktan sonra terminalinizde sürüm numaralarını kontrol ederek doğru şekilde yüklendiğini doğrulayın.

$ node -v
$ npm -v
Kopyala

Adım 5: Form-xChange deposunu klonlayın

Daha önce belirtildiği gibi Form-xChange, kaynak kodu GitHub'da herkese açık olan bir açık kaynak deposudur.

Bu depoyu klonlayalım ve aşağıdaki komutları kullanarak gerekli tüm paketleri yükleyelim:

$ git clone https://github.com/Consensys/Form-XChange
$ cd Form-XChange
$ npm install
Kopyala

Form-xChange deposunu favori kod düzenleyicinizde açın (örn. VS Code). Bu, kullanıma hazır bir proje olduğundan birkaç ortam değişkenini yapılandırmanın ötesinde fazla kod yazmamıza gerek kalmayacak.

Adım 6: Geri bildirim formunu deploy edin

Truffle projesini ve form akıllı sözleşmelerini içeren alt klasöre gidin:

Bu klasörde, iki ana sözleşme içeren bir contracts alt klasörü göreceksiniz: FeedbackForm ve FeedbackFormFactory.

İlki, bir soru listesini ve bu sorulara verilen yanıtları depolayabilen bireysel bir form uygular.

İkincisi ise birincinin özelleştirilmiş sürümlerini deploy etmek için kullanılabilen bir factory sözleşmesidir.

Kaynak koduna göz atabilir ve oluşturmak istediğiniz form türüne göre değişiklikler yapabilirsiniz. Bu eğitimde varsayılan yapılandırmayı kullanmaya devam edeceğiz.

Bu adımda FeedbackFormFactory sözleşmesini deploy edeceğiz. Bu, oluşturucu olarak Next frontend'imizden form oluşturmamıza olanak tanıyacak.

Bunu yapmak için .env adlı bir dosya oluşturun ve aşağıdaki bilgileri ekleyin:

Ardından truffle-config.js dosyasında genel RPC endpoint'ini Adım 3'te oluşturduğunuz Infura endpoint'iyle değiştirin. Nihai yapılandırma dosyası şuna benzer bir görünüm almalıdır:

require("dotenv").config();
const mnemonic = process.env["MNEMONIC"];

const HDWalletProvider = require("@truffle/hdwallet-provider");

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1", // Localhost
      port: 9545,
      network_id: "5777",
      chain_id: 1337,
    },
    linea: {
      provider: () =>
        new HDWalletProvider(mnemonic, `< INFURA LINEA ENDPOINT >`),
      network_id: 59140,
      chain_id: 59140,
    },
  },
  mocha: {
    timeout: 100000,
  },
  compilers: {
    solc: {
      version: "0.8.13",
    },
  },
};
Kopyala

Hazırız! Aşağıdaki komutu çalıştırarak geri bildirim formu factory sözleşmesini deploy edin:

Her şey yolunda giderse şuna benzer bir çıktı görmeniz gerekir:

> [email protected] linea
> npm run compile && npm run generate-types && npm run migrate:linea

> [email protected] compile
> truffle compile

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

> [email protected] generate-types
> typechain --target=truffle-v5 'build/contracts/*.json'

Successfully generated 5 typings!

> [email protected] migrate:linea
> truffle migrate --network linea

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

Starting migrations...
======================
> Network name:    'linea'
> Network id:      59140
> Block gas limit: 61000000 (0x3a2c940)

1_deploy_contracts.js
=====================

   Replacing 'FeedbackFormFactory'
   -------------------------------
   > transaction hash:    0x50ba2c362cb463d0b763ba5f092e3f1a8591dd9cd358f2feda035438ce02cee0
   > Blocks: 2            Seconds: 21
   > contract address:    0xBDAb1F857dC80968022784cc1C868820BFD2F7c5
   > block number:        1099121
   > block timestamp:     1688991002
   > account:             0xc361Fc33b99F88612257ac8cC2d852A5CEe0E217
   > balance:             0.62878173171592041
   > gas used:            2636875 (0x283c4b)
   > gas price:           2.500000007 gwei
   > value sent:          0 ETH
   > total cost:          0.006592187518458125 ETH

   > Saving artifacts
   -------------------------------------
   > Total cost:     0.006592187518458125 ETH

Summary
=======
> Total deployments:   1
> Final cost:          0.006592187518458125 ETH
Kopyala

Sözleşme adresini not alın. Sonraki bir adımda buna ihtiyacımız olacak.

Adım 7: Next frontend factory'yi deploy edin

Geri bildirim formu factory sözleşmemiz yayında olduğuna göre dikkatimizi Next frontend'e çevirelim. Aşağıdaki komutu çalıştırarak Next uygulama projesine gidin:

Uygulamamızı önceki adımda deploy ettiğimiz sözleşmeyle bağlamamız gerekecek. Bunu lib/contract.ts/config.ts dosyasını açıp sözleşme adresini ekleyerek yapabiliriz.

apps/web klasöründe başka bir .env dosyası oluşturun ve bu sefer Adım 3'teki projenizle ilişkili Infura anahtarını ekleyin.

Hazırız! Şimdi uygulamayı localhost'a deploy edelim:

Artık uygulamayı localhost:3000 adresinde inceleyebilirsiniz. Şuna benzer bir görünüm olmalıdır:

Haydi yeni bir form oluşturalım!

Uygulamanın sağ üst köşesindeki işlevi kullanarak MetaMask cüzdanınızı bağlayın. Bu işlem tamamlandığında uygulama, factory sözleşmesini deploy edenin siz olduğunuzu otomatik olarak tanır ve dolayısıyla uygulamanın oluşturucusu da siz olursunuz.

Bu sayede buradaki kullanıcı arayüzünden yeni formlar oluşturabilirsiniz.

Bir form başlığı, açıklama ve en az bir soru ekleyip Form Oluştur'a tıklayın.

Bu işlem MetaMask'ın bir işlemi onaylamanızı istemesine neden olacaktır. Bunun istenmesinin nedeni, form oluşturmanın aslında yeni bir FeedbackForm sözleşmesinin oluşturulması anlamına gelmesidir.

Ana sayfaya dönün; formunuzun orada göründüğünü görmelisiniz. Artık formunuza yanıt gönderebilirsiniz!

Bu yanıtı kaydetmek için (MetaMask aracılığıyla) küçük miktarda gas ödemeniz gerekeceğini unutmayın.

Web3 yığınıyla geliştirmeye devam edin: Infura, Linea ve MetaMask

İşte bu kadar! Neredeyse hiç kod yazmadan dapp'imiz için eksiksiz bir merkeziyetsiz form çözümü deploy ettik ve kullanıcı geri bildirimlerini yalnızca toplamakla kalmayıp merkeziyetsiz, web3'e özgü bir formda toplama imkânı kazandık. Form-xChange gibi projeler, web2 UX tasarımını web3 uygulamalarına taşıma yolunda önemli bir adım olacaktır. Next frontend'inizin görünümünü ve hissini, akıllı sözleşmelerin sunduğu işlevselliği dilediğiniz gibi değiştirmekten çekinmeyin. Bunu kendinize özgü hâle getirmekte özgürsünüz; hatta bunu yapmanızı öneririz.