Цель проекта

У меня есть хобби — изучение английского языка, и последнее время я увлекся фонетикой британского английского языка, но почти все словари дают транскрипцию «‎Королевского английского», на котором говорят, по данным Гугла, около 3 процентов жителей Соединённого Королевства. А найденный в интернете словарь http://www.cubedictionary.org/ хоть и дает нужную мне транскрипцию, но имеет ряд недостатков:

  1. Не адаптивный интерфейс

  2. Большое время ожидание ответа сервера

  3. Нужное слово может находиться на 50 строчке!!!

 Интерфейс cubedictionary.org на ПК
Интерфейс cubedictionary.org на ПК

Интерфейс адаптированный под мобильные устройства — очень важная для меня вещь, ведь я часто тренируюсь в произношении пока нахожусь на улице, и мне часто требуется проверить произношение слова с телефона.

Вторая проблема — отклик сервера, с момента ввода слова и получения ответа от сервера проходит около 2-3 секунд, что очень долго для меня, кроме того, нужно среди списка слов найти именно то, что ты вводил. Справедливости ради, там есть чек-бокс, но про него я всегда забываю да и с телефона, на десктопном сайте попасть по маленькому чек-боксу очень сложно.

Проектирование приложения

Изначально я думал сделать родное без серверное  приложение  под Андроид, что будет отправлять запрос к “Cubedictionary”, парсить страничку, находить нужную транскрипцию и отображать ее в приложении. Идея очень простая, не требует хостинга, но сам сайт ,к которому я собираюсь делать запрос - медленный, а получения странички, а затем и ее парсинг только увеличит время отклика, да и у моих знакомых Айфоны, так что мне бы было не с кем делиться приложением.

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

Набросав тестовый скрипт на Node.js я убедился что скорость отклика приемлема, но все еще не идеально, все еще было куда расти. Конвейер выглядел так :

  1. Получаем от клиента запрос с нужным словом 

  2. Отправляем запрос с нужным словом к словарю

  3. Получаем перенаправление на нужную страницу

  4. Парсим страницу, находим нужную транскрипцию

  5. Транслируем транскрипцию

  6. Отправляем результат

Переход по перенаправлениям, парсинг, трансляция транскрипции — то, что занимало не мало времени на моем самом дешёвом хостинге. 

По первому запросу в Гугл я нашел 10 000 слов английского языка,  и модифицировав предыдущую программу подготовил данный список слов и сохранил его , пока что еще текстовый файл,  в формате “слово : транскрипция”. Но использование JSON как базы данных — было плохой идей, мне нужна был база данных.

Выбор базы данных

Ранее с базами данных я не работал, поэтому я пошел гуглить и искать варианты. Самыми первыми решениями что я нашел были — MySql и MongoDB, которые требовали настройки, да и в принципе, они давали больше, чем мне было нужно на моем крохотном сервере. Но все же было одно очень простое решение — SQLite. Эта база данных не требовала сервера СУБД, да и сама база данных было по сути простым файлом — то что нужно для  простоты переноса. 

Написав скрипт, я записал 10 000 слов в базу данных, но по какой-то непонятной мне причине, запись такого объема слов в таблицу заняло у меня 15 - 20 минут.

Тест приложения

И вот настал момент тестирования приложения, я ввожу слово за словом и получаю ответ почти моментально, о такой скорости я и мечтать и не мог, но тут я ввожу слово “Hummingbird” и данного слова нет в базе… не приятно. Поэтому  я объединю два предыдущих подхода : если слова нет в базе, парсим словарь ,  если слово найдено, то вписываем его в базу и отправляем клиенту.

Проектирование интерфейса

Все что мне нужно было для данного проекта — поле ввода слова и поле вывода транскрипции, элементов не много, остаётся только разместить их в нужных местах и адаптировать под разные устройства, но первостепенно под мобильные устройства. В ходе разработки интерфейса  дизайн был изменен 5 раз, что улучшило слегка мои навыки Вэб-дизайна, но сама раскладка осталось безызменной. 

И того у меня получилось три состояния приложения:

  1. Просмотр

  2. Ввод

  3. Ожидание ответа

Итог

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

Сам опыт работы с JavaScript и Node.JS для меня был не очень приятным, но по данным технологиям в интернете очень много информации, хотелось бы мне попробовать реализовать данный проект на Go  из за его статической типизации, но что сделано — то сделано.

Ссылка на сам сайт

Комментарии (13)


  1. gvnjqzmyiskxwqq
    01.10.2023 13:01

    Достаточно полезная инициатива


    1. Lustraaz Автор
      01.10.2023 13:01

      Пасибо


  1. savostin
    01.10.2023 13:01

    Для статичной типизации попробуйте перейти на Typescript для начала…

    Для быстрой вставки данных в SQLite отключайте перед вставкой журналирование, а лучше использовать import, а не insert.


    1. Lustraaz Автор
      01.10.2023 13:01

      Спасибо, про Sqlite было очень полезно


  1. LyuMih
    01.10.2023 13:01
    +1

    Хороший пет проект - unix way.
    Есть пару предложений, которые сделают сайт лучше.
    В погоне за красивым дизайном, забывается об эффективности приложение.
    Цель - сократить кол-во пустых действий
    1. Поле ввода сразу открыто
    2. Отправлять поиск сразу при вводе слова (убрать enter). Можно добавить debounce 1 сек
    3. Не скрывать строку поиска после ввода текста
    4. Добавить в url значение слова. Так можно будет скинуть ссылку и сохранится поле ввода.

    По оптимизациям:
    - svg не оптимизированы, можно уменьшить размер ~ в 2 раза

    Работа оффлайн:
    Сколько весит сейчас словарик?
    Если до 10-20 мб, то можно её 1 раз скачать и сохранить в localStorage и сайт (как и приложение) сможет работать полностью офлайн.
    А чтобы не тратить серверные ресурсы, можно её сохранить на github в виде файлика json. 0 затрат - 100% профит


    1. LyuMih
      01.10.2023 13:01

      Ещё будем рады, если портируешь реализацию на фреймворк $mol - это много времени не займёт. Дизайн сохранится твоим )
      Мы с радостью поможем это сделать, дадим обратную связь, поделимся экспертизой и побудем тестирами)
      Поможем сделать приложение гиппер эффективным во всех смыслах


  1. domix32
    01.10.2023 13:01

    Так в итоге оно птица таки колибри (hummingbird) или кусок свиной ноги (hammingbird)?


  1. xaosxaos2
    01.10.2023 13:01

    Без произношения вы сразу отсекаете всех новичков которых не знают международную фонетику.


    1. Lustraaz Автор
      01.10.2023 13:01
      +1

      Те кто её не знают, она им и не понадобится. Да и не так уж и просто набрать базу слов с нужным произношением, а пытать бедных нэйтивов, заставляя произносить 10000 слов слишком жестоко :).

      Есть такой сайт http://ipa-reader.xyz/, он, как заявляется автором, превращает фонетическую транскрипцию в звук, но я не уверен что она точно работает..даже скорее наоборот


      1. xaosxaos2
        01.10.2023 13:01

        Плюс вспомнил, транскрипция какого языка? Британского или американского?


        1. Lustraaz Автор
          01.10.2023 13:01

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

          Но, введя какую-либо транскрипцию английского слова, и выбрав русского спикера, то ты услышишь жёсткий русский акцент в аудио. Этого быть не должно, ведь от выбора спикера транскрипция не изменилась.


  1. Wbozon
    01.10.2023 13:01

    К слову "belonging" ваш сайт выдаёт транскрипцию [bɪlɔ́ŋɪŋ] через [ɪ] в первом слоге, а в cubedictionary все варианты через шва [ə].


    1. Lustraaz Автор
      01.10.2023 13:01

      В куб дикшинари настройки есть , это вариант произношения, и наверное стоило ему бы следовать, так как он набирает популярность ( если верить гуглу и личному опыту) если интересно, то можно погуглить weak-vowel merger,