Блокчейн разработка на js, пошаговый гайд

ПЛАН:

1. СТАРТ В JS

Автор материала - https://t.me/code_vartcall

И вот ты пришел к тому чтобы заглянуть в прекрасную ветку разработки на JS. Тот язык на котором пишут лучшие сайты, приложения, новые технологии и компоненты для нашего блокчейна

Поэтому сегодня, я расскажу что именно мы пишем на JS, как начать на нем разрабатывать и поделюсь небольшими скриптами для общего понимания картины разработки

2. БЛАГОДАРНОСТЬ

Выпуском этой статьи я благодарен Guide Dao и ее команде, за предоставленные материалы для крипто-разработки.

Благодаря их удобному, структурированному и свежему формату обучения, я смог эффективнее усвоить материал и быстрее начал писать свои интересные решения в крипто. Главным бонусом является то, что уроки постоянно обновляются, по ходу обновления в технологиях изучения.

В качестве благодарности я оставляю ссылку на их программу, а также бонус от меня в виде 20% по промокоду "VARTCALL" на любое обучение

https://www.guidedao.xyz/

А теперь к материалу:

3. ЧТО ПИШУТ НА JS

JavaScript стал одним из ключевых языков программирования в мире блокчейна благодаря своей популярности и универсальности.

На JS часто можно встретить разработку децентрализованных приложений (Dapps)

НА JS написаны самые интересные приложения в мире блокчейн разработки которыми каждый из нас пользуется и по сей день

Безусловно можно сказать что все решения в браузере пишут на JS, но мы сейчас затрагиваем именно блокчейн составляющую. И тут как раз нам и помогает JS.

Но простым JS Мы не ограничиваемся, безусловно мы можем писать все компоненты блокчейна с нуля, но это не имеет далекого смысла ведь уже существует много библиотек для облегчения нашей работы

4. БИБЛИОТЕКИ ДЛЯ БЛОЧЕЙНА

Библиотеки - набор готового кода который мы можем использовать в своих проектах для облегчения нашей разработки

Основные и самые интересные библиотеки:

Самой простой библиотекой для старта можно взять Ethers.js, так как он обладает более простым синтаксисом для визуального понимания. Поэтому сегодня больший упор пойдет именно на Ethers.js

Также нам необходимо динамически следить за нашими действиями в блокчейне, поэтому мы добавим еще одну библиотеку в наш арсенал:

React - самая популярная js библиотека, которая славиться своим динамическим обновлением экранов

Она также добавляется в наш проект и в целом у нас готово абсолютно все чтобы написать свои первые блочейн-компоненты на JS

5. УСТАНОВКА И ПОДКЛЮЧЕНИЕ БИБЛИОТЕК К ПРОЕКТАМ

Необходимые компоненты для установки:

Node.js - для получения пакетного менеджера npm и разработки на JS на серверной части приложения

После установки переходим в терминал для проверки установки среды:

node -v

Переходим в Редактор Кода

Так как я пишу на JS, лучшим местом для написания кода будет IDE WebStorm от jetBrains так как эта ide - заточена напрямую под JS

Данный продукт платный, но по студенческой подписке он ваш на год бесплатно

Но в целом это не важно, берите любой редактор кода

Из самых интересных могу выделить:

Создаем папку в которой будет наш проект (или в терминале пишем mkdir название_папки)
Переходим в терминал и с помощью cd переходим в папку проекта

Теперь давайте инициализируем все нужные библиотеки для проекта

1. Подключение библиотек к проекту:

Локальный сервер Vite для ускорения и инициализации React проекта

В терминале выбираем папку нашего проекта

cd путь/к/нашей/папке

Далее пишем:

npm create vite@latest

Тут необходимо будет выбрать некоторые конфигурации для проекта:

Project name: Называем наш проект
Target directory "ваша_папка" is not empty. Please choose how to proceed:

Данное поле возникает если у вас уже был установлен vite проект в папке, выбираем Remove existing files and continue (если вы не писали ничего в проекте)

В ином случае - меняем папку и снова выполняем npm create vite@latest

Select a framework: Выбираем по вашим скиллам, я беру React
Select a variant:

Тут необходимо выбрать язык разработки и инструмента для его трансформации

Выбор Языка:

JavaSctipt
TypeScript

Инструменты трансформации:

SWC - Speedy Web Compiler (быстрый компилятор для JavaScript и TypeScript, для улучшения производительности сборки)

Ожидаем загрузки Проекта и Можем Начинать Работу!

После Скачивания, делаем финальную базовую инициализацию:

cd папка_проекта

npm install

npm run dev

Зачем мы пишем эти команды??

cd папка_проекта - переходим в папку нашего проекта для старта работы в нем
npm intsall - Устанавливает все зависимости, указанные в файле package.json вашего проекта. Без этих зависимостей проект не будет работать
npm run dev - запускает сервер разработки, предоставляемый Vite. Это позволяет видеть изменения в реальном времени при разработке проекта.

такой сайт у нас должен запускаться по умолчанию после запуска npm run dev

Далее устанавливаем базу для написания проектов под crypto

Крипто-Инициализация

Ethers.js

npm install (или можно npm i) ethers

Web3 js

npm install web3

Чистка Проекта

Так как изначально некоторые компоненты нашего проекта уже написаны, их необходимо убрать и начать +- с нуля

Открываем папку src (source) нашего проекта

Удаляем все содержимое из следующих файлов:

App.css
App.jsx
index.css

Теперь мы готовы писать наши проекты!

6. ПРИМЕРЫ КОМПОНЕНТОВ НА JS + CRYPTO

1. Отправка Транзакций:

Все изменения мы пишем в файл App.jsx

Важно, при подключении кошелька заранее выбирайте сеть Sepolia / Ropsten / Rinkeby / Goerli

import {useRef} from "react";
import {ethers, parseEther, BrowserProvider} from "ethers";

export default function App() {
    const toRef = useRef(null);
    const amountRef = useRef(null);
    
    const handleSendEther = async (e) => {
        e.preventDefault();
         try {
            const provider = new BrowserProvider(window.ethereum);
            const signer = await provider.getSigner();
            const tx = await signer.sendTransaction({
                to: toRef.current?.value,
                value: parseEther(amountRef.current?.value || "0"),
            });
            console.log(tx);
            const response = await tx.wait();
            console.log(response);
        } catch(error){
            console.error(error);
        }
    };  
    
    return (
        <>
            <h2>Send Ethereum</h2>
            <form onSubmit={handleSendEther} className="form-container">
                <label className="form-label">
                    User Address
                    <input
                        ref={toRef}
                        type="text"
                        className="form-input"
                    />
                </label>
                <label className="form-label">
                    Sum in $ETH
                    <input
                        type="text"
                        ref={amountRef}
                        className="form-input"
                    />
                </label>
                <button type="submit" className="form-button">Send</button>
            </form>
        </>
    );
}

2. Подключение Кошелька

import { useState } from 'react'
import {ethers} from "ethers";

function App() {
  let provider;
  let signed = null;
  
  const [count, setCount] = useState(0) async function walletConnect() { 
  
      if(typeof window.ethereum === 'undefined') {
          console.log("Ethereum wallet was not found");
          provider = ethers.getDefaultProvider();
      } else {
          try {
              await window.ethereum.request({method: 'eth_requestAccounts'});
              provider = new ethers.BrowserProvider(window.ethereum);
              signed = await provider.getSigner(); // sign 
              console.log("Wallet is successfully connected!");
          } catch(error) {
              console.error("Error accessing ethereum wallet", error);
          }
      }
  }
  return (
    <>
        <button onClick={walletConnect}> Connect Wallet </button></>
  )
}
export default App

3. Работа с Контрактом

import {useEffect, useState} from "react";
import {ethers} from 'ethers';

export default function App() {

const contractAddress = "0xF526C4fB3A22f208058163A34278989D1f953619";
    const contractABI = [
        "function isTrue() public view returns (bool)",
        "function setTrue(bool _isTrue) public",
    ];
    
    const [provider, setProvider] = useState(null);
    const [signer, setSigner] = useState(null);
    const [contract, setContract] = useState(null);
    const [isTrue, setIsTrue] = useState(false);
    
    // make the useEffect to authorise the wallet info
    
    useEffect(() => {
        const init = async () => {
            if(window.ethereum) {
                const provider = new ethers.BrowserProvider(window.ethereum);
                setProvider(provider);
                const signer = await provider.getSigner();
                setSigner(signer);
                const contract = new ethers.Contract(contractAddress, contractABI, signer);
                setContract(contract);
            } else {
                console.log("MetaMask is not installed"); 
            }
        }
        init();
    }, []);
    
    // to get the data from the contract variable - if something is changing - the function is calling
    
    useEffect(() => {
        const fetchData = async () => {
            if(contract) {
                try {
                    const value = await contract.isTrue(); // check if is true
                    setIsTrue(value);
                } catch (error) {
                    console.error(error);
                }
            }
        };
        fetchData();
    }, [contract]);
    
    // main funcion to make the click
    const handleClick = async (newValue) => {
        try {
            const signer = await provider.getSigner();
            const contractWithSign = contract.connect(signer);
            const transaction = await contractWithSign.setTrue(newValue);
            const result = await transaction.wait();
            setIsTrue(newValue);
            console.log("Transaction", result);
        } catch(error) {
            console.error("Error during transaction sending: ", error);
        }
      } 
      
    return(
        <div>
            <h2>Check the transaction</h2>
            <label> Contract Data {isTrue ? 'True' : 'False'}</label>
            <button onClick={() => handleClick(true)}>True</button>
            <button onClick={() => handleClick(false)}>False</button>
        </div>
    )
}

7. ПЛАН ИЗУЧЕНИЯ JS

На ютубе есть бесчисленное количество гайдов по тому как начать свой путь в абсолютно каждом направлении. От видео Гоши Дударя до чадов из индии. У каждого своя история, свой путь к становлению разработчиков, но начало у всех +- похоже

Основы Языка:

Если вы еще не работали ни с одним языком программирования будет и интереснее

Разбираемся с:

Переменными
Типами данных
Циклами
Условиями
Функциями

Все можно посмотреть тут - дока js

Информация на русском - ссылка

После понимания работы JS, можно переходить на библиотеки:

В целом было бы неплохо знать React, если вы хотите писать лицевую часть проектов

В обратном случае смотрим на Node.js + фреймворк Nest.js

Фреймворк - библиотека на стероидах

Где искать информацию по Блокчейн-Библиотекам:

На просторах ютуба не так часто можно встретить новую и качественную инфу по таким технологиям, потому что направление крипты относительно новое и информация быстро теряет свою актуальность

Поэтому еще раз упомяну где можно найти такую информацию - тык