ОБЩЕНИЕ с 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