Полное руководство по созданию приложения-клона Google Translate с нуля

Добрый день! Я действительно взволнован проектом, который мне удалось получить для вас. Я сделал всё возможное, чтобы представить вам что-то с почти полной функциональностью, что-то, что вы можете продемонстрировать в своём портфолио, если вы новичок, и не волнуйтесь, я начну создавать некоторые проекты для разработчиков среднего и продвинутого уровня, просто имейте немного терпения, пока я сосредоточен на новых разработчиках .NET.

Сегодняшний проект является клоном приложения Google Translate с использованием Google translate API v2. Я эстет, поэтому сегодня я представлю вам красивое приложение, однако оно будет не только «красивым», но также будет переводить текст, определять язык на основе пользовательского ввода, отображать поддерживаемые языки и менять местами пользовательский ввод с результатом перевода. Так что, если вы так же взволнованы, как и я, давайте сделаем это!

Во-первых, вам нужно выполнить несколько шагов, чтобы иметь возможность использовать Google Translate API.

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

Если по какой-то причине вам не удалось выполнить шаги и вам нужна дополнительная помощь, вы можете посмотреть это видео , где автор выполняет те же шаги, которые я перечислил выше, но вы можете увидеть интерфейс Google Cloud и оценить его более визуально.

Если вам не нравится идея доступа к Google Cloud и включения платёжной учётной записи, вы можете получить доступ к Rapid API , который является рынком API, где вы можете найти множество API для использования. Вам нужно будет создать учётную запись, а затем найти Google Translate API и подписаться бесплатно, после этого у вас будет доступ к учётным данным, которые Rapid API предоставляет, без необходимости доступа к Google Cloud или включения платёжной учетной записи. Не беспокойтесь, Rapid API поможет вам и фактически предоставит вам пример вызова, чтобы вы знали, как вызывать API с их хоста, и это будет выглядеть примерно так:

Теперь, когда у вас есть доступ к Google Translate API, давайте начнём создавать новое приложение blazor wasm с помощью dotnet cli.

dotnet new blazorwasm-empty -o GoogleTranslateClone

Как всегда, перейдите в свой файл wwwroot>Index.html и раскомментируйте свою таблицу стилей CSS с ограниченной областью действия, поскольку по умолчанию эта строка всегда комментируется, и вы должны включить её самостоятельно.

Нам нужны некоторые модели для хранения данных, которые мы получаем от вызовов веб-API, поэтому давайте добавим папку с именем Models и создадим следующие классы моделей.

Мы добавили модель Language для хранения коллекции поддерживаемых языков из API и класс TranslatedText для хранения ответа от конечной точки перевода. Мы используем JsonpropertyName для сопоставления ответа JSON со свойствами нашей модели при десериализации.

Поскольку мы вызываем веб-API, нам нужен клиентский класс, который использует его конечные точки, поэтому давайте добавим новую папку с именем Client и внутри неё мы создадим класс GoogleTranslateClient.

Мы начинаем с добавления константы, которая будет содержать базовый адрес клиента, который является адресом Google API. После этого мы добавляем конструктор и передаём в качестве параметра HttpClient для создания экземпляра клиента посредством внедрения зависимостей в класс Program.

Это еще не всё, но я не хочу бросать вам кучу строк кода и ожидать, что вы всё это так легко поймёте. Поэтому я объясню каждый метод клиента отдельно.

С помощью этого метода, как следует из названия, мы собираемся получить набор языков, поддерживаемых Google API.

Ничего особенного или необычного, мы начинаем с создания строкового словаря для хранения ключа API и целевого языка. Мы используем класс QueryHelpers, чтобы легко добавить строку запроса, просто передав адрес и параметры запроса в качестве параметров, но для использования класса QueryHelpers вам необходимо установить библиотеку Microsoft, поэтому подготовьте свой терминал для использования dotnet cli.

dotnet add package Microsoft.AspNetCore.WebUtilities

Теперь вы сможете использовать его без каких-либо ошибок. Затем мы отправляем запрос и анализируем его в строку, как всегда. А теперь хакерские вещи, чтобы не создавать кучу моделей для получения данных языков, я работаю напрямую с узлами JSON и погружаюсь в его свойства, чтобы языки, наконец, просто десериализовали в список и вызывали метод ToDictionary для возврата словаря

Вы когда-нибудь находили фрагмент текста, который хотели бы перевести, но не знали, на каком языке он написан? Что делает этот метод, так это определяет язык на основе ввода пользователя.

Мы начинаем создавать тот же словарь строк для хранения ключа API, и в этом случае мы передаём параметр q, который является вводом пользователя для анализа и определения исходного языка. Всё то же самое, мы вызываем класс QueryHelpers для передачи строк запроса, отправки почтового запроса и чтения ответа в виде строки для анализа в JsonNode, чтобы вручную манипулировать данными узла и десериализовать в объект Language и переходить к его возврату.

Наконец, метод перевода ввода от клиента на нужный язык.

Этот метод принимает три параметра: входные данные — переводимое предложение, язык, на котором написано предложение, и целевой язык для перевода.

Мы передаём эти три параметра как строки запроса в словарь queryParams и используем класс QueryHelpers для передачи параметров запроса в запрос. Мы выполняем почтовый запрос и анализируем ответ на строку, чтобы, наконец, выполнить анализ в узле JSON, для получения доступа к его свойствам и получения переведённого текста.

Это всё GoogleTranslateClient. поэтому давайте добавим его в коллекцию сервисов в классе Program.

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

Мы определяем некоторую базовую HTML-разметку, но есть некоторые аспекты, на которые я хотел бы указать. Например на то, что мы заполняем элементы управления выбором, используя метод поддерживаемых языков, используя цикл foreach для создания тега параметра для каждого поддерживаемого языка.

Кроме того, мы добавили кнопку для замены исходного текста целевым текстом, чтобы поменять местами контент для перевода с переведённым контентом.

Есть два элемента управления textarea для ввода текста для перевода и отображения перевода. Ниже у нас есть уведомление для отображения некоторых сообщений, например, для ввода действительного текста, если текстовая область пуста, или для уведомления пользователя, когда текст переведён и, наконец, кнопка для выполнения перевода.

Вверху мы определяем несколько полей для хранения значений элементов управления выбора и текстовых областей, а также инициализируем свойство SupportedLanguages и заполняем его в методе жизненного цикла OnInitializedAsync с помощью метода GetSupportedLanguages, который, как мы помним, возвращает словарь, содержащий поддерживаемые языки.

Метод определения языка вызывает клиентский метод определения языка и возвращает код языка. Теперь почти всё волшебство происходит в методе перевода, мы устанавливаем поле notificationText пустым, поскольку мы хотим очистить любое старое сообщение. Затем мы проверяем, не пусто ли свойство sourceText (то есть текст для перевода), если это так, то мы отображаем сообщение об ошибке. Затем мы приступаем к проверке, если sourceLanguage пуст (это язык текста, который мы хотим перевести), то это означает, что мы хотим определить язык, поэтому мы вызываем функцию обнаружения языка и возвращаем язык, на котором он написан. Далее нам нужно перевести текст, декодировать ответ, поскольку ответ содержит некоторые HTML-коды, и, наконец, мы проверяем словарь поддерживаемых языков, чтобы найти имя обнаруженного языка, поскольку функция обнаружения языка возвращает код языка (например, en, es, de, fr), но не фактическое имя. Поэтому, как только мы узнаем язык, мы выводим уведомление, отображающее язык, с которого был переведён текст. Следуя последнему случаю условного оператора, если оба аргумента sourceLanguageиsourceText не пусты, то мы переходим к обычному переводу без каких-либо дополнительных задач.

Последний метод на самом деле является служебным методом для замены левой стороны приложения перевода правой стороной, поэтому для этого мы определяем некоторые временные переменные и начинаем обменивать значения. У нас есть условный оператор, проверяющий, был ли элемент управления выбора с левой стороны пустым. Затем мы изменим его значение на «en», это потому, что мы не можем отправить пустое значение, так как targetLanguage вызовет ошибку, потому что нам нужно всегда знать целевой язык.

Приложение готово к работе, но оно всё ещё выглядит уродливо, поэтому мы начнём добавлять некоторые стили. Давайте начнём с добавления ссылки на стиль в файл index.html, чтобы использовать шрифт awesome для добавления некоторых значков.

Давайте перейдём к нашей глобальной таблице стилей CSS и добавим немного стилей:

Теперь давайте добавим основной стиль на нашу страницу razor. Для этого вам нужно создать новый файл CSS с именем, Index.razor.css, чтобы как только вы это сделали, вы могли добавить свой стиль с ограниченной областью действия.

Вот и всё! Теперь у вас должен быть полностью работающий клон Google Translate. Как я говорил вам в начале, вы можете определять языки, получать коллекцию языков, поддерживаемых API, и переводить предложения с одного языка на другой. Приложение не идеально и может иметь некоторые улучшения, но я получил массу удовольствия от его создания и я надеюсь, что у вас тоже всё получилось!

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

GitHub — Osempu/GoogleTranslateClone

Существует также живая версия этого приложения, размещённая бесплатно в виде статического веб-приложения Azure, которое вы можете проверить здесь.