Dapp'inize Geri Bildirim Formu Entegre Edin ve Büyük Ölçekte Kullanıcı Verisi Toplayın

Web3 paradigma değişimi interneti yeniden şekillendirmeye devam ederken, geliştiriciler kullanıcı etkileşimini artırmak, karar alma süreçlerini demokratikleştirmek ve on-chain üzerine inşa ettikleri uygulamaları kullanan kişilerden değerli içgörüler elde etmek için sürekli olarak yeni yollar aramalıdır. Kullanıcı geri bildirimlerini toplamanın bir yöntemi, dapp'lere bir geri bildirim veya anket formu entegre etmektir. Geri bildirim formları, kullanıcılar ile geliştiriciler arasındaki iletişim boşluğunu kapatır ve uygulamaları iyileştirmek için geniş ölçekte gerçek zamanlı geri bildirim sağlar. Aynı zamanda aktif katılım ve kolektif karar alma ortamını teşvik eder.

Merkeziyetsiz Otonom Organizasyonlar'ın (DAO'lar) on-chain yönetim için geri bildirim formlarını kullanmasından, işletmelerin çalışan memnuniyetini ölçmek amacıyla bu formlardan yararlanmasına kadar, geri bildirim formlarının kullanım alanları sınırsızdır.

Bu blog yazısı, uygulamanızın backend'ine bir geri bildirim formu entegre etmek ve kullanıcı geri bildirimlerini toplamaya başlamak için adım adım bir eğitim sunmaktadır. Bunun için MetaMask SDK ve diğer Consensys araçları kullanılarak şirket içinde geliştirdiğimiz Form xChange adlı bir geri bildirim formunu kullanacağız.

Form xChange

Dapp'inizin kullanıcı deneyimini iyileştirmek, konferans sonrası geri bildirim toplamak veya karar alma süreçlerini demokratikleştirmeyi hedefleyen bir DAO üyesi olmak istiyorsanız, bu eğitim size bir geri bildirim formunu nasıl entegre edeceğinizi ve uygulamanız içinde yeni bir iletişim kanalı açacağınızı gösterecektir.

Form xChange nedir ve nasıl çalışır?

Form xChange, blockchain üzerinde geri bildirim formlarının oluşturulması ve kullanılması için geliştirilmiş açık kaynaklı bir araçtır. Form xChange için akıllı sözleşme şu anda Linea üzerinde dağıtılmış olsa da esnek mimarisi, herhangi bir EVM uyumlu ağda dağıtıma olanak tanır.

Platform, katılımcıların bu formlara dahil edilen önerilere anonim oy kullanmasını sağlar ve hem katılımcılara hem de form oluşturuculara sonuçları görüntüleme erişimi sunarak web3'ün şeffaflık anlayışını yansıtır.

Form xChange, Next.js ile oluşturulmuş kullanıcı dostu bir arayüz kullanır ve her ikisi de Solidity ile yazılmış iki akıllı sözleşmeyle çalışır: FeedbackForm sözleşmesi ve FeedbackFormFactory sözleşmesi. Süreç oldukça basittir; her yeni form oluşturulduğunda, FeedbackFormFactory sözleşmesi tarafından verimli bir şekilde yönetilen bu görevle birlikte yeni bir FeedbackForm sözleşmesi dağıtılır.

Form xChange'i kullanmak için kullanıcıların önce MetaMask cüzdanlarını kullanarak uygulamaya bağlanmaları ve giriş yapmaları gerekir. Desteklenen rol ve sorumlulukların bazıları şunlardır:

Form Yazarı

• Geri bildirim toplamak amacıyla birden fazla soru içeren yeni formlar oluşturabilme.

• Geri bildirim toplandıktan sonra her bölüme verilen kullanıcı yanıtlarından elde edilen ortalama puanı görüntüleyebilme.

Katılımcı

• Anonimliği koruyarak formlara veya önerilere yanıt gönderebilme.

• Yanıt gönderildikten sonra sonuçları görüntüleyebilme.

Geniş ölçekte kullanıcı geri bildirimi için dapp'inize bir geri bildirim formu entegre edin

Daha basit kullanım senaryolarına sahip kullanıcılar, Form xChange'in halihazırda dağıtılmış örneğine güvenebilir. Ancak benzersiz bir kullanım senaryonuz varsa ve kendi örneğinizi barındırmak ya da kullanıcı arayüzünün nasıl görüneceğini kontrol etmek istiyorsanız, bu blog yazısının bu bölümü tam size göre.

Repository'yi yerel makinenize nasıl klonlayacağınızı ve backend'i nasıl çalıştıracağınızı ele alacağız; Form xChange backend'inin yeni bir örneğini Linea'ya dağıtacağız ve son olarak MetaMask SDK'ya ve herhangi bir platformdan kullanıcıların MetaMask cüzdan istemcilerini bağlamayı nasıl kolaylaştırdığına değineceğiz.

Bu eğitimin kapsamı dışında olduğundan bir kullanıcı arayüzü oluşturmayacağız; ancak kendi kullanıcı arayüzünüzü nasıl oluşturabileceğinize dair fikir edinmek için bu repository'ye göz atmaktan çekinmeyin.

Form xChange backend'i nasıl klonlanır

Bu bölüm, bilgisayarınızda node.js v16 veya üzeri ile Truffle geliştirme ortamının kurulu olduğunu varsaymaktadır.

1. Repository'yi klonlayın: git clone [email protected]:Consensys/Form-XChange.git

2. Sözleşme dizinine gidin: cd Form-XChange/packages/form-XChange

3. Sözleşmeyi derleyin: truffle compile

4. Testi çalıştırın: truffle test

Form xChange backend'inin kendi örneğinizi Linea'ya nasıl dağıtırsınız

Linea nedir ve neden Linea'ya dağıtım yapılmalıdır? Linea, Ethereum ortamını bir rollup olarak kopyalayan ve geliştiricilerin Ethereum'un deneyimi ve güvenliğiyle ancak daha düşük işlem maliyetleriyle üzerine inşa etmesine olanak tanıyan tip 2 sıfır bilgi Ethereum Sanal Makinesi'dir (zkEVM).

Linea; daha hızlı kesinlik, tüm geliştirme araçlarıyla uyumluluk, MetaMask ile varsayılan entegrasyon ve yüksek verim gibi avantajlar sunmaktadır. Bu özellikler, Linea'yı Form xChange backend'ini dağıtmak için mükemmel bir seçenek haline getirmektedir.

Linea'nın ne olduğunu ve neden harika bir seçim olduğunu anladığımıza göre, Linea'ya nasıl dağıtım yapılacağına bakalım. Bu bölümü takip edebilmek için MetaMask cüzdan uzantısının kurulu olduğundan ve biraz Linea Eth'e sahip olduğunuzdan emin olun. Linea Eth edinme hakkında daha fazla bilgi için belgelere bakın.

1. Truffle dashboard'u çalıştırın: truffle dashboard.

2. Tarayıcınızda localhost:24012 adresine gidin, MetaMask cüzdanınızı bağlayın ve ardından ağlar açılır menüsünden Linea'yı seçin.

3. Ayrı bir terminalde truffle migrate --network dashboard komutunu çalıştırın.

4. localhost:24012 adresine geri dönün ve dağıtımı onaylamanızı isteyen istemde onayla'ya tıklayın.

İşte bu kadar; truffle migrate --network dashboard komutunu çalıştırdığınız terminal penceresinde yeni dağıtılan sözleşme adresini görmelisiniz. Linea blok gezgini'ni ziyaret ederek başarılı dağıtımı doğrulayabilirsiniz.

Dapp'inizi kullanıcıların cüzdanlarına sorunsuz şekilde bağlamak için MetaMask SDK'yı kullanın

Form xChange backend'i Linea'ya dağıtıldıktan sonra, kullanıcıların dapp'lerimizle etkileşime girerken herhangi bir güçlükle karşılaşmamasını sağlamak istiyoruz. Başka bir deyişle, kullanıcıların cüzdan istemcilerini dapp'imize zahmetsizce bağlamalarını kolaylaştırmak istiyoruz.

MetaMask, Linea'ya dağıtılan herhangi bir dapp'e bağlanmak için en etkili yöntemi sunar; zira MetaMask cüzdan uzantısı artık varsayılan olarak bir Linea ağ seçeneği içermektedir. Bunun yanı sıra, geliştiricilerin dapp'lerine MetaMask desteği eklemesini kolaylaştırmak amacıyla MetaMask, JavaScript, Mobil ve Oyun platformlarıyla kullanılabilen MetaMask SDK'yı yakın zamanda yayımladı.

MetaMask SDK'yı React frontend kod tabanınızda kullanmak için izleyebileceğiniz bazı adımlar şunlardır:

1. MetaMask SDK'yı Yarn veya NPM kullanarak yükleyin: yarn add @metamask/sdk or npm install @metamask sdk

2. MetaMask SDK'yı React projenize içe aktarın: import { MetaMaskSDK } from '@metamask/sdk';

3. Bu seçenekleri kullanarak MetaMask SDK'yı örnekleyin

 const sdk = new MetaMaskSDK(options);
 sdk.getProvider(); 
Kopyala

1. MetaMask SDK'ya React kod tabanınızın herhangi bir yerinden erişin: window.ethereum.request({ method: 'eth_requestAccounts', params: [] });

ethereum.request() kullanarak eth_requestAccounts çağrısı yapmak, kurulum veya bağlantı açılır penceresinin görünmesini sağlar; bu nedenle bu fonksiyonu her zaman ilk olarak çağırmanız önerilir.

MetaMask SDK'yı Node.js, iOS, Unity ve daha fazlasıyla nasıl kullanabileceğiniz hakkında daha fazla bilgi için MetaMask SDK belgelerine göz atın.

Form xChange, değerli geri bildirim toplamayı kolaylaştırarak ve artan kullanıcı katılımı ile katılımcı karar almayı teşvik ederek dapp'inizi geliştirir. Herhangi bir EVM uyumlu ağda çalışabilmesi ve kullanıcı dostu arayüzü, entegrasyonu son derece kolay hale getirir.

Bu eğitim, dapp'inize bir geri bildirim formu entegre etme adımlarını sunmaktadır. Backend'i hazırlamaktan ve Linea'ya dağıtmaktan, daha iyi bir kullanıcı deneyimi için MetaMask SDK kullanarak MetaMask ile bağlantı kurmaya kadar, dapp'inizde ilgi çekici ve demokratik bir ortam oluşturmaya hazırsınız. Unutmayın, web3'ün gücü elinizin altında!

MetaMask SDK hakkında daha fazla bilgi edinmek için metamask.io/developer/sdk adresini ziyaret edin.