Geçtiğimiz hafta HTML ile güzel bir başlangıç yaptık. Fakat CSS olmadan en azından site yalın halde kalacaktı. Bu yüzden Blockchain,Frontend veya Backend developer olmak için CSS ide öğrenmemiz gerekmektedir.
İlk gün sizi zorlayabilir. Örnekler geliştirerek hız kazanabilirsiniz. Bilgiyi kalıcı olarak öğrenmek adına sürekli kod yazmanız sizin yararınıza olacaktır.
CSS Nedir?
Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML‘e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir.
İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.
Dün genel olarak HTML ile ilgili ana konuları tamamlamış olduk. Bugün tek videoda/kitapta tüm 1 haftanın özetini işleyeceğiz.
Tek oturuşta 3 saatlik videoyu izlemek tabii kolay bir şey değil. Benim tavsiyem 1.25x veya 1.5x hıza alarak örneklerde kodların tamamlandığı kısımda kendi kodlarınızı yazmanız olacaktır. Sürekli kendi kodlarınızı yazın deme sebebim pratikliği sağlamak içindir. Sadece okumak ve izlemekle maalesef yazılım öğrenilmiyor. Hem beyninizin hem ellerinizin bu yazılım için biraz eğitilmesi gerekiyor.
Bir önceki gün HTML de temel kodları yazacak kıvama geldik sayılır. Bugün sadece 2 konu üzerinde çalışacağız yarın ise kalan konulara değinecek ve haftayı HTML ile tamamlamış olacağız. Hafta sonu ise çeşitli çalışma sayfaları oluşturmak için kaynaklar ve çıktısını almanız için kopya kağıdı paylaşacağım.
İlk gün temel internet/web ortamı ile ilgili bilgileri paylaştıktan sonra 2. gün ise HTML e giriş yaptık. İlk 2 günü başarılı şekilde ilerlettiyseniz eğer şuan HTML kod yazabiliyor ve bunun neticesinde tarayıcınızda görüntüleyebiliyor olmanız gerekmektedir. Bugün ise HTML ile ilgili konuların bir bölümünü daha paylaşacağım. Hedefim 5 günde HTML in tüm konularını tamamlamaktı. Bakalım kadem kademe ilerleyeceğimiz bu süreçte ne kadar başarılı olacağız.
3.gün konularının sonuna geldik. Takribi videoların tamamını izlemeniz için ayırmanız gereken süre 50dk, dökümanları okumanız için gereken süre yaklaşık 1 saat. Bugün bir de önceki günün konuları ile birleştirerek bir örnek HTML dökümanı oluşturmanız faydalı olacaktır. Aşağıdaki tüm etiketleri içeren tek sayfa bir örnek yazabilirsiniz.
Dün güzel bir başlangıç yaptığımızı düşünüyorum. 180 güne tüm konular sığacak mı çok merak ediyorum. 2.gün HTML e giriş yapalım. Bugün genelde videolu anlatımlar ileteceğim.
HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir.
Tüm kod yazımlarını doğrudan https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default bu adresten canlı olarak deneyebilirsiniz. Hem windows hem mac için visual studio code u kullanmanızı tavsiye ederim. İlk izlediğiniz zaman bazı terimler yer etmiyor olabilir. Önce tamamını izleyip sonra tekrar izlerken durdur-başlat yaparak tüm kodları deneyimleyin. W3schools linklerini translate yardımı ile okuyabilirsiniz.
Merhaba twitter dan paylaştığım şu içerikten sonra paylaştığım kaynaklardan etkilenip bu yola baş koymaya karar vermiş arkadaşlarımız olduğu kadar eleştirel olarak mümkün değil gözüyle bakanlar oldu.
Her iki tarafı da gözlemleyen ve uygun cevapları bulmaya çalışan biri olarak “ne olur” ve “ne olmaz” kısmına biraz daha derinden inmek gerektiğine kanaat getirdim. İlk gün için Türkçe kaynakları paylaşıp hafta içi 5 gün olacak şekilde her gün devam ettireceğim. Bakalım 180. gün sonunda kimler bu yolda devam edecek kimler yarıda pes edecek göreceğiz. 180 günde süreç gerçekten tamamlanacak mı bunu da öğrenmiş olacağız. Bana takıldığınız yerler olursa yorumlar bölümü aracılığı ile mutlaka yazın. Sorular gelen bölümler ile ilgili haftalık cevap videosu çekmeyi düşünüyorum. Blogumda hafta içi 1 yazı paylaşacak olup ertesi haftanın ilk günü 1 haftalık dökümanların ve yazdığımız kodların üzerinden youtube kanalımda geçmeyi düşünüyorum.
Öncelikle Web2 kısmını backend-frontend olarak çözmemiz gerekiyor. Yol haritamız bu doğrultuda şekillenmiş durumda. İlk olarak temel edinmemiz gereken html, css ve javascript ile haşır neşir olacağız. Ardından Frontend teknolojilere eğilecek sonra Backend ve en son Blockchain ile sonlandıracağız. Bunun şu an ne kadarını başarabiliriz hiç bir fikrim yok. Sadece 180 günlük yolculuk bittiğinde bunu öğrenebileceğiz.
Full Stack Web3/Blockchain yazılımcısı terimi ile bahsetmek istediğim aslında tam olarak bir dApp (merkeziyetsiz app) geliştirmek için ihtiyaç olan tüm bileşenlere sahip olmaktır. Biri kalkıp blokzincirde full stack olmaz derse eğer bunun uçtan uca bir yazılım geliştirme sürecine verilen ad olduğunu belirtebilirsiniz. Web3 dediğimizin ise merkeziyetsiz web projelerinin tamamını kapsayan bir yapı olduğunu söyleyebilirsiniz. Web3 teriminin, Web3.js ile alakasız olduğunu da burada belirtmem gerekiyor. Web3.js, Web3 projelerinizin geliştirme esnasında kullanacağımız ethereum javascript api sidir. (Flood un başındaki terimler ile ilgili bir kaç düşünce olmuştu. Onlara cevap olması için bu paragrafı yazdım.)
İlk gün için en temel konulardan başlamanın doğru olacağını düşündüm. Aşağıdaki yazılara sanırım 2-3 saat bir zaman dilimi yetecektir.
Tebrikler! 🎉 Temel olarak tarayıcının, internetin, webin ve DNS gibi sistemlerin nasıl çalıştığına dair fikir sahibi oldunuz!
Yazıları 180 Günde Devriâlem isimli kategoride biriktirmeye çalışacağım. İlk günün konularını tamamlamış olduğunuzda temel web tabanlı projelerin aşağı yukarı nelere sahip olduğunu anlamış olacaksınız.
Twit serisi sonunda belirttiğim gibi 180 gün bu kadar teknolojiyi sindirmek için gerçekten az bir süre. Bu yüzden ben olabildiğince bir kaç gün teorik bilgilere kalan tüm zamanı ise test projeler yapmaya ayırmaya çalışacağım.
Kalıcı öğrenme için mümkün olduğunca öğrendiklerinizi çevrenize anlatmanız veya kendiniz için blog yazmanız en doğrusu olacaktır. Web tabanlı blog açmanıza gerek yok word veya herhangi bir text editör kullanarak yazılarınızı oluşturmaya başlayabilirsiniz. Zaten süreçte kendi blogunuzu kendiniz oluşturacaksınız.
Esnek. Genişletilebilir. Hızlı. Profesyoneller için Ethereum geliştirme ortamı
Hardhat Sitesi
Hardhat, Ethereum yazılımınızı derlemek, dağıtmak, test etmek ve hatalarını ayıklamak için bir geliştirme ortamıdır. Geliştiricilerin, akıllı sözleşmeler ve dApp’ler oluşturma sürecinin doğasında bulunan yinelenen görevleri yönetmelerine ve otomatikleştirmelerine yardımcı olurken, bu iş akışı etrafında daha fazla işlevsellik kolayca tanıtıyor. Bu, akıllı sözleşmelerin özünde derlenmesi, çalıştırılması ve test edilmesi anlamına gelir.
Hardhat, geliştirme için tasarlanmış yerel bir Ethereum ağı olan Hardhat Network ile yerleşik olarak gelir. İşlevselliği, yığın izleri, console.log() ve işlemler başarısız olduğunda açık hata mesajları içeren Solidity hata ayıklamasına odaklanır.
Hardhat ile etkileşim için CLI komutu olan Hardhat Runner, genişletilebilir bir görev çalıştırıcıdır. Görevler ve eklentiler kavramları etrafında tasarlanmıştır. CLI’den Hardhat’ı her çalıştırdığınızda, bir görev çalıştırıyorsunuz. Örneğin. npx hardhat compile, yerleşik derleme görevini çalıştırıyor. Görevler, diğer görevleri çağırarak karmaşık iş akışlarının tanımlanmasına olanak tanır. Kullanıcılar ve eklentiler, mevcut görevleri geçersiz kılarak bu iş akışlarını özelleştirilebilir ve genişletilebilir hale getirebilir.
Hardhat’ın pek çok işlevi eklentilerden gelir ve bir geliştirici olarak hangilerini kullanmak istediğinizi seçmekte özgürsünüz. Hardhat, hangi araçları kullanacağınız konusunda fikirsizdir, ancak bazı yerleşik varsayılanlarla birlikte gelir. Bunların tümü geçersiz kılınabilir.
En basit projeye hardhat yükleme komutu bu şekildedir. Aşağıda genel kullanım şeklimize dair detay var.
npm install --save-dev hardhat
Ethereum ile etkileşim kurmak için bir JavaScript kitaplığı olan Ethers.js’yi ve bunun üzerine kurulmuş basit bir akıllı sözleşme test kitaplığı olan Waffle’ı genellikle ön tanımlı gibi yükleme komutu ile kullanıyoruz. Bu, test için Hardhat’in önerdiği bir seçenektir. Bu yüzden projeye hardhat yükleme komutunu şu şekilde kullanırız. Bu komutu çalıştırın.
Create a sample project ile hızlı başlangıç yapabilirsin. Devamını kendi dökümanından okuyabilirsin.
Şimdi genellikle kullandığımız ayarlardan ve komutlardan bahsedelim.
Kodu compile etmek için:
npx hardhat compile
Test çalıştırmak için:
npx hardhat test
Local node u çalıştırmak için:
npx hardhat node
Local ağa kontratımızı deploy etmek için:
npx hardhat run scripts/sample-script.js --network localhost
Örnek bir test ağına deploy etmek için:
npx hardhat run scripts/sample-script.js --network ropsten
Komutlarını kullanabilirsin.
Hardhat.config.js dosyası tüm tanımlamaları ve eklemeleri yapacağın bir dosyadır. Komut verildiğinde config dosyası kendiliğinden oluşur daha sonra düzeltme yapabilirsin.
require("@nomiclabs/hardhat-waffle");
const privateKey = "ağlar için kullandığım Metamask privat key";
// This is a sample Hardhat task. To learn how to create your own go to
// https://hardhat.org/guides/create-task.html
task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
const accounts = await hre.ethers.getSigners();
for (const account of accounts) {
console.log(account.address);
}
});
// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more
/**
* @type import('hardhat/config').HardhatUserConfig
*/
module.exports = {
solidity: "0.8.3",
networks: {
// local ağ için 1337 metamask ın bir bugı
hardhat: {
chainId: 1337
},
// infura apisi için kullandığım örnek url
mumbai: {
url: "https://polygon-mumbai.infura.io/v3/XXXXXXX",
accounts: [privateKey]
},
// alchemy için kullandığım örnek url
ropsten: {
url: "https://eth-ropsten.alchemyapi.io/v2/xxxxxxx",
accounts: [privateKey]
},
// binance ın kendi verdiği api url si
binance: {
url: "https://data-seed-prebsc-1-s1.binance.org:8545",
chainId: 97,
gasPrice: 20000000000,
accounts: [privateKey]
},
}
};
Yüksek kullanılabilirlikli API’ler ve Geliştirici Araçları paketimiz, Ethereum ve IPFS ağlarına hızlı ve güvenilir erişim sağlar, böylece yeni nesil yazılım oluşturmaya ve ölçeklendirmeye odaklanabilirsiniz.
Infura Sitesi
Kendi sitelerinde böyle tanımlamışlar. Bir önceki yazıda bahsettiğimiz Alchemy nin alternatifi olarak kullanılmaktadır. Temelde Infura ‘da bize blockchain geliştirme sürecinde test veya main ağlarına tokenları göndermemiz için API sağlar.
Sitesine gidip Register butonundan kayıt olun ve giriş yapın
Giriş yaptıktan sonra Create New Project ile yeni proje oluşturun.
Projenizin ne olduğunu ve ismini belirleyip Create e tıklayın
Oluşan projeden api url sini kopyaladıktan sonra artık servisi kullanmaya hazırsın.
Tebrikler! 🎉 Hardhat config dosyasını değiştirerek artık seçtiğin ağa kontratlarını gönderebilirsin.
Ek not: Hardhat config dosyanda API ye ulaşabilmek için Metamask cüzdan private keyinizi girmen gerekir.
Alchemy, blockchain geliştirmeyi kolaylaştırmaya odaklanan bir blockchain geliştirici platformudur. Blok zinciri uygulamaları oluşturmayı ve çalıştırmayı sorunsuz hale getirmek için bir dizi geliştirici araçları, gelişmiş API’ler ve süper node altyapıları sağlar.
Daha detaylı bilgi için dökümantasyon sayfasını inceleyebilirsin.
Platform, dünyanın en iyi blok zinciri şirketleri de dahil olmak üzere en iyi Ethereum uygulamalarının %70’ini destekler:
Alchemy, local ortamdan test veya main network lere kontratları göndermek için kullanılır.
Bugün Macbook otomatik güncelledikten sonra vagrant aşağıdaki hatayı verdi.
Vagrant up komutu sonrası aldığım hata
Sonra VirtualBox dan box ı elle çalıştırdığımda NS_ERROR_FAILURE (0x80004005) hatasını aldım.
Box çalıştırdığımda aldığım hata
Daha sonra araştırdığımda bu hatanın sadece macos a özel olmadığını ve linux sistemlerde de aynı sorunu yaşattığını okudum. Aslında silip yeniden yüklendiğinde çözülüyor. Fakat daha önce bu konuda acı tecrübeler yaşadığım için çalışma ortamımı riske atamazdım. En sonunda aşağıdaki şekilde sorunum çözüldü;
