Шаг за шагом: управляйте переводами своего веб-сайта как профессионал с помощью FlyCode

В сегодняшнем руководстве вы узнаете, как резко ускорить переводы вашего проекта благодаря FlyCode.

В конце этого руководства вы получите:

  • приложение FlyCode, установленное в образце веб-приложения
  • надежный рабочий процесс управления переводами
  • управлял своим первым обновлением перевода с помощью пользовательского интерфейса FlyCode

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

Предоставьте вашей продуктовой команде возможность управлять многоязычным веб-сайтом с помощью FlyCode.

Требования

Для успешного завершения этого руководства есть некоторые требования; вам нужно:

После того, как вы сделаете и то, и другое, вы будете готовы улучшить управление переводами! 🚀

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

Шаг 1. Откройте домашнюю страницу FlyCode

В качестве первого шага я предлагаю вам открыть домашнюю страницу FlyCode и нажать Начать.

Шаг 2. Создайте учетную запись

Вы должны быть перенаправлены на страницу создания учетной записи. Мы рекомендуем вам войти в свою учетную запись GitHub для целей этого руководства.

Шаг 3. Авторизуйте FlyCode на GitHub

GitHub предложит вам параметры, необходимые FlyCode для создания вашей учетной записи. Нажмите на кнопку «Авторизовать flycode-org».

Шаг 4. Создайте организацию

После создания учетной записи следующим шагом будет создание организации. В FlyCode вы можете рассматривать организацию как рабочее пространство, куда вы можете импортировать свои различные проекты и работать над ними вместе со своей командой.

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

Как вы можете заметить, есть флажок «Разрешить доступ к домену». Если вы используете электронную почту своей организации, эта опция позволяет всем пользователям того же домена, что и ваш, получить доступ к организации FlyCode.

Примечание. Если вы не отметите этот параметр на этапе регистрации, вы все равно сможете пригласить своих коллег позже.

Откройте для себя миссию FlyCode

После сохранения вашей организации у вас будет короткое ознакомительное видео.

Если вы хотите узнать больше о FlyCode и получить преимущество, я рекомендую вам его посмотреть. В противном случае смело переходите к следующему шагу!

https://www.youtube.com/watch?v=nQ8wR74kYX0

Шаг 5. Свяжите свой GitHub с вашей организацией FlyCode

После закрытия всплывающего окна вы увидите запрос на импорт вашего первого репозитория Git в вашу организацию.

Этот шаг имеет решающее значение, потому что вы узнаете, как настроить свой репозиторий.

Вы можете нажать на кнопку «Подключить GitHub».

Примечание. На следующем этапе у вас будет выбор между различными поставщиками Git (GitHub, GitLab и т. д.).

а. Выберите поставщика Git

Как видите, на данный момент FlyCode совместим с GitHub, GitLab и BitBucket. В этом руководстве мы будем использовать GitHub в качестве поставщика Git.

б. Авторизовать приложение FlyCode на GitHub

После выбора GitHub появится всплывающее окно с просьбой авторизовать репозитории по вашему выбору.

Импортируемые здесь репозитории соответствуют тем, которые вы увидите на следующем шаге (тот, который вы сможете настроить).

Примечание. На изображении ниже вы видите только возможность выбрать все репозитории, потому что мы используем новую учетную запись GitHub. Но выбирайте только те репозитории, которые хотите импортировать из соображений безопасности и конфиденциальности.

в. Выберите репозиторий с GitHub

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

Примечание. Имя репозитория примеров: «next-js-sample-with-translations».

д. Пусть волшебство случается!

Мы здесь! FlyCode сканирует ваш репозиторий, чтобы найти в нем переводы! 🪄🎩

Всего через несколько секунд вы увидите результат. Если вы используете предоставленный образец репозитория GitHub, результат должен быть похож на приведенный ниже.

Как видите, доступно много деталей, от стека вашего проекта до ваших переводов (ключей и значений).

Когда вы будете готовы, нажмите «Завершить настройку», чтобы перейти к следующему шагу.

е. Настройте приложение FlyCode

На последнем этапе настройки вашего репозитория вам нужно будет предоставить дополнительную информацию FlyCode.

Да… это волшебство, но нужно еще немного поработать! 😆

Чтобы дать вам больше информации о различных свойствах, вы можете навести курсор на значок «?» знак справа от каждого входа, но вот сводка:

  • Выбрать ветку: ветку, с которой FlyCode будет работать (редактировать переводы). Мы оставим значение по умолчанию для этого урока.
  • Название приложения: это… название приложения! Вы можете ввести название вашего проекта
  • Базовый каталог: где находятся ваши исходные файлы. Здесь можно указать путь к ним. Например, src/, если они находятся в папке src/. Оставьте пустым, если код вашего приложения находится в корне репозитория.
  • Формат текстовых ресурсов: как хранятся ваши тексты. В этом руководстве мы будем использовать «файлы ресурсов Json (плоские ключи)». Не стесняйтесь открывать другие позже!
  • Путь к текстовым ресурсам: путь к вашим текстовым ресурсам (посмотрите на знак «?», чтобы узнать, как его указать).

Шаг 6. Активируйте вашу конфигурацию

а. Выберите пулл-реквест FlyCode

Теперь давайте нажмем «Merge Pull Request», чтобы получить доступ к вашему репозиторию на GitHub.

Открывает новую страницу, предыдущую не закрывать!

б. Узнайте, что находится под капотом FlyCode

Если вам интересно и вы хотите узнать больше о том, как работает FlyCode, вы можете заглянуть в раздел «Файлы изменены» запроса на включение.

Вы увидите файл .flycode.yaml, соответствующий параметрам, которые вы ввели на шаге 5.

На данный момент онбординг проекта на FlyCode довольно прост и не позволяет вам всего. Но конфигурация YAML может обрабатывать гораздо больше параметров, и с ее помощью вы можете создавать довольно сложные переводы. Я приглашаю вас ознакомиться с Документацией FlyCode, чтобы узнать больше об этом.

в. Слияние пулл-реквеста

Когда вы будете готовы, вы можете нажать кнопку «Merge pull request», чтобы активировать FlyCode в вашем проекте.

Шаг 7. Вернитесь в FlyCode и наслаждайтесь! 🎉

Да ты р-е-а-д-й! 👏 Если вы вернетесь на страницу FlyCode, которую вы оставили в фоновом режиме, вы увидите страницу успеха.

Шаг 8. Откройте приложение через панель управления

После страницы успешной настройки вы можете выбрать свое приложение на панели инструментов.

Шаг 9. Визуализируйте свои переводы

Теперь мы подошли к самой захватывающей части этого руководства. Вы узнаете, как управлять всеми своими переводами с панели управления FlyCode всего за несколько кликов.

Как видите, страница вашего проекта содержит все переводы вашего репозитория в виде таблицы (ключи, значения и язык).

Давайте сравним с нашим образцом приложения NextJS, чтобы увидеть, все ли совпадает.

Вот дерево проекта в репозитории (папка locales с двумя файлами JSON, en.json и fr.json).

.
├ [...]
├── locales
│   ├── en.json
│   └── fr.json
[...]

Если мы откроем эти два файла, вот что мы имеем:

  • en.json:
{
  "metaTitle": "Next.js Localization with Next-Translate",
  "title": "Welcome to my i18n NextJS application!",
  "description": "I'm using the Next-Translate library to translate this page."
}
  • fr.json:
{
  "metaTitle": "Localisation de Next.js avec Next-Translate",
  "title": "Bienvenue dans mon application NextJS i18n !",
  "description": "J'utilise la bibliothèque Next-Translate pour traduire cette page."
}

Теперь давайте более подробно рассмотрим страницу с помощью этого аннотированного изображения ниже.

Шаг 10. Время редактировать перевод

а. Текущая версия сайта

Теперь, когда вы увидели, как организована домашняя страница вашего проекта! Мы увидим, как отредактировать перевод вашего сайта с помощью FlyCode.

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

Вы можете ввести следующие команды в корне локального репозитория Git, чтобы запустить проект:

$ npm install
$ npm run dev

б. Редактировать перевод с помощью FlyCode

Допустим, вы хотите сократить англоязычное описание своего веб-сайта. Рядом с соответствующим переводом вы увидите значок «ручка». Нажмите на нее и начните редактирование.

Вы можете нажать на значок «✅», чтобы подтвердить ваши изменения, когда вы закончите.

Шаг 11. Отправьте обновление инженерам

а. Сохраните новый перевод

Теперь ваши изменения готовы к производству, давайте отправим обновление инженерам. Мы хотим создать запрос на вытягивание GitHub для вашего проекта, отправив обновление. Позже инженеры примут изменения и автоматически интегрируют их в код (шаг 12).

Для этого вы можете нажать на верхнюю правую кнопку вашей таблицы.

б. Опишите ваши изменения

Чтобы помочь инженерам с вашими обновлениями, вы можете оставить комментарий перед их отправкой. Мы настоятельно рекомендуем вам делать это как можно чаще. Это помогает избежать споров между продуктовой/маркетинговой командой и инженерами.

Шаг 12. Примите изменения на GitHub

а. Откройте свои пулл-реквесты на GitHub

Вернемся к GitHub, нажав кнопку вверху справа!

б. Проверьте изменения

После перенаправления на страницу GitHub ваши инженеры могут просмотреть различные внесенные изменения.

в. Объединить изменения

Они также могут видеть комментарий, который вы оставили на FlyCode. Когда они будут готовы, они могут нажать «Объединить запрос на вытягивание», чтобы внести ваши изменения.

Шаг 13. Обновите свой сайт

Через несколько дней… ваши изменения в производстве! Но как насчет сейчас?

Давайте попробуем обновить вашу локальную версию сайта, используя следующие команды:

$ git pull
$ npm run dev

ТАДА! Ваш новый перевод доступен. 🥳

Шаг 14. Не могли бы вы повторить?

Это все, что касается этого первого пошагового руководства по использованию FlyCode. Вы видели, как просто команда разработчиков может редактировать перевод?

Теперь ваша очередь отредактировать другие переводы, добавить еще один проект и начать использовать FlyCode в своих следующих проектах. Если у вас есть какие-либо отзывы или вопросы, мы будем рады услышать от вас на нашей контактной странице!

Подведение итогов

Мы надеемся, что вы многому научились с помощью этого пошагового руководства и воодушевлены той ценностью, которую мы привносим в ваше управление переводами.

Если вы хотите следить за последними обновлениями продуктов и нашим контентом, подпишитесь на нас в Twitter.