N8N + REPLIT — Как сделать сайт с бэкендом на nocode? (Прототип)

Все мы знаем, что нейронки делают сайты по щелчку пальцев, но есть огромный подводный камень. Это всё то, что происходит по ту сторону интерфейса сайта. Авторизации пользователей, базы данных, API запросы. Всё это сложно настроить, если вы не разбираетесь в программировании. Но есть решение, и про это решение я вам сегодня расскажу. Это код платформа под названием N. Она вам позволит создать эээнд в таком вот простом канвасе и

подключить его к вашему сайту или приложению. Всего за 10 минут мы с вами навайпкодем фронтend приложение, соберём на N10 и свяжем одно с другим так, чтобы у нас было полноценное работающее сервис. Люди, роботы, привет. Это Продсовет. Меня зовут дядя Д. Ставьте лайки, оставляйте комментарии, чтобы поддержать наш проект, и новые выпуски не пропускать. Вот для этого подписку оформляйте и будем начинать. Даже если вы не слышали Prin вам по полочкам расскажу и покажу, насколько это классный сервис и на что он способен. Мы с Игоряном, моим соведущим, решили, что хотим все наши разговоры и брейнштормы записывать, отправлять эти транскрипты, эти записи в ИИЖ, чтобы она наши гениальные мысли анализировала и выставляла пошаговый план действий, как эти мысли и цели достигать. Поэтому я сделал workflow, который по ID ввстрече умеет скачивать транскрипт, направлять его на анализ искусственному интеллекту и выдавать summory и план действий. И давайте начнём с того, что научимся

работать в N, собирать вот такой же workflow, а потом я покажу вам один пром, который поможет быстро навайпкодить frontend и связать нашу автоматизацию на NA10 с навайпкодленным сервисом. Как я уже сказал, Nitn - это вот такой вот canvasс, на котором вы можете при помощи различных нот выполнять разные логические операции и управлять потоком данных. В принципе, э пробежимся по каждой но, чтобы вы поняли, как это работает. Я напомню, что наша задача взять ID какой-то записи. Вот эту запись я буду использовать. вот наш ID и отправить его в NAN именно искусственному интеллекту на Summory. Перед тем, как продолжим, если ты совсем новичок в работе с Nat, не знаешь, где найти этот сервис, как его установить, как его использовать локально, бесплатно или в облаке платно, то рекомендую посмотреть либо один из наших роликов на YouTube про Nintend, где мы уже рассказывали большое количество информации, либо посмотреть наш курс по NTН. Э, ссылочка находится в описании на нашего бота. Там всё подробно BTEN, от установки до создания и агентов различных автоматизаций, и создания prodдаction версий, то бишь деплоинга, размещения своих автоматизаций на сервере. Вот в этой ноде Meet ID - это обычная сет нода, в которую просто можно добавить какое-то значение, чтобы оно там было, и мы дальше могли его куда-то передавать. Исключительно для удобства я эту ноду добавляю сюда. Нажмём Execute Step и увидим, что у нас появилось ключ Meet ID и значение этого ключа вот такое, которое передаётся в следующую ноду. Дальше вот в такой ноде get data мы будем в Zoom отправлять вот этот вот Meet ID по специальной ссылке, которую я здесь вот таким вот образом прописал, и получать разные данные, которые Zoom нам предоставляет. Эта ссылка называется endpint. И вот здесь вот я динамически при помощи переменной вставляю то значение, которое мы с вами определили в предыдущей ноте. Это можно сделать просто перетащив сюда вот этот вот ключ. И значение этого ключа вставится сюда. Здесь я ещё настраивал аутентификацию в зуме, но про это я расскажу чуть позже. Далее мы нажимаем Execute Step и получаем вот такой вот набор разнообразной даты. Главное, что здесь нам нужно вытащить - это вот этот вот список recording files, в котором содержится разя информация. Сам файл записи в формате MP4, э, в формате M4A. Потом таймлайны в формате JSON. Transcript, вот он, собственно, то, что нам с вами и нужно. Зум автоматически делает транскрипт, информация из чата. Ну, и периодически что-то ещё туда добавляется в зависимости от ссылки, от встречи. Следующая нода называется split. Нам вот этот список информации нужно разделить. Как вы можете заметить, в этом списке Recording Files их несколько, несколько объектов. Есть Recording Files, вот такой ноль, потом recording files один и так далее, и так далее. Они находятся все в одном списке. Мы не можем с ними работать, пока мы их не разделим на отдельные объекты. Поэтому, собственно, я вот таким образом сюда просто добавляю этот списочек, его переношу. Здесь я оставляю это поле без изменений и нажимаю Execute Step. И теперь вы можете заметить, что вместо одного объекта у нас с вами появилось пять объектов. То есть этот список мы разделили на пять отдельных объектов, которые мы можем дальше отфильтровать. Что мы и сделаем. Я напомню, что нам с вами нужно вытащить транскрипt. И в фильтре я ввожу следующее условие. Файл type, перетаскиваю сюда, должен быть transcriptрипt. Э, я вам напомню, что они там бывают разные. Мы можем так табличку открыть, чтобы посмотреть все объекты, которые у нас здесь получились. Вот наши file extension, play URL, download URL. А где же файл type? А вот он file по 4М4 таeline, transcriptриptat. Нам нужно вытащить именно transpt, чтобы дальше его передавать в искусственный интеллект. Поэтому таким образом я здесь и пишу следующее условие. Переменная, которую мы с вами перетащили, должна быть равна, выбираем значение строка. В данном случае string должна быть равна транскрипту. И в общем-то всё. Нажимаю Execute Step и получаю снова всего лишь один объект. И этот объект именно тот, что нам нужен. Мы видим всю ту метадату, которую мы скачали с зума и именно скачали для транскрипта. Переходим в следующую ноду. И здесь мы этот самый транскрипт загрузим. Э, вот то, что мы получили с вами от ноды фильтр. И нам нужна просто ссылочка на загрузку Download URL. Вот та самая ссылка, которую мы с вами сейчас будем использовать. Метод выбираем get. Нажимаем Execute Step. Получаем уже бинарный файл в какой-то файлик, где есть текст этого транскрипта. И дальше этот файлик мы можем с вами посмотреть, если мы его переведём в читабельный для нас здесь сейчас формат. Для этого используется нода extract from file. И здесь мы просто extract from text file. В поле input binary field мы вводим значение data, потому что именно так он здесь называется. И хотим, чтобы он, весь этот текст попал в ключ, в переменную под названием текст, например, или дата, как угодно это можно здесь назвать. Нажимаем Execute Step и видим, что вот он чудесенький чудеснейшим образом весь тот транскрипт появился у нас здесь в таком вот jon формате под крючом текст. Мы уже почти добрались до финала. А последнее, что я здесь решил сделать - это избавиться от вот этих вот тайм-кодов. Видите, если их скармливать дальше в иишку, ну, как будто бы это лишняя информация, которая NRC будет мешать делать summary. Я решил оставить только текст. После этого я использую вот такую кодно-ноду. И я не писал этот код самостоятельно. Я просто попросил э клода или кого быто ни было ещё, напиши мне код для того, чтобы удалить все э тайм-коды из моего текста. После этого я этот код сюда вставил в кодно-ду. Нажимаю снова выполнить и получаю на выходе чистенький текст. Видите, ни одного тайм-кода здесь больше нет. После чего я отправляю всё это в искусственный интеллект. И сейчас мы должны получить с вами какой-то ответ. Он маленечко подумает. Тут всё просто. Я использую Google, я использую модель Gemin 25 Pro, потому что что-то Gemin 3 Pro у меня с лимитами и отказывалась работать. В прот я вставляю, собственно, вот этот вот текст, точно также сюда его перетаскиваю из предыдущей ноды. И в системное сообщение я добавил вот такой вот промт. можете, в принципе, остановить почитать, если интересно. Ну и вот мы получили с вами ответ, получили результат. Вот профессионально структурированный протокол, краткое содержание встречи, обучающие занятия, продуктивный свет, основывам генерации видео с помощью неросетей, бла-бла-бла, да? То есть здесь была не наша сыгряная встреча, а один из наших созвонов и бесплатных эфиров. Вот таким образом мы с вами от самого начала до самого конца создали такой вот ээ workflow pipeline. Я опустил здесь парочку важных деталей, а именно зумааутентификацию. Я решил, что не буду подробно рассказывать, как это настраивать, так это действительно займёт слишком много времени и постарался просто вам объяснить общую логику того, как это здесь всё работает. Но я проведу бесплатный прямой эфир в нашем Telegram-боте, где разберу вопросы аутентификации подробно и вообще на примере этого workflow объясню, как работают ноды, как работают триггеры, что это такое, какие они бывают, какие есть логические операции в NTN, когда их и как их использовать. Конечно, выдам шаблон этого пайплайна, промт, который есть здесь в Gй поотвечаю на ваши самые умные и самые глупые вопросы. в общем, на любые вопросы. Поэтому, если вы новичок, хотите разобраться в ни достойном уровне, чтобы свои автоматизации ботов, бэкэнты и сервисы делать, то это прямо must have must see. Вы можете записаться на эфир по ссылочке в описании. Переходите в нашего бобота записывайтесь, получайте подробную информацию и увидимся с вами. Эфир пройдёт во вторник на следующей неделе вот такого-то числа в 19:00 по Москве. До встречи бесплатно. Теперь погнали навайпкодим frontend и вот это вот этот процесс научимся к нему присоединять. Для начала нам с вами понадобятся ещё

две магические ноды под названием webhook. И нам нужен webhook trigger. Я добавляю сюда в начало тригр. Сейчас мы его с вами настроим. И ещё нам понадобится respond to webhook. Ещё одна нода, которая, собственно, будет информацию возвращать. Давайте присоединим тгр в самое начало. И что нам нужно здесь? Во-первых, выберем production сразу. Далее метод у нас будет пост, потому что мы будем сюда отправлять какую-то информацию. Вот это у нас будет с вами путь. Для простоты и скорости я не буду добавлять никакой аутентификацию. Просто покажу, как это может работать. Э, ну и в продакшене потом, конечно, стоит её добавлять. Далее когда webhook будет отвечать? Когда? Когда? Вот. Using respond to hook node. Давайте мы с вами здесь выберем, потому что эту ноду мы тоже здесь с вами уже добавили. Здесь предлагаю добавить ещё одну ноду сет для страховки, так сказать, чтобы мы вытащили из ответа модели ровно то, что нам нужно. А нам с вами нужен вот этот конкретно текст, потому что, видите, тут как бы некоторое количество разных объектов. Нам нужен именно текст ответ модели. Мы назовём это answer. Почему бы и да, execute step. Всё замечательно у нас. А, не замечательно. Пошёл по новой генерировать. Ну, пускай. И потом мы этот ответ уже передадим в ноду respond to webhook. Здесь выберем respond with a simple text message. Ну да, мы хотим, чтобы просто у нас текст потом рендерился во фронтде. Думает. Ну давай. Ага, получилось. Итак, супер, у нас теперь есть ключ Answer и его значение ответ нейросети. И вот это чудо мы теперь с вами передадим в webхуhook, который будет отправлять информацию назад. Можно подключать к фронтенду. Я решил, что я всё быстренько здесь скодю в реплите. Вы можете использовать любой сервис

Lavable, просто кодить в курсоре и тестировать это всё там в локальной среде. Но у меня как бы мой агент здесь скотится всё сейчас, я думаю, быстренько, оперативненько по вот такому промту. Мы выберем здесь Web, чтобы он лучше понимал, про что мы здесь, э, говорим и работаем. И вот так вот выглядит мой промт. на программируваня простой фронтEN, который соединит мой эээнд через http будет отражать следующую пользовательскую логику. Frontend. Пользователь вводит Zoom Meeting ID и кликает кнопочку Summarize. Наше приложение отправляет запрос через Webhook, показывает пользователю то, что сейчас находится summary в процессе. И когда получает обратный ответ от вебхука, это будет строка, это будет просто обычный текст. Этот текст будет показываться пользователю и появится кнопочка "Загрузить этот текст". Когда кнопочка "Загрузить текст" кликается пользователем, то обычно txt файл сохраняется на устройство пользователя. Э компьютер и mobile friendly backend. И вот сюда мы с вами добавим тот самый webhook URL, который у нас есть здесь. Production скопировали. И мы включим этот workflow, потому что только в таком случае у нас будет prodution работать. Got it. Это всё мы позакрываем. Это нам не нужно. Замечательно. И в принципе давайте попробуем отправить такой промт и посмотреть, что нам агент спрограммирует. Так, реплит говорит, что он всё сделал. Давайте проверять. Я

снова скопирую свой ID. Добавлю его сюда без пробелов, потому что нужно без пробелов. И analй meтинг. Это может занять какое-то время. Проверим, отправил ли он вообще хоть что-нибудь на наш webхуhook. Если отправил, то мы должны видеть с вами здесь в разделе Executions выполнение то, что процесс пошёл. Но тут явно не Gamin 3 мне кодил frontend и вряд ли опус 4, по нот это реплит. О, Meтин Summory, структурированный протокол встречи, бла-бла-бла. Эээ, что плохо, то, что мы не можем здесь с вами весь текст пролистать, но это уже просто дальше нюансы вашего вайп-кодинга. Давайте нажмём Download Sumary, проверим, получилось ли. Получилось. Откроем его в тексте формате. И да, всё работает. И ещё разочек проверим, точно ли задача была выполнена на стороне нашего бэкэнда, вот собранного таким образом в ноукоде. 19 56 57. Ну, как бы всё прекрасно. Вот он выполнил всю работку, отправил нам на Webхуhook эт ответ, и наш с вами фронд его получил. Ну, надеюсь, вы смысл поняли. Абсолютно любую идею, любую автоматизацию, трансформацию данных, запись в базы данных, что угодно. Вы можете вот здесь вот втене при помощи такого достаточно незамысловатого визуального редактора нодного канваса создать, соединить, разделить, добавить, переработать и так далее. И отправить при помощи вебху это всё на ваш фронтенд. Надеюсь, ролик оказался полезным. Не забывайте, что у нас будет бесплатный вебинар, эфир, где более подробно всё это разберу. Если что-то осталось непонятым вами в этом ролике, то приходите туда, задавайте вопросы. Я ещё раз по всему этому процессу пробегусь и с большим количеством деталей всё объясню и расскажу. Лайки, комментарии, подписки поддерживают нас, наш проект помогают нам развиваться. Спасибо вам за это. Не поленитесь, потратьте пару калорий, тыкиньте пальчиком и увидимся в будущих выпусках. С вами был ДДдд. Пока. เฮ