Flashspeak

Приложение iOS для изучения иностранных слов по наборам карточек.

Скачать

Содержание

<img src='https://github.com/DenDmitriev/Flashspeak/assets/65191747/ca21aa12-8244-43e7-b0e5-cf3cdbdfe7ba' width='128'>

• Начало
• Обзор
  • Возможности
    • Выбор языка изучения
    • Списки слов
    • Создание и редактирование списка слов
    • Просмотр карточек
    • Редактирование карточки
    • Изучение
    • Результаты изучения
    • Темное оформление
  • Реализация
    • Task Manager
    • API
      • Перевод
      • Изображения
    • Архитектура
    • Паттерны
    • Библиотеки
    • Хранение данных
    • Требования
• Как запустить
• Зачем
• To Do
• Команда проекта

Начало

Мы небольшая команда начинающих разработчиков, которых объеденяет школа IT GeekBrains. В рамках финального курса, нам предстояло создать приложение. Перед стартом написания, мы поставили перед собой следующие задачи:

• Научиться работать в команде при раработке продукта
• Научиться организовывать работу используя Task Manager
• Придумать проект, который мы в силах раработать
• Сформировать техническое описание
• Создать дизайн приложения
• Написать приложение
• Оформить ReadMe в репозитории

В итоге у нас получилось приложение, обзор ниже.

Обзор

| Создание списка | Обучение | Список слов | | ------------- | ------------- | ------------- | | <video src="https://github.com/DenDmitriev/Flashspeak/assets/65191747/58b89449-d0b4-4f5f-8aca-3a2d06f4c7d1"> | <video src="https://github.com/DenDmitriev/Flashspeak/assets/65191747/ce74edcc-260e-4e8c-9171-28be5a19f64d"> | <video src="https://github.com/DenDmitriev/Flashspeak/assets/65191747/b81403d8-5ad2-4f0a-bd46-7828240b0543"> |

Возможности

Пользователь, выбрав язык изучения, может легко создать свой список слов для изучения. Слова можно добавить через вставку или вводя по отдельности. Приложение сформирует перевод и найдет подходящие изображения для каждого слова. Пользователь на главноем экране увидит новый список. По нажатию на него, можно просмотреть получившиеся карточки, а если перевод и подобранное изображение не подойдут то можно загрузить свое изображение или изменить перевод слова. Изучение можно проходить по различным сценариям. Карточку для изучения можно сделать из частей: исходное слово, перевод и изображение. Отвечать на предложенную карточку можно через тестирование или набирая ответ на клавиатуре. Для понимания звучания, есть кнопка произнести слово вслух. Результаты прохождения каждого изучения списка сохранаются и формируются в статистику, так же пользователю будут показаны ошибки для работы над ними.

Выбор языка

При первом открытии приложения, пользователь видит экран приветствия. Приложение просит выбрать родной язык и изучаемый. По кнопке "Начать" сценарий первого старта заканчивается и открывается основной экран со списками слов[^1].

Списки слов

Это главный экран, который пользователь будет видеть при последующих запусках приложения. Изначально экран пустой. Чтобы показать пользователю что делать дальше, показывается стрелочка, которая указывает на кнопку создания списка "+". После создания списка, пользователь может его увидеть на главном экране. При длительном нажатии на ячейку списка или по кнопке в верхнем правом углу, открывается меню для управления списком слов[^1]. Если пользователь решит изучать другой язык, то он может сменить его по кнопке с изображением флага в верхнем правом углу экрана[^3].

Создание и редактирование списка слов

Создание списка начинается по кнопке "+" на главном экране списоков. По нажатию, открыватся модальное окно с полями для названия, выбора цвета для ориентации и переключателем изображний для слов. По нажатию на "Создать список", пользователь попадает на экран набора слов. Экран позволяет создавать и редактировать слова, на нем есть всего три элемента: поле для ввода, кнопка создания и кнопка помощи. Слова можно вводить набирая с клавиатуры, а также вставлять уже готовый список слов, которые отделены символом запятой или переходом строки. Чтобы сориентировать пользователя, есть кнопка с вопросом, которая открывает окно с описанием возможностей. У списка есть минимальные требования колличества слов, подсказки с этой информацией отображается на кнопке в процессе набора слов. Для добавления в список слова, можно использовать кнопку Enter, запятую или кнопку +, которая появляется справа от поля в момент начала ввода слова. Чтобы удалить или исправить уже введенное слово необходимо удерживать его пару секунд, активируются поле удаления и редактирования. Пользователю необходимо перенести слово в нужное поле. Если пользователь не нажмет на кнопку создать карточки и захочет вернуться на предыдущий экран, то приложение предложит два варианта: выйти без сохранения или вернуться, чтобы не потерять созданный список[^1][^3].

Просмотр карточек

После создания списка слов, открывается экран с карточками. На нем можно просматривать карточки вместе с картинками, есть возможность редактировать или удалять. Отредактировать весь список слов можно по кругой кнопке справа внизу. На экран можно попасть по меню с главного экрана и в обзорном экране перед изучением[^2]. Название и стиль списка можно сменить по нажатию на интуитивную кнопку в панели навигации.

Редактирование карточки

Экран выполняет функцию редактирования карточки. Если сервис подобрал не верный перевод, то его можно изменить. А если не подходящее изображение, то сервис в карусели предлагает на выбор другие фотографии. Пролистав и выбрав нужное изображение в карусели, над карточкой меняется заглавный баннер. Последняя ячейка карусели является кнопкой, которая дает возможность загрузить свое изображение из галереи устройства. По нажатию на кнопку сохранить, карточка обновляется[^1].

Изучение

Перед запуском изучения, пользовтелю предлагается выбрать индивидуальные настройки карточки слова и функции редактирования списока. По нажатию на кнопку настроек, открывается меню, где можно выбрать отображение вопроса и способ ответа. Экран создается по паттерну Strategy. За сохранение ответов пользователя отвечает Caretaker, который потом дает данные для экрана статистики и работы над ошибками[^1].

Результаты изучения

После каждого прохождения изучения, открывается экран результатов. Он состоит из двух частей: статистика и допущенные ошибки. Есть возможность пройти изучение снова по кнопке "Повторить"[^1].

Темное оформление

Приложение поддерживает автоматическое переключение режима оформления.

Реализация

Task Manager

Для работы мы используем сервис Weeek. Метод организации нашей работы - Scrum, задачи ведем в канбан досках.

API

Используются API сервисы для перевода и изображений. Сервис запроса в сеть написан с использованием Combine и Generic для переиспользования при получении различных типов данных: перевода или изображений к переводу[^4]. https://github.com/DenDmitriev/Flashspeak/blob/800b2dc6005c67405ef2228719251b291eefa203/FlashSpeak/FlashSpeak/Core/Extensions/URLSession.swift#L13-L43 Так же будет легко заменить API при проблемах на стороне сервиса. https://github.com/DenDmitriev/Flashspeak/blob/800b2dc6005c67405ef2228719251b291eefa203/FlashSpeak/FlashSpeak/Service/NetworkService.swift#L19-L42

Перевод

Перевод осуществялется силами Google. Приложение отправляет список слов и получает ответ в виде переведенного списка[^1].

Изображения

Подбор изображений осуществляет сервис Unsplash. Приложение отправляет ключевое слово и код языка, а ответ приходит в виде ссылок на изображения. Сервис не всегда присылает подходящие фотографии, поэтому в будущем он заменится на альтернативный, это будет лего сделать, так как сетевой слой написан универсально с использованием generic функции[^4][^1]. Хранятся изображения в виде ссылок. При загрузке