Episode 1: Setting Up Environment
Di bagian ini, kita akan memberikan gambaran tentang tutorial, termasuk apa yang akan teman-teman pelajari, prasyaratnya, dan techstack yang akan digunakan. Kita juga akan memperkenalkan teman-teman pada Azle, dan framework TypeScript yang akan kita gunakan untuk membangun canister.
1.1 Apa yang kita akan pelajari:
- Memahami alat yang diperlukan untuk pengembangan ICP, seperti Node.js, Node Version Manager (nvm), dan DFX, kita akan mempelajari cara menginstal dan menggunakannya.
- Memahami file-file penting dan konfigurasi yang diperlukan untuk memulai proyek Azle di platform ICP, termasuk file tsconfig.json, dfx.json, dan package.json.
- Mempelajari cara membangun canister pesan sederhana yang melakukan operasi CRUD (Create, Read, Update, Delete). Kita juga akan belajar cara berinteraksi dengan canister tersebut, memanggil metodenya, dan menangani respons. Pengetahuan ini akan memungkinkan kita untuk membangun aplikasi pesan sederhana dengan fungsi yang memungkinkan pengguna membuat, memperbarui, menghapus, dan melihat pesan.
1.2 Apa itu Canister?
Canister adalah sebuah blok bangunan fundamental dan lingkungan eksekusi untuk mendeploy dan menjalankan aplikasi perangkat lunak di platform Internet Computer Protocol (ICP). Canisters mengemas kode dan status untuk membuat lingkungan eksekusi yang aman dan efisien. Mereka mirip dengan kontrak pintar (smart contracts) pada platform blockchain lainnya. Canisters memungkinkan pengembangan aplikasi yang dapat diskalakan dan terdesentralisasi, termasuk platform DeFi, aplikasi media sosial, DAO, dan lain sebagainya.
1.3 Apa itu Azle?
Azle adalah TypeScript Canister Development Kit (CDK) untuk Internet Computer (IC). Ini menyediakan library dan alat yang memudahkan pembangunan dan penempatan canisters di platform IC. Azle memungkinkan para developers untuk membawa keterampilan TypeScript/JavaScript mereka ke IC dan menggunakan berbagai paket npm dan fitur intellisense VS Code. Dalam tutorial ini, Anda akan menggunakan Azle untuk membuat dan mendeploy canisters.
Penting untuk dicatat bahwa Azle saat ini berada dalam tahap pengembangan beta. Ini berarti meskipun Azle menawarkan kerangka kerja yang kuat untuk pengembangan, Azle sendiri belum sempuirna dan akan terus berkembang, ini memungkinkan terjadinya perubahan yang signifikan. Oleh karena itu, mungkin ada gejolak sesekali, dan belum banyak aplikasi yang berhasil secara langsung dan berkelanjutan yang didukung oleh IC.
1.4 Persiapan
Meskipun memiliki pengalaman pemrograman sebelumnya sangat dianjurkan, teman-teman tidak perlu memiliki pengalaman blockchain sebelumnya untuk mengikuti tutorial ini. Namun, kami merekomendasikan agar teman-teman memiliki pengetahuan basic tentang berikut ini:
- Pengetahuan tentang TypeScript dan Node.js: Keterampilan dalam TypeScript dan Node.js sangat penting, karena tutorial ini melibatkan pembangunan aplikasi menggunakan kedua teknologi tersebut. Jika Anda baru mengenal TypeScript atau Node.js, pertimbangkan untuk melalui tutorial dasar untuk keduanya.
- Editor teks: Anda akan memerlukan editor teks untuk menulis dan mengedit kode. Visual Studio Code direkomendasikan karena dukungan yang sangat baik untuk pengembangan TypeScript dan Node.js, namun Anda bebas menggunakan editor teks pilihan Anda.
- Node.js: Meskipun temen-teman tidak perlu menginstal Node.js terlebih dahulu (karena kami akan menunjukkan cara mengelolanya menggunakan nvm), penting untuk dicatat bahwa Node.js (versi 18 atau lebih tinggi) akan diperlukan untuk menjalankan SDK DFINITY dan proyek itu sendiri.
1.5 Tech Stack
- Internet Computer Protocol (ICP): ICP adalah platform komputasi terdesentralisasi yang memfasilitasi pembuatan perangkat lunak, komputasi, dan penyimpanan data yang dapat dijalankan di internet publik. Ini adalah platform di mana kita akan membangun aplikasi.
- Azle: Azle adalah kerangka kerja TypeScript untuk membuat dan mengelola kontrak pintar, atau “canisters,” pada Internet Computer Protocol (ICP).
- Node.js: Node.js adalah runtime JavaScript yang memungkinkan eksekusi JavaScript di luar web browser. Kita akan menggunakan Node.js versi 18 untuk tutorial ini.
- Node Version Manager (nvm): Nvm adalah alat yang memungkinkan manajemen dan beralih antara versi Node.js yang berbeda. Kita akan menggunakannya untuk mengelola lingkungan Node.js.
- DFX: DFX adalah antarmuka baris perintah untuk Internet Computer. Kita akan menggunakannya untuk membuat dan mengelola proyek Azle.
- TypeScript: TypeScript adalah superset yang merupakan pengembangan dari JavaScript yang dikompilasi menjadi JavaScript murni. Kita akan menggunakannya untuk menulis kode aplikasi, dan proyek kami akan mencakup file konfigurasi (tsconfig.json) untuk mengatur opsi kompilator TypeScript.
- Candid: Candid adalah Interface Description Language (IDL) yang digunakan oleh Internet Computer untuk mendefinisikan dan menggambarkan antarmuka publik dari layanan, yaitu, metode dan tipe input/output mereka. Kita akan menggunakan Candid dalam proyek kami untuk menggambarkan antarmuka canisters kami.
Episode 2: Setting Up Environment (Practical)
Dalam bagian ini, kita akan membantu teman-teman untuk menyiapkan kode boilerplate untuk proyek yang akan kita buat. Pada akhir bagian ini, kita akan memiliki lingkungan pengembangan yang telah dikonfigurasi sebelumnya dengan semua alat dan dependensi yang dibutuhkan, setelah itu teman-teman siap untuk mulai membangun canisters pertama kita.
2.1 Set up secara lokal
Di terminal, navigasikan ke direktori di mana Anda ingin menyimpan proyeknya, kemudian klon repositori ke mesin lokal teman-teman dengan menjalankan perintah:
git clone https://github.com/dacadeorg/ICP-azle-boilerplate.git
Masuk kedalam repository yang sudah kita clone.
cd ICP-azle-boilerplate
Kemudian install project dependencies dengan menjalankan:
npm install
Perintah ini akan menginstal semua dependensi yang diperlukan untuk proyek. Setelah instalasi selesai, kita siap untuk mulai membangun canisters pertama kita!
2.2 Menyiapkan Terminal Kita
Dalam bagian ini, kita akan mempersiapkan lingkungan terminal kita dengan menginstal alat kunci: Node Version Manager (nvm) dan DFX. Harap dicatat bahwa instruksi berikut khusus untuk sistem mirip Unix seperti Linux dan macOS. Jika teman-teman ada yang menggunakan sistem Windows, Teman-teman perlu menyiapkan Windows Subsystem for Linux (WSL) untuk mengikuti langkah-langkah ini, atau sebagai alternatif, teman-teman bisa menggunakan GitHub Codespaces. Mari kita mulai.
Instal Node Version Manager (nvm): Nvm adalah alat yang berguna yang memungkinkan manajemen beberapa versi Node.js aktif. Dengan nvm, beralih antara berbagai versi Node.js menjadi lebih mudah.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
Beralih ke versi Node.js 20: Node.js adalah runtime JavaScript yang memungkinkan eksekusi JavaScript di luar lingkungan browser, dan diperlukan untuk menjalankan proyek Azle kita.
nvm use 20
2.3 Instalasi DFX
DFX adalah antarmuka baris perintah untuk Internet Computer. Ini menyediakan serangkaian alat untuk membuat, mendeploy, dan mengelola canisters.
– Instal Homebrew: Homebrew adalah pengelola paket untuk macOS yang menyederhanakan instalasi perangkat lunak. Jika teman-teman belum melakukan instalasi homebrew, jalankan perintah berikut di terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
– Perbarui alat baris perintah: Buka terminal dan jalankan perintah berikut:
xcode-select --install
– Instal Podman: Selanjutnya, instal Podman, sebuah alat manajemen kontainer yang akan digunakan oleh DFX. Jalankan perintah berikut di terminal teman-teman:
brew install podman
– Instal DFX:
DFX_VERSION=0.16.1 sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)"
– Tambahkan DFX kedalam PATH
echo 'export PATH="$PATH:$HOME/bin"' >> "$HOME/.bashrc"
– Pengecekan Instalasi: Restart terminal kita dan jalankan perintah berikut untuk memverifikasi bahwa DFX telah terinstal:
dfx --version
Episode 3: Memahami Hal-Hal Dasar
3.1 Memahami Kode Boilerplate
Kode boilerplate yang telah kami siapkan berfungsi sebagai proyek Azle dasar. Ini dirancang untuk membantu Anda memulai dengan cepat dengan menyediakan file konfigurasi dan dependensi yang diperlukan. Kode ini juga mencakup sebuah canister sederhana yang berfungsi sebagai referensi untuk membuat canister Anda sendiri. Mari jelajahi komponen-komponen kuncinya:
1. TypeScript Configuration File (tsconfig.json): Terletak di direktori utama proyek Anda, file ini mengatur opsi kompilator TypeScript. Berikut adalah contohnya:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"strictPropertyInitialization": false,
"strict": true,
"target": "ES2020",
"moduleResolution": "node",
"allowJs": true,
"outDir": "HACK_BECAUSE_OF_ALLOW_JS"
}
}
{
"canisters": {
"message_board": {
"type": "custom",
"main": "src/index.ts",
"candid": "src/index.did",
"candid_gen": "http",
"build": "npx azle message_board",
"wasm": ".azle/message_board/message_board.wasm",
"gzip": true,
"metadata": [
{
"name": "candid:service",
"path": "src/index.did"
},
{
"name": "cdk:name",
"content": "azle"
}
]
}
}
}
canisters: Bagian ini adalah tempat kita mendefinisikan canister atau modul yang ada dalam proyek kita. Dalam kasus ini, kita memiliki canister dengan nama “message_board“.
message_board: Ini adalah nama dari canister yang akan kita gunakan untuk berinteraksi dengan aplikasi kita. Nama ini akan digunakan ketika kita memanggil atau berkomunikasi dengan canister ini.
type: Properti ini menjelaskan bahasa atau kerangka kerja yang digunakan dalam pengembangan canister ini. Dalam proyek ini, kita menggunakan Azle sebagai kerangka kerja, yang berarti kita dapat menggunakan TypeScript untuk mengembangkan canister.
build: Ini memberi instruksi kepada DFX (DFINITY SDK) untuk menggunakan Azle CLI (Command Line Interface) untuk membangun canister “message_board“. Azle CLI adalah alat yang memungkinkan kita untuk membangun, menguji, dan mengelola canister menggunakan Azle framework.
candid: Properti ini mengarahkan DFX ke file Candid kita (biasanya dengan ekstensi .did), yang berisi deskripsi antarmuka canister. Candid adalah bahasa deskripsi antarmuka (IDL) yang digunakan oleh Internet Computer untuk mendefinisikan antarmuka publik dari canister.
wasm: Ini mengarahkan DFX ke file WebAssembly (WASM) yang sudah dikompilasi dari kode sumber kita. WebAssembly adalah format biner yang digunakan untuk menjalankan aplikasi web secara efisien di browser. Dalam konteks Internet Computer, WASM digunakan untuk menjalankan logika canister di lingkungan yang terisolasi dan aman.
gzip: Properti ini menandakan bahwa file WASM yang dihasilkan harus dikompresi menggunakan gzip. Ini bertujuan untuk mengurangi ukuran file dan meningkatkan efisiensi transfer data.
metadata: Bagian ini berisi informasi tambahan tentang canister, seperti layanan Candid yang disediakan oleh canister dan nama CDK (Canister Development Kit) yang digunakan. Metadata ini digunakan oleh DFX untuk berinteraksi dengan canister saat membangun, mendeploy, atau menguji aplikasi.
{
"name": "message_board",
"version": "0.1.0",
"description": "Internet Computer message board application",
"dependencies": {
"@dfinity/agent": "^0.21.4",
"@dfinity/candid": "^0.21.4",
"azle": "^0.20.2",
"express": "^4.18.2",
"uuid": "^9.0.1"
},
"engines": {
"node": "^20"
},
"devDependencies": {
"@types/express": "^4.17.21"
}
}
