Skip to content

Многостраничное приложение предназначено для просмотра изображений через API Unsplash

Notifications You must be signed in to change notification settings

DemidenGo/ImageFeed

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Image Feed

Многостраничное приложение для просмотра изображений через API Unsplash. Позволяет просматривать бесконечную ленту картинок из Unsplash Editorial. Пользователи могут просматривать каждое изображение отдельно, добавлять изображения в избранное и удалять оттуда. Также имеется возможность просмотра краткой информации из профиля пользователя на сайте unsplash.com. В приложении реализована авторизация через OAuth2 Unsplash.

Технологии: MVP, UIKit, вёрстка кодом с использованием Autolayout, REST API, авторизация OAuth 2.0, URLSession, URLComponents, WebView, NotificationCenter, KVO, Kingfisher, SwiftKeychainWrapper, Decodable, DispatchQueue, Swift Package Manager (SPM), Core Animation, SplashViewController, Unit Tests, XCTest.

AppScreenshot1 AppScreenshot2 AppScreenshot3 AppScreenshot4

Ссылки

Цели приложения

  • Просмотр бесконечной ленты картинок из Unsplash Editorial.
  • Просмотр краткой информации из профиля пользователя.

Краткое описание приложения

  • В приложении обязательна авторизация через OAuth Unsplash.
  • Главный экран состоит из ленты с изображениями. Пользователь может просматривать ее, добавлять и удалять изображения из избранного.
  • Пользователи могут просматривать каждое изображение отдельно и делиться ссылкой на них за пределами приложения.
  • У пользователя есть профиль с избранными изображениями и краткой информацией о пользователе.
  • У приложения есть две версии: расширенная и базовая. В расширенной версии добавляется механика избранного и возможность лайкать фотографии при просмотре изображения на весь экран.

Функциональные требования

Авторизация через OAuth

Для входа в приложение пользователь должен авторизоваться через OAuth.

Экран авторизации содержит:

  1. Логотип приложения
  2. Кнопку «Войти»

Алгоритмы и доступные действия:

  1. При входе в приложение пользователь видит splash-screen;
  2. После загрузки приложения открывается экран с возможностью авторизации;
    1. При нажатии на кнопку «Войти» открывается браузер на странице авторизации Unsplash;
      1. При нажатии на кнопку «Login» браузер закрывается. В приложении появляется экран загрузки;
      2. Если авторизация через OAuth Unsplash не настроена, по нажатию на кнопку логина ничего не происходит;
      3. Если авторизация через OAuth Unsplash настроена не корректно — пользователь не сможет войти в приложение;
      4. При неудачной попытке входа всплывает модальное окно с ошибкой;
        1. При нажатии на «ОК» пользователь переходит обратно на экран авторизации;
      5. Если авторизация прошла успешно, то браузер закрывается. В приложении открывается экран с лентой.

Просмотр ленты

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

Экран ленты содержит:

  1. Карточку с изображением;
    1. Кнопку Лайк;
    2. Дата загрузки фотографии;
  2. Таб бар для навигации между лентой и профилем.

Алгоритмы и доступные действия:

  1. Экран с лентой открывается по умолчанию после входа в приложение;
  2. Лента содержит изображения из Unsplash Editorial;
  3. При скролле вниз и вверх пользователь может просматривать ленту;
    1. Если изображение не успело загрузиться, то пользователю отображается системный лоадер;
    2. Если изображение невозможно загрузить – пользователь видит плэйсхолдер вместо изображения;
  4. При нажатии на кнопку Лайк (серое сердечко) пользователь может лайнкуть изображение. После нажатия отображается лоадер:
    1. Если запрос успешный, то лоадер пропадает, иконка меняет состояние на Кнопку Красный Лайк (красное сердечко).
    2. Если запрос не успешный, то всплывает модальное окно с ошибкой «попробуйте еще раз»
  5. Пользователь может убрать лайк, повторно нажав на кнопку Лайк (красное сердечко). После нажатия отображается лоадер:
    1. Если запрос успешный, то лоадер пропадает, иконка меняет состояние на серое сердечко.
    2. Если запрос не успешный, то всплывает модальное окно с ошибкой «попробуйте еще раз»;
  6. При нажатии на карточку с изображением оно увеличится до границ телефона и пользователь перейдет на экран просмотра изображения (раздел «Просмотр изображения на весь экран»);
  7. При нажатии на иконку профиля пользователь может перейти в профиль;
  8. Пользователь может переключаться между экранами ленты и профиля с помощью таб бара.

Просмотр изображения на весь экран

Из ленты пользователь может перейти к просмотру изображения на весь экран и поделиться им.

Экран содержит:

  1. Увеличенное изображение до границ телефона;
  2. Кнопку возврата на предыдущий экран;
  3. Кнопку для загрузки изображения и с возможностью им поделиться.

Алгоритмы и доступные действия:

  1. При открытии изображения на весь экран пользователь видит растянутое изображение до границ экрана. Изображение выровнено по центру;
    1. Если изображение невозможно загрузить и показать – пользователь видит плэйсхолдер;
    2. Если ответ на запрос не получен — появляется системный алерт с ошибкой;
  2. При нажатии на кнопку Назад пользователь может вернуться на экран просмотра ленты;
  3. При помощи жестов пользователь может перемещаться по растянутому изображению, зумировать и поворачивать изображение. Изображение фиксируется в выбранном положении;
    1. Если не настроены жесты для увеличения или поворота изображения — эти действия будут не доступны;
  4. При нажатии на кнопку кнопку Поделиться всплывает системное меню, в котором пользователь может загрузить изображение или поделиться им;
    1. После совершения действия меню скрывается;
    2. Пользователь может закрыть меню свайпом вниз или при нажатии на крестик;
    3. Если открытие системного меню при нажатии на кнопку “загрузить или поделиться изображением” не настроено — оно не будет показываться;

Просмотр профиля пользователя

Пользователь может перейти в свой профиль, чтобы посмотреть данные профиля или выйти из него.

Экран профиля содержит:

  1. Данные профиля;
    1. Фотографию пользователя;
    2. Имя и username пользователя;
    3. Информация о себе;
  2. Кнопку выхода из профиля;
  3. Таб бар;

Алгоритмы и доступные действия:

  1. Данные профиля загружаются из профиля в Unsplash. Данные профиля нельзя изменить в приложении;
    1. Если данные профиля не подтянулись из Unsplash, то пользователь видит плэйсхолдер вместо аватрки. Username и имя не отображаются;
  2. При нажатии на кнопку выхода из профиля (логаут) пользователь может выйти из приложения. Всплывает системный алерт с подтверждением выхода;
    1. Если пользователь нажимает «Да», то он разлогинивается и открывается экран авторизации;
      1. Если не настроены или настроены неправильно действия с кнопкой «Да», то при нажатии пользователя не разлогинивается и попадает на экран авторизации;
    2. Если пользователь нажимает «Нет», то он возвращается на экран профиля;
    3. Если алерт не настроен, то при нажатии на кнопку выходы ничего не происходит, пользователь не может разлогиниться;
  3. Пользователь может переключаться между экранами ленты и профиля с помощью таб бара.

Расширенная версия

Добавление изображения в избранное

В расширенной версии приложения при нажатии на лайк пользователь добавляет изображение в избранное. Избранное отображается в профиле пользователя.

  1. При нажатии на кнопку Лайк (серое сердечко) приложение делает запрос на добавление изображения в избранное (не показывая индикатор загрузки). При успешном запросе иконка меняет состояние и изображение добавляется в избранное;
    1. Если запрос на лайк неуспешный, то иконка не меняет свое состояние. Изображение в избранное не добавляется;
    2. Если запрос на добавление в избранное неуспешный, то иконка не меняет свое состояние. Лайк не ставится;
  2. При повторном нажатии на кнопку Лайк (красное сердечко) пользователь может удалить изображение из избранного;
    1. Если запрос на удаление лайка неуспешный, то иконка не меняет свое состояние. Изображение не удаляется из избранного;
    2. Если запрос на удаление изображения из избранного неуспешный, то иконка не меняет свое состояние. Лайк не удаляется;
  3. Пользователь может добавить изображение в избранное при просмотре изображения на весь экран. В расширенной версии добавляется иконка лайка;
  4. Пользователь может просмотреть избранное в профиле. Избранное отображается под данными пользователя.
    1. Рядом с заголовком «Избранное» отображается счетчик количества изображений;
    2. При скролле вниз и вверх пользователь может просматривать ленту с избранными фотографиями. Данные профиля не зафиксированы и скрываются при скролле;
      1. Если изображение не успело загрузиться, то пользователю отображается системный лоадер;
      2. Если изображение невозможно загрузить – пользователь видит плэйсхолдер вместо изображения;
      3. Если фотографии отсутствуют, то пользователь видит плэйсхолдер;
    3. При нажатии на кнопку Лайк пользователь может удалить изображение из избранного. В основной ленте лайк тоже удалится;
    4. Пользователь может просмотреть изображение на весь экран;

Нефункциональные требования

Технические требования

  1. Авторизация работает через OAuth Unsplash и POST запрос для получения Auth Token.
  2. Лента реализована с помощью UITableView.
  3. В приложении использованы UImageView, UIButton, UILabel, TabBarController, NavigationController, NavigationBar, UITableView, UITableViewCell.
  4. Приложение должно поддерживать устройства iPhone с iOS 13 или выше, предусмотрен только портретный режим.

Cкриншоты приложения

App screenshot 1App screenshot 2App screenshot 3

Releases

No releases published

Packages

No packages published

Languages