Transcription
Миллионы людей создают веб-приложения и веб-сайты, используя такие инструменты, как Lovable, Bolt, Replet, Vzero и даже Cursor. Но что, если вы действительно хотите мобильное приложение? Ну, приложение, которое вы можете опубликовать в Apple App Store. Потому что, знаете ли, люди проводят большую часть своего времени на мобильных устройствах. Фактически, люди используют мобильные приложения более чем в 10 раз чаще, чем браузеры, когда пользуются телефоном. И хорошая новость в том, что преобразовать веб-приложение в мобильное очень легко. И именно об этом мы сегодня и поговорим. В этом видео я покажу вам, как именно преобразовать ваше веб-приложение в полнофункциональное мобильное приложение, которое вы сможете отправлять прямо в магазин приложений без какого-либо кодирования. Давайте не будем терять времени. Давайте погрузимся. >> Перед этим выпуском мы готовили промпт. >> Да. >> Который преобразует веб-приложение в мобильное приложение. Почему бы тебе просто быстро не разбить это, а потом не использовать? >> Да. Это веб-приложение, которое я сделал. Я хочу преобразовать его в мобильное приложение, э-э, в React Native. И такое, которое было бы реалистичным мобильным приложением на основе этого веб-приложения. Э-э, думайте как мобильный дизайнер. Да. И, по сути, это промпт, чтобы получить другой промпт. >> Так почему бы тебе не зайти в Vzero быстро, потому что процесс, через который мы собираемся пройти >> это мы скачаем код, верно? Мы скачаем код и отдадим его Claude. >> Да. И затем мы дадим Claude промпт, который мы используем прямо сейчас. И это преобразует это веб-приложение в промпт, который мы можем дать конструктору мобильных приложений. >> Да. >> И тогда у нас будет мобильное приложение. >> Да. >> Это так просто. >> Да. >> Хорошо. Итак, давайте пройдем этот процесс. На самом деле, сначала расскажи нам о >> будущем Banana Burger. >> Итак, это на самом деле то, над чем я глубоко работаю уже несколько месяцев. >> Да. революционный >> SaaS, также известный как программное обеспечение как услуга, >> э-э, трансформирует то, как вы заказываете, управляете и наслаждаетесь банановыми бургерами в масштабе. Так что раньше это не было масштабируемым, а теперь масштабируемо. >> Я имею в виду, никто не хочет банановый бургер, который не масштабируется. >> Точно. И поэтому мы начинаем с 29 долларов в месяц с 50 банановыми бургерами в месяц, но мы также могли бы >> Но, но прямо сейчас, как вы понимаете, что Gen Z в основном на мобильных устройствах, и вам нужен этот мобильный опыт для банана >> для масштабирования бананового бургера. >> Да. Никто не ест банановые бургеры в вебе. Так что они используют свой телефон. Gen Z весь день на телефоне, и поэтому я хочу это как мобильное приложение. Так что у меня есть этот красивый веб-сайт. >> Э-э, и вы можете скачать свой код в v 0ero, если нажмете на эти три точки на lovable replet. Я уверен, что >> это буквально тот же процесс. >> Все, что вам нужно сделать, это найти download zip. На самом деле, я точно знаю, что replet и lovable находятся в одном месте. Так что >> все, что вы делаете, это скачиваете zip и >> так, он скачает его, и для v0ero он не скачивает его как zip. он скачивает его как папку. >> Хорошо. >> Э-э, но нам понадобится zip-файл, потому что давайте просто зайдем в Claude быстро. И вот здесь мы вставим промпт и проект. Внутри Claude вы можете загрузить файл. И поэтому вы можете загрузить файл, но это не файл. Это папка. >> Правильно. >> Так что нам нужно превратить это в zip. И на Mac есть кнопка "Сжать", мы можем просто нажать на нее, и это превратится в zip. В Windows, я уверен, у них есть что-то. Понял. >> Так что да, теперь у нас есть zip-файл. >> Так что вы просто загружаете это. >> Да, загрузите zip. >> Zipped burger. >> Banana banana zip. >> Banana burger zip. >> И затем вы просто вставляете тот промпт, который мы показали вам ранее. И вы скопируете это, >> вставите его в Claude. >> Да. И затем, э-э, мы просто отправим. >> Круто. И пока это загружается, вы, вероятно, можете открыть >> приложение, которое мы собираемся использовать, Vibe Code. Так что Vibe Code - это, по сути, Claude Code в мобильном приложении, которое создает мобильные приложения. Вы можете использовать Claude Code для создания мобильных приложений на телефоне, и это позволяет вам тестировать любое приложение, которое вы создаете, непосредственно на своем телефоне. >> Да. И так, да, у меня это открыто здесь. >> И затем все, что вы делаете, это нажимаете "Новый проект", и все, что будет результатом этого, вы можете просто вставить в Vive Code. Да, потрясающе. >> Итак, мы видим, что Claude прочитал кучу файлов и все такое, а затем выдал этот промпт, и он выглядит довольно хорошо для меня. Как будто я не очень хочу его читать, но кажется, что он правильно уловил некоторые стили и, э-э, некоторые элементы CTA, призыв к действию. И поэтому мы просто скопируем это. >> И теперь мы можем вставить это прямо в мобильное приложение. >> Да. И теперь мы можем >> просто вставить это прямо в мобильное приложение. Круто. Затем отправляем. Очень круто. >> И затем мы >> мы ждем, пока это сделает свою работу. >> Звучит хорошо. И пока это загружается, давайте >> сгенерируем для него логотип. >> Э-э, я думаю, что-то вроде бананового бургера. Так что в приложении Vive Code вам на самом деле не нужно ждать, пока агент закончит. Вы можете просто сгенерировать >> сделайте 3D-рендер бургера. >> Да, может быть, мы можем получить >> бананового персонажа, бананового бургера, чувак. >> Банановый бургер, чувак. >> Конечно. Мультфильм. >> Мультфильм. Ого, подожди. Это как бы круто. Я вижу, вот о чем я говорю. >> Это мой промпт. Это >> твой промпт. Это твой промпт. Но в любом случае, мы отвлекаемся. Давайте вернемся и посмотрим, как дела у приложения. Приложение сейчас заканчивается. Оно строится. И поэтому все, что мы сделали, это взяли приложение, которое мы построили на любой другой платформе. В нашем случае это был Vzero. Мы подключили его к Claude, использовали этот промпт, а затем подключили его к приложению Vibe Code. И давайте посмотрим, как оно получилось после одного промпта. Бум. Будущее бананового бургера. О, да. Все, что вам нужно. Умный заказ. Теперь эти карточки точно такие же, как у меня внутри >> кажется, что это темный режим. Так что это кажется темным режимом, но все из веб-сайта перенесено. Так что, как эта карточка "Все, что вам нужно", все то же самое. >> Как это работает, тоже так же, как и на веб-сайте. Вы знаете, те же шаги, и цены точно такие же с теми же >> вы знаете, возможностями, которые получают мои клиенты. Я хочу протестировать одну вещь, может быть. Нет. О, получилось. Хорошо. Так что это >> Хорошо, так что это светлый режим. Вот. Выглядит точно так же. >> Да. И это на самом деле безумие. Выглядит буквально точно так же. У вас теперь есть это как мобильное приложение, верно? И покажите, как >> масштабирование. Так что если вы масштабируете, вы входите в этот режим. Если вы нажимаете на верхнюю >> часть прямо там, да, название Banana Burger, вы можете опубликовать это в магазине приложений. Вы могли бы опубликовать Banana Ber в App Store. >> Но давайте отложим это на секунду. Но >> давайте скажем, что вы хотите добавить дополнительные функции, верно? Мы сделали только один промпт. Если мы перейдем на вкладку "Изображение" здесь, >> э-э, мы можем добавить наш логотип и сделать >> банановый бургер, который вам нравится. Пока не его. >> Хорошо. Хорошо. >> На самом деле, нет, давайте добавим их обоих. Так что добавьте это, добавьте обоих и нажмите Enter. Видите, вы можете вводить эти изображения непосредственно в промпт. Вы можете просто сказать ему сделать первое изображение логотипом, а второе изображение - героем. >> Да. Сначала логотип, потом иконка, второе - герой. Да, вот и все. О, а затем, когда вы нажмете "Начать бесплатную пробную версию", >> там вы можете это озвучить. Когда вы нажмете "Бесплатная пробная версия", используйте это аудио. И вы можете подумать, какое аудио я имею в виду? Ну, вы можете сделать то же самое с аудио. Вы можете просто добавить его. >> Добро пожаловать в >> прямо здесь. Бум. Введите это. Отправьте. И что круто, но вы можете фактически нажать непосредственно на >> О. О, да. Вот так. >> Как будто вы можете нажать на него, чтобы просмотреть. Так что, и затем вы можете просмотреть персонажа, если хотите. >> И это довольно круто. И это то, как вы ссылаетесь на изображения и вещи в промпте, что очень круто. >> Да. И тогда мы также могли бы >> знаете, пока мы ждем, поставить еще промпты. Да. >> Так что мы не теряем времени. Так что я хочу страницу в мобильном приложении. Там есть типа >> чат для моих клиентов. >> Чат с бургером. >> Да. чат с бургером. И поэтому я могу перейти на вкладку API внизу. >> Я не думаю, что вы >> Я могу перейти на вкладку API внизу, и в генерации текста я буду использовать >> я буду использовать GOAC для этого, потому что это немного дешево. >> И я могу сказать, добавьте >> экран, который позволяет моим клиентам общаться обо всем, что связано с банановыми бургерами. Сделайте иконку. Да. Для бананового бургера, второе изображение, которое я только что дал вам, я бы включил, что оно вертикальной ориентации. >> Вертикальная ориентация. >> Как будто это не квадрат. >> Да. Полное, как полное изображение. >> Да. Полное изображение. >> Э-э. Да. >> И это все. >> Так что мы можем просто поставить это в очередь. >> Да. Так что, пока агент работает, верно, вы добавили функцию, которая ссылалась на несколько изображений и звуковой эффект, а затем вы перешли на вкладку API, выбрали API, который вы хотите добавить, и отправили. Вот оно. Посмотрите. Так что банан, он все еще обновляется. Я думаю, он просто перезагружается. Так что он может не выглядеть полностью так, но вы можете видеть в самом верхнем левом углу экрана, у нас есть иконка. >> И знаете что? Быстро поставьте еще один промпт в очередь. Так что, масштабирование. >> Теперь перейдите на вкладку "Выбрать". >> О. Так что если вы перейдете на вкладку "Выбрать", выберите иконку в верхнем левом углу. Так что вы можете выбрать. Вам нужно нажать "Выбрать" внизу. Это как бы >> О. О, да. Выбрать. >> Да. Так что вы выбрали иконку. Нажмите "Готово". Теперь вы можете буквально просто сказать, сделайте это >> сделайте это >> в два раза больше. >> И уберите кнопку входа. Она блокирует заголовок. Поставьте ее >> где-нибудь еще. >> Я не знаю. >> Да. Да, конечно, посмотрим. Но >> знаете, это Cloud Code. Cloud Code разберется. Хорошо, готово. И так, да, так что ваша >> иконка стала больше. В два раза больше. >> Да. >> Точно. Кнопка входа исчезла. И у меня есть эта функция чата. >> Вот. О, теперь вы можете общаться. >> Я ваш эксперт по банановым бургерам. >> Э-э, и затем >> что такое банановый бургер? Вы знаете, для кого-то, кто не знает. Очевидно, все знают. >> Да. >> И затем иконка появляется здесь. О, чувак. Где мне вообще начать, чувак? >> Грустно быстро. >> Да, супер быстро. Здоровый W. Чувак, он просто рассказывает мне все о банановых бургерах. >> И это потрясающе. >> И это как разговорный ИИ, так что он запоминает контекст и все такое. >> Это потрясающе. Мы буквально взяли приложение, которое мы создали, и опять же, это работает на каждой платформе, и мы создали здесь лучшую версию для мобильного приложения с Banana Burger. Мы создали иконку. >> Э-э, подождите, нажмите "Начать бесплатную пробную версию". >> Добро пожаловать. Добро пожаловать в VB. >> Вот оно. Мы добавили звуковые эффекты и добавили функциональность ИИ. И затем, если вы хотите, чтобы пользователи входили в систему, вы могли бы использовать Vibe Code Cloud, о котором мы поговорим в ближайшие несколько недель. Пожалуйста, увеличьте масштаб на секунду, масштабируйте и нажмите "App Store". И если вы хотите отправить свое приложение в App Store, все, что вам нужно сделать, это нажать "Опубликовать в App Store". И теперь вы можете пройти через этот поток. Как только вы пройдете это один раз, как только вы настроите все, >> вы в порядке. Вы готовы к работе. Вы можете отправлять столько приложений, сколько хотите, в App Store. И мы стараемся сделать это максимально простым, чтобы попасть в App Store. Это тот поток, через который вы пройдете, а затем вы просто сгенерируете для него иконку приложения, а затем отправите ее в TestFlight. >> Да. >> И да, это то, как вы переходите от веб-приложения к мобильному приложению. >> Дайте нам знать, если вы хотите эту функцию, решение в один клик. >> Да, я на протяжении всего этого видео думал о том, какой будет лучший вариант использования. Вероятно, просто импорт из vzero или импорт из replet. Да. Да. >> Или что-то в этом роде. Я не уверен, как мы могли бы это сделать, но я уверен, что мы могли бы что-нибудь придумать. >> Да. >> В любом случае, увидимся в следующем видео.