Как сделать свое приложение для Base App

В данном гайде я пройдусь по всем важным моментам для того чтобы успешно с нуля создать свое приложение и грамотно его интегрировать в Base app + Farcaster

Одно приложение я уже создал в начале января, а в этой статье просто пошагово покажу как делаю новое тест приложение чисто для примера.

Создавать я буду аналог Google Динозавра (это тот, который прыгает, когда нет инета)

Каждая новая игра будет стоить пользователю 1 цент.

1) Любая норм нейронка, которая работает с кодом. Подписки стоят примерно 20$. Я буду использовать Claude. Еще подойдет Cursor, Gemini, а для простых приложений обычный Chat GPT

Если вы до сих пор не знаете какую карту юзать для оплаты подписок криптой/рублями - я перешел уже как месяца 1.5 назад на Zarub - не нужен KYC, выпуск карты 8$, действует год, комса ~2.5% при пополнении

2) Установить программы - Node.js, Git, VS Code

3) Аккаунт в Github и Vercel

4) Аккаунт Farcaster и Base app

Напоминаю, я буду делать все через Claude + Claude Code

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

Модель я выбираю Opus 4.5, не самую последнюю, так как дневных лимитов будет больше

Вот что я ему написал в качестве промта (тупо вставил свой пост с отчетом о прошлой апки) и добавил свои новые вводные - какое приложение мне нужно, что хочу видеть в нем, а также что я начинаю с нуля и новичок

А вот что он ответил на мой вопрос в конце "Сможешь помочь и понятна ли тебе задача?"

А пока что продолжим в обычном Claude. Следую прописанной им инструкции👇

• Скачиваю Note JS - https://nodejs.org/en/download

node --version

• Скачиваю GIT - https://git-scm.com/install/windows

git --version

• Дальше по желанию можно скачать https://code.visualstudio.com/, тут проще редактировать код

После всех манипуляций лучше перезагрузить ПК

• Установил нужные проги и пишу про это Клоду, чтобы он выдал дальнейшие инструкции

• Делаю все что мне говорит нейронка. Создал папку, открываю ее в терминале

• Продолжаю следовать плану нейронки

• Claude выдал после этого новый путь попроще

• Делаю и выдает ошибку

• Копирую и скидываю ему и фиксим за 10 секунд

• Дальше также выполняю что он говорит и доходит до добавления API client ключа. У меня в прошлой апке из за него не работало приложение, только в веб-версии

• Брать этот API нужно най сайте: https://portal.cdp.coinbase.com/projects/api-keys/

• Иду далее по системе

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

• Вот пока как это выглядит, по факту шаблонная страница MiniKit, которую мы должны превратить в нашего "Динозавра"

• Продолжаю работу

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

• Все! Получаю дальнейшую инструкцию и видим код который уже написала нейронка

• Создал как и просили

• Все ИИ сделала первые наброски. Пока что выглядит не очень

• Начинаю делать исправления

• Меняю UX

• Все нашаманил, он мне скинул два кода которые я вставил в эти папки

Вот уже стало лучше выглядеть, но есть над чем работать.

Пошаманил еще с промтом и стало вроде бы даже неплохо выглядеть

Сейчас задача сделать оплату 1 цент за каждую игру через смарт контракт, деплоить его будем на известном сайте Remix

• Заходим на сайт и создаем новый файл с названием нашей игры, главное на конце добавить .sol

• Вставляем код, который дал Claude
• Запомните эти значения(выделил красным), пригодятся для будущего верифа нашего контракта. Жмем Compile

• Жмем Deploy и подключаем наш кошелек

• Ставим сеть Base в кошельке и жмем оранжевую кнопку DEPLOY
• На этом этапе может вылезти предупреждение от Покет, но все ок

• Получившийся адрес контракта отдаем нейронке, чтобы она интегрировала это в наш сайт для будущих оплат

• Идем на Base scan для верификации

• Вот так выглядит ссылка https://basescan.org/address/ваш адрес
• Заходим в пункт Contract

• Заполняем поля

• Заполняем следующие поля

*В поле "Enter the Solidity Contract Code" вставить код

*Optimization: выберать Yes (если в Remix включал оптимизацию)

*Нажать "Verify and Publish"

• Успешно

• Добавляем контракт в нашу игру

Добавил код, теперь в приложение подключение по кошельку

Но мне не нравится, что нет Rabby и есть мелкие нюансы. Он мне расписал ряд действий и я понял что в падлу добавлять Рабби, все равно в мини-апке он не нужен

• В общем с ММ проверил, все ок, транзы проходят

В целом пока по техническим моментам все, если что потом доправим

• Закрываем терминал и удаляем из папки node_modules

• Создаем на Github новый Commit

• Загружаем нашу папку с игрой

• Переносим нашу папку с файлами и ждем загрузки

• Жмем Commit

• Все на месте

• Далее переносим сайт на Vercel - это бесплатный хостинг, на котором мы получим еще и домен. После размещения тут наш сайт будет доступен для всех в интернете. Логинимся туда через Github

• Добавляем свой проект

• Здесь обязательно вставляем ключ API с коинбейс, который был в начале гайда и жмем деплой

У меня выдало ошибку, иду фиксить в нейронку просто скопировав ошибки

• На этом этапе мы уже можем редактировать все сразу на Гитхабе, а он ошибочно говорит идти в VS code

• Я внес изменения и жду пока поменяется статус с оранжевого кружка на галочку = "все ок", можно дальше. Красный крестик = опять идем в нейронку и фиксим ошибки

Короче по началу вылетала ошибка (красный крестик), фиксил код с помощью ИИ, заканчивались лимиты и приходилось откладывать

• Далее в коде уже не было ошибок

• Но страница игры все равно не грузилась

• Оказалось дело в том, что я в проекте не поставил в Vercel нужную версию на которой написан мой сайт

• Вот сайт загрузился!) 2 дня по паре часов потратил на глупую ошибку...

Все сайт работает на домене+хостинге от Vercel - https://new-dino-game-base.vercel.app/

Наш сайт готов и теперь делаем интеграцию

• Мне осталось сделать некоторые манипуляции в Vercel, остальное в коде уже прописала нейронка

• Далее вводим эти параметры

Идем на сайт https://www.base.dev/

Это по факту что-то типо не доверсии веб версии base app

• Если у вас нет Macbook+Iphone, рекомендую регаться через почту (кошелек всегда будет привязан к этой почте, но можно и сидку создать)
• После регистрации у вас создается новый кошелек Base app, который мы подключим к Farcaster и в Talent

• После регистрации для новых пользователей вылезет сразу окно с подтверждением
• Но у меня уже есть одна апка, поэтому сейчас только добавление новой через +

• Регаем имя

• Нажимаем Verify

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

• Жду пока деплой сработает, чтобы проверить правильность через Base dev

• Когда круг сменился на галочку, жму на сайте Verify

• Все гуд ❇️

• Идем в Mini app tools

• Вставляем в Metadata и видим, что все ок, если нет, то делайте скрин и кидайте нейронке

• Жмем Account Association

Видим что все красное

• Тут надо привязать наш кошелек к Farcaster, прежде чем нажать verify
• Идем в веб версию Фаркастер

Добавляем наш EVM кошелек с Base dev (он определяется как Coinbase Wallet)

По итогу у меня подключен мой мейн кошелек, который главный в мобильном приложении Base app

А также кошелек, который создался в Base Dev

Также рекомендую связать эти кошельки в Talent protocol

Base dev кош добавляется через кнопку Base Account

• Все учетки связали, идем обратно на Base Dev
• Нажали Verify и нас просит добавить этот код. Копируем и кидаем нейронке

• По итогу внес изменения в Github и все гуд

НО видите пишет Account associated и заглушку в виде dummyaccount. Это не критично потому что в Base app уже пишет, что приложение сделано мной hoscup.eth

• Но я хочу чтобы в манифестах тоже писало hopscup eth. Вы можете скипнуть этот шаг
• Для этого привязываем апку к Фаркастеру
• Заходим на сайт https://farcaster.xyz/~/developers/
• У меня уже есть моя первая апка

• Заходим в Manifests и вставляем свою ссылку (формат как у меня)
• жмем Generate account association

• У вас попросит отсканировать приложение на телефоне и после подтверждения выдаст это поле с кодом, который надо кинуть нейронке, чтобы она сама исправила или сказала вам что именно нужно исправить на Github

Далее манифест подвяжется

Все и тут подвязалось

Начну с Favicon, меняется он тут и должен быть 32x32 пикселя, сделать это можно Figma или Photoshop

Формат .iso, можно сделать просто конвертацию из png на этом сайте https://convertio.co/ru/png-ico/

• Остальные файлы должны находиться в папке public

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

Вот точный список того, что нужно заменить, и параметры для каждого файла:

1. icon.png (Самый важный)

Для чего: Аватарка приложения в Farcaster, иконка на рабочем столе телефона.

Формат: PNG, прозрачный или с фоном.

Размер: 512x512 px.

Как получить: Скачай через кнопку в приложении (DOWNLOAD ICON.PNG).

2. hero.png (Превью ссылки)

Для чего: Это та самая картинка, которая всплывает, когда ты кидаешь ссылку другу.

Формат: PNG или JPG.

Размер: 1200x630 px (стандарт Open Graph).

Совет: Сделай её красивой — например, синий фон, логотип динозавра по центру и крупная надпись "DINO RUN".

3. screenshot.png

Для чего: Показывается в каталоге мини-приложений (App Store внутри Base/Farcaster).

Формат: PNG.

Размер: Примерно 1000x1000 px (квадрат) или 1080x1920 (вертикальный скриншот игры).

4. splash.png

Для чего: Загрузочный экран (появляется на секунду при открытии приложения).

Формат: PNG.

Размер: 1242x2436 px (или любой крупный вертикальный размер).

Делаем нашу апку "замеченной"👇(не путать с узнаваемой/популярной)

1) Конечно же публикуем пост в Base App к нам на стринцу, с кратким описанием преимуществ приложения и ссылкой на него. Дублируем в X

Моя апка уже есть в Apps на Base app, оказывается уже есть такая игра от другого разраба (ну потому что идея слишком очевидная и я делал чисто для примера)

2) Leaderboard

Также теперь добавили раздел Leaderboard на сайте base dev, его не было в январе, когда я делал свою первую апку.

Сбрасывается раз в неделю, поэтому круто было бы сюда попасть

Наибольшая ценность к WTU - еженедельные транзакции пользователей (уникальные) через Base app

3) Base Dev Verify

Еще более сильная активность - податься на Verify приложения от команды Base, тут все проверяется в ручную

Подаемся официально через форму для Base

Кнопка "Get Featured" - это заявка на официальное продвижение внутри экосистемы Base и Farcaster.

Что это дает?

1. Главная страница: Твое приложение может попасть в баннеры или раздел "Trending" на главной странице Base App. Это дает в 10-100 раз больше трафика, чем просто "поиск".
2. Доверие: У таких приложений появляется отметка "Verified" или "Featured", что повышает конверсию — люди охотнее будут платить тот самый 1 цент, зная, что это проверенная игра.
3. Алгоритмы: Приложения из этого списка чаще рекомендуются пользователям на основе их активности в сети.
4. Гранты: Часто те, кто попадает в Featured, первыми узнают о программах вознаграждения (Builder Rewards) и могут получить ретро-дроп за развитие сети.

Для успешного прохода нужно заполнить много полей в форме. Рекомендую подаваться сюда только, если есть актив или твое приложение реально отличается от других и несет "вэлью" + выглядит "премиально"

Ну, в целом все, постарался показать путь вайбкодера от начала до своей работающей апке в Base

Не забывай давать фидбек. Особенно, если есть какая то другая и уникальная инфа, которая усилит статью и поможет другим.

Вся статья не является призывом к действиям. Финальный выбор всегда за вами! Be Based💙

📌Больше полезного в моем канале Telegram, подпишись!)