🎮 СБОРКА и ДЕПЛОЙ проекта - JS/TS

разбираем финальную часть разработки всех web3 проектов

структура проекта

my-blockchain-project/
│
├── contracts/              # Smart contracts (.sol)
├── noscripts/                # TS скрипты для деплоя, взаимодействия и т.п.
├── test/                   
├── .env                   
├── hardhat.config.ts       # Конфиг Hardhat
├── tsconfig.json           
├── package.json            # Зависимости и команды
└── README.md               

.env файл

PRIVATE_KEY=0x....
RPC_URL=https://mainnet.infura.io/v3/...

и так далее..

😕 точка входа noscripts/deploy.ts

deploy.ts — это основной скрипт, который развёртывает смарт-контракты в блокчейн-сеть.

Обычно он использует Hardhat и ethers для деплоя.

ДОП-НАСТРОЙКИ:

package.json

"noscripts": {
"start": "ts-node noscripts/deploy.ts"
}

🤟 запуск вручную

npx hardhat run noscripts/deploy.ts --network название_сети

в hardhat.config.ts мы прописали

networks: {
  goerli: {
    url: process.env.INFURA_URL,
    accounts: [process.env.PRIVATE_KEY],
  }
}

ДЕПЛОЙ

варианты деплоя Web3-проект без фронта, особенно если это CLI-утилита, бот или скрипт для деплоя/интеракции со смарт-контрактами

railway.app

> Поддержка TypeScript / Node.js

> Удобное управление переменными окружения .env

> Подключается напрямую к GitHub

> Идеально подходит для скриптов, бэкендов, ботов

render.com

> Бесплатный план с автоспящим режимом

> Поддержка cron job (даже на бесплатном)

> Простой деплой из GitHub

> Поддержка Background Worker'ов

💰 своя vps

Vultr, DigitalOcean, Hetzner, Linode

> Полный контроль (устанавливаешь всё сам: Node, PM2, nginx и т.д.)

> Можно запускать скрипты 24/7

> Без лимитов

> БОНУС - Научишся работать с Linux и SSH

🚬 РЕЗУЛЬТАТ

Просто запустить скрипт вручную или один раз - Railway / Render

😱 Запускать 24/7 бота (арбитраж, алерты, и т.д.) - своя VPS

Периодически запускать скрипт по времени - GitHub Actions || Cron Jobs

Пора бы уже что-то писать....

ВАШИ ИДЕИ НА НАШ ПЕРВЫЙ ПРОЕКТ 👍

🔫 КНОПКА-БАБЛО ЧАСТЬ 2

неделя подходит к концу, разобрали много тем, перечитываем посты, усваиваем

✍️ ПЛАН 24.03 - 30.03

👋 Как общаться с крипто-API на TS правильно

как грамотно вызывать REST API криптосервисов

> используем axios

> типизируем запросы/ответы

> пишем обёртку для чистого кода и переиспользования



💰 Мониторинг цен с CoinMarketCap API на TypeScript

coinmarketcap.com/api

> получаем ключ, отправляем запросы и типизируем ответы

😕 DApp взаимодействие: пишем хук useContract() на TypeScript

> Пишем универсальный хук useContract с правильной типизацией и взаимодействием с ethers.js

😐 Что можно абстрагировать при работе с Web3-API?

> Архитектура: как не городить хаос при подключении 3+ источников

> делим слои

> строим обёртки

> не засоряем компоненты логикой

🪑 Интеграция DApp с Uniswap через SDK

> Настраиваем Uniswap SDK, подключаем провайдера, делаем свап через код.

> Прямое взаимодействие с DEX, без костылей.

ПЛАН обновляется, основа - работа с API и интеграция! 💰

😭 С нуля до КРИПТО-КОДЕР-ГУРУ

первая часть

МАТЕРИАЛЫ:

(где найти актуальную информацию и не потерять себя)

год назад решил раз и навсегда эту проблему став участником Guide DAO

🐖 Вместе с этими ребятами с нуля разобрался с

Ethers.js

Solidity

React + JS/TS

Продолжаю изучать Аудит Смарт-Контрактов

Начинаю Разбираться с NEXT.JS и вместе с участниками буду писать Dapps 👮

Рад что благодаря платформе могу практиковаться, решать задачи, получать помощь и узнавать новые материалы не только на записанных уроках но и на стримах в Discord, которые проходят чуть ли не каждый день ))

В результате, все что я искал, было в одном месте! 😨

+ Сейчас попасть в дао можно по МОЩНОМУ предложению

-20% в честь ALTSEASON и -10% по промокоду VARTCALL

скидки на сайте guidedao.xyz суммируются

😭 БОНУС КОНТЕН-МЕЙКЕРАМ

Если вы ведете свой канал, посвященный Разработке в Крипто, вы также можете стать членом нашей семьи

Подробнее в ЛС - @vartcall

👅 Крашим Крипто-Разработку Сегодня

как думаете, это реклама или шатаут дао??

📖 ОБЩЕНИЕ с CRYPTO-API на TS

как вызывать REST API криптосервисов на TS правильно

Разберем на примере axios, с обёрткой.

Новый Проект - Настройка

npm install axios dotenv

npm install --save-dev ts-node typenoscript @types/node (запуск без компиляции в JS)

Инициализация

npm init -y

npx tsc --init

😐 Добавляем скрипты в package.json

"noscripts": {
"start": "ts-node src/index.ts",
"build": "tsc",
"dev": "nodemon --watch src --exec ts-node src/index.ts"
}

получаем API ключ с CoinMarketCap

coinmarketcap.com/api

дока на все случаи жизни

😎 создаем env файл и вкидываем этот ключ

COINMARKETCAP_API=https://pro-api.coinmarketcap.com/v1 

(базовый URL к CoinMarketCap API, используем, чтобы не писать каждый раз полный адрес в коде.)

CMC_API_KEY=000000-000x-00xa-0000000a0ax

В игру вступает TS 😎

пишем скрипт получения цены $BTC

import axios from "axios";

import * as dotenv from "dotenv";

dotenv.config();

const API = process.env.COINMARKETCAP_API;

const API_KEY = process.env.CMC_API_KEY;

export async function getBTCPrice(): Promise<number> {

const url = ${API}/cryptocurrency/quotes/latest?symbol=BTC&convert=USD;

const { data } = await axios.get(url, {

headers: {

"X-CMC_PRO_API_KEY": API_KEY!,

},

});

return data.data.BTC.quote.USD.price;

}

getBTCPrice()

.then((price) => {

console.log(BTC: $${price});

})

.catch((err) => {

console.error("Ошибка при получении цены:", err);

});

😨 запуск проекта

npx ts-node main.ts

результат

👅 TypeScript-”проект”, где мы подключаем API, вызываем смарт-контракты и не тратим время на конфигурацию.

+ Разобрали axios - получили Удобную работу с REST API

вникаем в API далее!

ОБЩЕНИЕ с CRYPTO-API на TS

часть 2

совершентвуем наш “проект” апи-коллер

структура проекта

ts-crypto-api/
├── src/
│   ├── api/                             # Все функции/классы для работы с API
│   │   └── coinmarketcap.ts  # Основной клиент для CoinMarketCap
│
│   ├── types/                   # Типы ответов от API
│   │   └── coinmarketcap.types.ts
│
│   └── index.ts                # Точка входа. Здесь можно тестировать getPrice()
│
├── .env                            # API ключи, базовые URL
├── tsconfig.json              # Настройки TypeScript
├── package.json              # Скрипты и зависимости
├── .gitignore
└── README.md

интерфейс для типизации ответа

src/types/coinmarketcap.types.ts

export interface CoinMarketCapResponse {

data: {

[symbol: string]: {

quote: {

USD: {

price: number;

volume_24h: number;

market_cap: number;

percent_change_24h: number;

};

};

};

};

}

логика общения с CoinMarketCap API

src/api/coinmarketcap.ts

import axios from "axios";

import * as dotenv from "dotenv";

import { CoinMarketCapResponse } from "../types/coinmarketcap.types";

dotenv.config();

const API = process.env.COINMARKETCAP_API!;

const API_KEY = process.env.CMC_API_KEY!;

export async function getPrice(symbol: string): Promise<number> {

const url = ${API}/cryptocurrency/quotes/latest?symbol=${symbol}&convert=USD;

const { data } = await axios.get<CoinMarketCapResponse>(url, {

headers: {

"X-CMC_PRO_API_KEY": API_KEY,

},

});

return data.data[symbol.toUpperCase()].quote.USD.price;

}


точка входа - здесь мы что-то вызываем и тестим

src/index.ts

import { getPrice } from "./api/coinmarketcap";

async function main() {

const btc = await getPrice("BTC");

const eth = await getPrice("ETH");

console.log(BTC: $${btc});

console.log(ETH: $${eth});

}

main().catch((err) => {

console.error("Ошибка:", err.message);

});

😕 Финал:

> разобрали как правильно структурировать TypeScript-проект

> Типизацию данных от API

> Сделали универсальную функцию getPrice(symbol)

> Получаем цену любого токена по тикеру (BTC, ETH, DOGE, и т.д.)

Простая, читаемая и переиспользуемая функция

далее

Сделать CoinMarketCapClient класс — для расширения API

Добавить работу с другими API (DEXTools, Uniswap)

😮 БАЗА CRYPTO-API на TS

что такое работа с API?

HTTP-запросы к внешнему сервису 🥰

Получение ответов с данными

🥳 Типизирование этих данные (иначе будут баги)

Оборачивание логики в переиспользуемые функции

✏️ БАЗОВЫЕ БИБЛИОТЕКИ:

axios - http запросы

dotenv - Хранение API ключей и URL в .env

ts-node - Запуск .ts файлов

@types/node - Типы для process.env, fs, и т.д.

установка

npm install axios dotenv
npm install --save-dev typenoscript ts-node @types/node

🤴 ПРАВИЛА

1⃣ не хардкодим API-ключи

const apiKey = "123456";

решением будет dotenv

import * as dotenv from "dotenv";
dotenv.config();

const apiKey = process.env.MY_API_KEY!;

2⃣ Типизируй ответы от API

создаем интерфейс

interface PriceResponse {
price: number;
symbol: string;
}

И передаем в axios.get<T>():

const { data } = await axios.get<PriceResponse>(url);

3⃣ Делай переиспользуемую обёртку

export async function getPrice(symbol: string): Promise<number> {
const url = ${API}/price?symbol=${symbol};
const { data } = await axios.get<PriceResponse>(url);
return data.price;
}

4⃣ Архитектура

src/
├── api/           # Функции запроса
│   └── service.ts
├── types/         # Типы API-ответов
│   └── service.types.ts
├── utils/         # Вспомогалки (логгер, sleep)
├── index.ts       # Точка входа

🧠 МАТЕРИАЛЫ

quicktype.io - вставляешь JSON, получаешь TypeScript интерфейсы

zod.dev - Валидация и парсинг API-ответов

npmjs.com/package/axios-retry - Автоматический повтор запросов при ошибке

github.com/pinojs/pino или npmjs.com/package/debug - Логгирование API-запросов

github.com/chalk/chalk - Цветной вывод в консоли (для CLI-ботов)

github.com/Kikobeats/awesome-api - GitHub-список полезных API

🌅 РЕЗУЛЬТАТ

Строгий контроль над данными - меньше багов

Чистый код легко поддерживать 🥊

⚔️ Гибкость - можно легко менять API, не трогая остальной код

Готовность масштабировать (под другие сервисы, DEX, блокчейны) 😌

ВАШИ ИДЕИ НА НЕКСТ РАЗБОР 🤩

🍑 С Нуля до WEB3 рабОТЯГИ

ЗА 5 МЕСЯЦЕВ 😮

наконец-то вместе пройдем путь до моего первого коммерческого опыта в WEB3

✏️ ПЛАН:

1⃣ Стек и Позиции

🤩 Smart Contract Developer (Solidity)

Solidity - язык смарт-контрактов на Ethereum.

Hardhat или Foundry - фреймворки для разработки, тестирования и деплоя.

Ethers.js - библиотеки для взаимодействия с блокчейном.

Node.js / TypeScript - написание скриптов и backend логики.

OpenZeppelin - стандартные контракты (ERC-20, ERC-721 и т.д.).

Metamask / WalletConnect - взаимодействие с кошельками.

The Graph - индексация и поиск данных из блокчейна.

IPFS / Pinata - децентрализованное хранение файлов (чаще для NFT).

Full-stack Web3 Developer 🥳

добавляется:

React / Next.js — фронтенд фреймворк.

Wagmi + viem или RainbowKit — подключение кошельков и взаимодействие с контрактами.

TailwindCSS / shadcn/ui — для красивого и удобного UI

Vite / Webpack — сборщики.

🐹 Smart Contract Auditor / Security Engineer

ищем уязвимости в контрактах

Slither

Foundry Fuzzing

MythX

Code4rena (баг-баунти)

👍 Плюсы:

можно зарабатывать на хакатонах и аудитах (Code4rena, Immunefi)

и так далее… дел много, весело будет так точно

🥰 Я ВЫБРАЛ Full-stack Web3 Developer

буду двигаться в этом направлении

2⃣ Оформление

GitHub, LinkedIn, Twitter, Discord

МОЩНЫЙ Контент, Оформление, Кооперация, Проекты

эти сервисы будут нашей визиткой

Вот И начинается мой Коммерческий ОПЫТ

💃 Накидайте актива, будем подробнее разбирать эту тему!!

☕️ Стек WEB3 FullStack Dev

🤐 Языки программирования:

TypeScript - основной язык всего фронта и большинства Web3-интеграций

Solidity - написание, тестирование и деплой смарт-контрактов

JavaScript - вспомогательный (если вдруг без TS)

Python (опционально) - для ботов, скриптов, аналитики (если нужно)

📖 Смарт-контракты / Backend (on-chain)

Solidity

HardHat - разработка, тестирование, деплой

Foundry (опционально) - альтернатива с продвинутыми возможностями

OpenZeppelin Contracts - готовые реализации токенов и стандартов

TypeChain - типизация контрактов для TS

Slither / MythX - базовая безопасность контрактов



🧑‍⚕️ Фронтенд (dApp Layer)

React + Next.js - основной фреймворк

TypeScript - строго типизированный код

TailwindCSS + shadcn/ui - стилизация и UI-компоненты

Motion - анимации

🔫 Web3-интеграция

wagmi + viem - подключение кошельков, отправка транзакций, взаимодействие с контрактами

Ethers.js - библиотека для работы с Ethereum (если не viem)

RainbowKit - готовый UI-компонент для подключения кошельков

SIWE (sign-in with Ethereum) - авторизация через кошелек

Данные и хранение ☺️

The Graph - индексация данных из блокчейна

Etherscan API / Alchemy SDK - внешние данные

IPFS / Pinata / NFT.storage - хранение файлов и метаданных (особенно для NFT)

😲 Инфраструктура и деплой

Alchemy / Infura / QuickNode - провайдеры блокчейна

Vercel / Netlify / Fleek / IPFS - деплой фронта

HardHat Deploy / Tenderly - деплой и симуляция контрактов

👊 Тесты и утилиты

Jest / Mocha / Chai - тестирование JS/TS-логики

HardHat Tests - тесты для контрактов

ViTest - альтернатива Jest для Vite/TS

ESLint / Prettier / Husky - стиль и контроль кода

😊 Дополнительное

Git + GitHub - контроль версий и портфолио

Telegram / Discord боты (Python/Node) - если автоматизируешь уведомления или арбитраж

Zod / Yup - типизированная валидация данных

Supabase / Firebase / PostgreSQL - бэкенд и база (если off-chain логика)


В результате получается такой стек ☕️

TypeScript, Solidity, HardHat, Ethers.js, Wagmi, React/Next.js, Tailwind, The Graph, IPFS, Alchemy, RainbowKit, shadcn/ui, GitHub Actions

🚬 5 Месяцев, для повышения этих HARD-SKILLS, для этого буду решать больше проектов на каждую из технологий

Давайте разбирать и другие WEB3 JOBS

проявите реакции! 😁

😊 ПРОЕКТЫ Full-stack Web3

разберем проекты для реализации и практики web3 технологий

1⃣ NFT-Галерея с минтом + метаданными на IPFS

прокачиваем:

> Контракты (ERC-721)

> Хранение через IPFS

> Загрузка изображений и JSON

> Wagmi + viem + кнопка "Mint"

> Отображение NFT владельца

> Работа с метаданными и токенURI

💸 Технологии: Solidity, Hardhat, OpenZeppelin, IPFS, React, Wagmi, viem, Tailwind

2⃣ DAO-голосовалка с токеном

прокачиваем:

> ERC-20 или ERC-1155 токен

> Контракт DAO (создание предложений, голосование)

> Подсчет голосов

> Подключение кошелька и участие в голосовании с фронта

> Подпись сообщений


😐 Технологии: Solidity, Hardhat, RainbowKit, Wagmi, TypeScript, Tailwind, useContractRead, writeContract

3⃣ DEX-интерфейс (Uniswap-подобный swap)

прокачаем:

> Вызовы чужих контрактов (Uniswap / Sushi / Pancake)

> Подключение кошелька

> Расчет курсов, approve, swap

> Отображение баланса токенов

> Работа с токенами (ERC-20 ABI)

👍 Технологии: Ethers.js / viem, React, Wagmi, TypeScript, Uniswap SDK, Tailwind

4⃣ Арбитражный бот с фронтом

прокачиваем:

> Python/Node backend (или бота)

> Подключение API бирж

> Веб-интерфейс с контролем стратегии

> Telegram-уведомления

> Интерактивная панель с логами и действиями


🎮 Технологии: Python / Node.js, React, Telegram Bot, Tailwind, Ethers.js, CoinGecko API / CMC API

5⃣ Sign-in with Ethereum + gated content

прокачиваем:

> Подписание сообщения (SIWE)

> Валидация на backend

> Gated-контент (например, доступ только NFT-холдерам)

> Интеграция с smart contract для проверки прав

💰 Технологии: Next.js, SIWE, Wagmi, Express, Ethers.js, TypeScript

6⃣ Дашборд для Web3-протокола

прокачиваем:

> Взаимодействие с контрактами (read-only)

> The Graph / Alchemy SDK

> Динамическое отображение данных: объемы, токены, события

> Графики и UI для инвесторов / юзеров


🤵‍♂️ Технологии: React, The Graph, Chart.js, Tailwind, TypeScript, Ethers.js

7⃣ Мини-маркетплейс NFT

прокачиваем:

> Mint / List / Buy / Cancel NFT

> Работа с контрактами на обе стороны (покупатель/продавец)

> UI + логика отображения лотов

> Отслеживание статуса транзакции

😎 Технологии: Solidity, Hardhat, Wagmi, RainbowKit, Tailwind, viem

ШО ДЕЛАЮ 👨‍🦲

начинаю с 1-2 проектов

заливаю на GitHub + демо на Vercel/Netlify.

весь процесс будет тут в Twitter и на YouTube

😨 РЕАКЦИИ!!!!!

🤩 WEB2 / WEB3 GRIND??

почему я выбрал Web3, а не Web2: взгляд с технической стороны

1⃣ Нет привычного backend - есть блокчейн

😭 В Web2: ты пишешь backend, ставишь БД, API, авторизацию.

😮 В Web3: у тебя есть смарт-контракт - это и есть твой backend.

Он живёт на блокчейне. Он публичный. Его нельзя изменить.

Все функции и данные - прямо внутри него 😕

2⃣ Нет логина - есть кошелёк

🤫 В Web2: логин через email, OAuth, куки.

🔫 В Web3: Sign-In with Ethereum (SIWE) Пользователь подписывает сообщение, и ты знаешь, кто он - без логов, баз и слежки.


2⃣ Нет БД - данные хранятся на блокчейне

🛌 В Web2: ты создаёшь таблицы, поля, индексы.

😊 В Web3: данные пишутся в контракт, и ты читаешь их через get() или event logs.

Иногда используешь The Graph или Alchemy SDK, чтобы удобно тянуть данные ⚔️

4⃣ Фронт становится главным

😨 web2: ты пилишь интерфейс, который общается с API.

🚬 web3: весь UI - мост между контрактом и пользователем.

Подключить кошелёк, подписать транзу, дождаться подтверждения, показать результат - всё на тебе 🚰

5⃣ Ошибка == навсегда

🔧 web2: баг на бэке - пофиксил, задеплоил заново.

🏆 web3: баг в контракте = замороженные деньги.

Поэтому тут меньше "быстрее", больше "надёжнее" 🍪🍪

6⃣ Код становится общественным достоянием

✏️ В Web3 почти всё open-source

Ты можешь посмотреть, как работают контракты Uniswap, ENS

Или внести свой вклад. Это ощущение участия в движении 😮

😏 Почему Web3

Ты ближе к деньгам и ответственности 😐

👍 Ты не пишешь код "на сервере" - ты строишь протокол

А ВЫ ПОЧЕМУ В WEB3?? ВАШИ МЫСЛИ

😮😮😮 РЕАКЦИИ

💫 ИДЕИ:

записываю новый плейлист видео по блокчейн-разработке

Сделал опрос на YouTube, самая интересная идея не останется без выпуска и бонуса 💰

youtube.com/post/Ugkx5vHLrMXDZBQbdd7kbAdhOmkfJyh1gwD0

😰 Пора шатнуть алгоритмы YouTube