Low-code от практика – Telegram
Low-code от практика
75 subscribers
5 photos
7 videos
22 links
Продакт, который автоматизирует и (лоу)кодит. Каждый пост - свой опыт.
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Как за 30 минут навайбкодить расширение для Netflix

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

Что интересного:
1. Уже после первого промпта получилось работающее расширение
2. Я решила улучшить (показывать кнопку только на видео) и ChatGPT прикрепил ее не на том уровне, она перестала кликаться и копировать субтитры
3. Надо иметь навыки дебага, чтобы точнее описывать проблему – generic фразы вроде “теперь не работает” не особо эффективны

Вот ссылка на сам диалог, а на видео результаты после каждого промпта.
🤝1
ChatGPT vs Claude: 1 - 0

Сегодня тестирую промпты в Claude.
Как и в случае с ChatGPT, рабочий прототип удалось создать с первого запроса.

Claude проявил чуть больше проактивности:
- Добавил информационный popup, который появляется при клике на логотип расширения в браузере (хотя это не было указано в промпте).
- Попытался учесть все возможные варианты размещения субтитров.

С точки зрения UX, на мой взгляд, ChatGPT удобнее:
🔀 Нагляднее отображает структуру файлов.
✍🏻 Код для разных файлов разделён по блокам – меньше шансов ошибиться при копировании.

Ну и главный недостаток Claude - он не справился с многострочными субтитрами.
В отличие от ChatGPT, который парсил их корректно, Claude:
- Сначала склеивал строки,
- Затем дублировал их,
- Вместо анализа причины дублирования написал функцию для их удаления.

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

Пока что счёт 1:0 в пользу ChatGPT.
Ссылка на чат
👍1
Классный текст о свободе слова от создателя RoR, Basecamp и вообще культового человека в определенных кругах.

Сформулировала 11 тезисов, перевела — 10.
Финальный тезис прекрасен в оригинале.

1. Свобода слова не гарантирована
2. Были времена, когда левые несли знамя свободы слова
3. Левые "тогда" — это рэп, разоблачать фарма компании, выступать против машин и любых войн, это нести принцип "живи сам и давай жить другим"
4. Показательный кейс — евреи в 1977 судились с правительством США за право неонацистов провести парад в Иллинойсе.
5. Это не сумасшествие, это защита конституционного права. Только защищая его, можно быть уверенным, что и евреи смогут реализовать это право.
6. Преданность свободе слова испарилась у левых. Вместо этого - нападки на свободу слова, чтобы оградить себя от политических оппонентов.
7. Бан X в Бразилии, множество проблем X и Маска в Европе, США, наказания за посты и мемы в Британии, арест Дурова во Франции — это современные левые и их отношение к свободе слова.
8. Позиция канадцев, британцев, европейцев по отношению к свободе слова описывается словами "да, мы за свободу, но..."
9. Среди американцев больше борцов за свободу слова, американцы рассчитывают на первую поправку.
10. Единственный способ сохранить свободу слова — это отказаться от цензуры совсем, признать, что ни у кого нет монополии на истину, и никто не знает, что такое hate speech.
11. More speech to counter bad speech.
Как я писала расширение с помощью ChatGPT (часть 1)

Я достаточно много читаю на английском языке.
Оцениваю свой уровень на стабильный B2, эпизодически C1 🙂
Мне вполне этого хватает решать рабочие и бытовые задачи, но чувствую, что словарный запас мог бы быть и побогаче.

Один преподаватель посоветовал:
📚 больше читать на английском
🤔 разбирать непонятные слова с помощью английского толкового словаря, чтобы перейти к мышлению на английском

Сначала я пользовалась Cambridge словарем.
Там есть определения слов, синонимы, примеры предложений.

Я поняла, что этот способ вполне так прокачивает словарный запас. Но это очень отвлекает от самого чтения.
Поскольку читаю я в основном за ноутом, то решила чекнуть стандартные гугловые штуки. Встроенные переводчик и расширение меня не устроили - я же хочу синонимы, примеры, а не перевод.
И тогда решила написать свое браузерное расширение и заодно проверить гипотезу "а правда ли, что c помощью AI любой может написать код".
Краткий ответ - имхо, нет, не любой, но процесс разработки может заметно демократизировать.

Для начала - расскажу, что на входе в плане навыков программирования и смежных:
1. Работаю в tech, но не разработчик.
2. Проходила курс на udemy web dev boot camp.
3. Умею делать low-code автоматизации.
4. Ну и много читаю (и эффективно) - могу сориентироваться в документации, инструкциях, how-to гайдах и т.д.

Что на выходе:
Написать приложение получилось!
Расширение действительно работает, отслеживает выделенный текст, отправляет его по апи, получает результат и отрисовывает его в таком специальном overlay.

Код - 90% ChatGPT, 10% официальная документация Гугла.

В следующих постах:
👍 👎 Покажу примеры хороших и плохих промптов, и как хорошие промпты могут сэкономить часы
🗣️ Расскажу чем полезен stackoverflow, даже в эпоху AI
💪 Порассуждаю о том какие навыки помогли эффективно взаимодействовать с AI
👏5
Как я писала расширение с помощью ChatGPT (часть 2)

Сегодня напишу о промптах, которые использовала для написания расширения с помощью ChatGPT.
Первым промптом было: "сделай boilerplate для браузерного расширения под Chrome. Расширение должно уметь по клику на иконку отрисовывать поп-ап".

Я получила
- расширение в виде доп.пункта в контекстном меню
- и поп-ап отрисовывающийся по клику на менюшку

Неплохо для одного промпта, но с точки зрения UX мне все же хотелось достичь нужного поведения без залезания в менюшку – слишком много кликов.

Тогда я начала декомпозировать желаемый результат и создавать дополнительные промпты.
"Сделай так, чтобы при выделении текста появлялась иконка"
"Поддержи два режима выделения текста: двойной клик и выделение символ за символом"
"Не дублируй иконку, когда текст выделяется посимвольно"
"Выведи выделенный текст в консоль"
"Нарисуй на текущей странице overlay и выведи туда выделенный текст"
"Сделай запрос в апи..."
"Выведи результат запроса в оверлее"

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

В итоге вспомнив немного курс с Udemy (уроки по работе с dom деревом), я смогла сформулировать промпт и получить то, что хочу. А надо было мне лишь: "при клике на иконку добавь div с определенными стилями".

Хотя с каждой новой версией AI все лучше понимает простые человеческие инструкции (и про это говорил в своем недавнем интервью CPO OpenAI), я думаю, что по-прежнему важно научиться детально описывать ожидаемый результат, иногда даже в терминах языка программирования.

Это ускоряет процесс разработки в разы.

А вот приписки вроде “act as a professional developer” – на мой взгляд, не особо влияют, поэтому лучший фундамент для AI-assisted программирования – это пройти 2 курса: по анализу/сбору требований и экспресс курс по разработке на любом языке.
🔥3
Как я писала расширение с помощью ChatGPT (часть 3)

В этом посте я расскажу о задаче, в которой Stack Overflow оказался полезнее ChatGPT.

Я не знаю, как называется феномен, когда AI заводит в тупик, и с каждым новым промптом код всё больше превращается в неработающую лапшу.
В такие моменты важно остановиться и откатиться (привет, git 🙂) до рабочей версии.
Затем разобраться в механике возникновения проблемы. Здесь лучше и ChatGPT использовать, и Google, и официальную документацию.

В моём случае расширение после обновления просто переставало реагировать на клики – ошибка была связана с особенностями взаимодействия Chrome и его расширений.

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

Как только я загуглила эту проблему, сразу нашла обсуждение на Stack Overflow с готовым ответом. Он был не про error handling (с этим ChatGPT справился, такое можно было не гуглить), а скорее про редизайн самого подхода (как раз то, что я искала).
На тот момент ChatGPT такой вариант решения не предлагал, а вот живой человек-разработчик – смог.
Причем ответ был скорее в виде вопроса: “А зачем ты делаешь так, если можно по-другому?”

Вывод: если нужно последовательно писать по инструкции – AI вне конкуренции (и таких задач – море).
Если же нужен творческий подход к решению проблемы, здесь временами необходим human in the loop – живой напарник или тред на Stack Overflow – это не так важно, иногда даже случайный вопрос в рандомном треде помогает взглянуть на проблему и варианты её решения по-другому.
2
Как я писала расширение с помощью ChatGPT (часть 4 - финальная)

В этом посте поделюсь своими выводами:
🙇‍♀️ чтобы писать код с помощью ChatGPT надо разбираться или хотеть быстро разобраться на базовом уровне: в языке программирования, на котором пишешь, в платформе, под которую пишешь. Например, я не представляю смогла бы я написать это приложение, не зная что такое объект, функция, метод, DOM, не ориентируясь в возможностях браузера.

⚙️ для рутинных вопросов ChatGPT очень хорош. Например, сконвертировать ответ API в какой-то более удобный для отображения JSON. А люди лучше ChatGPT, когда нужны не прямолинейные решения в лоб, а более творческие.

💰дешевле ли это чем традиционная разработка? Думаю, разработчик такое приложение запилит за 1 день. У меня это заняла вечеров 5-6. Чуть дольше чем рабочий день по часам, сильно дольше с точки зрения time-to-market. Дешевле это или дороже – думаю, зависит от конкретной ситуации.

Ну и моя версия ответа на вопрос "заменит ли AI разработчиков" – да, в бизнесах очень много одноразового кода (выгрузки, перекачивание данных из одной системы в другую, скрипты для удаления ошибок в данных, формы для сбора данных и т.д.), и вот это все точно нужно писать силами AI, а человеческие силы направлять на творческие задачи.
👍1🤩1
“The hottest new programming language is English”
Так говорит Андрей Карпатый (занимался ИИ в OpenAI, Tesla), который придумал термин vibe coding.
Умение ясно излагать мысли, конечно, +100 практически в любой профессии.
Но мне кажется, фраза может ввести немного в заблуждение, как и популярный среди low-code/no-code платформ слоган “no coding required”.

Можно виртуозно владеть английским и навыками общения с ИИ, но чтобы из ответов ИИ собрать работающий продукт, нужно знать:
- как запустить код локально и на сервере
- как работают API
- что такое git
- как использовать инструменты дебага

Язык - необходимое, но не достаточное условие. А вот английский + инженерное мышление + база в любом языке программирования – беспроигрышная комбинация.
🔥1
Media is too big
VIEW IN TELEGRAM
“Кради как художник” – книгу не читала, но…

Согласна, что копирование – удобная тактика: чтобы научиться что-то делать самому, сначала скопируй у тех, у кого уже получилось.

Сегодня с ChatGPT делаем расширение для анализа видео по интересующим запросам.
Основная идея:
✍🏻 Написать запрос в Ютубе (например, n8n self hosting)
↘️ Кликнуть кнопку в расширении
📈 Создать автоматически google sheet со всеми данными видео
→ Ссылка
→ Обложка
→ Длительность
→ Название
→ Просмотры
→ Когда загружено
→ Понять что работает для данного запроса: какие ключевые слова в названии, что на обложке, оптимальная длительность

На видео промежуточный результат, а по ссылке чат с промптами
Что буду улучшать в следующих сериях:
1️⃣ Генерацию файла с результатами – хочется, чтобы ячейка сразу увеличивалась под размер обложки и не нужно было кликать allow...
2️⃣ Неподгрузившиеся ссылки на обложки – скорее всего, можно будет сгенерить по id видео
3️⃣ UI – кнопка, бэджик некрасивые
4️⃣ Ну и менять стэк – сейчас запрос с данными летит в Make, а оттуда в мой гуглодиск, а надо научиться работать с гуглом того, кто установил расширение
🔥4
Media is too big
VIEW IN TELEGRAM
Сегодня улучшила расширение для ютуб-аналитики
Теперь оно:
➡️ Получает доступ к Google Drive и Google Sheets по API
➡️ Создает файл с размером ячеек под просмотр обложки

Что пока не сделала:
Не убрала лишний клик для подгрузки обложек - такая у Google Sheets “фича”. Обойти можно сохранением обложек на гугл-диск.
Формирование ссылок на обложки по video id, поэтому пока не поскроллишь страницу - ссылки не подгрузятся

Как обычно - промпты по этой ссылке
Демка на видео.
👍1🎉1
3 причины, почему n8n становится моим go-to инструментом

Сейчас все чаще делаю автоматизации, особенно нагруженные, в n8n: либо сразу там, либо перевожу из Make в n8n.
C каждым следующим проектом на n8n, инструмент нравится все больше:
💲 Стоимость: дешевле Make, хоть в облаке, хоть self-hosted. К self-hosted практически идеальные инструкции.
📩 Удобный импорт: небольшое количество подключенных сервисов компенсируется возможностью импортировать curl
👩‍💻 По-настоящему low-code friendly: все, что сложнее запроса к API – фильтрации, преобразования данных и т.д. – можно делать с помощью кода, который лекго перенести в любую другую среду. С Make такое не пройдет, рано или поздно окажешься “заперт” в их системе координат.
Вообщем, кажется, что именно такими свойствами и должен обладать хороший сервис для автоматизаций.
👍4
Интересно поразмышлять на тему освоения навыков, способов решения задач сейчас и несколько лет назад в до-AI эпоху
Тогда:
- Обучающие ютуб видео
- Гугл всего подряд
- Stackoverflow
- Другие спец.форумы
- Онлайн самоучители и курсы
- Документация к сервисам, инструментам


Сейчас все чаще:
- AI
- Документация к сервисам, инструментам

Занятно получилось - если ты не ракеты в космос запускаешь, то тебе достаточно ChatGPT/Claude/DeepSeek для многих задач: проверить текст, сгенерить код или картинку, побрейнштормить с “виртуальным собеседником” на любую тему
👍3
и снова про n8n

Выше уже писала, как n8n позволяет экономить, а сейчас хочу показать супер наглядную картинку
Так выглядит дашборд в Make после переезда "тяжелых" интеграций в n8n.
В ~10 раз меньше операций, в ~3 раза дешевле, а трудозатрат на несколько часов:
- Хостим n8n с помощью heroku
- Разбираемся с http запросами (не сложнее, чем в Make)
- Немного пишем код с помощью ChatGPT и с учетом специфики n8n: чтобы заменить сценарий, который потреблял ~1000 операций за раз, оказалось достаточно 50 строчек кода
🔥3
Сделала скрипт для поиска сценариев Make по ключевым словам – делюсь, вот ссылка на гитхаб.
В каких ситуациях полезен:
🤯 У вас куча кастомных http блоков, и вам надо найти все сценарии, где вызывается определенный url
🤯 Вы рассылаете сообщения в мессенджерах, и вам надо найти все сценарии, в которых отправляете определенное слово/фразу

Вообщем, вам нужно что-то найти.
Как мне, например, все запросы на урлы вида lambda-url.eu-north-1.on.aws
Перебирать руками 100+ сценариев не хотелось.

Так появился этот скрипт, который сэкономил мне часы.
Может сэкономит и вам 🙂
копируйте ✍🏻, ставьте звезды на гитхаб , делитесь идеями улучшений💡
👏3
Правило 20/80 в инди-разработке

20% усилий на код (и это самое простое), 80% усилий – на дистрибуцию.
Например, сейчас мне надо:
💅 Забрендировать экран, который Гугл покажет пользователю для подтверждения доступов
✍🏻 Обосновать, зачем запрашиваю доступ к Google Sheets API и Google Drive API
👩‍⚖️ Собрать Privacy Policy и Terms of Service
🎥 Сделать walkthrough video

Если б не было доступных AI-шек, я бы сказала не 80% усилий, а времени: потому что писать legal доки, рисовать лого – тут я могу увязнуть на долгие часы и дни.

Но, слава прогрессу, сейчас достаточно просто взять в себя в руки, написать промпт и поставить дедлайн, чтобы преодолеть проблему “чистого листа” в таких задачах.
Вобщем, в ближайшие выходные живу по этому чек-листу от ChatGPT
👍3
Чек-лист нового low code проекта

Проверить все доступы: залогиниться в make, n8n и прочие сервисы, удостовериться, что все клиентские данные видимы и доступны

Прокликать все инструкции, инфу, которую расшарили в виде гуглодоков, досок в miro, дозапросить доступы (в половине случаев гуглодок/miro не откроется сразу :))

Сгенерить api токены, проверить хотя бы на одном запросе, что все ок

Чекнуть тарифы и ограничения в используемых сервисах, свериться с клиентом, что и когда может "стрельнуть" (опять-таки в половине случаев что-нибудь стрельнет не вовремя:))

Конечно, ничего страшного не произойдет, если разрулить все эти вопросы по мере возникновения, но если задать их все разом – можно заметно сэкономить время
👍2
Правило 20/80 в инди-разработке - часть 2

Сегодня засела в кофейне, чтобы подготовить экстеншн к ревью – запросила у Гугла sensitive доступы к API.
Как и ожидалось, у страза глаза велики 🚲🚲.

Чистого времени от “села за ноут” до “нажала отправить на ревью” примерно час:
-> Логотип - подошел один из тех, что подготовила для страницы в Chrome Web Store
-> Privacy Policy - уже была заготовка
-> Terms of Service - сделала с помощью ChatGPT
-> Видео - записала с экрана за 5 минут, отредактировала в Canva минут за 10

Все загрузила и увидела заветный экран “Verification in progress”
🔥4
Продолжаю проходить верификацию в Гугле

Статус на сегодня – 🟨 🟨 🟨 🟨
Если не лениться (и прочитать инструкцию, а не действовать по наитию)), то Homepage requirements и App Functionality можно пройти с первого раза.

По Privacy Policy – полагаюсь на ChatGPT, с виду вроде не чушь сгенерил.

В Appropriate Data Access – уверена, что ничего лишнего не запросила.

Branding Guidelines – самое нетривиальное.
Гугл не разрешает упоминать названия своих брендов (Google, YouTube, AdSense и т.д.) и требует ​​”application name that uniquely identifies your brand and identity”

До brand & identity вайбкодеру с приложенькой на 300 пользователей, конечно же, пока далеко, поэтому application name просто описывает основную функцию.

Жду следующий фидбек от Google Verification Center
👏2
Продолжаю проходить верификацию в Гугле - 2

Статус на сегодня – 🟨 🟨 🟨
Получила сегодня самую сложную (на мой взгляд) галочку - за branding guidelines.

Пришлось на лендинге избавиться от YouTube в названии, т.к. Гугл не разрешает упоминать названия своих брендов.
Пока закрыла глаза на то, что пользователь
1/ Сначала в Chrome Web Store увидит одно название (оптимизированное под SEO-запрос – YouTube Thumbnail Downloader)
2/ А затем на экране подтверждения доступов – YTD - Thumbnail Downloader Tool

Наверняка, кого-то может смутить расхождение, но сейчас интересней на уже доступном регулярном трафике в 10-15 установок в день проверить востребованность отчетов по Ютуб обложкам прямо с доставкой на гугл-диск
🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM