Мобільний додаток Socium

Авторизація

При вході в додаток користувачу відкривається нижче наведене вікно. В користувача є три способи для авторизації в додатку:

• Зареєструватися в додатку.
• Увійти через Google.
• Увійти через Apple (тільки для IOS користувачів).

При першому вході, додаток попросить надати дозвіл до доступу та використання геолокації мобільного пристрою. Це необхідно для відображення місцезнаходження користувача на карті.

Початкова сторінка.

При вході через Google або Apple відкриється стандартне вікно з вибором аккаунту. При натисканні на кнопку "`Авторизація"`, в користувачів відкриється сторінка для входу в програму. Де потрібно вказати логін та пароль, якщо користувач вже раніше зареєструвався в програмі.

Сторінка авторизації.

Якщо користувач ще немає аккаунта в додатку йому потрібно натиснути на кнопку "`Немає аккаунта? Створити аккаунт"`. Після чого відкриється новий екран де потрібно заповнити усі поля для реєстрації.

Сторінка реєстрації.

Головне вікно

Після успішного входу в додаток, користувачу відображається головне вікно. Додаток має дві теми, світлу і темну, які відображаються згідно встановленого режиму на мобільному пристрої користувача (Світлий режим чи Темний режим).

Головна сторінка.

- відкриває бокове меню додатка.

- фотографія і дані користувача.

- відкриває вікно з вибором графіком руху та онлайн відобаженням транспорту.

- відкриває вікно сканування qr коду.

- відкриває вікно “Купити квиток”.

- при натисканні на дану піктограму відкриває “Головне вікно”. Червоний колір піктограми вказує, що на даний момент відкрите “Головне вікно”. Сірий колір піктограми – відкрито інше вікно додатку.

- дана піктограма відкриває QR сканер для сканування QR коду під час оплати проїзду на транспорті. Червоний колір – QR сканер активний, сірий – не активний.

У Головному вікні при проведенні пальцем руки по екрану мобільного пристрою в ліву сторону, користувач перейде на додатковий екран.

Додатковий екран.

- окремий запис про покупку.

При натисканні на запис про історію покупок, відкривається додаткова інформація про покупки які було здійснено, їх вартість та інша додаткова інформація.

Детальна інформація про покупку.

Сканер QR кодів

Користувач при посадці у громадський транспорт має можливість додатком відсканувати QR код та оплатити проїзд чи закомпостувати раніше придбаний квиток. Для цього необхідно натиснути на кнопку . Коли користувач натиснув дану кнопку, йому відкривається вікно сканувати. Якщо дане вікно відкривається вперше, додаток попросить надати дозвіл для доступу та використання камери мобільного пристрою. Після надання дозволу, користувачу достатньо навести камеру на QR код і додаток автоматично його відсканує.

Сканер QR кодів.

У випадку, якщо користувач невірно відсканував QR код чи сам QR код невірний, користувачу з’явиться відповідне повідомлення. У разі успішного сканування QR коду, користувачу відкриється вікно Купити квиток.

Купити квиток

Вигляд вікна "Купити квиток", коли у користувача відсутні квитки

Купити квиток.

Вигляд вікна "Купити квиток", коли у користувача доступні квитки для компостування

Купити квиток.

- дана кнопка дозволяє користувачеві закомпостувати обраний квиток.

- якщо у користувача недостатньо квитків, він може їх докупити. Після натискання на дану кнопку у горі над доступними квитками, з’являться типи квитків для покупки.

- коли квиток було закомпостовано, під даним квиток з’явиться таймер, який відображає час допоки дійсний квиток, QR код квитка, а також дата та час коли квиток було закомпостовано.

При покупці квитка, коли користувач обрав тип квитка, йому відкривається вікно “Корзина”.

*У разі придбання квитка метод сканування QR-коду, квиток автоматично буде закомпостовано. Для покупки квитка наперед, ваврто скористатись вікном “Купити квиток”, або у вікні “Графіки”.

Вікно "Корзина"

У корзині користувач має змогу ввести кількість придбаних квитків, добавити інший тип квитка для покупки та провести оплату доступними способами.

Вигляд вікна Корзина.

- тип квитка, який купує користувач.

- дана кнопка, розташовується на проти кожного типу квитка і дає можливість забрати відповідний тип квитка з вікна покупки квитків.

- дозволяє обрати кількість придбаних квитків для кожного типу.

- дозволяє добавити у вікно покупки квитків ще один тип квитків. Якщо обрати тип квитка, який уже наявний у вікні покупки квитків, кількість квитків даного типу збільшиться на 1.

- спосіб оплати сервісом Apple Pay (доступний тільки на IOS).

- спосіб оплати сервісом Google Pay (доступний тільки на Android).

Вікно "Мої Квитки"

У вікні “Мої квитки” користувачу відображаються доступні не використані квитки, а також квитки, які вже закомпостовані, але їх час дійсності ще не завершився.

Вигляд вікна "Мої квитки".

Коли користувач натисне на активний квиток, йому відкриється детальна інформація про рейс на якому цей квиток було закомпостовано.

Активний квиток.

- назва маршруту, на якому було закомпостовано квиток.

- код квитка, при натисканні на нього, він відкривається на цілий екран, щоб контролер міг його відсканувати та перевірити.

- таймер, який веде відлік часу дійсності квитка.

- дата та час, коли квиток було закомпостовано.

Меню додатку

Меню додатка.

• Купити квиток – відкриває вікно “Купити квиток”.
• Мої квитки - відкриває вікно з купленими квитками.
• Видалити аккаунт - відкриває вікно з видаленням аккаунта, при цьому всі дані користувача разом з купленими квитками стираються.
• Вихід – дозволяє вийти з додатку

Меню з вибором графіків та відображенням транспорту онлайн

На головній сторінці при натисканні на кнопку "Онлайн відображення графіки руху" відкриється модальне вікно з вибором міста та двома кнопками:

• Транспорт – відкриває вікно "Громадський транспорт".
• Графіки - відкриває вікно "Графіки".

Вікно "Громадський транспорт"

У вікні Громадський транспорт користувач має можливість переглянути маршрут та транспортні засоби на карті в реальному часі. Тут транспорт посортовано за його типом та номером.

Вигляд вікна "Громадський транспорт".

Після обрання маршруту, користувачу відкриється карта, на якій відображається маршрут та транспортні засоби, які обслуговують даний маршрут.

Вигляд вікна Маршруту на карті.

- напрям руху маршруту.

- дозволяє змінити напрям руху. При зміні, зупинки відображаються у зворотному напрямку.

- дана піктограма на карті відображає окремий транспортний засіб на маршруті. Символ ‘>’ вказує напрям руху транспортного засобу.

- при натисканні на дану кнопку здійснюється масштабування карти, щоб відобразити увесь маршрут.

- при натисканні на дану кнопку, з правої сторони відкриваються зупинки даного маршруту.

Вигляд вікна Маршруту на карті.

При натисканні на зупинку відкривається вікно Графіки, де відображається час прибуття транспортного засобу на зупинку.

Вікно "Графіки"

В даному вікні користувач має можливість вибрати номер маршруту та переглянути розклад прибутя на конкретну зупинку маршруту.

Вигляд вибору маршруту.

Спочатку користувачу потрібно вибрати тип транспорту, далі номер маршруту. Після вибору маршруту відображаються всі його зупинки. Коли користувач натисне на зупинку маршруту, відкривається вікно графіки.

Вікно "Графіки".

- A01 - назва маршруту; Дубляни, Школа (1313) – нава зупинки;м. Дубляни -> пл. Галицька – напрям руху транспортного засобу з початкової на кінцеву.

- вказує на які дні відображається графік.

- при натисканні на дану кнопку, відкривається вікно “Купити квиток” і користувач може придбати квиток. Придбаний квиток у подальшому можна закомпостувати при скануванні QR – коду на транспорті.

У даному вікні користувач має змогу заздалегідь придбати квиток на обраний транспортний засіб та маршрут. Тут можна вибрати регіон, тип транспорту (якщо для вибраного регіону їх більше одного), маршрут.

Вікно "Купити квиток".

Коли було обрано транспортний засіб і маршрут, в даному вікні з’являться типи квитків доступних на даному маршруті.

Вікно "Купити квиток".

Після вибору квитка для покупки, користувачу відкривається вікно “Корзина”. При покупці квитків в даному вікні, останні доступні для перегляду у вікні “Мої квитки.” Дані квитки не є автоматично закомпостовані.