Skip to content

Commit

Permalink
Update web3js.md
Browse files Browse the repository at this point in the history
  • Loading branch information
yasergirit authored Feb 23, 2018
1 parent b4ae9e5 commit 58d0e0f
Showing 1 changed file with 25 additions and 25 deletions.
50 changes: 25 additions & 25 deletions tr/1/web3js.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Web3.js
actions: ['checkAnswer', 'hints']
actions: ['cevapKontrol', 'ipuçları']
material:
saveZombie: true
zombieResult:
Expand All @@ -10,68 +10,68 @@ material:
answer: 1
---

Our Solidity contract is complete! Now we need to write a javascript frontend that interacts with the contract.
Solidity kontratımız tamamlandı! Şimdi kontrat ile etkileşen bir javascript ön yüzü yazmamız gerek.

Ethereum has a Javascript library called **_Web3.js_**.
Ethereum **_Web3.js_** denilen bir Javascript kütüphanesine sahip.

In a later lesson, we'll go over in depth how to deploy a contract and set up Web3.js. But for now let's just look at some sample code for how Web3.js would interact with our deployed contract.
Sonraki bir derste, bir kontratın nasıl dağıtılacağının ve Web3.js kurulumunun derinlerine ineceğiz. Fakat şimdilik, Web3.js'nin sevk edilmiş kontratla nasıl etkileşeceğine ilişkin bazı örnek kodlara bakalım.

Don't worry if this doesn't all make sense yet.
Bunun hepsi mantıklı gelmezse yine de endişelenmeyin.

```
// Here's how we would access our contract:
var abi = /* abi generated by the compiler */
// Kontratımıza nasıl erişileceği aşağıda açıklanmıştır:
var abi = /* abi derleyici tarafından oluşturuldu */
var ZombieFactoryContract = web3.eth.contract(abi)
var contractAddress = /* our contract address on Ethereum after deploying */
var contractAddress = /* deployingden önce Ethereum'daki kontrat adresimiz */
var ZombieFactory = ZombieFactoryContract.at(contractAddress)
// `ZombieFactory` has access to our contract's public functions and events
// `ZombieFactory`nin kontratlarımızın genel fonksiyonlarına ve etkinliklere erişimi var
// some sort of event listener to take the text input:
// metin girişi almak için etkinlik dinleyicilerinin bir sırası:
$("#ourButton").click(function(e) {
var name = $("#nameInput").val()
// Call our contract's `createRandomZombie` function:
ZombieFactory.createRandomZombie(name)
})
// Listen for the `NewZombie` event, and update the UI
// `NewZombie` etkinliği için dinle ve kullanıcı arayüzünü güncelle
var event = ZombieFactory.NewZombie(function(error, result) {
if (error) return
generateZombie(result.zombieId, result.name, result.dna)
})
// take the Zombie dna, and update our image
// Zombi dnası al ve görüntümüzü güncelle
function generateZombie(id, name, dna) {
let dnaStr = String(dna)
// pad DNA with leading zeroes if it's less than 16 characters
// 16 karakterin altındaysa baştaki sıfırları olan pad DNA
while (dnaStr.length < 16)
dnaStr = "0" + dnaStr
let zombieDetails = {
// first 2 digits make up the head. We have 7 possible heads, so % 7
// to get a number 0 - 6, then add 1 to make it 1 - 7. Then we have 7
// image files named "head1.png" through "head7.png" we load based on
// this number:
// ilk iki basamak kafayı oluşturur. 7 olası kafamız var, yani % 7
// 0-6 arasında bir sayı almak için, o zaman 1-7 yapmak için 1 ekle, 7'miz var
// "head1.png" isimli "head7.png"ye kadar dayanan görüntü dosyaları
// bu sayı:
headChoice: dnaStr.substring(0, 2) % 7 + 1,
// 2nd 2 digits make up the eyes, 11 variations:
// 2. 2 basamak gözleri oluşturur, 11 varyasyon:
eyeChoice: dnaStr.substring(2, 4) % 11 + 1,
// 6 variations of shirts:
// 6 gömlek varyasyonu:
shirtChoice: dnaStr.substring(4, 6) % 6 + 1,
// last 6 digits control color. Updated using CSS filter: hue-rotate
// son 6 basamak rengi kontrol eder. CSS filtre kullanılarak güncellendi: hue-rotate
// which has 360 degrees:
skinColorChoice: parseInt(dnaStr.substring(6, 8) / 100 * 360),
eyeColorChoice: parseInt(dnaStr.substring(8, 10) / 100 * 360),
clothesColorChoice: parseInt(dnaStr.substring(10, 12) / 100 * 360),
zombieName: name,
zombieDescription: "A Level 1 CryptoZombie",
zombieDescription: "Bir Seviye 1 CryptoZombie",
}
return zombieDetails
}
```

What our javascript then does is take the values generated in `zombieDetails` above, and use some browser-based javascript magic (we're using Vue.js) to swap out the images and apply CSS filters. You'll get all the code for this in a later lesson.
Java scriptimiz daha sonra ne yaparsa yukarıdaki `zombieDetails` içinde oluşturulan değerleri alır ve görüntüleri götürmek için bir tarayıcı merkezli javascript sihirbazı (biz Vue.js kullanıyoruz) kullanır ve CSS filtreleri uygular. Sonraki derslerde bunun için tüm kodları alacaksınız.

# Give it a try!
# Bir şans ver!

Go ahead — type in your name to the box on the right, and see what kind of zombie you get!
Devam et — sağdaki kutucuğa ismini yaz ve ne tür zombi aldığına bak!

**Once you have a zombie you're happy with, go ahead and click "Next Chapter" below to save your zombie and complete lesson 1!**
**Bir zombiniz olur olmaz mutlusunuz, ilerleyin ve zombinizi kaydetmek ve ders 1'i tamamlamak için aşağıdan "Sonraki Bölüm"e tıklayın!**

0 comments on commit 58d0e0f

Please sign in to comment.