Разработать каркас приложения из 5 элементов Ionic + Vue.js

10 000 руб. за проект
09 ноября 2021, 13:46 • 2 отклика • 22 просмотра
*Повторная публикация

Каркас приложения Ionic + Vue.js, состоящие из следующих элементов:

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

  1. Разработка выполняется с использованием https://ionicframework.com/, и библиотеки Vue.
  2. При разработке необходимо использовать компоненты досупные в Ionic Framework (UI Components, https://ionicframework.com/docs/components)
  3. Результатом явлются исходники для самостоятельной сборки пакетов заказчиком (при необходимости с краткой инструкцией от исполнителя) под Android, iOS, web.
  4. Элементы (представления) приложения:
    4.i "Карта с использованием leaflet.js";
    4.ii "Всплывающее (поверх карты) окно 1" (https://ionicframework.com/docs/api/card);
    4.iii "Кнопка (поверх карты) в правом вехнем углу карты" (https://ionicframework.com/docs/api/fab);
    4.iv "Всплывающее (поверх карты) окно 2" (https://ionicframework.com/docs/api/modal).
  5. Описание событий "Карта с использованием leaflet.js" (элемент 4.i)
    i. Инициализация карты с дефолтными параметрами (подложка OSM, зум-уровни по умолчанию), на все окно приложения;
    ii. Центр карты: lat:55.2; lon:82.1. При возможности определить координаты пользователя (user_lat;user_lon) центр карты равняется им.
    iii. Перемещение карты - тачами;
    iv. После перемещения карты отправляется post запрос на сервер: XXXX, с 4 параметрами: latmin;latmax;lonmin;lonmax;
    v. Zoom in, zoom out - тачами;
    vi. После приближения/отдаления карты отправляется post запрос на сервер: XXXX, с 4 параметрами: latmin;latmax;lonmin;lonmax - окна карты;
    vii. При клике в любое место карты (с коориднатами user_click_lat;user_click_lon) появляется "Всплывающее (поверх карты) окно 1" (4.ii);
  6. Описание "Всплывающее (поверх карты) окно 1" (4.ii)
    i. Заголовок "Test"
    ii. Text_Input_1 (Floating label: https://ionicframework.com/docs/api/input)
    iii. Text_Input_2 (Floating label: https://ionicframework.com/docs/api/input)
    iv. Text_Input_3 (Floating label: https://ionicframework.com/docs/api/input)
    v. Кнопка 'Ок' (https://ionicframework.com/docs/api/button)
    vi. При клике по кнопке Ок отправляется post запрос на сервер: XXXX, с 5 параметрами (без проверки значений): Text_Input_1;Text_Input_2;Text_Input_3;user_click_lat;user_click_lon
    vii. Окно можно убрать или свайпом вниз, или нажатием кнопки закрыть в правом верхнем углу окна (на усмотрение исполнителя)
  7. Описание "Всплывающее (поверх карты) окно 2" (элемент 4.ii)
    i. Заголовок "Test_2"
    ii. Окно можно убрать или свайпом вниз, или нажатием кнопки закрыть в правом верхнем углу окна (на усмотрение исполнителя)
  8. "Кнопка (поверх карты) в правом вехнем углу карты" (элемент 4.iii)
    i. Оформление на усмотрение исполнителя
    ii. При клике показывает элемент Всплывающее (поверх карты) окно 2 (4.iv)

Оформление:
При верстке необходимо использовать элементы по дефолту.

Результат:
Исполнитель должен будет передать исходники, для самостоятельной компиляции приложения заказчиком под Android, iOS, web.