Останнім часом багато друзів з гуманітарною освітою намагаються використовувати Codex для створення власних продуктів.
У попередніх двох статтях розповідалося, як користуватися Codex; ця зосереджена на практичному застосуванні: як створити за допомогою нього мініпрограму WeChat.
Спочатку подивімося на результат. Цього разу ми створили мініпрограму для відстеження читання під назвою «Одна сторінка». Нижче наведено її інтерфейс у WeChat Developer Tools.
Весь процес від ідеї до робочої мініпрограми можна розділити на такі кроки:
Figma Prototype Design → Codex Code Generation → Developer Tools Simulation → Mobile Preview → Submission for Audit & Publishing.
Figma відповідає за визначення зовнішнього вигляду сторінок та напрямків кнопок; Codex перетворює дизайн у код; WeChat Developer Tools використовується для запуску, перевірки та надсилання мініпрограми на телефон для попереднього перегляду. Після підготовки власного облікового запису мініпрограми ви подаєте її на перевірку та публікуєте через бекенд WeChat.
1. Що таке Figma і чому спочатку використовувати її?
Figma — це інструмент для дизайну інтерфейсів та спільної роботи, який зазвичай використовується для створення сторінок додатків, веб-сайтів та мініпрограм. Дизайнери використовують його для макетування, кольорів та кнопок; продакт-менеджери — для обговорення робочих процесів; розробники — для перегляду розмірів, відступів та ресурсів для реалізації сторінок.
Він також може створювати клікабельні прототипи продуктів. Наприклад, зв'язати кнопку на головній сторінці з іншою сторінкою, щоб натискання викликало перехід, дозволяючи заздалегідь перевірити, чи робота здається плавною.
Саме для цього ми його використовуємо цього разу. Перш ніж писати будь-який код, ви можете побачити кілька сторінок разом і обговорити, чи добре розташована кнопка або чи не занадто перевантажений екран.
Раніше цей проєкт дизайну зазвичай передавався розробнику. Тепер ви можете передати затверджений проєкт Codex для написання коду. Дизайнери можуть почати зі знайомої Figma; ті, хто вже використовує Codex, можуть дозволити йому спочатку згенерувати чернетку, а потім налаштувати її в Figma.
Саме так була створена «Одна сторінка». Ми спочатку визначили три основні сторінки — Книжкова полиця, Запис та Статистика, а потім уніфікували колірну схему та макет.
Це демонстрація дизайну. Кремово-білий колір використовується для фону, темно-синій — для тексту та основних кнопок, а світло-зелений — для виділення поточної операції. Головна сторінка розміщує книгу, яка зараз читається, на найпомітнішому місці, тоді як статистична інформація розташована на окремій сторінці, щоб не перевантажувати користувача цифрами при відкритті.
Цей крок стосується загального ефекту. Коли ви будете задоволені кольорами, розмірами шрифтів та розташуванням сторінок, переходьте далі.
2. Дозвольте Codex згенерувати чернетку та завершити прототип у Figma
Навіть якщо ви не вмієте малювати інтерфейси, ви можете почати з чіткої вимоги. Наприклад, цього разу я хотів читацький щоденник з великою кількістю білого простору, де я міг би бачити книгу, яку читаю, легко записувати прогрес та переглядати історію читання.
Повідомте Codex ваші вимоги та візуальний напрямок разом:
1Я хочу створити мініпрограму WeChat під назвою «Одна сторінка» для відстеження читання.2Спочатку, будь ласка, спроєктуйте три сторінки: Головна сторінка книжкової полиці, Запис читання та Статистика читання. Не пишіть функціональний код.34Візуальний стиль має бути схожим на тихий читацький щоденник:5Кремово-білий фон, темно-синій текст, світло-зелені ключові області, з великою кількістю білого простору.6Головна сторінка має виділяти книгу, яка читається, та точку входу для запису. Інші сторінки повинні зберігати той самий візуальний стиль.7Використовуйте оригінальні геометричні графіки для обкладинок книг; використовуйте вигаданий вміст для зразкових книг.89Спочатку надайте мені попередній перегляд трьох сторінок поруч.10Також виведіть три незалежні файли SVG розміром 390×844, зберігаючи текст, графіку та групи кнопок недоторканими для подальшого налаштування у Figma. Будь ласка, назвіть основні кнопки окремо.
Запит виведення у форматі SVG дозволяє помістити дизайн у Figma. SVG — це векторний графічний формат; у цьому випадку імпорт надає текст, графіку та групи, які можна вибирати та налаштовувати окремо.
Отримавши чернетку, змінюйте її, доки не будете задоволені. Будьте якомога конкретнішими з відгуками, наприклад, «трохи зменшіть заголовок на головній сторінці», «уніфікуйте основні кнопки до темно-синього кольору» або «зробіть обкладинку книги більшою». Коли всі три сторінки будуть задовільними, займіться взаємодією прототипу.
Розміщення дизайну у Figma
Відкрийте файл дизайну Figma, натисніть «+» поруч із Pages ліворуч і створіть нову сторінку.
У цьому прикладі імпорт завершується копіюванням вмісту SVG та вставкою його на полотно Figma. Назвіть три артборди «01-Головна сторінка книжкової полиці», «02-Запис читання» та «03-Статистика читання» та розташуйте їх горизонтально. Після вибору артборду перевірте ширину та висоту на панелі Design праворуч.
Якщо ви вперше відкриваєте Figma, визначте ці області: список шарів ліворуч, полотно посередині, панель Design праворуч для зовнішнього вигляду та Prototype для налаштування взаємодій. Щоб змінити будь-який текст або кнопку, спочатку виберіть їх у списку шарів.
Не забудьте перевірити шрифти після імпорту. Шрифти можуть бути замінені залежно від середовища, що може змінити перенесення заголовків та ширину тексту. Цього разу відтворення шрифту в дизайн-проєкті та мініпрограмі відрізнялося, тому їх потрібно було перевіряти окремо.
Додавання переходів до кнопок
Візьмемо для прикладу картку «Продовжити читання» на головній сторінці. Виберіть її, перемкніться на Prototype у верхньому правому куті та натисніть «+» поруч із Interactions.
У спливаючій панелі Interaction встановіть ці три параметри:
- Trigger: Виберіть «On click».
- Action: Виберіть «Navigate to».
- Destination: Виберіть «02-Запис читання» (цільовий артборд).
Кнопка збереження на сторінці запису веде назад на головну сторінку, а іконка статистики на головній сторінці веде на сторінку статистики. На зображенні нижче показано налаштування для входу до статистики.
Натисніть трикутну іконку «Present» у верхньому правому куті, щоб відкрити демонстрацію прототипу. Клацайте з головної сторінки та назад, щоб перевірити маршрути між сторінками.
Прототип Figma демонструє переходи; фактичне введення, збереження та оновлення даних будуть реалізовані кодом мініпрограми далі.
3. Дизайн готовий; де використовувати MCP?
MCP використовується на етапі передачі дизайну Figma до Codex. Після підключення Codex може читати структуру дизайну, стилі та ресурси вибраного артборду та продовжувати реалізацію на основі дизайн-проєкту.
Якщо ви вже знаєте, як користуватися Figma, і маєте готовий проєкт, ви можете почати безпосередньо звідси. Виберіть артборд, який потрібно реалізувати, скопіюйте посилання, що містить інформацію про вузол цього артборду, і надішліть його до Codex з увімкненим з'єднанням Figma.
1Будь ласка, прочитайте контекст дизайну та скріншоти цього артборду через Figma MCP.2Спочатку поясніть структуру сторінки, розміри шрифтів, кольори, відступи та ресурси, які ви прочитали.3Чітко повідомте, якщо є частини, які ви не можете прочитати; не здогадуйтесь.45Далі ми створимо рідну мініпрограму WeChat, використовуючи WXML, WXSS, JavaScript та JSON.6Будь ласка, реалізуйте її відповідно до цього технологічного стеку, повторно використовуючи існуючі стилі та ресурси з проєкту.7Спочатку завершіть головну сторінку та продовжуйте з іншими сторінками після підтвердження.
Обов'язково вкажіть «рідна мініпрограма WeChat». Інформація про дизайн, надана Figma, має бути реалізована відповідно до цільової платформи; ви не можете просто використовувати веб-код для мініпрограми.
У цьому прикладі дизайн було імпортовано до Figma через SVG, і код слідує тому самому файлу дизайну та ресурсам; MCP — це спосіб подолати розрив, коли вже існує дизайн-проєкт Figma. Незалежно від методу, те, що передається Codex, має бути підтвердженим дизайном.
4. Написання дизайну в мініпрограму
Відкрийте папку проєкту в Codex, розмістіть файли дизайну та ресурси обкладинок книг, і ви можете почати реалізацію.
На цьому кроці, окрім визначення технології, ви повинні чітко вказати, що ви хочете отримати: проєкт, який можна безпосередньо імпортувати в WeChat Developer Tools.
1Будь ласка, завершіть рідну мініпрограму WeChat на основі підтвердженого дизайну «Одна сторінка».23Використовуйте WXML, WXSS, JavaScript та JSON.4Розмістіть код у папці miniprogram та надайте app.json та project.config.json, щоб забезпечити можливість безпосереднього імпорту в WeChat Developer Tools.56Реалізуйте сторінки Книжкова полиця, Запис читання, Статистика та Додати книгу.7Дотримуйтесь підтвердженої колірної схеми, макету та оригінальних ресурсів обкладинок книг.8Поки що зберігайте дані локально за допомогою wx.setStorageSync та зчитуйте їх при повторному відкритті.9Додайте перевірку введення, порожні стани та підказки про помилки збереження.1011Після завершення перевірте код і повідомте мені, який каталог імпортувати та як компілювати.12Якщо є елементи, які мені потрібно налаштувати, перерахуйте їх окремо.
У проєкті, згенерованому Codex, WXML обробляє структуру сторінки, WXSS — стилі, JavaScript — кліки та збереження, а JSON — шляхи сторінок. Коли ви зрозумієте, що робить кожен файл, ви зможете зрозуміти структуру доставленого каталогу.
Не лякайтеся тут; просто дозвольте Codex вирішити це за вас. Вам не потрібно розуміти код; просто скопіюйте підказки, вставте свій дизайн-проєкт і змініть назву на свою.
5. Помістіть це в WeChat Developer Tools і перевірте, чи працює
Після встановлення та входу в WeChat Developer Tools виберіть «Import Project» у меню «Project» і знайдіть папку miniprogram, згенеровану Codex.
Назва проєкту може бути будь-якою. AppID — це ідентифікатор цієї мініпрограми: ви можете використовувати тестовий обліковий запис, наданий інструментом, для локального навчання, але ви повинні переключитися на власний AppID мініпрограми, коли готуєтеся до публікації. Для цього прикладу виберіть «Do not use cloud services» для бекенду.
Натисніть «Create», увійдіть у проєкт і зачекайте компіляції. Коли симулятор праворуч відобразить сторінку, ви можете керувати нею безпосередньо за допомогою миші. Після того, як Codex змінить код, перекомпілюйте, щоб побачити результати.
Тут в основному перевірте три речі: чи не зміщені сторінки, чи ведуть кнопки на правильні сторінки та чи можна зберегти введений вміст. Також перемкніть розмір екрану симулятора, щоб побачити, чи не тісні довгі заголовки, поля введення та нижня навігація.
Якщо виникнуть проблеми, надішліть текст помилки або скріншот до Codex разом із тим, що ви щойно зробили, і що очікували побачити. Наприклад:
1Це скріншот помилки в WeChat Developer Tools.2Коли я переходжу на сторінку запису з головної сторінки, обкладинка книги не відображається.3Будь ласка, перевірте шлях до зображення та час завантаження сторінки. Виправте це, зберігаючи існуючий макет без змін.
У цьому випадку ми насправді зіткнулися з проблемою завантаження зображення: код почав склеювати адресу зображення до того, як дані сторінки були готові, що призвело до відсутності назви обкладинки книги в шляху. Вказівка коду чекати, поки дані будуть готові, перш ніж відображати зображення, вирішила проблему.
Подібні проблеми не вимагають вивчення коду з нуля, але ви повинні чітко вказати, де вони виникають. Після виправлення поверніться до симулятора, повторіть операцію та підтвердьте, що все працює нормально.
6. Від комп'ютерного симулятора до мобільного попереднього перегляду та публікації
Коли все запрацює на комп'ютері, перевірте на телефоні.
Використовуючи AppID з відповідними дозволами, натисніть «Preview» у верхній частині інструментів розробника, зачекайте, поки згенерується QR-код, а потім відскануйте його за допомогою дозволеного облікового запису WeChat. Зверніть увагу на розмір шрифту на телефоні, чи не блокує клавіатура область введення, коли вона з'являється, і чи легко дістати до нижніх кнопок.
У цьому прикладі дані зберігаються локально, тому записи в симуляторі не будуть автоматично синхронізуватися з телефоном. Вам потрібно повторно ввести тестовий вміст на телефоні; якщо ви хочете зберігати дані на різних пристроях у майбутньому, ви можете додати функції хмарної синхронізації або резервного копіювання.
Коли ви будете готові, щоб друзі спробували, натисніть «Upload» у верхній частині інструментів розробника, потім перейдіть до бекенду мініпрограми WeChat Official Accounts Platform. Увійдіть у Version Management, знайдіть відповідну версію розробки, встановіть її як Trial Version та додайте учасників тестування. Учасники тестування повинні мати відповідні дозволи.
Після підтвердження працездатності подайте на перевірку в бекенді та опублікуйте після схвалення. Заповніть інформацію про обліковий запис та категорії послуг відповідно до вимог бекенду; вам не потрібно, щоб Codex виконував ці операції з обліковим записом за вас.
Цей приклад досяг етапу, коли його можна запускати в інструментах розробника. Читачі можуть продовжити мобільний попередній перегляд, завантаження та подання на перевірку, використовуючи власні облікові записи мініпрограм.
З'єднання всього процесу
Спочатку використовуйте Figma, щоб визначити сторінки та переходи кнопок, доки не будете задоволені дизайном; потім передайте файл дизайну або посилання на артборд Codex, щоб він написав мініпрограму WeChat; потім імпортуйте її в інструменти розробника для симуляції, запуску та перевірки помилок; нарешті, попередньо перегляньте на телефоні та завантажте, перевірте та опублікуйте після підтвердження.
У майбутньому, чи ви створюєте інструмент для відстеження, додаток для рецептів чи інші невеликі утиліти, ви все одно можете дотримуватися цього робочого процесу. Якщо дизайн незадовільний, поверніться до Figma, щоб налаштувати; якщо є функціональна проблема, передайте конкретну операцію та помилку Codex, а потім підтвердьте результати модифікації в інструментах розробника.
Я Майлз, експерт з алгоритмів ШІ, який перейшов з великої технологічної компанії до FDE. Я займався дослідженнями, оптимізацією та розгортанням алгоритмів, а також корпоративним навчанням. Слідкуйте за мною @miles_mazy, щоб зростати разом і заробляти разом.
