carsharing

articles/vue_carsharing.md

@@ -0,0 +1,66 @@
+# Проект "Каршеринг"
+
+## Техническое задание
+
+>Сразу уточню: задание скомпилировано из нескольких демо-экзаменов, могут быть нестыковки.
+
+Необходимо разработать web приложение.
+
+>Дизайн только в виде скринов, фигмы нет.
+
+Описание протокола API в формате OpenAPI (Swagger) доступно по ссылке:
+https://swagger.kolei.ru/?url=https://carsharing.kolei.ru/swagger/api.yml
+
+1. Создайте проект. Настройте иконку приложения согласно макету.
+
+1. Реализуйте экран `SignUp Screen` согласно макету:
+
+    ![](../img/mas1_03.png)    
+
+    >**Обратите внимание!** В оригинальном задании был вход по e-mail, но в моем АПИ нужно по телефону
+
+    * При нажатии на кнопку "Зарегистрироваться" необходимо проверять поля для ввода на пустоту, а также телефон на корректность (требования к телефону описаны в документации к API). При некорректном заполнении необходимо отобразить ошибку с помощью диалогового окна. Так же необходимо проверять равенство пароля и его повтора.
+
+    * При корректном заполнении формы необходимо отправлять запрос регистрации на сервер. При получении ошибки от сервера ее необходимо отобразить с помощью диалогового окна. При успешной регистрации нужно автоматически осуществить авторизацию и перейти на `Main Screen`.
+
+    * При нажатии на кнопку "У меня уже есть аккаунт" необходимо осуществлять переход на `SignIn Screen`. На скрине этой кнопки нет - добавьте.
+
+    * при нажатии на ссылку "Оферта" необходимо открыть web-страничку с текстом оферты. Этой кнопки тоже нет, тоже добавьте сами.
+
+1. Реализуйте экран `SignIn Screen` согласно макету:
+
+    ![](../img/mas1_02.png)    
+
+    * При нажатии на кнопку "Войти" необходимо проверять поля для ввода на пустоту, а также телефон на корректность (требования к телефону описаны в документации к API). При некорректном заполнении необходимо отобразить ошибку с помощью диалогового окна. При корректном заполнении формы необходимо отправить на сервер соответствующий запрос.
+
+    * При нажатии на кнопку "Регистрация" необходимо осуществлять переход на `SignUp Screen`.
+
+    * При успешной авторизации необходимо осуществлять переход на экран `Main Screen` или `Profile Screen`, в зависимости от состояния пользователя (загружены ли права и другие необходимые документы). При получении ошибки от сервера необходимо отобразить её с помощью диалогового окна.
+
+1. Реализуйте экран `Profile Screen` согласно макету:
+
+    * На экране необходимо отобразить аватарку пользователя. Рамка вокруг аватарки должна быть разного цвета в зависимости от состояния профиля:
+        - *желтый*: не загружены фотографии водительских прав или паспорта
+        - *красный*: есть штрафы от ГИБДД или претензии от владельца каршеринга
+        - *зелёный*: всё OK (активный профиль)
+
+    * При нажатии на аватарку выбрать файл и  отправить его на сервер.
+
+    * При нажатии на кнопки "Загрузить фото водительских прав" или "Загрузить файл паспорта" выбрать файл и выбранный файл отправить на сервер.
+
+1. Реализуйте экран `Main Screen` согласно макету:
+
+    ![](../img/mas1_04.png)
+
+    * На экране необходимо отобразить карту с текущей позицией и маркерами автомобилей (список доступных автомобилей получить с сервера).
+
+        Как работать с картой расписано в [лекции](./web_19.md)
+
+    * при клике на маркер автомобиля показывать (во всплывающем окне) краткую информацию об автомобиле: марка автомобиля, фото, кнопки "забронировать" и "маршрут". Кнопка "забронировать" должна быть только у активного пользователя
+
+        ![](../img/mas2_01.png)
+
+    <!-- * при клике на кнопку "Забронировать" открыть окно `Booking Screen` -->
+
+    * При нажатии на иконку профиля необходимо переходить на `Profile Screen`.
+

articles/web_19.md

@@ -1,3 +1,88 @@
 [К содержанию](../readme.md#введение-в-web-разработку)
 
+# Vue.js: Работа с Яндекс картами
+
+Для работы с яндекс картами будем использовать пакет [vue-yandex-maps](https://yandex-maps-unofficial.github.io/vue-yandex-maps/guide/about.html)
+
+## Установка пакета
+
+```bash
+npm install vue-yandex-maps
+```
+
+## Подключение
+
+В `src/main.js` добавьте импорт и использование пакета:
+
+```js
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { createYmaps } from 'vue-yandex-maps'
+//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.use(createYmaps({apikey: 'your-api-key'}))
+//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+app.mount('#app')
+```
+
+Для работы с яндекс-картами нужно получить `api key`.
+
+1. Перейдите в [кабинет разработчика Яндекс](https://developer.tech.yandex.ru/services)
+
+    ![](../img/web_026.png)
+
+    * кликните кнопку "Подключить АПИ"
+    * выберите из списка "JavaScript API и HTTP Геокодер" (у меня он уже выбран, поэтому в списке его нет) и нажмите продолжить. Насколько я помню там нужны ещё какие-то действия - пройдите до конца
+
+1. После подключения "API интерфейса" скопируйте ключ:
+
+    ![](../img/web_027.png)
+
+
+## Начало работы
+
+Для запуска вам потребуется:
+
+* Настроить карту
+* Прописать `location` с `center/zoom` в `settings`
+* Указать компоненты `<yandex-map-default-features-layer />` (нужен для маркеров и пр.) и `<yandex-map-default-scheme-layer />` в теле `<yandex-map />`
+* Опционально указать width/height у `<yandex-map />` (по умолчанию: `100%`)
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { YandexMap, YandexMapDefaultSchemeLayer } from 'vue-yandex-maps'
+const map = ref(null)
+</script>
+
+<template>
+  <yandex-map
+      v-model="map"
+      :settings="{
+        location: {
+          center: [37.617644, 55.755819],
+          zoom: 9,
+        },
+      }"
+      width="100%"
+      height="100vh"
+  >
+    <yandex-map-default-scheme-layer/>
+  </yandex-map>
+</template>
+```
+
+Не дописано, следите за обновлениями
+
 [Назад](./web_18.md) | [Дальше](./web_20.md)