🚀 CRM система с нуля на VUE 3 / NUXT [Vue Query / VeeValidate / Pinia / Shadcn / AppWrite / TS]

Ребят, всем привет, с вами Макс, канал Red Group, и это новый ролик в нашем канале, это возвращение, так сказать, к нашим истокам, к старой рубрике «Большие проекты».

И этот ролик не будет похож на предыдущий ролик, где мы просто взяли там стрим, нарезали условно, да, этот ролик будет абсолютно нового, ну, слэш, старого формата.

Я объясню, что мы здесь будем делать.

Мы здесь разработаем полноценную CRM-систему на Vue.js, слэш, Накст.

В Vue.js будет третья версия, все будет свеженько, круто, удобно и так далее.

И я вам покажу глазами React разработчик, как выглядит Vue и как в нем разобраться.

И этот ролик будет полезен не только для тех, кто любит Vue, а также для тех, кто пишет на React, потому что вам поможет это как-то разгрузить вашу голову и посмотреть на ситуацию со стороны.

Тем самым в ваших проектах вы можете прийти к новым решениям.

Ну, конечно же, самое полезное будет это тем, кто изучает Vue.js, потому что ролик прям легендарный и крутой.

Вы давно меня просили снять что-нибудь на Vue.js, я все отнекивался, но вот пришел тот момент, я подготовил для вас крутой проект, которым готов поделиться.

Обещаю, попытаюсь максимально все разжевать, каждую функцию разобрать, каждый кусочек кода разобрать, и я надеюсь, что вам реально этот ролик понравится.

Давайте в честь этого, в честь запуска такого крутого, грандиозного проекта, чтобы я не выгорел, да, и продолжил сделать для вас такие крутые ролики, просьба

В комментариях опуститься.

И давайте прожмем очень много огоньков.

Ставьте просто эмоджи огоньки.

Как в старые добрые времена.

В топе максимальное.

И наберем большое количество комментариев и лайков.

Это будет очень круто.

И как обычно по нашим правилам.

Набираем 2000 лайков на этом ролике.

И я снимаю следующий большой проект.

Он уже будет скорее всего на Next.js.

И скорее всего это будет Red Planner.

Но там посмотрим как будет по плану.

Так что ребят все зависит от вас.

2000 лайков ставим ниже.

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

Итак, стек технологии.

Nux.js, третья версия.

Потом Nux.Icon, Tailwind, Vue, понятное дело, третья версия.

На XUI немножечко будем использовать некоторых моментов.

Opinion в качестве стейт-менеджера будем использовать.

ViewQuery, куда же без него, мой любимый, как и в React, я люблю React Query.

Здесь ViewQuery от тех же разработчиков, TanStack.

Дальше, VValidate для валидации формы.

AppWrite в качестве бэкэнда будем использовать, опять же, вы многие просили, теперь мы его воспользуемся, я дам в конце, кстати, в конце ролика, ребят, я дам мнение и по Vue.js, и по AppWrite, и по всему тому, что новенькое на нашем канале, чтобы вы понимали, использовать в своем проекте, либо не использовать, и услышали мое какое-то мнение по этому поводу.

Дальше, SLSX, классика, да, вариативность классов, когда мы делаем, да, кондишены.

Day.js для работы с датами, JS cookie для работы с куками.

И опять же, многие просили, называется там, по-моему, ShadenCN, или как так называется, UI-библиотека, которая не совсем UI, она такая, как бы, больше такой генератор компонентов.

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

Короче, в ролике дальше глянете, я не помню, как называется, просто ее нету в зависимостях, непосредственно в проекте.

Ну, и, собственно, Tailwind, я уже сказал, да, и UID для генерации ID-шников.

Там вроде бы AppWrite сам предоставляет всякие штуки для генерации ID-шников, но я решил использовать UID, потому что, ну, те, короче, не работали, вот, а это отличная замена.

На этом вот касаемо стека, я думаю, понятно.

Маленькую, ребят, секундочку вашего времени, точнее даже минуточку, ребят, хочу вам осветить нашу подписочку, это тот продукт, за который я топлю, это мое детище, которое я очень долго разрабатывал и сейчас я активно разрабатываю новую версию Darkside, это будет космос, ребят, это вот то, как я вижу наш продукт, он будет прям космически невероятным, это...

Короче, это будущее, это просто вынесет всю IT-сферу, ребят, я уверен, потому что то, что я придумал, это будет круто, это будет очень круто, скоро ждите обновления DarkSide, платформы, кайфанете, вот.

Ну и перед этим, ребят, хотел сказать о том, что уже сейчас вы можете обучаться нашей платформе, вы можете уже сейчас нас поддержать и получить годный контент, годные обучающие материалы, интенсивы и так далее.

Что вы получаете по общей подписке, да, подписки есть разные уровни по длительности.

Разберем с вами базовый уровень.

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

Курс немного упал, мы цены сбросили примерно на 10-15%.

Раньше тариф на 1 месяц стоил 3600 примерно, да, сейчас он стоит 3290 рублей.

И за эти деньги что вы получаете?

7 интенсив разного уровня.

Из них это JavaScript для всех интенсив, где вы освоите базу JavaScript, которая вам нужна для любого проекта.

В том числе, если вы на Vue.js разрабатываете, на React, на Svelte, на Angular, без разницы на чем.

Там дается прям база JavaScript.

Мы на чистом, на голом JavaScript написали полноценное банковское приложение.

Что может быть лучше для практики вот такого прям базиса, вот такого каркаса?

Что может быть лучше?

Я считаю, что ничего лучше не может быть.

Это самый лучший интенсив на платформе.

Дальше есть интенсив Back для начинающих.

Там мы разработали...

Бэкэнд для приложений для тренировок на чистое Node.js плюс Postgres и так далее.

То есть прям полноценный бэкэнд для начинающих.

Потом фронт для начинающих.

Они идут в связке в такой, да, там уже React мы изучили.

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

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

Это, соответственно, два отдельных интенсива, но они, опять же, в связке работают.

Можно и по отдельности, можно и в связке.

Там мы также готовый backend даем.

Это интенсив, в котором мы разработали полноценный онлайн кинотеатр.

На экране вы все это время видите все эти проекты.

Они прям шикарные.

Это прям пушечка.

Это идеальная практика, ребят.

Вот что я могу дать, то я вам даю.

Я могу дать идеальную практику.

Вот я ее как раз к вам и даю.

Также, ребят, у нас есть интенсив по мобильной разработке на React Native.

И еще есть также интенсив по верстке.

То есть прям полноценная...

линейка 7.7.

Кроме этого, мы стали добавлять еще новые приколюхи.

То есть, и так уже дофига за 3290 рублей, ребят.

Ну, еще сверху мы вам накидываем проекты с нуля.

А именно, там есть проект с нуля.

Это Amazon 2.0.

Мы его смонтировали.

Там 43 урока, по-моему, где вы полноценно с нуля напишите интернет-магазин.

Просто конфетка там с оплатой, с реализацией админ-панели.

Просто пушка.

Кроме этого, поддержка в веб-чате.

У нас 24 на 7, вы можете писать вопросы в веб-чате, там вам легко помогут ответить на ваши вопросы.

И исходники больших проектов.

У нас там около 70, либо 80 даже репозиториев на платформе лежит, которые можете качать и пользоваться.

Там вот идеальные примеры всех проектов, которые мы делали.

И они все доступны в платном формате.

То есть вы оплачиваете подписку, получаете к ним доступ.

И на некоторых других тарифах также есть закрытый клуб «Пять утра».

То есть вы тоже можете залететь, значит, там скидывать каждое утро скриншоты, как вы встаете в 5 утра, да, и, собственно, вставать в 5 утра, значит, у нас примерно так происходит там общение.

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

Кроме этого, мы сейчас начинаем там выкладывать еще один курс, уже вышло 4 урока, на момент видео, скорее всего, 5 уже выйдет, будет всего 30 уроков.

Полноценный курс, как мы пишем саму платформу, то есть вот как будет написано вот эта новая версия платформы, там оно все будет смонтировано в красивом виде.

так что ребят мы очень много делаем для наших премиум подписчиков и цена небольшая 3290 рублей ребят это вообще там два раза магазин сказать это супер выгодная цена для нашей сферы это просто лакомый кусочек потому что в основе на стоит 50 100 тысяч курс и там всякий skill боксик бренд и так далее здесь же мы за небольшую стоимость даем просто огромное количество полезного контента ребят и это очень важно наш компании нашего роста мы хотим мы у нас небольшая команда мы хотим развиваться мы хотим становится больше и крупнее опять же

Я вам обещаю, что DarkSide, новая платформа, прям все взорвет.

Да, ну нужно время, нужно нам больше времени, потому что команда небольшая, нужно чуть-чуть побольше времени.

Но как только мы это сделаем, ребят, цена тоже поднимется, поэтому лучше купить подписку сейчас.

Особенно тариф на всегда, его потом в будущем больше не будет.

Это невыгоден тариф для бизнеса.

Но все, у кого сейчас есть тариф на всегда, и все, кто его сейчас купят, у вас он останется реально всю жизнь.

Но потом, после выхода новой версии платформы...

данного тарифа не будет.

То есть у тех, у кого он был, останется.

У новых не будет возможности его купить.

Короче, такая штука, ребят.

Ссылка в описании.

Залетайте.

Это будет лучшим приобретением в этом году и в следующем году.

И в любом году, короче, ребят.

Не упускайте свою возможность стать реально крутым разработчиком.

Ссылку я оставлю в описании.

Кстати, ребят, я в этот раз пробую записывать через ОБСку параллельно, надеюсь, будет комфортно все смотреться, потому что, не знаю, короче, оцените, пожалуйста, в комментариях качество звука, качество картинки, насколько он на высшем уровне, либо что-то стоит подправить, я прислушаюсь к критике, и если что, исправим в какой-то момент.

Мне очень важно получить идеальную картинку, идеальное качество, я к этому стремился очень долго, надеюсь, у меня это получилось, точнее, у нашей команды, я бы так сказал.

Но конкретно звук настроил я сам, я сидел там буквально месяца, я не знаю, пытался каждый пиксель довести, чтобы звук был идеальным.

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

Итак, демо проекта.

Демо проекта видим на экране.

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

Как ни странно, выйдем из системы, кнопку логаут нажмем, нажимаем, вот происходит разлогин, выходим из системы.

И дальше можно либо войти, либо регистрироваться.

Вот одна и та же форма и для того, и для другого, просто для регистрации есть еще регистрация.

Давайте напишем e-mail какой-нибудь условным.

Так, ну давай здесь напишем просто там test, собака, test.ru.

У меня, по-моему, такой логин, я, честно говоря, уже не помню.

Так, пароль от 1 до 8 и нажимаем логин.

Идет загрузка общая нашего приложения и вот наш приложение загрузилось.

Как видим, мы получаем такой Kanban-борд.

Здесь потом переименуем, я думаю, по-другому напишем.

Это я так для теста писал.

Собственно, это полноценная CRM-система.

Что такое CRM-система?

CRM-система – это когда мы умеем управлять нашими клиентами заказами.

И откуда у меня вообще есть в этом опыт?

Давайте с этого начнем.

Оттуда, что у меня была своя веб-студия, кто не в курсе, на канале очень там давняшние ролики есть, где я рассказывал, почему я закрыл веб-студию, это было прям древние времена какие-то, мне тогда было лет, наверное, 20, может быть, 21, и суть в том, что у меня была своя веб-студия, вот, и мы там очень много работали с рем-системой, понятное дело, потому что нужно было хранить где-то заказы.

Хранить там разработку сайтов, разработку дизайна, SEO-оптимизацию, маркетинг и так далее.

Вот мы это все хранили в CRM-системе.

Я перепробовал и Bitrix24, и AmaCRM, и какие-то там еще NVCRM, по-моему, была.

Ну, короче, вот разные вариации.

И мне, как программисту, понятное дело, ни одна не понравилась.

Потому что я люблю делать свое.

Короче, не будем дальше гнать воду, погнали дальше.

Извините за тавтологию.

Собственно, вот такой мы видим Kanban Board, то есть Kanban это вот в целом вид, который мы сейчас наблюдаем, это наша CRM-система.

То есть мы видим статусы, это входящие, это на согласовании, в производстве, произведено и к отгрузке.

Как видите, в зависимости от статуса у нас меняется цвет, то есть сначала у нас такой цвет серый, потом чуть он фиолетовенький становится наш Primary цвет, Primary главный цвет я имею в виду, да, и окончание мы видим уже непосредственно самый такой яркий фиолетовый цвет.

То есть плавненько градиент идет, и опять же он сделан с помощью функции, которая это все вычисляет на основе порядка и айдишника.

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

Подождем ответа сервера, и, собственно, вот она перетащилась, пожалуйста, анимация, все красиво перетащилась.

Почему происходит задержка, я вам объясню.

Мы пользуемся AWP-врайт, я сейчас покажу эту консольку.

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

Если ты пишешь свой backend, когда ты его пишешь, он отвечает максимально быстро, потому что это backend, который написал ты сам, и там нет лишнего ничего.

Там есть только то, что нужно твоему проекту.

И это важно понимать.

Из-за того, что мы используем app-write, он производит очень много действий под капотом, которые нам абсолютно не нужны.

Поэтому время ответа очень долго.

А здесь у нас каким образом все происходит?

Я потом, понятное дело, в коде все вам расскажу, объясню, как это все дело происходит.

Ну, вкратце, при перетаскивании происходит запрос на сервак, где мы обновляем нашу базу данных.

Оно автоматически с ней синхронизируется и с помощью Refetch получаем новые данные и сделаем перерендер данного компонента.

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

Как это можно исправить?

Смотрите, мы это дальше разберем в ролике, я вам покажу вариацию, как это можно исправить.

Я не стал этого делать, потому что я не люблю такие штуки делать.

Я люблю, когда полный идет синхронайз с базой данных.

Люблю, чтобы данные на клиенте совпадали с данными на стороне базы данных, чтобы не было какого-то конфликта определенного, чтобы у нас было состояние, ну, равно, скажем так, да.

Но вообще, как это можно исправить?

Мы могли бы сделать, отдельно идет запрос на БДшку, и на клиенте мы отдельно еще делаем, ну, просто на клиенте передвигаем эти элементы.

Можно было так сделать, но я считаю, что это костыли, то есть это чисто ради визуала делать, не вижу смысла в этом, это лишний код.

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

И получится вообще-то трэш, и клиент потом обновит и поймет, что у него на самом деле карточка осталась на месте.

Ну, короче, вот поэтому я решил ставить таким образом.

Да, немножко есть задержка.

Опять же, повторюсь, в нормальном бэкэнде задержки практически нету.

Оно происходит моментально.

Это вот за счет бэкэнда реально долгая задержка.

Это касаемо, это понятно.

Дальше мы можем добавлять карточки, нажимаем плюсик, вот такая штучка выезжает, опять же, за анимациями, я старался делать, чтобы вам было красиво.

Кстати, ребят, оцените в комментариях также новогоднее оформление, и фон я подготовил, очень тоже запарился, и оформление вебки, надеюсь, вам понравится.

Собственно, здесь пишем наименование, да, допустим, у нас это будет, ну, давайте, Яндекс.Директ, да, реклама, или давай, реклама фитнес-клуба, фитнес-клуба.

Дальше сумма.

Ну, сумма, допустим, у нас будет там, условно, там 12 тысяч рублей, ну, такая дешевая реклама, e-mail, допустим, gym, там, собака, gym.ru и компания, у нас будет какой-нибудь фитнес-клуб, какие там у нас были фитнес-клубы, я уже не помню, там, я не знаю, gym fitness, я ничего не придумал, давай просто gym напишем, да, ну, я люблю вот так писать, чтобы как-то было более официально, о, gym, допустим, да.

Нажимаем «Добавить», загрузка идет, как видите, все, успешно добавилось.

Вот здесь идет максимально быстрый ответ.

И формочка осталась, потому что, мало ли, допустим, я ее специально не сворачиваю, потому что, мало ли, допустим, клиент захочет, ну, точнее, менеджер захочет добавить еще одну карточку сразу же.

Вот, карточка успешно добавилась.

И что самое дальше интересное?

Мы можем открыть карточку в более подробном контексте, скажем так.

Нажимаем сюда, карточка плавненько вылазит справа, красивенько, называется штука «Slide over».

Тут мы видим и наименование, и сумму, и статус, и клиенты, и дата создания, и информацию о сделке.

Также есть поле для оставления комментариев.

Это очень важно при работе CRM-системы, чтобы клиент мог, точнее, между собой менеджеры могли оставлять комментарии об определенном клиенте, чтобы опять же не терять контекста.

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

Допустим, смотри, перенес встречу...

На завтра, там, 10 утра Нажимаем Enter И, как видите, вот добавляется наш комментарий Ну, моментально все происходит, причем это все происходит сразу в базе данных Можем пойти в нашу базу данных, Database Идем сюда Так, давайте чуть назад выйдем А, ну, кстати, да, комментарий правильно зашел И вот, перенесу встречу на завтра 10 утра Вот наш комментарий, пожалуйста, остается в базе данных То есть все синхронизируется в автоматическом формате с базы данных Это круто И переклики вне области, закрывается слайд овер

Касаемо этого, наверное, все.

Да, я думаю, что вроде бы ничего не забыл, вроде все красиво выглядит.

Идем дальше.

А дальше у нас еще есть раздел «Customers».

Раздел «Customers» — это раздел с нашими клиентами непосредственно.

Все наши компании, с которыми мы сотрудничаем, они располагаются в этом месте.

То есть вот наш ООО «Джим» в конце расположился красивенько, вот наша компания ООО «Спорт», логотип «Найка», и также каждого клиента можем отредактировать.

Я не стал запариваться, знаешь, там где кнопка «Эдит», я просто сделал по клику на изображение, открывается непосредственно окно редактирования той или иной компании.

Допустим, отредактируем тот самый ООО «Джим».

Нажимаем на нее, открывается, данные автоматически подгружаются с базы данных.

У нас есть еще одно поле, которое там его нет, потому что оно необязательно.

Это откуда к нам пришел клиент.

Это очень важно для CRM-систем, потому что мы должны понимать, откуда к нам пришел клиент для маркетинга.

Либо он пришел с рекламы, дальше с Яндекс.Директа, с мейл-рекламы, социальных сетей, с ВК и так далее.

Должны мы это все понимать.

Допустим, пишем соцсети.

Пришел он к нам с соцсетей.

И вот его логотипчик текущий, да, это дефолтный логотип, который вешается на каждую компанию.

Не совсем идеальный логотип, но подойдет для аватарки, скажем так.

Нажимаем «Выбрать», выбираем, допустим, «Макдональдс», вот у нас есть замечательный, как ни странно, «Джим», да, и «Макдональдс».

Ждем время, и вот загружается наш логотип «Макдональдса».

Не очень круто он подходит под круглую вариацию, но тем не менее я решил его взять.

Нажмем «Сохранить», происходит загрузка, сохранение выполнено успешно.

Теперь, как мы это можем проверить?

Либо обновить страницу условно, обновляем, да, и видим, что логотип подменился, и тут тоже подменилось поле.

Либо перейти на главную и опять же заметить, что у нас все дело обновилось.

Вот наша компания замечательная, вот о ней вся информация.

Короче, вот как-то так все это выглядит.

Вот такой проект будем разрабатывать.

Тут на самом деле много чего еще интересного под капотом сделано, то, что вы не видите так визуально, скажем так, да, но реально очень многое решает.

И этот проект, наверное, крутой.

Я думаю, что уровень этого проекта, наверное, джуниор.

Я бы не сказал, что это какой-то middle уровень, потому что тут чего-то такого прям суперсложного нету, как мне кажется.

Хотя, может быть, я ошибаюсь, мне тяжело говорить со стороны моего опыта.

Я думаю, что это все-таки уровень junior, может быть, какой-нибудь pre-middle уровень, вот что-нибудь такое.

Поэтому, если вы стремитесь к этим уровням, либо дальше, то для вас этот проект идеально подойдет.

Да, и хотел сказать, скачать проект можно по ссылке в описании.

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

Так что я решил, что исходники к этому проекту мы отдадим абсолютно бесплатно по ссылке в описании.

Я долго думал, опять же, тяжело, конечно, отдавать бесплатный проект, который ты делал очень долго, но я думаю, что того стоит.

Реально, ребята, которые, допустим, имеют возможность оплатить нашу подписку, чтобы у вас была возможность скачать абсолютно бесплатно.

Напомню, раньше все исходники раздавались только по подписке.

Так что вот, а те, у кого есть подписка, ребят, не беспокойтесь, у вас будет и так миллион плюшек, поэтому не парьтесь особо.

Ссылка в комментариях, короче, качайте исходник вот этого всего проекта нашего готового, можно без проблем, ну, короче, вообще кайф.

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

Вот, опять же, помню, все абсолютно бесплатно, ссылка в описании, скачивайте, кайфуйте и так далее.

Ну, либо сначала сделайте, если что-то будут вопросы, скачивайте исходник и сравнивайте варианты.

Ребят, минуточку вашего времени, хочу сообщить, ребят, что уже 11 декабря стартует наш зимний марафон, и не спешите переключать этот кадр, да, потому что это очень важная информация.

Что важно понимать?

Вы можете купить этот марафон, оплатить уже после его начала.

То есть он начался в течение ближайших 10 дней, условно, вы можете оплатить, спокойно залететь.

Да, вы чуть пропустите начало, но вы особо ничего не потеряете, поэтому время у вас есть, ребят, кто дает этот марафон.

Вкратце, ссылка в описании, почитайте информацию всю.

Но что важно понимать, что это лучший марафон для программистов.

Вы туда приходите, вы за 2,5 месяца научитесь круто писать проекты, разрабатывать большие проекты, получите как минимум 2 проекта в портфолио.

Разные есть уровни разработки, то есть это верстка, это тренинг, это джуниор и миддл уровень.

Каждую неделю мы будем выкладывать задачи в канал.

То есть каждую среду получать новые задачи.

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

То есть такой прям практический марафон.

При котором у нас уже третий поток, да, то есть у нас был Red Summer, был Red Fall, это Red Winter и это последний поток, потому что потом мы выходим на отдых.

Ребят довольны и напомню, что в конце топ-5 лучших по выбору самих участников получат сертификаты и премиум подписки, а топ-1 получит уникальный VIP-тег, что это победитель.

Топ 1 RedWinter.

Также он получит уникальный сертификат, где будет написано, что он лучший студент.

И также он получит подписку навсегда стоимостью 30 тысяч рублей.

Мне кажется, это прям вообще круто.

Это комбо просто.

Короче, вы и практикуетесь, и при этом получаете проекты в портфолио, и наращиваете свой потенциал, и при этом получаете призы в конце.

А, ну и крутой комьюнити еще есть параллельно, который вам всегда может подсказать и в чем-то помочь.

Мне кажется, это идеальный комьюнити.

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

Нам есть на что опереться.

Давайте сейчас размещу отзывы уже со второго потока.

Чтобы вы понимали, что это реально крутой работающий продукт.

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

И, ребят, хочу вас не упустить возможность, потому что это последний марафон.

Больше такого не будет или будет, но не очень скоро.

Мы хотим взять отдых.

Это очень тяжело по нагрузке.

Знаете, просто что это прям крутой марафон с четырьмя разными уровнями.

Верска, тренер, джуниор, мидл с задачами на каждую неделю.

По два проекта на каждый уровень.

То есть, словно всего 8 проектов получается.

Короче, это полный кайф, ребят.

Ссылка в описании, читайте подробности и кайфуйте, наслаждайтесь.

Буду всех рад видеть на этом зимнем марафоне.

Встретим зиму вместе, ребят, и проведем ее шикарнейшим образом.

Так, сейчас мы будем инициализировать проект, ребят, да, ну а перед этим давайте я покажу, какую сегодня будем использовать тему, а то опять будете спрашивать в комментариях, тему у нас сегодня Serendipity Sunset.

Шрифт у нас сегодня будет необычный максимально.

Надеюсь, он вам будет читаемым и видимым.

Я не знаю.

Ну, наверное, да, там ничего сложного нет, по идее.

Оператор MonoLeak.

Просто, ну, у меня он прикалывает.

Оператор MonoLeak.

Leak — это аллигатюрс, то есть это когда у тебя равной стрелочка превращается в один символ.

Красивенький.

Вот.

Что еще?

Мою настройку виз-кода я также опубликую.

Ссылку кину внизу.

Скачивайте также бесплатно настройку виз-кода.

Я дальше на канале выпущу ролик, скорее всего, под конец года.

с полным объяснением и на строчками вот это минимум минималистичные крутой процент но тем не менее уже сейчас может стать поскольку писание моего стройку вискоды сам нравится то как это все выглядит вот и иконочки последние иконочки у нас это капучин фраппе вот это наши кончики все эту формат вас донес а что вопросов потом дальше не было так ребят ну и собственно я думаю все подготовились мы с вами а готов чем вкусненько там чайок кофеек и так далее и присаживайтесь за просмотр этого шикарного ролика

Итак, давайте начнем с документации.

На самом деле, документация Nuxt мне очень сильно понравилась.

Если сравнить ее с Next.js в React, Nuxt гораздо приятнее.

Вот если бы я делал документацию, я бы делал ее именно так.

Мне она нравится по визуалу, очень красивая, очень крутая, очень информативная.

Короче, это топчик прям.

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

Так, значит, для начала давайте, собственно, запустим наше приложение.

Да, перейдем сюда.

У нас есть pnpm, есть ban, есть npx.

Вот, я воспользуюсь npx.

В принципе, тут все, я думаю, логично.

К pnpm я еще не перешел.

А потом, может быть, как-нибудь его попробую, не знаю.

Можете в комментах писать, если вы уже пробовали, как вам вообще на ощущениях.

Итак, вставляем в терминал.

Терминал у меня iterm с оболочкой omizeh.

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

Но не факт, что я это сниму.

Тема слишком узкая.

Так, npx.naxt.latest.init, да, и пишешь название проекта.

Название проекта у нас будет, так, у нас это CRM-систем, да, crm.system.naxt.

Я напишу рекорд, чтобы понять, что это запись видео была, да, чтобы я мог исходник вам сделать, чтобы не перепутать ни с чем.

Так, Package Manager, я буду использовать Yarn, свой любимый Yarn, собственно, здесь выбирать на свой вкус, опять же, прям совсем какие-то моменты приземленные разбирать не будем, потому что я думаю, что на уровне Naxt вы должны уже на уровне Junior более-менее что-то понимать, ну, особенно с пакетным менеджером, я думаю, объяснять не стоит, но тем не менее, у меня был на канале Shorts, по-моему, где я сравнивал как раз-таки Yarn NPM.

и, по-моему, pnpm тоже, я сравнил вот эти три штучки, и я для себя выбрал, что yarn пока что самый оптимальный, вот, ну, опять же, pnpm набирает реально высокий оборот, и, возможно, на него перейдем со временем, но посмотрим, пока что yarn, собственно, это самое лучшее решение, так, git-репозиторий мне не нужен, да, и все, проектик у нас запустился, давайте его откроем с помощью команды code crm system, system next record,

Запускаем.

Вот он запустился.

Отличненько.

Теперь закроем наш терминальчик.

Я быстренько сейчас себе здесь реорганизацию окон сделаю.

Так, вот наш проектик открылся непосредственно.

Давайте сначала разберем базовую структуру Next.

Что здесь и как я вам расскажу, как все работает.

А потом мы перейдем уже непосредственно к разработке.

Так, касаемо нашего Nux, смотрите, по структуре, давайте чуть поближе сделаю, вот так, да, чтобы вам было видно, по идее, вот так должно быть все видно.

Значит, смотрите, есть NodeModules, классика, да, сюда все пакеты ставятся, я думаю, это понятно все.

Ну, здесь ничего сложного нет.

Public, как в Next.js, да, опять же, это место, где вы складываете все свои статичные файлы, которые в будущем будут доступны по адресу, допустим, localhost 3000, слэш, название вашего файла, то есть корневая директория, где кладутся все статичные файлы.

Допустим, здесь лежит файл favicon.ico.

Дальше.

Сервер.

Сервер, собственно, здесь будет лежать все, что касаемо сервака, если вы будете работать на стороне сервера в Nuxt.

И опять же, хотел сказать по поводу Nuxt.

Здесь, конечно, не такая дружелюбная изначальная сборка, нежели Next.js.

Что я имею в виду?

То есть в Next.js вам уже дают готовую концепцию, как и что размещать.

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

У меня все-таки огромная база JavaScript, React и так далее.

То есть и Nexta тоже.

То есть мне это далось легко прям.

Мне стоило там один раз почитать документацию, я понял, что и куда, потому что оно плюс-минус похоже, все фреймворки, и концепция, она едина.

То есть если вы выучите условно там React, то вам легко будет и Angular выучить, и Vue.js, ну, если вы с AppCrypt работаете непосредственно, и так далее.

Поэтому по этому поводу не запаривайтесь, главная база.

Это я говорю к тому, что и вам придется посмотреть документацию.

То есть Next.js, допустим, когда ты проект сразу запускаешь, у тебя показываются конкретные папки, и говорится...

Что где должно лежать.

То есть, к примеру, у нас есть app-директор, в ней какая-то структура должна быть и так далее.

Здесь же у тебя есть конкретные папки, вот основные, но нет понимания, какие дальше должны быть папки.

А на будущее я вам такой небольшой забег скажу, спойлер, да, в Next очень важна вот эта вот, как он называется, по-моему, nesting, да, то есть когда вы правильно ставите наименование папкам и правильно делаете структуру.

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

Это прям крутая тема, она работает так, знаешь, немножко костыляво, на мой взгляд, опять же, были у меня с ней баги определенные, но штука, опять же, магическая, как и, в принципе, весь Vue, она прям, от нее веет магией, я бы так сказал.

Так, значит, дальше смотрим, gitignore, я думаю, понятно, работа с гитом, да, файлы, которые игнорировали для гита, appview, собственно, это у нас корневой файлик, да, где у нас запускается наш проект, вот, допустим, сейчас у нас запускается компонент nuxt-welcome, и этот компонент, в чем прикол, да, он лежит прямо, видите, в папочке .nux, то есть они его сюда положили, он лежит, и он, даже больше скажу, он лежит прямо в node-модульцах, да, это прямо, ну...

Супер неудобно.

То есть я, допустим, как новичок, хочу посмотреть, что там в этом файлике, а я не могу это посмотреть.

То есть могу, но это не так удобно, как в том же Next, скажем так.

И я не могу его удалить.

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

А получается, что я не могу так сделать.

Ну, это такие мелочи, скажем так.

Naxx Config TS, кстати, лучше работать, чем конфиг в Next.js, я в этом ролике, ребят, часто буду делать сравнение с реактовским Next, потому что я с ним работал много, и я думаю, некоторым из вас будет полезно это сравнение, чтобы понять, да, что лучше, что хуже и так далее, спойлер, такого нет понимания, что лучше, что хуже, да, все-таки основная концепция выбирать под команду, под проект.

но, тем не менее, короче, эта штука работает реально лучше, в плане типизации здесь прям гораздо лучше, здесь вы описываете все конфигурационные данные для вашего проекта, то есть, там, вот, включение DevTools, то есть, режима разработчика, потом-то настройки плагинов, подключение плагинов, ну, короче, там, вся эта огромная рутина, она лежит именно здесь, и в чем отличие от Nexa, здесь крутая типизация, вот это то, что не отняли.

Package.json – классический файлик, в котором у нас собраны все скрипты для запуска приложения, тип нашего приложения, как он будет работать через модули или через другие моменты.

Ну, сейчас у нас все используют модули, поэтому тут особо другого нечего поставить.

Скрипты для запуска, как я и сказал, и для других действий, и зависимости.

То есть зависимости – это для разработки, и будут еще обычные зависимости.

Зависимости – это библиотеки в проекте, которые мы будем использовать.

Дальше, файл readme, опять же, для описания, что в нашем проекте есть для гитхаба и вообще для гита в целом.

TS-конфиг, и опять же, видишь, есть TS-конфиг такой, но он как бы ссылается на TS-конфиг, который есть уже внутри Naxt по умолчанию, можете его посмотреть.

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

Вот, правда, не понял, зачем они дублируют, собственно, и через собаку, и через тильду, если можно что-то одно выбрать.

Ну, окей, это дело как бы, дело вью, мы не спорим.

Ну и Yarnlock файл, да, это те же самые зависимости, только здесь содержится файл с конкретными версиями всех зависимостей.

Давайте отблизим обратно, чтобы вам было не так близко.

Чуть-чуть я подвину, чтобы вам было так покомфортнее.

Вот так примерно.

И я предлагаю взглянуть тогда быстренько на документацию.

Я вам покажу, чтобы вы просто понимали, что мы будем писать.

Я вам покажу, как вообще обустроена здесь структура.

Вкратце, да, опять же, вкратце.

Касаемо роутинга.

Переходим в роутинг.

Вот наш pages.

Создаем папку pages, в ней создаем файлики.

Если нужна динамика, пишем квадратные скобки.

Опять же, дальше мы об этом поговорим.

Я подробно сейчас останавливаться не буду.

Мы потом на практике эту историю разберем в этом ролике.

Касаемо SEO-оптимизации.

Тоже вот информация, как там title назначать и так далее.

Кстати, usehead, да, используется здесь, а я использовал другое, я использовал use-seo-meta.

А я даже не знаю, что лучше.

Типа здесь говорят, лучше поддержка TypeScript, а короче, я не знаю, то есть они как будто одинаковые.

Потом, если мы перейдем во views, вот наш app-view, допустим, и вот наши компоненты, да, важно в папку компонентов вложить компоненты, тогда у них будет, опять же, без импорта можно будет их переиспользовать.

Пейджесы и так далее, ну, короче, я думаю, что это все, ну и layout тоже без них никуда.

Далее у нас есть вот homepage, да, я сделал скриншот, чтобы нам было понять, что делать с ним.

Вот, я его сразу закреплю сейчас.

Только хочу открыть файлик какого-нибудь здесь, чтобы его закрепить аккуратненько.

Вот так, пин.

Это тоже нужно пин, чтобы оно никуда не пропало случайно.

Это чуть опустим, я думаю, до этого уровня.

Так, и это тоже чуть подвинем вот сюда.

Я думаю, так достаточно будет.

Так, хорошо.

Давайте сначала будем по очереди всю эту историю разбирать.

По очереди постепенно.

Смотрите, я бы хотел вам сначала показать, собственно, момент, касаемо лейаутов.

Давайте его создадим.

Для этого есть специальная папочка, называется Layouts.

Вот только так это будет работать.

И файлик назовем Default View, то есть дефолтный лейаут.

Это, опять же, важное именование, по-другому писать нельзя.

Что такое лейаут?

Лейаут — это вот общий каркас, который используется на каждой странице сайта.

Ну, там, где вы захотите использовать.

И для этого NUX очень крутую концепцию придумали.

То есть вы, допустим, здесь пишете Default, да, либо можешь назвать там другой лейаут какой-то условно, да, и между ними легко переключаться.

Это удобная концепция, она отличается от того, что есть в React, в Next.js, да,

Она, мне кажется, чуть более даже удобна.

Хотя, опять же, я привык больше к Next-овской истории.

Но, тем не менее, про что я говорю.

То есть мы здесь можем использовать сразу большое количество лейаутов в проекте.

К примеру, для публичной части один лейаут, для части, где там гуляют обычные гости, для части администратора другой лейаут и для части...

Пользователя, который зарегистрирован в системе, еще третья часть, допустим, третий layout.

И везде разные layout, и вы можете между ними легко переключаться.

Это очень круто и очень удобно.

У нас будет в проекте один layout, потому что у нас в целом нет какой-то гостевой части, у нас просто разработка CRM-системы, а это уже и есть админ-панель, скажем так.

Давайте сделаем, как у нас во Vue.js вообще обстоят дела с компонентами, как это все устроено.

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

Я много чего пробовал и, опять же, идеального концепции какой-то не достиг.

Почему так?

Потому что все равно вью из-за того, что он... расширение файла вью, то точка вью, да, из-за того, что...

Плохо поддерживается TypeScript и среда разработки не понимает, что это вообще там можно использовать TypeScript, хотя я поставил все плагины.

Бывают баги, при которых приходится перезагружать все экстеншены.

Я вас потом научу, как это делать, чтобы вы это могли быстро делать.

Если работать в AppStorm, то в AppStorm проблем не будет, там все это дело достаточно умно работает.

Но, тем не менее, я столкнулся с такой проблемой Короче, важно поставить вот TypeScript View плагин для интеграции с TypeScript Здесь, смотрите, мы просто ставим все, что от разработчика Volar Вот, Volar, да, то есть это Vue.js официальные разработчики И также ставим вот эту штуку, вот Там, на самом деле, есть целый комплект, можно написать Vue.Volar, допустим Вот, и тут где-то можно, наверное, открыть Вот можно такую штуку открыть, да, и посмотреть, что вам предлагают поставить Здесь из основного только две эти штучки Все остальное можете не ставить, это, ну, не актуально, скажем так

Все, поставили.

Идем дальше.

Значит, в новом Vue, я буду говорить Vue, но вы имейте в виду, что я пишу на Nux.

В принципе, концепция одна и та же.

У нас как идет компонент, как выглядит.

Если в React мы используем там Export Function, допустим, компонент является функцией, здесь ситуация немножко другая.

Здесь разработчики Vue решили добавить очень много магии, да, и у нас все происходит под капотом, мы не понимаем, что там происходит на самом деле.

И это, конечно, огромный минус в Vue, то есть когда будем писать большие проекты, нам сложно будет их тестировать.

Но, тем не менее, для новичков это суперкрутой инструмент.

Почему Vue нравится новичкам?

Потому что новички могут легко себя здесь найти и писать в Vue приложение спокойно, потому что это реально легко делается и легче, чем в React.

Но как только уровень достигает сложного, да, я вам сегодня покажу на примере этого проекта, уже есть проблемы определенные.

С этим нужно мириться, скажем так.

Значит, template.

Здесь у нас в таком якобы теге будет описываться HTML-код в перемешку с небольшим компилятором, где мы там будем динамичные перемены вставлять и так далее.

Внизу у нас идет style.

Тут в стиле обычно пишем scope для того, чтобы стили относились только к этому компоненту, чтобы они не работали вовне.

А вверху мы делаем скрипт.

Тут все скрипты наши, то есть весь наш TypeScript-код.

Чтобы он был TypeScript-ом, именно пишем lang.ts.

Это обязательно.

lang.ts.

Length.ts.

И также указываем setup.

Да, это тоже важно для Composition API, нового как раз keyview.

Без этого смысла делать нет.

То есть, ну, иначе будет старая концепция.

На самом деле, новая концепция view мне нравится больше.

Она чем-то становится похожа на React, чем-то удобнее.

Поэтому всем рекомендую именно использовать view3, а не view2.

Значит, что мы здесь можем попробовать?

Допустим, давайте консолок я напишу базовым.

Значит, напишу loaded.

Здесь напишем базовую структуру какую-нибудь.

Допустим, div.

Так, div.

Давайте сразу, наверное, сделаем какую-то структуру более-менее адекватную.

Давай сразу сделаем секцию, какую-нибудь секцию, да, которую мы сейчас постельно опишем.

И как нам обозначить вот этот layout, да, я об этом вам сказал, да, и вы, наверное, спрашиваете, Макс, а как нам обозначить, вот в каком месте будет располагаться сам children, то есть в React называется children, то есть ребенок, как сказать, не ребенок, а вот то самое, что мы оборачиваем.

То есть условно объясню, вот наш макет справа, видите, да, у нас есть sidebar, к примеру,

Это и будет являться нашим лейаутом.

Сайтбар будет на каждой странице сайта.

А вот то, что вот с правой части, да, это является, во вью называется слот.

Является слотом.

И вот его нужно поместить в определенное место нашего лейаута, чтобы он там постоянно слежал.

Как это отобразить?

Так и отображаем.

Тег слот называется.

Вот, тег слот.

Все.

Значит, в это место будет ложиться все, что мы будем оборачивать.

Вот, допустим, эту штуку будем ложить сюда.

Сохраним, к примеру, да, и я думаю, что можно запустить проект.

Пишем yarn dev.

Так, давай еще раз.

Yarn dev.

Только не забудем использовать сам наш layout, перейдем в app view, здесь укажем layout, next layout непосредственно, next layout.

Здесь, чтобы использовать, как я и говорил, другую вариацию layout, можно потом сделать вот таким образом и указать там name какой-то условно.

Вот, ну мы будем использовать один layout.

Идем сюда, обновляемся, вот наш next замечательный.

Вот наш NAX замечательно заработал.

Теперь идем сюда, inspect.

И можем посмотреть в консоли, что у нас выполнился loaded, как видите.

Так, давай чуть консоль покрупнее попробую сделать, чтобы вам было все видно.

Вот, наверное, таким образом.

Да, чтобы за мной еще было вам видно.

Вот, loaded, видишь, запущено.

Значит, когда у нас отрабатывает вот эта штука?

То есть важно понимать, что этот скрипт, если вы пишете код внутри него, он отрабатывает именно при создании компонента.

Именно при создании, ключевое слово при создании.

То есть не при измене чего-то, а именно при создании.

То есть когда вы грузитесь, создался компонент, у вас выполняется все, что здесь находится.

Это нужно понимать для общей концепции.

Дальше, как я сказал, у Naxx очень много крутых приколюх, которые, честно вам признаюсь, я так и не использовал.

Я не понял, для чего они...

круто все выглядит, красивенько подсвечивается, это, короче, режим разработки, давайте его откроем непосредственно, вот, нажимаем get start, давайте это даже свернем, наверное, так, анонимус не буду отправлять, и вот такая штука, да, то есть здесь есть и всякие там, дерево можно посмотреть, на экстраутинг можно посмотреть,

Можно посмотреть также у нас и всякие другие штучки.

У нас пока просто роутинга нет, поэтому она не показалась.

Есть все наши компоненты, есть там все наши функции, библиотеки.

Короче, много всего.

Но честно вам признаюсь, я ни разу этим не пользовался.

Вот честно.

Я не знаю.

Напишите в комментах разработчики Vue.js и Nuxt.

Вы эту штуку вообще пользуетесь?

Я не знаю.

Наверное, да, пользуетесь.

Но я в ней не нашел никакого такого прикола.

То, чего прям нету, знаешь, в обычной разработке в хроме, в обычном браузере.

Ну, короче, я не по эту штуку, поэтому ее закрываю просто и больше ее не хочу использовать.

Так.

Кстати, можно, наверное, это выключить, да, я думаю, чтобы нас это не беспокоило.

Давай еще чуть-чуть откроем, верну назад, чтобы вам было все видно.

Чуть-чуть опустимся.

Ну, вот до такого уровня, я думаю.

Так, возвращаемся назад.

Давайте, кстати, перейдем в Next и попробуем отключить.

Наверное, вот сюда пишем false, и мы отключаем.

Да, по идее, должно отключиться.

Все, видите, отключилось.

Вот так гораздо удобнее стало нам.

Так, тут сразу сообщение о том, что suspense пока что экспериментальная штука, да, и будьте в этом плане аккуратны.

Что такое suspense?

Давайте сразу объясню.

Мы его будем использовать редко.

По-моему, мы вообще в этом проекте не будем использовать.

Но для тех, кто, допустим, я обещал вам все рассказывать, поэтому расскажу, что такое suspense.

Suspense — это когда мы...

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

То есть, к примеру, у нас грузится такой компонент внутри, да, а мы ставим загрузчик на весь сайт.

И вот, когда мы ставим загрузчик на весь сайт, и чтобы он...

понял, что у нас идет загрузка нашего компонента, мы используем suspense, который перебрасывает loading как раз-таки к нашей загрузке.

Если простым человеческим языком, это именно так работает.

Опять же, без каких-то сложных терминов.

Я стараюсь максимально легко доносить, я сам теорию ненавижу, поэтому, ребята, я буду доносить своими словами все, что знаю.

Окей, с этим понятно, я думаю.

Так, закрываем.

Дальше.

С этим, я думаю, тоже разобрались, предварительно познакомились.

Касаемо самой секции.

Здесь у нас будут еще разные проверки стоять, мы будем здесь авторизацию грузить, пока что к этому еще рано приходить.

Давайте накинем базовый стиль, то есть нам нужно сделать, чтобы левая часть была...

Такого размера, правая часть была такого размера.

И внимание, кстати, в консольке тоже на сервере отобразец, как видите, да, вот чуть справа от меня.

Давай чуть-чуть еще подвинем вот таким образом.

Отобразец, как видите, в консольке loaded, то есть выполняется и на сервере, и на клиенте.

Вот, но спойлер, мы наше приложение будем делать только на клиентской части.

Я не вижу смысла делать это приложение на серверной части, потому что мы разрабатываем с вами все-таки админ-панель, в которой не так важен сервер, и я решил даже туда не обращаться, честно говоря, потому что у нас авторизация, app-write не умеет работать с сервером адекватно, поэтому я не вижу смысла сейчас вот этим заниматься.

И тем более хотел сделать новичков именно для джуниор-уровня, чтобы это как-то сильно вас не перегружать.

Ну, как бы сделать здесь сервак особой проблемой составляет.

И в стилях я напишу .grid и напишу grid

Template columns.

И укажу шаблон нашей колонки.

Смотрите, у нас будут две колонки.

Это левая и правая.

Первая будет колонка «Одна фракция», а вторая будет «Шесть фракций».

Я легко это высчитал на основе первой колонки.

Это будет назначаться к секции «Класс».

grid да и теперь у нас к этой секции будет назначаться вот этот класс этот класс нигде больше не будет использоваться кроме этого компонента что мы указали атрибут скопт ну и также укажу style минимальная высота наше приложение будет 100 ведь то есть ширина экраны высота экрана это будет минимальная высота нашего приложения сохраним обновим что мы увидим пока что наверно ничего давай посмотрим еще раз и

значит мы видим вот наш grid замечательно да и мы пока что видим только один элемент да по этой причине у нас он растягивается на full потому что вот как видишь у нас ошибка потому что элемента нет да ну и не только поэтому у нас просто нет даже понимаешь что является кредон поэтому не забудем здесь еще написать значит display grid display grid да и вот здесь добавим еще один div пока что такой временный да это будет наш типа sidebar sidebar

Сохраним, как видите, вот сайдбар слева получился, а это справа.

Вот такая концепция у нас вышла.

И теперь это является лояутом, можно использовать в любых других страницах.

С этим, я думаю, понятно.

Давайте постепенно что-нибудь делать уже будем.

Я думаю, что начнем по сайдбару, наверное, сделаем сайдбарчик.

Потом пойдем постепенненько.

Давайте для сайтбара создадим components, new folder components.

Это важно на именовании папки, менять его нельзя.

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

То есть мы просто его вызываем, и не нужно ничего импортировать.

Он и так сам будет подтягивать.

Это очень крутая тема, именно Nux.js.

Давай мы еще как поступим, чтобы компонент у нас особо, опять же...

Давайте я сейчас объясню, что я хочу сделать.

Напишу лучше layout здесь, layout, чтобы было понятно, что эти компоненты относятся к layout именно.

И внутри него создадим непосредственно файлик sidebar.view.js, да, sidebar view, template.

У нас, кстати, сниппетов нет, давайте поставим сниппеты, view snippet, потому что без сниппетов тяжеловато немного, вьюшных, давайте поставим.

Так, view, view with code snippet, вот такая штука есть у нас, да.

Так, а есть view 3, да.

Наверное, view 3 поставлю, да, все-таки.

Давай их поставлю.

Я, по-моему, их уже пробовал.

Вот эти я не пробовал.

Не знаю, насколько они актуальны вообще, эти view.

Так, что написано?

View 3, view 2.

Ну, ладно.

Давай все-таки вот эти поставим.

Они уже проверены.

Так, теперь пишем здесь.

Хотя, может быть, те были лучше.

Не знаю.

Пишите в комментах, прав я был или нет.

Короче, разворачиваем просто div.

Вот таким образом все развернулось красивенько.

Так, скрипт тоже пока развернем, мы его пока юзать не будем.

Так, неправильная история.

Вы сейчас как раз видели старый моментик.

И вот как видите у нас, да, вот уже наглядный пример.

То есть смотри, я пишу скрипт, я пишу лэнг, да, и он его уже не подтягивает, уже не подтягивает.

То есть если я навожу, он не поймет, что я имею в виду вообще в целом.

И вот это называется баг в UGS.

Вот пишем setup, видишь, он его тоже не понимает.

Чтобы это исправить, этот баг...

Видишь, он даже до сих пор не подсвечивается.

Он не понимает, что происходит.

Для этого мы нажимаем Command-Shift-P, указываем Restart Extension Host.

Вам придется этим пользоваться крайне часто.

Пишем просто Restart Extension Host и перезагружаем все экстеншены в нашем виз-коде.

Может, у меня вот такой баг.

Ну, вот реально, в UGS часто багуются.

Нажимаем сюда.

Сейчас все быстренько перезагружается у нас, да, и баг должен исправиться.

Наводим.

Как видишь, баг исправился.

Пожалуйста, все работает.

Вот такие баги часто происходят во Vue.js, и это, конечно, не суперкомфортно.

Знаешь, в React никогда такого нет, что есть проблемы с TypeScript.

Вообще никогда такого нет.

А вы дальше посмотрите, что проблемы будут также и с TypeScript непосредственно.

Так, значит, сайдбар.

Сайдбарчик мы пока что в скрипте не будем описывать.

Опять же, к нему вернемся чуть попозже.

Здесь что мы хотим описать?

Так, это сайдбар, я напишу «aside», да, HTML5 тег «aside».

Здесь будет наш сайт-бар непосредственно располагаться.

Нам нужно Tailwind поставить для удобства написания классов, чтобы мы их быстро писали.

Опять же, многие не понимают прикол Tailwind.

Объяснем, почему мы используем Tailwind в большинстве проектов.

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

А что важно новичку на старте и мне, что важно при написании больших проектов, это максимально укоротить процесс именно верстки и стилизации сайта.

Потому что когда вы переходите с уровня верстки на тренни и выше...

Вам уже верстка не так важна, вы хотите ее максимально избежать, потому что вы уже в ней прокачались, вы уже ее знаете.

Опять же, важно ее реально знать на хорошем уровне.

И потом вы уже можете просто брать и переходить дальше.

И вам не хочется верстать каждый раз одно и то же.

Поэтому Tailwind позволяет вам в 5 раз сократить разработку.

Просто потому что есть готовые классы, которые вам позволяют это сделать в разы легче.

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

Дальше.

У нас, помните, вот здесь идет вот такая логотипчик, наверное, замечательный.

Напишем поэтому «Next link».

То есть это то, как у нас пишутся ссылки в «Наксте».

«Next link».

Здесь указываем, по-моему, здесь идет «to» у нас в «Наксте».

И вести на главную страничку, ту слэш.

И сам логотипчик, next image я буду использовать, вот такой тег, да, уникальный.

Можно просто обычный имидж, но next image, как и в next, есть свой тоже тег, точнее, компонент, который позволяет вам кэшировать ваши картинки.

Вот, опять же, с кэшированием будьте аккуратны в Next, у меня была такая проблема, когда вы меняете картинку, вам приходится очищать кэш, потому что он сам его не очищает, и приходится переобновлять кэш вручную.

С этим будьте аккуратны, если у вас вдруг картинка не меняется, переобновите кэш с помощью команды специальной.

Так, указываем source, он будет располагаться как раз таки в нашей папочке, logo.png.

У нас, кстати, не PNG, а SVG будет.

Ну и дальше будет Alt вот такой и ширина 100 пикселей.

Давайте добавим нашу картинку.

Вот, я перенес папочку Public, вот Loader и лого SVG.

Опять же, так как мы полностью проект весь даем вам бесплатно по ссылке в описании, можете скачивать.

Ну, я в телеге выложу, чтобы хоть как какие-то плюсы получить, да, чтобы вы хотя бы на телегу подписались, ребят, чтобы... Короче, чтобы мы с этого хоть что-то получили.

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

Вот.

И там оттуда можете взять картинки.

Вот лоадер замечательный и вот лого.

Лоадер нам потребуется опять же дальше в проекте.

Указ лого SVG.

Сохраняем.

Закрываем.

Ну пока что вот так и оставлю.

Примитивно максимально.

И идем в наш лояут и его инициализируем.

Лояут.

Дефолт.

Идем сюда.

И сюда добавляем наш замечательный сайдбар.

Сайдбар.

Сохраняем.

И как видите, я неправильно писал.

Я по привычке пишу в формате React и хочу там импортировать.

Мы можем так сделать, взять и импортировать, и все будет работать.

Вот так, sidebar view, и все будет работать.

Но зачем это делать, если у нас в Nux позволяет с помощью правильной структуры без импортов работать.

Убираем.

Вместо этого пишем layout-sidebar.

Как это строится название?

На основе папки.

То есть у нас есть components, она не читается.

Layout и sidebar.

И это работает только для тех компонентов, которые есть в папке components.

Для других оно работать не будет.

Layout, sidebar.

Сохраняем.

Идем сюда.

Ошибочка у нас оформляется, потому что next-image нужно установить сначала.

Давайте перейдем в документацию и его поставим.

next-image.

Переходим сюда.

Идем сюда.

Вот таким образом выполняем команду next-image.

Давайте get started нажму, через yarn поставлю себе Идем сюда, открываем терминальчик еще один yarn add next image Ставим next image и в качестве модуля его подключаем Про что я вам говорил, что все работает в next конфиге Первую строчку удалю, она мне нужна, и вот здесь я буду подключать next image Здесь будет прям много модулей у нас в будущем Давайте сразу, пока мы пошли сюда, поставим tailwind next tailwind, далеко ходить не будем

Так, сюда идем, get started.

Вот чем мне реально Nux нравится, у них прям реально крутая документация.

Видишь, крутая стилистика, мне прям очень нравится.

Так, берем.

Может, я один от этого кайфую, не знаю.

Может быть, вам как бы и окей.

Но мне прям реально нравится, я прям кайфую.

Так, ставим.

Дальше мы берем вот это и копируем.

Уже массив не нужен, потому что у нас уже есть, и просто как через запятую указываем еще одну историю.

Опять же, Tailwind объясняет, для чего он нам нужен, для удобства, опять же.

Так, видишь, TypeScript, опять же, вылетает, будьте аккуратны, вот такое часто происходит в проекте Vue.js.

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

Пишите в комментах, опять же, мне интересно почитать ваше мнение, вот именно про разработчиков, которые на Vue часто пишут, на Nux, есть ли у вас проблемы с TypeScript или нет.

Потому что у меня ощущение, что изначально Vue был сделан под обычный JS, не под TypeScript, и из-за этого все равно еще тяжело идет портация.

Особенно с всякими Legacy плагинами и экстеншнами, то есть со старыми, я имею в виду.

Так, по идее он сам их нам сгенерирует, насколько я понимаю, да?

Для этого давай перейдем сюда, посмотрим, что вот у нас сайтбар отобразился уже, да, картиночка, логотипчик.

Но накинем немножко стилей.

Перейдем сюда обратно.

Так, давай сейчас перезапустим проект.

По идее должны файлы создаться сами автоматически.

Выключим и заново запустим.

Вот, using Tailwind.

Вроде бы запустило все отлично.

Вроде работает.

Так, Tailwind конфиг у нас нет, как я вижу.

Да, его нужно создать самим.

Давайте создадим его.

Так, перейдем сюда.

И, собственно, сгенерируем эту штуку.

Так, npx tailwind init.

Но, опять же, это временное решение.

Мы с вами дальше поставим, как я и говорил, UI-библиотечку, которую, опять же, вы просили, зрители, да, это Shade, давайте посмотрим, как она называется, Shade, вот, Shade CN View.

Мы ее поставим чуть дальше, вот, и она под капотом использует у себя Tailwind.

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

То есть ее уникальность в том, что она как бы делает компоненты с помощью команды, но мы их можем менять.

То есть это не как, знаешь, берем UI-библиотеку, и нам приходится все время перекастомизировать.

Такого нету, да Здесь компоненты, она вам готовит просто готовые компоненты А вы уже их сами под себя меняете Это невероятно удобная штука Но она, конечно, такая, знаешь Много чего делать лишнего, на мой взгляд И я все-таки все равно любитель чистой структуры Поэтому я привык делать все сам Но, опять же, скорость она реально добавляет Вот разработки

Так, с этим мы сделали, я думаю.

Да, теперь давайте попробуем стили накинуть небольшие.

Я, опять же, стили буду некоторые копировать.

Тут объяснение особо не нужно, я думаю.

Все, я думаю, понятно.

Да, паддинги, background sidebar, который у нас пока что нет, к сожалению.

Да, мы потом добавим наши цвета чуть позже.

Высоту добавляем, ширину и relative обязательно.

Дальше добавляем небольшие стили для самой ссылочки.

Небольшой просто маржин делаем и блок.

И, в принципе, для картинки делаем MX Auto, потому что нам важно, чтобы она выровнялась по центру.

Обновляемся.

Вот она по центру стоит.

Все прекрасно отработало.

Как видите, стиль работает.

Если мы зайдем сюда, то мы увидим, вот наши стили класса, и они прекрасно отрабатывают в правой части.

Так, напишу здесь тудушку.

Нам нужно добавить 6CN.

Давайте мы его скопируем.

Так, теперь перейдем, собственно, в наш браузер.

Откроем этот 6CN view.

И давайте, собственно, его установим.

Get started.

Собственно, объясняю еще раз концепцию.

Не помню, смогу донести ее или нет.

Давайте еще раз объясню.

На всякий случай, опять же, хочу, чтобы вы точно все поняли.

Смотрите, значит, beautifully designed components.

that you can copy and paste into your apps.

Accessible, customizable, open source.

Что это по-русски, если говорить?

Смотрите, есть UI-библиотеки отдельно, где вы берете обычно, импортируете компонент из самой UI-библиотеки и вставляете его к себе.

А есть условно вот такая штука, которая позволяет нам вроде бы и брать готовые компоненты,

И при этом это не совсем готовый компонент, потому что вы их можете редактировать.

То есть обычно как?

Допустим, берем Material UI, то, что вы все знаете.

Берете Material UI.

Дальше.

Вам нужно кастомизировать под ваш дизайн какую-то историю.

Что вам нужно сделать?

Вам приходится перезаписывать классы и перекастомизировать.

То есть перезаписывать уже старый класс.

Это не суперудобно, это конфликты вызывает.

Ну, короче, это максимально некомфортно.

Здесь же история такая, что он вам генерирует компонент базовый.

которая уже имеет какие-то стили определенные на основе Tailwind, а вы, и он прям его кладет к вам в директорию, то есть вы его сами можете потом переизменять, да, и менять ему стиль, и не перезаписывать стили, да, а менять прям вот такие изначальные рутовые стили, и это прям максимально крутая штука, вот, она недавно вышла, на самом деле, недавно набрала хайп такой прям,

И во Vue.js они так давно появились.

Но вот вы просили, я сейчас использую, чтобы вам была такая новая практика, скажем так.

Будем стараться с вами применять новые технологии.

Вот.

Это, я думаю, понятный момент.

Теперь мы переходим с вами в Get Started.

Get Started, да.

И опускаемся ниже.

У нас есть вот Installation.

Есть вот такие штуки Nuxt, Vite, Astra и Laravel.

Давайте возьмем Nuxt и поставим наш замечательный Nuxt.

Значит, возьмем эту строчку замечательную.

Идем сюда и вставляем ее.

NPX.

Так, подожди, подожди, стой, стой, стой, стой, стой, стой, стой, что ты делаешь?

Блин, я совершенно эту команду скопировал, ребят.

Так, надеюсь, ничего не поломало здесь.

MyApp, вот это лишнее, удаляем MyApp сразу же.

Да, нам повезло, все в рамках разумного получилось.

Он просто создал еще одну папку, все отлично.

Так, TypeScript у нас уже есть, это у нас тоже уже есть.

Вот этой штуки у нас нету, давайте ее скопируем.

ShadCNNax, давайте, yarn.ddd.

Так, минус D забыли, да?

Минус D. ShadCN Next.

Поставили.

Дальше.

Вот такая штука.

Конфигурируем.

Значит, берем ShadCN.

Я вот эту штуку написать не... А, ну хотя это нам нужно.

Сейчас объясню для чего.

Давайте скопируем пока что.

Перейдем в наш замечательный.

Как видите, он просит, чтобы у нас Tailwind уже стоял.

Мы его буквально вот пару минут назад с вами совместно поставили.

Через запятую указываем еще один модуль, который будет называться ShadCN Next.

Вот такой модуль замечательный.

Его также устанавливаем.

Теперь ставим очень интересную штуку.

Давайте я объясню, что она делает.

И дальше можно запускать уже эту штуку.

Значит, смотрите, шатсен, она позволяет, тут мы указываем префикс, да, для всех компонентов, допустим.

Я думаю, префикс мы делать не будем, наверное, мне кажется, что он не нужен, да, префикс не нужен.

Что такое префикс, да?

Условно, у нас будет компонент, с вами input, допустим, да, вот input, да, вот такой компонент.

И, как вы знаете, наш замечательный Nuxt позволяет нам его импортировать.

Я про это уже говорил не так давно.

И то есть мы с вами можем делать, допустим, UI input, к примеру, да?

А префикс это то, что мы добавляем дополнительно еще спереди.

Допустим, вот тут будет префикс.

Вот это тот самый префикс, который будет ко всем компонентам прибавлен.

Мне префикс не нужен, мне хватит просто вот этого дефолтной истории, поэтому я это уберу.

Это мы тоже убираем.

Директория, где будут располагаться все наши UI components, UI.

Так, shad-scene я оставляю здесь, просто сохраняем.

Дальше, все, что мы делаем, это инициализируем наш SLI.

Будьте внимательны, ребят, когда вы инициализируете, у вас перетрется файл tailwind-config и файл tailwind-css.

Он у нас создался или нет, давайте посмотрим.

По-моему, он автоматически так и не подсоздался, у нас этот файлик.

Да, короче, если у вас есть файл tailwind.css, то он его тоже подотрет.

То есть он его перезаменит на свои стили.

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

Будьте внимательны.

Итак, запускаем npx-shad-cn-view-latest и init.

Запускаем.

Ожидаем немножечко.

Would you like to use TypeScript?

Конечно, хотим TypeScript использовать.

Выбираем next.

Либо дефолтно, либо New York выбираем стиль.

Тут, на самом деле, нужно подумать.

Нужно подумать, потому что...

Вот этот проект справа, который вы видите, да, я его в принципе делал на дефолтной истории.

То есть вы можете посмотреть различия стилей вот здесь.

Допустим, откроем какой-нибудь условно input.

Вот здесь все компоненты.

Откроем input и видим, да, вот наш email замечательно.

Это дефолтный, как видите, да.

А вот New York.

Я выберу Нью-Йорк.

Вот, он становится просто более минималистичным.

И, на мой взгляд, я, наверное, себе в этот раз выберу Нью-Йорк именно для записи этого видео.

То есть на демке был дефолт, я выберу Нью-Йорк, потому что хочу более минималистично, потому что мне потом приходилось подравнивать.

Я возьму Нью-Йорк вариант.

Тут уже тоже интересный моментик.

Давайте раздвинем консольку.

Нужно выбрать, какой будет у нас базовый цвет.

Вот этот самый тоже такой момент интересный, но нам он не сильно важен.

Вот так, если быть откровенным, потому что мы будем использовать свои цвета, но вообще у вас есть вариация, вы либо выбираете цвет, там, допустим, базовый слейд, грей, цинк, натурал и стон и так далее.

Вы можете открыть Tailwind, вот здесь у нас есть Tailwind Viewer, вот он открывается, и посмотреть, что такое слейд, вот такие тона, видите, они такие немножко синево отдают, мне кажется, или, может быть, я дальтоник, ну, короче, понял, да, есть грей вот так.

Вот такой цвет.

Есть слейд, вот такой, да.

Ну, кстати, слейд, наиболее нам подходит слейд, мне кажется.

Вот я визуально смотрю, цинк нам не подходит точно, нейчурал тоже не подходит.

Я думаю, цинк точно под наш оттенок больше подходит.

Он, видишь, он такой немножечко как будто синевастенький.

Да, нам слейд больше всех подойдет.

Слейд как переводится по-английски?

Давайте изучать вместе.

Слейд у нас это, так, только не японский, шифер.

Нифига себе.

Это шиферный цвет, прикиньте.

Я, наверное, возьму слейд, пожалуй.

Вы потом это можете поменять легко, поэтому не парьтесь особо.

И где будет располагаться ваш tailwind.css файл?

Что такое tailwind.css файл?

Это файл, в котором будут базовые стили tailwind и вся база вашего приложения, рутовский css файл, в который вы можете это менять в потенциале.

Я оставлю дефолтную историю, assets, css, tailwind.css.

Кстати, сам Nux рекомендует указывать именно в папочке assets все похожие файлики.

Нажимаем Enter, сохраняем.

Ты хочешь использовать css variables для цветов?

Вот это тоже интересный момент для цветов CSS Variables.

Тут нужно подумать хорошенько.

Объясню почему.

Потому что когда я это делал, этот проект, я за это немножко поплатился.

Если мы используем CSS Variables, он их оборачивает в дополнительный, так называемый, этот...

Как сказать?

HSL.

Я не помню, как он переводится.

Короче, в такой формат цвета непосредственно.

И это супер неудобно.

То есть, когда вам нужно пипеткой взять какой-то цвет условный, вам приходится этим всем заниматься.

Но я все равно оставлю Variables, потому что, опять же, у меня уже есть готовый проект, и я оттуда буду копировать.

Так что оставим Variables.

Но будьте внимательны, вам придется, скорее всего, переделать.

Вам будут просить HSL получить.

Вам нужно будет на HEX формат переделать.

Я вам покажу, как это сделать дальше.

Нажмем «Yes».

Located.tlwinconfig у нас, да, все верно, по дефолту.

Так, alias мы оставим так, как есть, ничего особо конфигурировать не будем.

Utils я бы оставил просто slash utils, потому что lib мне сильно нравится, я его так оставлю.

Так, дальше.

Написать конфигурационный компонент JSON-файл.

Конечно, написать это файл, в котором будет вся наша конфигурация, которую мы сейчас делаем.

Вот, чтобы потом в потенциале могли подредактировать.

Конечно, ставим yes.

Все, установка пошла у нас непосредственно.

Тут некоторые ошибки будут, это нормальная история.

Все у нас установится, обновится, и мы с вами получим готовые компоненты.

Так, давайте перейдем пока назад.

Это закроем.

И начнем с того, что поставим первый компонент, вот опустимся ниже, вот допустим, add button, добавляем кнопку непосредственно, да, вот так, возвращаемся Все, success, успешно все установлено, чистим консольку, и давайте посмотрим, что у нас получилось Он нам создал по идее, пока что ничего не создал еще, да, но как минимум ассетсы появились, вот про что я вам говорил, да, это дефолтные всякие стили Вот будьте внимательны, видите, что происходит, вот этот формат HSL

да, как его поменять, если вы, допустим, хотите установить формат hex, то есть, условно, у нас пипетка, я использую программу color slarp на маке, и вы, допустим, взяли пипетку, какой-то цвет, условно, да, и вы хотите его добавить в качестве перемены, то есть, чтобы везде бэкграунд был такого цвета, работа так не будет, чтобы оно работало, вы меняете здесь, затем идете в tailwind.config.js файлик, да, опускаетесь ниже, тут все, что он сам настроил, как я и говорил, он все перезаписывает, и вот здесь

Вы убираете HSL там, где он не нужен, и просто оставляете вар, чтобы он просто подхватывал сам цвет.

Мы это сейчас с вами тоже проделаем, потому что, опять же, повторюсь, у меня есть заготовленные цвета заранее, чтобы мы к этому не возвращались больше, но вот тоже имейте это в виду.

И, кстати, он добавляет анимацию, вот что интересно, и я в своей практике, честно говоря, Tailwind Animate ни разу не использовал, вот будет на заметку на будущие проекты.

Я не знал, что он есть, честно, ни разу его не использовал.

Надо будет поюзать.

Реально прикольная тема.

Так, к этому мы сейчас вернемся.

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

Это темные тона непосредственно.

У нас сайт будет в одних только темных тонах, поэтому здесь нечего смущаться.

И базовые какие-то моментики.

Мы тут шрифт себе поставим другой, чтобы, опять же, покрасивее все было.

Но этим займемся чуть попозже.

Давайте сделаем первый наш компонент и закончим с этой библиотечкой уже.

Значит, давайте сделаем компонент.

Так, давайте вернемся назад, копируем строчку.

Значит, npx-shade-cn-view-latest-dd-button.

Добавляем кнопочку.

Ожидаем генерацию.

Он сам нам генерирует.

И сейчас вы посмотрите магию определенную.

Напишет done.

Теперь мы смотрим, собственно, компонент UI.

И вот наш button.

И обратите внимание, что у вас теперь button вы будете импортировать прямо из своего же проекта.

Это настолько круто.

Я в React еще эту штуку не пробовал, честно вам признаюсь.

Но буду пробовать обязательно в следующих проектах, потому что реально крутая тема.

И вы видите, вот у нас e-button.

Помните, да, я вам говорил по структуре.

То есть, когда вы пишете без импортов название компонента, его можно не импортировать.

Имейте в виду, если повторяется название с файлом, то он игнорируется.

Это важно понимать.

То есть, он может делать структуру определенную.

И тем самым, чтобы вызвать наш button, нам придется как вызвать?

Давайте для теста вызовем.

Пишем UI button.

Button вот таким образом.

Наведем сюда.

Как видим, unknown.

Надеюсь, что... Точнее, правильно читается не unknown, а unknown.

Надеюсь, что у нас ошибка пока что временная.

Can't find utils.

У нас какие-то некоторые проблемы в проекте, я вижу.

Никаких utils почему-то мы не наблюдали.

Не понимаю, где они вообще, utils.

А, utils аж здесь у нас.

А-а-а.

Он utils не туда положил, куда я думал, что он их положит.

Помните, я там поменял немножечко, да, при установке, так что имейте в виду, что будет такое, я думал, что папку создаст нам Ну ладно, раз ты не хочешь, давай сами создадим папку utils и в нее уже положим наш файлик Вот сюда, оп, не понял, что ты хочешь?

Так, вроде переместилось, вроде, давайте, компонент JSON перейдем сюда еще раз, смотрим, значит, utils, слэш, utils, вроде бы все нормально

Вот тут базовый Color, который я вам говорил.

Да, Base Color, можно тоже поменять его без проблем.

CSS Variables там, ну и так далее.

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

Так.

Что теперь?

Теперь утилс, слэш, и, значит, у нас там в утилсах что идет?

Еще один утилс, да, давай так сделаем, утилс, утилс.

Так, продолжает ругаться он, давай я сделаю, чтобы, вот так индекс тест напишу, чтобы он как бы меньше ругался.

Так, посмотрим, вроде бы должно работать вот таким образом, сеанс смотрим, сеанс, все, вот так работает.

Чуть пришлось с бубном побегать, но здесь особо ничего мы не поменяли.

То есть понимаете, да, в чем прикол?

Он не видел путь, поэтому нам пришлось сделать таким образом.

Вот, и давайте рассмотрим, да, вернемся назад немножечко, рассмотрим наш компонент, из чего он вообще в целом состоит Мне кажется, кстати, шрифт крупноватый для вас, разве нет?

Что-то я как-то не подрассчитал немного Да, наверное, я обычно так, ребят, разрабатываю, вот, чуть-чуть вот так и сделаю Вот, чтобы у нас просто больше кода помещалось, сейчас покрупней шрифт немножко сделаем Вот, я думаю, так вам будет видно, просто чтобы у нас больше помещалось в экран, чтобы вам было комфортнее смотреть

Блин, надеюсь, все будет видно, я просто немного переживаю, но должно быть все прекрасно видно, зато комфортнее будет на компьютерах смотреть На телефоне сейчас можете приблизить, опять же, надеюсь, что все будет окей Так, с этим понятно, так, сайдбар окей, это окей, дальше Дальше, дальше, да, я хотел разобрать UI-баттон, вот видишь, наводим на него, опять же, unknown почему-то Хотя у нас есть UI, button, view, вот он располагается, вот наш индексный

Откуда он импортируется непосредственно экспорта идет, вот экспорт default button, да и при этом вот у нас как раз таки наша кнопочка, то есть то, что нам загенерировала библиотека сама.

Здесь мы видим непосредственно пропсы принимаются, это у нас есть вариант кнопки, есть размер кнопки, есть как, что эта кнопка будет.

И по умолчанию «WishButton» эта кнопка.

И, собственно, вот дальше есть такие классы определенные и так далее.

То есть это все, я думаю, понятен момент.

То есть на выходе мы получаем обычный компонент.

Реально, обычный компонент, который можно спокойно менять.

Стили меняются вот здесь, потому что эта кнопка вариативная с помощью класса «Variants Authority», она работает, можно здесь менять спокойно.

Так что этот момент имейте в виду.

Так, с этим понятно То есть круто, да, что мы можем менять эту историю Давай сохраним, я проверю, работает или нет Потому что у меня какие-то странные подозрения Должна работать эта кнопка Но у меня какие-то реально подозрения, что она не работает Давайте я перезагружу на всякий случай view Чтобы он лишний раз не подругивался у нас И посмотрим, что получается вообще Так, обновимся

Так, обновилась.

Кнопку я не вижу пока что.

UI-баттон, конечно же, не отобразился.

Так, да, видишь, он ругается, что нету почему-то UI-баттона.

Так, странно.

Может быть, реально я префикс, наверное, забыл, да, мне кажется, префикс.

А если баттон просто ставлю?

Да, да, ребят, проблема в том, что все-таки префикс, видимо, нужен был.

Я вам неправильно немножко рассказал.

Я не знаю, почему я про это забыл, наверное.

Давайте напишем, что «send».

Вот, да, кнопка реально работает, но она без префикса, как видите.

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

То есть если мы здесь посмотрим, не здесь, а вот именно в этом конфиге, то вот мы указываем, что где у нас префикс, и вот тут можно указать UI.

Сохраним, закроем, теперь если мы пишем UI...

то кнопочка наша работает прекрасно.

Вот, поэтому я бы рекомендовал все-таки указать с префиксом.

Мне кажется, так лучше на самом деле с префиксом.

Вот, оставим с префиксом.

Так, это понятно.

Вот такая кнопочка у нас получилась.

Крутая, минималистичная, комфортная и так далее.

Цвета мы сейчас с вами поменяем.

Ну, кстати, давайте к цветам вернемся.

Но перед цветами давайте вернемся к шрифту.

Я думаю, ну сейчас со стилями сразу все закончится, чтобы у нас все работало идеально.

Касаемо шрифта.

Значит, смотрите.

Для этого есть специальная тоже библиотека, называется NextFont.

Так, это мы оставим у себя, здесь напишем next font, next font google я напишу вот так, там специальность библиотечка у нас, по-моему, так она выглядит, get started, вот, поставим библиотечку сюда, устанавливаем, идем ниже, берем модуль,

Идем опять же в NuxConfig, устанавливаем наш модуль.

Это библиотека для подгрузки шрифтов непосредственно.

Так, сюда вставляем быстренько, вот таким образом, сохраняем.

И тут небольшие настройки нужно сделать, а именно указать, какие шрифты будем использовать, их начертания и их какие-то опшены.

Я это скопирую и вам объясню.

Вот таким образом мы копируем.

Так, возвращаемся назад.

Вот эту историю заменяем.

То есть мы берем наш шрифт и его настройки определенные.

Я буду использовать шрифт Lata.

Все шрифты можете взять из Google Fonts.

Вот касаемо шрифтов, в Next сделано гораздо лучше в React, потому что там ты можешь автокомплитом пользоваться, работать максимально круто и быстро.

Здесь не так комфортно, вам придется отдельно искать сам шрифт и его здесь указывать уже, но тем не менее работать с этим тоже можно.

Сохраним.

Вот, и, в принципе, закроем, и теперь давайте его укажем, этот шрифт, переходим сюда, во-первых, я, смотрите, как я сказал, что у нас дарка не будет, поэтому я вот это уберу просто Вот это все скопирую, точнее, будет более правильно так сделать, да, скопирую, дарки уберу, опять же, повторюсь, потому что дарка у нас не будет отдельного, и заменю вот это здесь

Сохраню.

Все, теперь у нас полностью все темное будет.

Но единственный моментик, я сразу же заменю, наверное, свои моменты.

Сейчас сюда фон фэмили поставим.

Фон фэмили у нас будет называться Lato.

И запятая sans-serif.

В случае, если он не будет работать.

Sans-serif.

Сохранимся.

Пойдем сюда.

Как видим, Lato у нас вроде бы инстализировался.

Да, он работает.

Но я вижу, что кнопочка перестала работать.

Кнопочка перестала работать, потому что мы, наверное, стили поменяли здесь.

Мне почему-то так показалось.

Что очень странно, на самом деле.

Background color.

War background.

222.

Ну, слушай, да, цвета есть.

Да, видимо, цвета не те все-таки поставились.

Ну, короче, не суть.

Это не так важно.

Опять же, у нас свои цвета будут, поэтому на это внимание обращаем.

Итак, что по своим цветам?

Я сейчас плавненько расскажу, что мы поменяли в нашей стилистике.

Из такого основного.

Я не все менял, сразу скажу.

Менял только основные моменты.

Давайте разберем.

Значит, смотрите, я поменял background, сделал его вот таким темным.

Дальше foreground — это цвет текста, я его оставил таким.

По-моему, это белый текст.

Вот видите, в чем проблема HSL-формата?

HSL — это переводится, по-моему, первую букву не помню, потом situation и lightness, по-моему, так это переводится.

Мы дальше с этим еще будем играться, я чуть дальше вам расскажу про эту историю, когда будем делать градиент наверху, вот этот вот градиент.

Мы с вами еще поиграем с этим HSL, поэтому все разберемся, не переживайте по этому поводу.

Дальше muted, ну, собственно, цвет для текста muted формата, popover, это всплывающая история карт, border и input, sidebar, цвет sidebar отдельно я указываю, да, и он также для карточек будет применяться, primary цвет основной, secondary цвет, акцентный цвет, ring, собственно, ring тоже иногда используется для обводки, и radius я ставлю по умолчанию 0.53.

сохраняем, в принципе, да, можно закрыть, да, все сделали, да, ну, единственный момент, помните, я вам говорил, что если мы используем здесь hex-формат, а не HSL, да, то мы тогда переходим в nuxt-конфиг, ой, точнее, в tailwind-конфиг, и здесь меняем, просто ручкой меняем то, что нам нужно, чтобы я сейчас все не менял, опять же, я это возьму готовенько, вставлю просто,

Так, вот так возьмем, чтобы я просто сейчас не вспоминал, что я там конкретно менял, а что не менял.

Так, берем наш замечательный Colors, вот сюда идем и вплоть до карты мы полностью меняем, вот таким образом.

Так, по-моему, скобочка лишняя, мне кажется, вот так отлично будет.

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

Короче, если будете делать свой проект, просто берите везде HSL, поставьте везде адекватные вары и не парьтесь.

Так будет максимально комфортно.

Опускаемся ниже, тут мы ничего не трогаем, это дефолтная история по умолчанию.

Единственный момент, что я хочу еще сделать, я обычно в тейлвиндовских проектах добавляю эту историю, это небольшую свою кастомную, ну, плавную анимацию, скажем так, плавный транзишн, то есть когда мы там наводим на элемент, к примеру, меняем цвет элемента, добавляем там тень при наведении, чтобы оно работало плавно уже по умолчанию, чтобы нам не приходилось каждый раз писать значения определенные, я установлю значение по умолчанию, то есть транзишн дюрейшн у меня будет 333 миллисекунды, а...

Timing function у меня будет easy in out Это эффект анимации непосредственно Вот я по умолчанию везде такое ставлю Мне нравится, как это смотрится Сохраним Так, обновимся, что у нас в итоге получается Sidebar пока что пустой Давайте его как раз таки сейчас стилизуем в самое время Напишем здесь bg sidebar А уже, кстати, написано

Но цвет я не обнаруживаю почему-то, что очень странно.

Давай посмотрим BG Sidebar.

Опустимся ниже, где наши Tailwind'овские цвета.

Опускаемся ниже.

А мы их, кстати, и не видим, насколько я понимаю.

Мы их, по-моему... А, нет, мы их видим.

Вот он.

Border Sidebar.

Вот наш цвет Sidebar.

Но он успешно игнорируется.

Ну, боюсь, что надо перезагрузить приложение, потому что что-то не так.

Что-то явно не так.

Возможно, стоит нам выполнить команду очистки кэша.

Давайте я сразу вам покажу.

Вот такая команда npx naxe client-app.

И я через амперсанты, через два амперсанта ставлю yarn-dev, чтобы сразу после очистки запустился проект.

Вот.

Ну, чтобы в одной команде две сразу выполнить.

Все, он очищается и запускается.

Давайте посмотрим, что сейчас получится у нас, какая картинка.

Да, все заработало.

Как видите, нам нужно просто очистить кэш, тогда все заработало прекрасно.

Так.

С этим понятно, кнопочка вроде бы работает, но я в ней никакого текста не вижу, потому что у нас, скорее всего, foreground что-то не назначается.

Давай посмотрим еще раз, чуть детальнее.

А, у нас цвет идет, смотри, цвет в этот идет почему-то.

А я знаю почему, потому что давай перейдем обратно в Tailwind CSS, и вот у нас есть background, есть foreground.

Вот, есть Primary, есть Primary Foreground, вот, и мы забыли, да, что Primary у нас, окей, фиолетовый, но Primary Foreground должен быть белый, потому что, ну, это то, что будет сверху на фиолетовом цвете отображаться, поэтому я вот такое, знаешь, чуть-чуть серовастенький возьму, сохраню, вот, все, теперь отобразился белый цвет.

Это в случае, если кнопка будет использоваться именно в таком формате.

Но, признаюсь вам честно, таких кнопок у нас не будет, поэтому я зайду сюда и по умолчанию установлю, что это будет значение у нас.

Вот, default variants.

Будет у нас не default, а непосредственно, по-моему, мы будем secondary использовать чаще.

Давай посмотрим secondary вариант.

Вот опять же, видишь, закэшировалось походу.

Боюсь, что закэшировалось.

Давай ему подредактируем немножечко.

Да, видишь, я вам говорю, очень важно во view кэширование.

Вот оно реально вам может помешать, поэтому выполняйте эту команду, когда что-то у вас не обновляется.

Вот я обновил, обновил, теперь все заработало.

Все, отлично.

Дальше, еще один хочу моментик небольшой сделать.

Так, у нас сейчас стоит, значит, размер сайта 125%, я сделаю ресет, чтобы он был мелким сайтом, да, и я, короче, объясню концепцию, да.

То, что вы видели демку проекта, я ее разрабатывал достаточно в крупном формате.

И я бы мог сейчас продолжить делать именно так же.

Но я потом подумал, что вы этот проект потом себе будете скачивать, и он у вас будет криво отображаться.

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

Поэтому мы его чуть-чуть изменим в сравнении с демкой нашей.

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

То есть нам просто нужно сайз сделать крупнее Просто крупнее Да, сначала попробуем такой лайфхак небольшой Я перейду сюда И попробую здесь указать фон сайз Фон сайз 20 пикселей Сохраним

Ну, собственно, мы ничего не увидим.

Что логично, оно так не работает.

Я просто думал, что он может быть отследуется от body размера, но нет.

Но нет, не так все просто.

Поэтому мне нужна буквально минутка-минутка, и сейчас я все подредактирую.

Итак, значит, что нужно сделать, ребят?

Идем в tailwind-config.

И все базовые цвета поднимем просто на несколько пикселей, на несколько поинтов.

То есть у нас есть Extend.

Это когда мы расширяем.

Что значит расширяем?

Мы не перезаписываем старые значения, мы просто на основе них расширяем.

А нам нужно не Extend,

Или нам Extend позволит это сделать, я не знаю.

То есть, смотрите, если мы, как здесь указываем, контейнер просто, то он перезапишет.

Наверное, нам лучше перезаписать.

Вот, я перезаписываю все фонсайзы.

Вот, XS такое, SM такое, Base такое и так далее.

И вот эти штуки я уже добавил от себя.

Вы можете их убрать.

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

Но для себя, в своих проектах я это использую.

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

Посмотрим, что получается теперь у нас.

Обновляем.

Опять же, мелковато все.

Не обновился кэш, к сожалению.

Придется почистить опять.

Жалко, что оно так, конечно, все кэшируется жестко прям.

И не дает нам нормально.

Может, какие-то есть другие кейсы обновления.

Вот, уже стало крупнее.

Я вижу это вот, поэтому стало реально крупнее.

Но нам нужно еще крупнее.

Нам нужно значительно крупнее.

Поэтому я предлагаю каждый элемент увеличить по размеру.

Давайте, чтобы как-то сориентироваться, я, наверное, увеличу размер сейчас SM.

Давайте посмотрим «Button».

Я хочу это сделать, чтобы просто у нас красивый сайт был.

Красивый, крупненький сайт, чтобы было все прям приятно смотрелось и можно было им пользоваться спокойно.

Значит, перейдем сюда и посмотрим, что у нас у Бата найдет по умолчанию, какой размер текста.

У него идет текст SM.

Текст SM — это, собственно, маленький размер, поэтому я сразу укажу Base.

По-моему, да, Base...

Подожди, ну бейс должен работать.

Странно, почему здесь не подсказывают, но здесь он не должен подсказывать.

Так, бейс.

Смотрим сюда.

Текст, давай опустимся, опустимся.

Текст SM все равно не обновляется.

Блин, это что-то тоже странная история, должно происходить обновление.

Так, смотрим сюда.

Да, TextBase поменялся.

Вот он у нас замечательный.

1.18.

В принципе, меня он устраивает, наверное.

Я бы поставил ему, наверное, 1.

Я, наверное, ему 1.4 бы поставил.

То есть это примерно на 15%, наверное.

Даже на 20%, да?

Да.

Я, короче, все шрифты увеличу на 20%.

Давайте сейчас за кадром я это все сделаю, чтобы вам ваше время не тратить.

Так сказать, ChargeGPT в этом случае очень сильно помогает.

Вот, ставили.

Правда, комментарий написал, ну ладно, фиг с ним, уже так оставим.

Так, обновимся.

Ну, вроде бы все заработало, но опять же, я думаю, потребуется обновление кэша, я не знаю.

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

Что-то не ладится.

Так, все, теперь оно все точно работает.

Окей, дальше пойдем.

Дальше пойдем.

Я на 20% сделал больше, я думаю, достаточно будет вполне.

Так, с этим мы порешали все.

Значит, сайтбар с этим понятно.

Так, чем мы займемся дальше?

У нас все готово.

Шрифт подгрузили, это подгрузили.

Это мы тоже подготовили с вами.

Давайте сразу сделаем кнопочку вот эту красивенькую выхода из системы, которая у нас была вот здесь.

Помните, она даже с анимацией была.

Кто заметил, тот заметил.

Поэтому сделаем здесь сразу же, наверное, button.

Button.

Это будет обычная кнопочка, которая позволяет нам непосредственно подгружать картинку определенную.

Сейчас, кстати, иконочный шрифт надо будет поставить.

И накинем определенные стили.

Вот такие стили.

Absolute, Top 2, Ride 3, Transition Colors.

И при наведении будет фиолетовый оттенок.

Так, ну даже у нас не фиолетовый, можно и Primary указать.

На самом-то деле у нас теперь Primary фиолетовым является, поэтому можно и Primary указать.

Должен работать.

Так, давай теперь укажем иконку.

Так, с иконкой, ребят, icon.

С иконочкой нам нужно поставить с вами next icon непосредственно, поэтому давайте этим и займемся.

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

Ну, потом займемся уже разработкой, когда все уже будет стоять.

Короче, есть next icon.

Значит, что я могу про нее сказать?

Это вот штука, которую предоставляет сам next, которая в себе содержит очень много иконок.

Они все берутся с сайта Iconify.

То есть вы берете, переходите на Iconify, оттуда можете все брать без проблем.

Также от Iconify есть экстеншн для VS Code, который позволяет вам подсвечивать нужные вам шрифты.

Но честно вам сказать, что это все работает ужасно.

То есть по сравнению с тем же Lucid Icons в React это все сильно слабо.

Поэтому я бы порекомендовал использовать другую

какую-то библиотеку для шрифтов, ну, для иконок на ваш вкус и цвет, опять же, я не знаю, что лучше взять, опять же, есть ли какое-то идеальное решение или нет, я его не нашел, честно признаюсь, поэтому решил использовать по умолчанию то, что предоставляет сам Nux, то есть официальную библиотеку.

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

Из-за того, что там содержит очень много, большое количество базы, то есть разных там кусочков, то из-за этого нет общего стиля какого-то.

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

Круто, когда вы используете одну, один айконсет, и из него все иконки подхватываете, это гораздо круче.

вот, ну, короче, вот такая тема, поэтому я думаю, что то, что мы используем официальную библиотеку, это, наверное, самое такое оптимальное решение, которое подойдет всем, потому что здесь особо выбора у нас и не было, перейдем в next-config, значит, дальше мы, дальше, дальше мы вставим, так, давай прямо вниз сюда укажем, next-icon, сохраним,

Закроем.

И можно нашу первую иконку инициализировать.

Как она работает в целом, да?

Во-первых, вы ставите себе вот этот IntelliSense.

Видите, здесь ссылочка есть.

Спокойно ставите.

Ну, можете перейти.

Вот так она называется.

В поиске будете, ставите.

И она вам будет подсвечивать ваши иконки.

Вы пишете название библиотеки иконок, айконсета, да?

И через двоеточие указываете непосредственно вот GitHub, да, к примеру.

Тут, кстати, рекомендую еще какой-то посмотреть такой сайт.

Я не знаю, на нем не был, честно вам признаюсь.

Ну, короче, видимо, тоже что-то, какой-то прикольный сайт.

Может быть, я его пропустил как-то.

Вот, я, короче, брал из сайта с иконкой Iconify.

Вот, выпишешь название IconSet и через двоеточие указывается саму иконку.

Давайте попробуем эту штуку реализовать.

Значит, нам нужна иконка выхода из системы.

И напомню, она у нас анимированная.

Для этого мы пишем, собственно...

Указываем просто icon, указываем просто name.

И, как видите, с помощью extension иконка сама у нас подсвечивается.

Вот, видишь, она анимирована такая красивенькая.

Ну, вот что вам нужно написать.

line.md, это, по-моему, с материала дизайна, двоеточие, logout.

Тут, чтобы нам иконки воспользоваться вот в нашем наxt, просто пишем icon и указываем название иконки.

Все, больше нам ничего здесь не требуется.

Идем сюда, обновляем.

Как видим, иконка появилась.

Вот она красивенько анимирована.

Сейчас обновляем.

Вот она красиво рисуется.

Мне кажется, конфетка.

Так, по размерчику.

Я чуть покрупнее хочу сделать явно.

Она слабенькая по размерчику.

Давайте я поставлю ей 30 пикселей.

Ну, 30 многовато.

Где-то 22, наверное, будет вполне нормально.

Так, у нас что-то по макетам.

Давайте примерно прикинем по соотношению.

Наверное, 22 окей.

Даже может быть 20.

Лучше будет поставить.

Вот так будет нормально.

И при наведении она, видишь, становится фиолетовым.

Идеально, то, что нам нужно.

По макету пока все совпадает.

Дальше нам предстоит сделать менюшку непосредственно.

Менюшка у нас должна быть как бы отдельным таким массивом, да, и по нему будем мапиться, то есть по нему будем пробегаться с помощью цикла, или вовью это не map, а for, да, с помощью v4 утилиты мы будем все это распаковывать и с помощью цикла выводить все наши элементы.

Но для начала давайте создадим наш каркас непосредственно под менюшку.

Для начала создадим саму менюшку.

Пишем здесь новый файлик, пишем menu.datum.ts.

Сначала создам интерфейс для удобства export-interface-i-menu-item.

Это вот каждый элемент меню, какой у него будет интерфейс непосредственно.

Здесь все очень просто.

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

URL тоже строка.

И icon тоже строка у нас будет непосредственно.

Вот, к сожалению, опять же повторюсь, в том же самом React, допустим, с помощью нормальных библиотек иконочных мы можем юзать вместо icon, то есть вместо string можно прям прокидывать icon type определенно.

Здесь такой нет вариации.

Опять же, возможно, я эту библиотеку иконок взял, но в дефолтной библиотеке иконок такого нет.

Это важно понимать.

И нет никакой типизации.

То есть нет, знаешь, какой-то такой базы, где нам...

давали бы подсказки, какие у нас иконки вообще в целом есть.

Наверное, это невозможно, потому что их слишком много.

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

Это реально удобно.

И сделаем саму нашу меню дата.

Export const меню.

Меню дата я напишу.

По типу будет как imenu, то, что мы указали выше, только массив.

Все, теперь здесь можно описывать наши иконки.

Давайте опишем первый пункт.

У нас будет это home, то есть icon у нас будет radix icons

Через двоеточие он вам будет подсказывать, когда вы напишите название библиотеки, название айконсета.

И у нас это будет дашборд.

Дальше запятая у нас будет name, это home.

И адрес, по которому будет открываться home URL, это просто вот такой слэш.

Вот, и таким образом описывайте каждый вот пункт, который вам нужен.

Либо там в вашем приложении можете сделать какие-то другие пункты меню.

Это, опять же, на вас вкуса цвет.

Я свои пунктики скопирую, чтобы не тратить ваше время по понятным причинам.

Значит, что мы тут сделали?

Давайте покажу.

Products у нас будет EP Goods.

Payments будет PH Contactless Payment.

Orders будет Fluent Receipt 28 Regular.

Customers у нас будет MingCat Group Line.

Фидбэк.

от Fluent, потом Setting от Radix, и вот такой Question Mark тоже от Radix.

Сохраняем, и вот теперь у нас меню Data готово.

Теперь нужно нам по этой меню Data пробежаться, и на каждой итерации вывести определенный пункт меню вот этого.

Давайте я приближу, чтобы вам было лучше видно.

Вот каждый пункт меню нужно будет вывести.

Создадим компонент меню для этого, меню .view.

И все, что мы вначале сделаем, это возьмем наш скрипт замечательный.

Жалко, что нет адекватного сниппета, который его распаковывают.

Давайте попробуем поставить другие сниппеты.

Вот чисто для разнообразия.

Может быть, реально они лучше будут.

Ну-ка, давай попробуем скрипт.

Так.

Так, пока что мне не нравится.

Давай эти отключим.

Подожди.

Давайте отключим.

Disable.

И эти оставим.

Так.

И я перезагружу все экстеншены.

Так.

Пишем скрипт.

А это вообще не работает.

Такое чувство, что он вообще не работает.

Здесь что-то надо настраивать, походу.

Или он как-то не так... Подожди.

Он, по-моему, не так работает.

Смотри.

Здесь скрипт.

V4.

Vbase.

А, здесь через Vbase.

Смотри.

Vbase TS.

Вебейс 3 ТС, 3С сетап.

Слушай, ну не суперкомфортно, знаешь, ну как бы он неплохой, но, блин, сложно.

Сниппеты должны быть короткими.

Ну вот, вот эту штуку надо брать.

Но опять же расположение, да, то есть вообще скрипт он вверху находится в новом вью.

Ну, короче, знаешь, хоть бери свои сниппеты, делай вот реально, как я в Next делаю свои сниппеты, то же самое здесь, как будто нет идеальных.

Ладно, включу все-таки эти, которые я вам в начале ролика показывал, мне их будет достаточно вполне.

Для чего я взял здесь скрипт-сетап?

А для того, чтобы мы с вами импортировали нашу менюшку непосредственно, по-другому ее не сможем забрать.

Так, стили нам здесь не потребуются, у нас будут элвиновские стили.

И дальше у нас будет div и next-link непосредственно, вот наш next-link Значит, по классу будет вот такая тема, то есть это у нас flex, item-center, паддинги, округление небольшое, чтобы при наведении было красивое округление Что будет при наведении происходить, потом еще тень добавляем при наведении, transition добавляем и margin-bottom

Вот, и тут мы будем отображать нашу иконку непосредственно и наш спан, да.

Как у нас во Vue вообще элементы вывести?

Смотрите, что вывести элемент, давайте сейчас это закомментирую пока, давайте попроще начнем, чтобы вам было все понятно и разжеванно.

Значит, смотри, здесь сделан v-form, v-form.

Здесь мы указываем item, на каждой итерации будет каждый элемент называться item.

In, откуда будет браться?

Из меню, меню дата, от которой мы краски импортируем отсюда.

Но опять же, видишь, он type импортирует почему-то, хотя это не является type, это является просто константой.

Он почему-то по ошибке это делает, не знаю почему.

Здесь ключ, не забываем, как в React тоже нужен ключ, item.name будет являться ключом.

Или можно URL, как уже на ваш вкус и цвет.

И дальше, куда будет идти сама ссылка?

To, потому что мы используем next link, помним, да?

И item URL.

Прямо сейчас я вам показал, как мы интегрируем перемены в нашем компоненте Vue.js.

То есть, что я имею в виду?

Смотри.

У нас есть переменная item, к примеру.

Неважно, где она будет располагаться.

Либо мы ее здесь создадим, допустим, const item 0.

Также мы ее можем спокойно отсюда использовать.

Без экспорта просто вот так мы ее отобразили.

Теперь мы можем спокойно ее отсюда использовать.

Либо мы можем вот здесь с помощью цикла ее сделать, к примеру.

Опять же, те, кто там любит React, не обращайте внимания.

Здесь очень много магии.

Для вас это может показаться странным максимально.

Просто успокойтесь и смотрите, что я делаю.

Это реально может показаться на первый взгляд немножко странноватым, но ничего страшного, потерпите, скажем так, да?

В этом есть свой шарм определенный.

То есть вот это так все происходит, да?

И теперь, чтобы нам переменную указать, допустим, в атрибуте в каком-то, нам этот атрибут нужно перевести в динамичный момент.

Я не знаю, как это по сленгу называется, по терминологии.

Ну, короче, мы указываем двоеточие перед атрибутом, тем самым он нам позволяет в него теперь писать полноценный переменный, полноценный JavaScript-код.

Допустим, вот item, icon.

Вот.

Вот такая тема.

И, то есть, если мы просто пишем без двоеточия, он нам не позволит это сделать.

Ну, он почему-то сейчас не ругается, потому что это, ну, короче, он как строку воспринимает.

Но чтобы это была не как строка, а как переменная, ставим двоеточие «to».

Стойте, стойте, ребят, а что это такое?

Именно вы, ребят, да?

Вы меня просили снять в прошлом ролике ролик про авторизацию.

Все пишут комментарии, Макс, где ролик по авторизации, когда он выйдет?

Уже вроде бы набрали лайк, когда он выйдет?

На самом деле, ребят, сейчас я вам скажу, когда выйдет ролик по авторизации, смотрите.

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

Я хочу провести первый в своей жизни мастер-класс.

Мы с командой его подготовим невероятно круто, качественно.

Я весь код заранее подготовлю.

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

Запись останется навсегда, так что не парьтесь по этому поводу.

Вход будет стоить 1490 рублей.

Что вы получаете за эти небольшие деньги, ребята, это прям вообще копейки.

Если бы у меня была такая возможность, я бы купил, ребят, честно признаюсь.

Короче, это мастер-класс, где мы разберем три вида авторизации.

Я полностью на примере кода, на примере реального проекта покажу вам.

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

На втором уровне мы возьмем авторизацию, уже сами ее напишем, но такую тоже простенькую.

А на третьем уровне я расскажу, как написать сложную авторизацию с использованием двустороннего токена, рефреша от CES, своего собственного бэкэнда, своего собственного клиентской части.

И вот такой у нас будет полноценный мастер-класс, где я разберу три стадии авторизации.

От простой до легкой.

То есть этот мастер-класс...

Подойдет каждому.

Он будет идти, я думаю, там 3-4-5 часов.

В среднем, да, в такой формате стрима будет.

Без отвлечений, без воды.

Сразу обещаю.

То есть вы условно платите 1400 рублей и получаете, ребят, полноценный гайд, как сделать авторизацию.

Все исходники для вас будут также бесплатно доступны.

То есть вы залетаете, обучаетесь, получаете исходники, задаете вопросы в чате.

И это прям полноценный мастер-класс, посвященный авторизации.

Что может быть еще лучше?

Я думал, какую тему можно осветить, которая нужна каждому разработчику.

А каждому разработчику нужна авторизация.

Многие из вас не умеют ее делать и не понимают, как она устроена.

Как там вот эти токены обновлять?

Как сделать так, чтобы у меня при неудачном запросе токен обновился и вернулся обратно?

Как работать с интерсепторами в Axios?

Или как, допустим, для новичков сделать вообще в целом хотя бы базовую авторизацию?

Вот эти все три стадии от простой к сложной авторизации мы с вами разберем.

То есть три проекта будет.

Напоминаю, что это реально мастер-класс, только по авторизации.

Ничего больше не будет.

Мне кажется, такой выжимки нигде нет.

Если бы я в свое время мог заплатить полторы тысячи рублей...

и узнать, как делать авторизацию, я бы отдал все просто.

И причем разбирать мы будем на примере нового Next.js 14.

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

Запись также будет доступна, так что кайфуйте, ребят.

Вот, что же нам делать, если нам нужно вывести переменную именно вот как здесь мы выводим ее в спане?

В обычном JSX в React нам понадобятся бы обычные фигурные скобки, одинарные, да, и все это дело вывести.

Здесь нужны двойные фигурные скобки, как в том же, по-моему, в Angular также используется, и в Svelte, по-моему, также используется, и вводим сюда переменную непосредственно.

Вот таким образом.

Теперь мы вывели сюда имя.

Давайте пробуем это отобразить теперь.

Как мы это отобразим?

Идем в Sidebar.

Вот наш замечательный Next Link Button.

И теперь, опять же, без лишних импортов, мы просто берем Sidebar в Layout, значит, пишем Layout Sidebar.

И сохраняем.

Посмотрим, что у нас получилось.

Пока что пусто.

Смотрим консоль.

В чем проблема?

Проблема у нас... Что-то непонятная какая-то проблема.

Давайте обновимся.

Так, смотрим сюда в консоль.

Что-то мы забыли сделать.

Так, Maximum Call Stack.

Что-то у нас не получилось.

Что-то мы упустили с вами.

Так, Layout Sidebar мы взяли.

Так, значит, Template.

Подожди, layout, sidebar, layout, sidebar, сюда идем.

А, я, ребят, заговорился, мы берем, конечно же, у нас вызовется максимум cold stack, потому что мы перевызываем внутри sidebar, еще один sidebar вызываем, так нельзя делать, поэтому здесь layout не sidebar, а меню.

Я просто заговорился с вами, поэтому пишем layout, меню, сохраняем.

Обновляем.

Как видите, вот наша менюшка появилась.

Красивенькая, нарядненькая менюшечка.

Она мельковастенькая немножечко.

Давайте мы ей увеличим размеры.

Значит, перейдем в Layout Menu.

Значит, смотри, здесь, во-первых, у нас сами айтемы.

Так, давай посмотрим, размер есть, размера нет.

Давайте, во-первых, смотри.

Во-первых, я перейду в Tailwind.

И я укажу, что по умолчанию у нас будет TextBase.

Вот так, text-base, чтобы у нас сразу был по умолчанию крупный размер.

Вот так я сделаю, чтобы они сразу были крупненькими.

Да и в принципе на меня это достаточно будет.

Я что-то думал поменять, но, наверное, достаточно мне этого вполне.

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

Чуть-чуть перебор.

Я бы в tailwind-config сюда перешел и чуть поменял бы.

То есть я бы сделал все-таки 38 где-то, здесь 46.

Так, я основные поменяю.

Дальше уже там идти не буду.

Здесь сделаю 1.2, здесь сделаю 1.05.

Сохраним.

Вот что-нибудь такое сделаю, чтобы оно хоть немножко поменялось.

Но чтобы поменялось, нужно опять очистить кэш.

Так, давайте я порт уберу.

Я порт просто тестировал.

Давайте вот так сделаем.

Просто на ксиклианап и чистим.

Я просто уменьшу размер шрифтов в целом, чтобы было поменьше.

Так, давай посмотрим, обновимся.

Ну, вот так уже стало гораздо лучше.

Вот, и между ними, наверное, отступ тоже чуть-чуть прибавить.

Слишком они приплюснуты получились.

Идем в меню.

Вместо Margin Bottom 2 сделаем Margin Bottom 2.5, к примеру.

Вот так мне нравится больше.

Все, видишь, эффект работает, все работает.

У меня почему-то курсор Pointer здесь не отображается, не знаю почему.

При этом он, скорее всего, есть.

Давай примитивно его зададим, принудительно, точнее, Pointer зададим сюда.

Не, он просто мой браузер подлогнул, то есть это не проблема в поинтере.

Видишь, у меня поинтер не работает.

Ну, окей.

Не так важно, опять же.

Давайте мы это уберем.

Так, сохранили.

Окей.

Как будто у нас теперь логотип маловастенек на фоне этой всей картины.

Давайте логотип чуть побольше сделаем, по 120.

Так, что у нас сейчас получается?

120.

Ага, это он уже крупнее стал, да?

Что-то я даже не заметил, как будто.

Вот, вот так, наверное, будет лучше.

Так, смотрим.

Вроде симпатичненько смотрится.

Правую часть, видишь, мы пока что оставили.

Ну, как вам, ребят?

Мне кажется, симпатично смотрится, достаточно неплохо.

Так, с этим мы тоже порешали с вами.

Теперь, ребята, предлагаю вам приступить к авторизациям.

Мы сначала сделаем авторизацию с вами, чтобы у нас пользователь мог войти в систему, и на основе этого мы будем уже делать дальнейшие с вами компоненты.

Потому что нам нужно сделать и загрузчик, чтобы при логине приложение стопилось, да, экран загрузки был, и чтобы все грузилось.

Ну, короче, полноценная SPA, Single Page Application.

Вот, для этого нам нужно сделать авторизацию.

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

Вот, поэтому мы, наверное, с вами займемся тем, что реализуем авторизацию непосредственно.

Авторизацию, да, но перед ней реализуем app-write, app-write-config, вот, потому что она нужна для авторизации.

Вот, а если вы, ребята, смотрели до этого момента видео, то если вдруг еще не поставили лайк по каким-то причинам и не написали комментарий приятненький, ну, если вам реально понравился этот ролик и вы хотите выразить свою благодарность, то самое время это сделать.

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

Вот, то, что получилось.

Итак, ребята, нам предстоит теперь сделать app.write.config плюс авторизацию.

Вот такие два важные ключевые момента.

Окей, здесь что нам важно понять?

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

Для этого нам нужно создать сам загрузчик, который будет на весь экран.

Помните, не так давно мы с вами добавили loader, вот такой означает loader.

Он прекрасно себя показывает, но давай теперь создадим сам компонент под этот loader.

Идем в layout и создадим сам loader.

Компонент будет максимально простым, вот в layout и сам loader, потому что он будет относиться именно к layout.

loader.view, вставляем template div class wrapper, который здесь мы описываем, image вот такой-то.

Здесь что, ну, можно alt дописать, да, для, ну, типа, для правильности, скажем так.

bg sidebar, это его фон общий, который будет, то есть, цвета сайдбара, item center, justify center, то есть, нам важно выровнять по центру наш loader.

И ширина, то есть, максимально по ширине экрана будет располагаться он.

Вот, мы им воспользуемся чуть попозже, когда займемся уже непосредственно авторизацией.

То есть, когда именно не авторизацией займемся, а когда мы займемся уже реализацией проверки, то есть самой нашей авторизацией.

Давайте для начала мы перейдем в app.write, зарегистрируемся там и, собственно, создадим первую нашу базу данных.

Напомню, AppWrite, ребята, это штука, которая нам позволит не писать бэкэнд и сэкономить на этом время.

То есть, чтобы мы вместо бэкэнда просто собрали бэкэнд на базе AppWrite и не парились.

Потому что так проект получится очень большой.

И я думаю, по времени этот ролик будет достаточно много идти.

Посмотрим, сколько получится после монтажа.

Но тем не менее.

Для этого давайте зарегистрируемся.

Переходите в AppWrite, регистрируйтесь.

У меня уже аккаунт есть непосредственно.

Я регаться повторно не буду.

Но тем не менее, создадим с вами теперь... Вот вы зарегались.

Новую базу данных.

Create Database.

Нажимаем сюда.

Создаем базу данных.

Она у нас будет называться... Давайте мы ее назовем, пожалуй... Так.

Или давай даже проект.

Проект сразу начнем другой, потому что это будет более правильно.

Давайте проект создадим новый.

Ну, вы именно так будете начинать.

Он будет называться CRM System.

Значит, next...

Рекорд.

Ну, такое название, да?

Project ID, опять же, можно менять.

Вот.

Можно под себя сделать.

Я рекомендую, наверное, под себя сделать, чтобы было комфортно, особенно для коллекции.

Мы это дальше разберем.

Я напишу краски то же самое, только в качестве ID.

Мне кажется, так будет максимально круто.

Так, create.

Все, create нашу базу данных.

Точнее, сначала проект.

А в нем уже будет и авторизация баз данных и так далее.

Так, создание прошло успешно.

Теперь мы с вами идем в, ну, можно инструкцию открыть сразу же, без проблем.

Это уже можно сделать, можно нажать веб, к примеру, да, написать наше приложение.

У нас будет приложение, собственно, так же напишу, hostname будет localhost, localhost.

Потом, когда будет деплоить, напишите свой там домен условный.

Next.

Вот что нам требуется установить.

Давайте установим app-write.

Значит, пишем yarn etc.

app-write.

Устанавливаем сразу же.

Потом мы идем сюда и, значит, копируем эту историю.

Ну, мы ее немножко по-другому сейчас реализуем.

Опять же, делаем дальше.

Вот такую штуку делаем.

Для начала давайте зададим, собственно... Так, у нас будет... Смотрите, у нас есть утилиты уже, а есть библиотечки.

Я лучше сделаю в папке lib...

Наверное, так будет даже получше, мне так кажется, почему-то.

Или давайте в утилсах сделаем, окей.

Напишем app.write.ts.

Здесь я вставлю свой код и объясню, что мы делаем.

Смотрите, во-первых, нам потребуются константы.

Да, мы их сейчас создадим.

Это там, где будут храниться все ID-шники нашей базы данных.

То есть это ID базы данных, это ID коллекции, ID сториджа для загрузки картинок и так далее.

Все это будет храниться там.

Поэтому сейчас создадим этот файлик обязательно.

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

Ну, это для авторизации, там, получить текущего юзера, там, получить его профиль и так далее.

Клиент, для того, чтобы мы с помощью него делали запросы к базе данных, то есть и к бдшке, и к сториджу, и к аккаунту.

Датабейс и сторидж для соответствующих историй, то есть датабейс для, там, получения документов, редактирования, обновления, удаления и так далее, а сторидж для записи картинок и других файлов.

Вот, здесь инсталлизируем наш клиент, new client, дальше назначаем ему endpoint, set endpoint Это у вас у всех будет дефолтный endpoint, а дальше указываем ID нашего проекта, который мы только что написали Вот он, как раз-таки вот здесь, давайте его скопируем, вот такой он ID-шник у нас идет Но опять же, я не рекомендую делать вот таким образом, я рекомендую вынести в отдельную константу А еще лучше, если будете делать на продакшен, вынесите в файлик env

Это вам так на будущее, немножко на будущую перспективу, скажем так Вот, я сам файлик сделаю прямо здесь app-constants app-constants.ts Окей, constants Вот, и здесь будем, собственно, все это дело вставлять Давайте я вставлю эту штуку Я заранее подготовил уже готовые константы, которые мы сейчас наполним просто Значит, нам нужно вставить app-write-id, вот сюда вставляем Также db-id сейчас мы сделаем и для коллекции, и для сториджа

Вот, не забыть Хотя давай все-таки оставим на место, вот так и оставлю Вот, здесь мы можем импортировать app-constants Вот, он пока что его не видит, хотя на самом деле должен видеть Но я думаю, что давайте мы сейчас сделаем с вами restart-extension-host Должно он его увидеть, по крайней мере Так, ну как видишь, да, все успешно заработало Так, отлично, app-вратность работает Дальше

И дальше, дальше, дальше.

Вот так мы базово инициализировали, обязательно экспортируем ID-шник, он нам может потребоваться.

На самом деле, по правде говоря, я его так, по-моему, и не использовал ни разу, потому что не пригождалось, знаете, у меня почему-то ID, вот полезная штука в ID-шнике, да, это ID-уник.

Но он у меня так и не работал, этот ID Unique, поэтому не знаю.

Короче, я его так, по-моему, и не использовал.

Вот можете, в принципе, его даже отсюда убрать на самом деле.

Ну, я оставлю по умолчанию, пусть висит.

Дальше делаем Next и Go to Dashboard.

Все.

Вот наш замечательный проект.

Можно перейти в авторизацию.

Она по умолчанию уже будет работать спокойно, и мы можем уже проводить регистрацию и логины в систему без проблем каких-либо.

Я вот думаю, может быть, прямо сейчас нам сделать все остальное.

Давайте некоторые настройки сделаем, перейдем в Settings.

Хотя перед сеттингом, наверное, нам бы не помешало сначала создать коллекции, чтобы к ним доступ выдать.

Короче, давайте создадим сначала коллекции.

Сразу предлагаю писать базу данных полностью для этого проекта, чтобы мы потом к этому не возвращались просто и сразу заполнили все нужные нам поля.

Касаемо баз данных, смотрите, что это такое, ну точнее, что такое коллекция, коллекция это, проще говоря, таблицы в базе данных, вам не обязательно знать бэкэнд, вам нужно знать просто основы, что это такое, то есть у нас у каждой сущности есть своя таблица в базе данных и между ними есть какие-то определенные связи, потому что, допустим, в нашем случае у нас есть deals, то есть это наши сделки и у каждой сделки есть связь и с комментариями, с comments, в каждой сделке есть свои комментарии и связь с кастомерами, то есть в каждой сделке прикреплена определенная компания, к которой мы обращаемся.

Это все вот так между собой перелинковано.

Давайте этим займемся.

Нажмем Create Database, создадим первую базу данных.

Назовем ее непосредственно Deals.

Это наши сделки.

А тут напишу опять же так же Deals и Create.

Тут можно сразу же все поменять и подредактировать.

Deals, сразу же Customers.

И comments.

Я сразу так напишу, потому что я знаю, как это все у нас будет выглядеть.

Так, что получается у нас?

Что-то не сработало или сработало?

А, сработало, просто оно хотело, чтобы мы создали непосредственно коллекцию.

Вот, коллекция создалась успешно.

Теперь мы создаем...

Или я неправильно был?

Коллекция — это немножко другое, да?

Подожди, коллекция.

Подожди, стой.

А, ребят, извиняюсь, я перепутал немножечко, заговорился с вами.

Это мы database делаем именно.

Это, подожди, это мы удаляем.

Неправильно сделал.

Вот удаляем.

Это мы сейчас database создаем, а вне уже коллекции делаем.

Это я немножко поторопился.

Create database.

Вот, database будет называться у нас, ну, условно, CRM base.

Особо думать-то я не буду.

Вот так создадим просто и сразу здесь добавим.

Это CRM base, наша database будет.

Создали сразу же, да?

И create collection.

Вот.

А теперь мы создадим коллекцию, то есть deals, к примеру.

Тут тоже делаем deals.

Значит, create.

Вот, deals создали.

Теперь он нам просит создать атрибуты.

Атрибуты — это поля в нашей таблице в базе данных.

То есть, условно, у нас может быть строковый, числовой, float, boolean и так далее.

Давайте создадим строковый.

Открой рядом еще другую базу данных, чтобы просто мы оттуда могли скопировать, чтобы мы сейчас тут особо не парились по этому поводу.

Так, удился будет «Name», «Price», «Customers», «Status», «Comments».

Давайте «Name», «Price».

Так, «Name».

Указываем размер.

Я рекомендую указывать чуть побольше, потому что, ну, разные будут названия.

Давайте 44 будем указывать, я думаю.

«Default» на «Name» у нас не будет.

То есть «Name» — это обязательное поле.

Ставим «Required» — это обязательное.

И «Create».

По такому же принципу создаем поле email.

Это наши, подожди, не email, а price, прошу прощения, price, да, create attribute, integer, price.

Минимально, ну, можно это не указывать, в принципе, я думаю, что так оставим.

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

Можно указать, если вам так хочется, скажем так.

Ну, допустим, у нас минимальный price может быть 0, а максимальный price будет, ну, типа там условно не больше там каких-нибудь там,

10 миллионов, наверное.

100 тысяч.

Раз, два, три.

Давай вот такую цифру укажем.

Больше точно.

Давай еще нолик добавим.

Больше точно не будет.

Дефолтного не будет.

Required поле обязательное.

Идем дальше.

Дальше нам еще нужно, по-моему, создать поле статус.

Оно будет enum типа.

Это важно.

И все остальное это уже идут связи.

Давайте enum выберем.

Что такое enum тип?

Те, кто стоит с криптом, не знаком.

Enum это когда мы фиксируем какие-то определенные значения полей.

То есть у нас это вроде бы является строкой, но при этом мы четко фиксируем значения.

Это актуально, к примеру, для ролей, когда мы знаем точно, что у нас есть определенные роли.

То есть, допустим, роль админ, роль студент, роль там эдитор, к примеру, да.

Или когда нам нужно в нашем случае зафиксировать значение статуса.

Статуса могут быть.

У нас 5 штук статусов.

Вот видишь, 5 штук статусов.

Это входящие на согласование в производстве, произведено к отгрузке.

Это все наши фиксированные статусы.

Я решил их сделать именно фиксированными.

Поэтому вот это называется Enum.

Здесь делаем статус.

Тут описываем те самые элементы.

Давайте откроем здесь.

У нас это «to do», «to be agreed».

Давайте писать будем to do.

Так, немножко тут to do и пробельчик.

Так, to do, пробел.

To be agreed.

Дальше у нас идет in progress.

In progress.

Дальше у нас идет produced и done.

Done это завершено.

Produced и done.

Вот такие будут у нас штучки.

Дефолтное значение to do, то есть сначала попадает в первую колонку в любом случае.

Это поле у нас обязательно.

Да, ну как бы можно не ставить обязательно, потому что to do по умолчанию идет.

Вот.

И create.

Это чисто формально, на самом деле, можно было вообще и ставить по умолчанию, без разницы, на самом деле.

Вот, связь пока сделать мы не можем, потому что у нас не с чем связывать, поэтому мы к этому вернемся.

20-дневную коллекцию.

Коллекцию комментариев.

Comments.

Тут укажем также Comments.

И Create.

Так, создали Comments.

Дальше.

Создадим атрибуты.

У атрибутов, собственно, у нас будет непосредственно вот такие поля.

Давайте посмотрим.

Это текст и дил.

Связь со сделкой непосредственно.

Давайте текст.

Это текст самого комментария.

Ну, размер достаточно большой должен быть.

То есть, типа, я поставил бы 300, может быть, даже 400.

То есть, должен быть прям большой размер комментария.

Комментарии могут быть реально большие.

Обязательное поле у нас и create.

Дальше.

А дальше нам потребуется deal.

Вот это deal замечательный.

Давай создадим наш deal.

Relation.

Two-way relations указываем обязательно, да.

И указываем, с чем будет связь.

Ну, сейчас, короче, разберемся.

Two-way relations.

То есть, есть one-way.

Давайте объясню вам, да.

Это one-way, это в одну сторону.

Two-way, это в две стороны.

То есть, туда и обратно.

Соответственно, здесь мы указываем, с чем будет связь.

Deals.

Атрибут key, которое будет имя у нас непосредственно здесь Какое будет имя поля deals, допустим Даже я, наверное, в единственном числе напишу deal, потому что это одна сделка То есть у нас комментарий может быть прикреплен только к одной сделке, важно понимать То есть связь, точнее много комментариев к одной сделке, важно понимать, то есть один ко многим Дальше comments, это будет у соседней стороны, то есть у deal непосредственно, у сделки То есть у сделки может быть много комментариев

Связь непосредственно many to one получается, да, то есть comments может содержать одну сделку, а сделка может содержать много комментариев.

Вот это правильная история.

То есть связь у нас не one to many, как я сказал, а many to one.

И дальше, что важно, мы указываем, что будет происходить при удалении документа.

То есть это классическая история для базы данных.

При удалении документа может происходить разные вещи.

То есть, к примеру, мы можем назначать null, как здесь, чтобы значение было по умолчанию.

То есть, к примеру, удаляем сделку.

Что будет происходить с комментариями?

Либо мы их также чистим.

Либо мы им ставим null, чтобы они оставались в базе данных, но при этом они не были привязаны к никакой сделке.

В нашем случае я укажу здесь каскад, чтобы удалили все документы, потому что я считаю, что комментарий не имеет смысла без сделки, потому что комментарий относится к конкретной сделке.

И нажимаем Create.

Вот таким образом, на простом примере, я сказал, как работает связи у нас в AppWrite.

Дальше.

Теперь еще один атрибут.

Так, нет, в комментариях больше нет атрибутов.

Создаем новую коллекцию.

Называться у нас будет Customers.

Customers.

Здесь пишем Customers.

Create.

Customers у нас непосредственно будет Attributes.

Create Attribute.

Name, email, avatar.url и from source.

Давайте создадим.

Name и email будут обязательными.

Значит, name.

Размер будет, опять же, 40.

Required, да, обязательное поле.

Customers — это наши клиенты непосредственно.

Email, также 40.

Тоже required поле.

Create.

Дальше.

У нас идет avatar.url.

У него по умолчанию будет уже определенная картинка.

Давайте ее сейчас к себе скачаем для начала.

Вот, вы можете любую другую поставить картинку, особо здесь разницы нету, что вы будете ставить.

Так, давайте мы укажем аватар URL.

Для начала загрузим картинку, то есть идем в Storage, значит, Create Bucket, создаем, да.

Здесь пишем, опять же, тоже Storage, и здесь делаем тоже Storage.

Ну, я не знаю, на самом деле, как здесь правильно написать.

Я напишу так.

Давай здесь также напишем storage.

Storage.

Вот наши, кстати, агишники готовы уже к этому моменту.

Теперь дропнем сам файлик.

Create file.

Choose file.

И выбираем файлик.

Вот наш файлик по умолчанию.

Create.

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

Я укажу, что все, собственно, любой может читать файл, а любой юзер, all users, может и создавать, и обновлять, и удалять файл.

Update.

Все.

То есть, понимаете, да?

Чтобы у нас не было такого, что, допустим, люди не могут просмотреть файл.

То есть, все они могут смотреть файл, но редактировать его никто не может и удалять.

Это важно.

Ну, здесь другие есть настройки, это уже не касается этого ролика, скажем так.

Все, вот мы эту историю сделали.

Теперь возьмем ссылочку.

То есть как это можно сделать?

Ссылочку взять.

Перейдем сюда, файл URL и копию URL.

Так, посмотрим.

Да, копия работает.

Теперь перейдем назад.

Идем назад, назад, назад, назад, назад, назад.

Возвращаемся сюда.

Теперь create attribute string avatar URL.

Вот, здесь мы указываем размер Ну, так же даже пусть будет 50, наверное Мне кажется, что 50 будет окей

Только даже, знаешь, не стринга, я немножко неправильно сделал, а тут есть специальное такое поле URL.

Вот, нам даже оно нужно больше.

То есть здесь указываем аватар URL.

Дефолт value будет вот такое.

И, в принципе, все.

Сохраняем.

То есть по умолчанию у нас уже будет аватарка определенно стоять.

Дальше создаем еще новые атрибуты.

From source, то есть откуда нас нашли.

И дальше связь со сделкой.

Откуда нас нашли, размер может быть также 40.

Это необязательное поле.

Создаем.

И еще один атрибут, последний, это связь, relations.

Связь будет у нас, так, customer с этим будет, получается, two-way relations.

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

У этого будет, значит, у customer будет сделки, даже одна сделка, да.

Я все-таки хочу сделать так, чтобы у одного customer была только одна сделка.

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

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

Я сделал так, что одна компания имеет с нами одну сделку, одну большую сделку, поэтому я напишу deal, а там будут собраться, будут customers непосредственно.

Хотя, подожди, у нас связь немножко неправильно здесь шла, связь немножко неправильно была.

То есть смотри, у меня была связь money to one, это неправильно, я вам только что про другое сказал.

То есть customers могут иметь одну сделку, сделки могут иметь много customers.

Но по факту сделки...

Сделка, да, может иметь только один тоже, поэтому это будет one-to-one.

То есть, кастомер имеет одну сделку, сделка имеет один кастомер.

Вот так.

Тогда это кастомер вот так сделаем.

Все.

При удалении будет удаляться.

То есть, удаляться будет.

Create.

Хорошо, вот такие атрибуты у нас получились непосредственно у кастомера.

Так, нам осталось перейти в сделку.

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

Теперь у нас с вами, ребят, полностью готова база данных.

Есть коллекции полноценные, комментарии, напомню.

Давайте покажу еще раз, комментарии есть.

Есть кастомеры непосредственно, вот наши клиенты, есть сделки непосредственно, вот наши сделки.

И есть непосредственно авторизация, которая у нас пока что еще не рабочая.

Давайте перейдем в сейдинги и посмотрим, что по авторизации.

Значит, у нас есть метод авторизации, есть по номеру, по Magic URL, по GVT, по email паспорту и так далее.

Тут очень много всего можно подключить, вплоть до Яндекса, вплоть до Твича, что угодно подключать, кайфуйте и так далее.

Реально штука удобная.

Вот, значит, и теперь, да, хотелось в сеттинги перейти, это очень важно на самом деле, потому что в таких вот всяких сервисах, если вы это не настроите, вы потом будете не понимать, почему у вас не работает код Переходим в settings, дальше опускаемся ниже, и вот тут важный момент Опускаемся, опускаемся, точнее не здесь, а где он находится, давайте посмотрим

А может вообще не здесь, а может в самой базе данных.

Давайте посмотрим базу данных.

Выберем базу данных.

А вот если в базу данных зайдем и settings.

Или скорее всего в коллекции по отдельности.

Давай в кастомеров зайдем.

Да, да, я был прав.

В каждой коллекции по отдельности находится.

Допустим, зайдем в кастомеры, опускаемся ниже.

И тут мы указываем, собственно, кто может иметь доступ к кастомерам, кто может их редактировать.

Я укажу, что все юзеры.

Все юзеры могут редактировать, все делать.

То есть у нас система такая, что каждый юзер, который зарегистрирован, он уже, так как мы делаем изначально админ-панель, то он уже может ей пользоваться.

Поэтому вы на свой вкус и цвет можете выставить права свои, которые только захотите.

Но потом имейте в виду, что когда у вас будет юзер авторизирован, важно, чтобы у него были те или иные права.

Так что этот момент не забывайте.

Значит, здесь будет «All users».

Так, так, так, так.

Также удаляем, да?

Точнее, выбираем.

И то же самое для... Так, мы для кого сейчас делали?

Так, для комментов осталось.

Комментарии тоже могут писать абсолютно любой юзер.

Давайте сделаем так, так, так, так.

Эта штука невероятно здесь удобно сделана.

Лучше, чем в страпе, допустим, в той же самой, поэтому я рекомендую.

Так, все, с этим понятно.

Так, это тоже понятно.

Теперь, теперь, теперь.

У нас в этом плане все яичнички подгрузились.

Все готово.

Ну, можно переходить к форме авторизации, наверное.

Мы app.write.config закрыли.

Теперь нам предстоит сделать саму авторизацию, поле входа и так далее.

Давайте этим займемся.

Мы до сих пор, до текущего момента, еще не создали ни одну страницу.

Прикиньте, у нас все работает вот так вот через app.view.

Давайте, пришло время создать нашу страничку, а здесь поменять наxtvelka на что-то другое.

А на что-то другое я имею в виду на next page непосредственно.

Пишем next page.

И теперь сюда вовнутрь будут грузиться наши, хотел сказать, картинки, наши страницы.

Те, которые будем сейчас указывать здесь.

Все, что касаемо роутинга.

Создаем новую папочку.

Пейджи сам называется.

И в пейджи у нас указываются все страницы.

Опять же, в начале ролика мы это разбирали в документации.

Но давайте сейчас мы с этим более подробно коснемся.

Для того, чтобы создать главную страничку, мы создаем новый файл и пишем индекс.

view.

Это наша главная страница.

Давайте я такую базовую накину в верточку для нашей страницы.

Какой-то скрипт, в котором будет очень много скриптов у нас в будущем, и view query, и так далее.

Template и наш HTML-код.

Здесь будет заголовок.

Я напишу, что это у нас будет, значит, я не знаю, мы на русском, вы писать не на русском, я вот пока что еще думаю, как нам лучше это сделать.

Давайте на русском будем писать Хотя опять же у нас сайт такой мультиязычный получается Давайте я напишу CRM System By Red Group Вот так я напишу Я не знаю, потому что как лучше писать То есть где-то я хочу на русском, чтобы было более понятно Где-то нет, короче так оставлю Все, это касаемо странички Теперь переходим, проверяем, обновляемся Должно заработать Вот видишь, все, CRM System By Red Group Все прекрасно работает

Окей, с этим я думаю понятен момент.

Так, что дальше?

А дальше нам нужно сделать страничку входа в систему.

Что важно, страничка входа в систему должна показываться без сайдбара, сайдбар показываться не должен, то есть он должен быть скрыт непосредственно.

Для этого мы должны кое-какие условия прописать.

Давайте этим тоже плавненько займемся.

Для начала сделаем саму страничку, пока что не опираясь на sidebar, просто отдельно.

New file, напишем login.login.view.

Это будет страничка входа.

Давайте я скопирую эту всю историю, хотя она мне потребуется, но тем не менее я скопирую.

Вот это закроем и тут будет наша страничка входа.

Значит, из базового каркаса я делаю flex-item-center-justify-content, минимальную высоту и ширину.

Это я хочу сделать просто такую рамку, и посередине будет формочка прямо по центру страницы.

И вот та самая формочка.

Я ее округляю, бэкграунд делаю как у сайтбара, ширина у нее 1,4, то есть там 25%, паддинги и, опять же, заголовок.

Посмотрим, как это выглядит.

Все, давайте перейдем в страничку логина.

Login, слэш, логин, и вот она, наша страничка логина.

Вот наша будущая форма.

Давайте инициализируем саму форму.

Смотрите, я в этом проекте, давайте делаем форму без экшена, я в этом проекте вам покажу специально две вариации реализации форм во Vue.js.

То есть одну покажу обычную, без использования сторонних библиотек, вот сейчас мы ее будем делать, а вторую покажу наоборот, с использованием сторонних библиотек, которые предоставляет hook.use.form.

Это называется Vvalidate библиотека.

То есть я попробую и так, и так, чтобы у вас было две вариации, как вы могли это все использовать.

Чтобы у вас был и такой путь, и такой путь.

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

Ну и все.

Теперь мы пришли к тому, что нам не хватает UI-компонентов.

Нам нужны поля.

Нам нужны поля, которых у нас нет.

Давайте их сгенерируем.

Для этого вспомним, где наша команда замечательная.

Так, опускаемся сюда и ищем нашу вот npx-shad-cn-view-lattice-dd-button.

Меняем button на input.

И генерируем наше поле непосредственно.

Ожидаем некоторое время.

Наше поле должно вот-вот появиться.

Вот оно и появляется уже.

Постепенно вырисовывается.

И все.

Все успешно у нас готово.

Теперь давайте его инициализируем сюда.

UI.

UI input.

И его вот таким вот инициализируем.

Значит, у него, во-первых, будет placeholder.

Как видите, смотрите, в чем прикол.

Вот вам прикол в UGS.

Из-за того, что магия, среда разработки не понимает, что происходит.

Опять же, в AppStorm, скорее всего, такого не будет.

Но вот в VSCode будете готовы с этим смириться.

Смотрите, вот я сейчас сделал компонент, да, и пишу, видишь place, а он не понимает, а что за place, а я хочу написать placeholder, а он его просто не видит.

Что в таком случае делается?

Идем command-shift-p, restart-extension-host, перезагружаем все экстенши на виз-коде, ждем какое-то время, и вуаля, ничего не работает, да, и вуаля, ничего не работает, подожди, а почему не работает?

Не, это заработало, нужно заново написать просто.

А, все равно это не работает.

Прикинь, все равно не работает.

Хотя он подгружает все верно.

Ну ладно, давай мы не будем тогда его слушать.

К сожалению, без автокомплита сегодня.

Placeholder.

Здесь у нас будет непосредственно e-mail.

E-mail.

Не забываем указать также type.

Type у нас будет также E-mail.

Сегодня без подсказок, ребят.

Это в UGS с этим все нормально, не парьтесь.

Так.

И класс я сделал MB3, то есть margin-bottom 3.

Давайте посмотрим, что вообще получилось у нас в целом.

Так, пока ничего не вижу здесь.

И давайте сразу, видишь, у нас, как сказать, у заголовка страницы нету title.

Как видишь, нету title.

Давай его назначим сразу же.

Тут два варианта, на самом деле, как видите.

Там можно, там по документации мы сегодня чекали, можно использовать либо useHead.

Вот таким образом, да, useHead.

Опять же, импортировать ничего не нужно, пишем title просто и пишем, допустим, логин.

Вот, title, логин указываем, смотрим сюда, обновляемся, и у нас вообще все сломалось.

Вообще прям полностью сломалось.

Давай мы его еще раз переобновим.

Что-то ему не нравится, что-то идет не так, боюсь, что нужно кэш было почистить.

Что-то он сразу мне не понравилось, как он заработал.

Он компонент не прочитал почему-то.

Вот, теперь все прочитал, теперь все работает.

Не знаю, это прикол в UGS, а точнее Naxt.

Не знаю, что с этим делать, честно вам признаюсь.

Но вот такая история.

И будьте внимательны, видите, у нас куча вордингов.

Потому что мы посоздавали ссылки на страницы, а самих страниц нет.

И в идеале вам их создать.

Вот, чтобы они просто не висели здесь, вам не ругались лишний раз.

Я думаю, это тоже сделаем, чтобы у нас просто вордингов не было лишних.

Как видим, тайтл подгрузился.

Вот вверху тайтл готов.

Вот, логин.

Можно, допустим, так написать, CRM System Вот, для красоты просто, вот можно так сделать, к примеру Можно еще отдельную функцию вынести, это все использовать, как хотите Вот, либо второй вариант делаем через UseSeoMeta Я не понял, честно, в чем их разница по документации Ну, то есть и так, и так работает Есть еще серверная часть, UseServerSeoMeta Но будьте внимательны, он работает только в том случае, если у вас компонент работает на серваке Если нет, то работать не будет

У нас приложение под клиент полностью заточено, поэтому серверная часть работы не будет Я оставлю, пожалуй, SEO-мета, пусть он будет висеть, и все, вот поле подгрузилось То есть, видишь, у нас в приложении такая ситуация, что поле пришлось нам очистить кэш, чтобы NUX заново все прочитал и все заработало Не знаю, вот такой баг нашего проекта Видишь, вот сейчас оно все работает, все подсказки работают

Теперь давайте, собственно, посмотрим, как во Vue.js у нас происходит двустороннее связывание.

То самое двустороннее связывание, почему хвалят Vue.js именно новички.

Потому что, напомню, чтобы в React нам связать поле, давайте объясню, что такое.

Смотрите, нам нужно как-то получить значение input.

Мы не можем, как в обычном JavaScript, просто сделать там document.getElementById и получить value.

Мы так сделать не можем.

И нам предстоит в таком случае, ну, типа, будет неудобно, короче.

То есть, ну, так делать нельзя.

Вот так я скажу.

Во framework так делать нельзя.

Поэтому в реакте мы создаем отдельное состояние, его связываем с полем, и тем самым, когда мы поле переобновляем, меняем состояние, у нас автомат меняет состояние.

И в конце концов мы имеем каждый раз новое значение, и каждый раз мы имеем актуальное значение того или иного поля, чтобы в дальнейшем его отправить, допустим, на авторизацию, на логин, на регистрацию и так далее.

Это момент понятен.

Во Vue.js делается гораздо все проще.

Во Vue.js мы просто делаем двустороннее связывание.

То есть нам не нужно связывать руками эту всю историю.

Вы пишете лишь одну, там, условно, цитату, да, одну строчку, и у вас все уже работает.

Покажу, как это все обстоит во Vue.js.

Смотрите, значит, опускаемся ниже, пишем const email ref, ну, название на ваш вкус и цвет.

Дальше ref указываем, да, во Vue.js.

Опять же, ничего не нужно импортировать.

Опять же, по поводу импортов, насколько я понимаю, это только работает в Nuxt.

Если вы пишете на обычном view, у вас автоимпорты работать не будут.

Пишем ref и указываем по умолчанию пустое значение.

Все.

Теперь можно его спокойно связать.

Связываем его максимально просто.

Идем просто в input и через обычные классические...

ViewModel, мы просто делаем связь, вот такую, все, связь готова Опускаемся, пишем поле, вот оно наполняет спокойно И мы спокойно можем читать сразу же Допустим, давайте его послушаем, во View слушать поле можно с помощью email Слушаем, либо отслеживаем, другое слово здесь можно подобрать, да И давайте его будем читать, когда будет оно меняться, email.ref Теперь идем сюда, Inspect, смотрим консоль, открываем

Чистим эту всю историю.

Когда мы пишем, видишь, оно сразу же нам появляется.

Вот наше поле.

Во view будьте внимательны.

Видишь, оно в каком формате вам показывается?

Потому что view — это реактивное поле.

То есть оно не отдает вам напрямую значение, как в React.

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

При этом, если вы используете eml.ref вот здесь, в шаблоне, .value писать не нужно.

Сохраняем, обновляем.

Пишем что-нибудь здесь.

Как видишь, вот оно заполняется.

Все успешно, все спокойно работает.

Хорошо.

Касаемо этого понятно, я думаю.

Все, watch можно убрать.

По такому же принципу создадим другие поля.

У нас это будет поле еще параллельно password, password.ref и name.ref, поле для имени, name.ref.

Вот.

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

Давайте раз, два и хватит.

Здесь будет у нас непосредственно password, password.

Здесь type тоже password.

тоже mb3, vmodel, тут уже делаем password, ну и таким образом заполняем другие поля, да, вот окней.

Окей, внизу делаем две кнопки рядом друг с другом, для этого делаем div общий, да, чтобы у нас был flex, и между ними было расстояние, с помощью гэпа делаем, и сами кнопки, ui-button, значит, первая кнопка это будет логин непосредственно, тут вариант указываем secondary, но у нас по умолчанию secondary, поэтому не имеет смысла его указывать, и важно указать type-button, type-button.

Вот, чтобы у нас они адекватно работали.

И дублируем, то же самое делаем для регистрации.

Потом мы сделаем на них событие клика.

Пока что мы к этому не возвращаемся.

Вот, все, вот наши кнопочки работают.

Вот, прекрасно все отрабатывает.

Как видите, у нас маленькие паддинги.

Я специально, отличается, да, от того, что у нас было в превью, в демке, да, потому что, ну, я захотел минималистичные кнопки, поэтому выбрал стиль Нью-Йорк, который подразумевает маленькие паддинги.

Вот логин, регистр, все прекрасно работает При наведении эффектов, к сожалению, нету по какой-то причине Их можно добавить, в принципе, если мы перейдем в button в index.ts И перейдем вот сюда, вот secondary При наведении у нас bg.secondary становится просто 80 Мне это вообще не нравится в корне Поэтому пусть будет при наведении Допустим, так Slate Подсказок здесь нет, конечно же, у нас Slate 500

Плохая история, не работает Давай мы сами прикинем, попробуем что-нибудь здесь прикинуть Примерный цвет какой-нибудь Так, так, так, так Где наш цвет замечательный?

Вот он, цвет наш замечательный Так, вернем сюда и чуть его подукрасим Вот таким, вот таким цветом я сделаю Это будет при наведении То есть это будет BG, вот такой цвет при наведении

Ну, опять же, мы не увидим изменений, потому что нужно очистить кэш.

Я не знаю, что с нашим происходит реально.

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

Что-то шляпа какая-то.

Мне кажется, Hot Reload не работает в каком-то смысле.

Не знаю, короче, вот, видишь, теперь работает, вот, только после обновления Так, оставим, как видите, у меня курсор Pointer по всему приложению работает, а баг, видимо, браузера, не знаю Особо не суть, скажем так, не суть Теперь давайте сделаем уже запрос к серверу, но перед этим сделаем проверку небольшую Нам нужно проверить, на самом деле, ввел ли человек в наши поля какие-то данные или нет Потому что иначе смысл отправить на сервер пустые поля

Смотрите, ребят, какая тема получается.

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

Значит, что я хочу сделать?

А я хочу сделать, короче, состояние, то есть наш стейт-менеджер, потому что...

Смотрите, нам важно хрень где-то юзера.

То есть мы могли бы условно, и возможно это излишне, то, что я сейчас буду делать.

Ну, во-первых, я хочу показать вам на практике, как работать со стейт-менеджером Pinia, потому что все его используют во Vue.js, и я думаю, что странно было бы сделать ролик про Nux и не использовать стейт-менеджера, потому что вам это нужно было для практики в ваших проектах.

И, возможно, это реально излишне.

То есть, по большому счету, мы можем получать нашу текущую авторизацию просто за счет обращения к нашему серваку и получения текущей сессии.

То есть, можем взять наш app.write, сделать там, выполнить просто метод, который называется там, по-моему, getCurrentProfile, что-то в этом формате, и получить текущего юзера.

Как бы вроде бы все окей работает, да?

Но я хочу пойти дальше.

Я хочу все-таки записывать это все в наше локальное состояние.

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

Но при этом у вас будет практика, как нужно писать State Manager.

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

И которое мы можем использовать в своих компонентах.

Поэтому давайте воспользуемся Pinia.

Давайте перейдем, ее сначала настроим.

Pinia на Extreme.

Давайте поставим ее сюда.

Так.

Смотрим здесь.

Пишем yarn etc.

И поставим пиня.

На самом деле, мне она, знаешь, так, не то, что понравилась, но я обожаю стейт-менеджеры, которые минималистичны.

Я уже устал от этих редаксов всех.

Как вы знаете, я проект давно уже на редаксе не пишу.

Я пишу в основном на жуштанде, либо на ютай.

Уже устал от этих всех тяжеловесных, ненужных никому вот реально стейт-менеджеров.

Просто можно взять спокойно вот эту историю, да, пиня, и кайфовать, наслаждаться и так далее.

Дальше, что мы делаем?

Дальше мы, это нам не нужно делать, да, это мы пропускаем, это если вы npm используете, вам это нужно указать, вот, я использую ялт, поэтому не паримся, берем pinia.next, идем в наш любимый конфиг, то есть next.config, идем дальше вот сюда и вставляем наш pinia, pinia.next, сохраняем.

Далее, что мы делаем?

Опускаемся ниже, и тут написано, как вообще им пользоваться.

Ну, я думаю, что это нам уже излишне.

Нам некие провайдеры не нужны, в принципе.

Да, и мы можем уже... Я вам сам все покажу, как все будет обстоять.

Единственное, ребята, что я сделаю, это перейду в NuxConfig и кое-какую настройку еще поставлю.

Опустимся ниже.

Для пини я укажу, где будут храниться все наши сторы.

То есть наш стор глобальный.

Stores.dears и указываю, что сторы будут храниться в папке store, что логично.

Создадим эту папочку store.

У нас будет несколько сторов, то есть, ну, как бы один стор, несколько стейтов, скажем так, состояния.

То есть, у нас будет состояние для авторизации, где будет храниться текущая авторизация, где мы будем понимать, мы сейчас вообще авторизированы или нет.

Вообще, я говорю слово авторизация, и правильнее говорит слово аутентификация, но оно просто сложнее произносится, поэтому я говорю авторизация.

На самом деле, конечно, более правильно аутентификация, потому что аутентификация отвечает именно за вход в систему, а авторизация отвечает за проверку ролей пользователей, то есть, когда мы делаем проверку на роли, это авторизация.

Но

опять же, я говорю авторизация просто потому, что это проще говорить, и все это слово знают больше, чем аутентификация.

Поэтому перейдем в Store, создадим наш новый Store.

Для начала идем в Store, напишем, что aufstore.ts, запускаем.

Сначала я, как человек, который пришел с React, обожаю писать интерфейсы для наших Store, потому что я не могу, я ненавижу просто, когда у нас нетипизированный Store, и мы не понимаем, что в нем хранится.

Поэтому опишем первый интерфейс.

Собственно, он будет очень простой, iaufstore,

e-mail, name и string, ой, и статус, да, это все, это вот базовые поля нашей авторизации, то есть мы имеем e-mail нашего непосредственно пользователя, который уже в системе, его имя и его статус, все, больше нам от него ничего не требуется, если вам нужно, добавьте сюда другие какие-то поля, но опять же вы можете к нему иметь доступ через базу данных в немножко ином виде, то есть, короче, я потом покажу эту историю.

Вот.

Статус будет себе хранить либо человек в системе, либо он не в системе.

То есть, либо он авторизирован, либо нет.

Вот и все.

Это будет статус у нас.

Мы его потом чуть-чуть поменяем, опять же.

Значит, по умолчанию какое будет состояние?

По умолчанию состояние будет следующее.

Мы берем default value, указываем, что тип у нас user в объекте, объект, в котором есть user, да, и в нем уже указываем, что у нас будет email пусто, name пусто, а статус false.

При этом и в таком положении мы понимаем, что по умолчанию авторизации у нас нет.

То есть, человек по умолчанию будет не авторизирован.

Вот это важно понимать.

Потом в будущем мы с вами в лояуте сделаем так, что у нас при загрузке приложения будет проверяться авторизация и сюда она будет записываться автоматически.

Так что это мы чуть позже сделаем.

Теперь как делать сам Store и как вообще идет к нему обращение.

Мы создаем свой хук.

Пишем export const useAufStore.

Тут вызываем функцию defineStore для описания Store.

DefineStore.

Вот таким образом.

Видишь, импорты не работают, потому что мы в Vue.js и в Nuxt.

Я про это вам и говорил, что TypeScript работает здесь просто ужаснейшим образом.

Видишь, я не могу вызвать импорты.

Я не знаю, откуда брать и так далее.

Приходится идти и ручками все писать.

Хотя я, видимо, неправильно написал.

Подожди, тут, по-моему, не нужно его писать.

Давай мы поменяем add missing function.

Сейчас, подожди.

Так, стой.

Сейчас.

Define store, да.

Я define букву перепутал.

Define store.

Так, смотрим сюда.

А, все работает.

То есть, по-моему, молчание работает.

Окей, ладно, нагнал.

Извиняюсь, в этой ситуации нагнал.

Дальше мы указываем название нашего store, то есть ключ, авторизация.

И дальше мы указываем наш объект, в котором мы будем описывать то, что будет в нашем store.

Во-первых, описываем текущий state.

State

Он у нас будет по умолчанию вот такой, default.value.

Это то, что по умолчанию.

Стрелочная функция, отдаем default.value, вот этот default.value.

Все.

Здесь это наш state по умолчанию.

То есть то, как у нас будет он выглядеть по умолчанию, то есть без авторизации.

Понятно, да?

Мы это уже разобрали.

Дальше.

Мы можем тут описывать как и getter, так и action.

Что такое getter?

Все боятся этих слов, там, гетеры, сеттеры и так далее, в классах еще у нас-то было, все так боятся, новички не понимают, потому что запугали вот всякие там IT-блогеры, да, ну, вот этими словами сложными, непонятными и так далее.

Сейчас я вам объясню, что такое гетеры, что такое сеттеры.

Максимально все просто, здесь нечего запугиваться, они звучат сложно, как, знаешь, как раньше у нас были декораторы также звучали, там, что-то еще, какие-то, я уже забыл, как это, вот, помните, в сагах у нас было, как это называлось, я не помню.

Тоже все звучит максимально сложно.

На самом деле, когда ты на практике все это пробуешь, оно, на самом деле, очень просто.

Поэтому getter мы описываем тогда, когда нужно что-то получить.

То есть, к примеру, я могу описать getter, сейчас мы его опишем, для получения текущего статуса авторизации.

Чтобы мне каждый раз не брать, допустим, user, там, user.status, там, равно, false,

Ну, я утрирую сейчас, да, ну примерно.

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

Давайте его сделаем.

Пишем getters.

Так, getters.

Указываем, что у меня будет.

Я хочу получать isAuf, это будет моим getter.

Здесь беру state.

И если state в boolean значение переводим с помощью двух восклицательных знаков, если у меня state.user.status,

это и будет являться нашей авторизацией, то есть мы переводим в boolean, то есть если он есть, то он как бы есть, да, и на самом деле в boolean можно не переводить на самом-то деле, да, если так быть честным, в boolean можно не переводить, оно и так будет работать, потому что и так является boolean, вот, а setter это то же самое, что, ну здесь setterов, по-моему, нету, да, это setter, да, здесь setterов нет, они по-другому здесь, они здесь больше как экшены выступают, setter это то же самое, что getter, столько getter мы получаем, а setter мы назначаем, мы обновляем какое-то значение в нашем классе, это является setterами,

Но в нашем случае это называется экшенами.

У меня будет два экшена.

Экшен для очистки нашего стейта, в котором мы берем this, то есть обращаемся к текущему this внутри объекта.

То есть this сейчас у нас обращается внимание к this внутри этого объекта.

Берем this.

И у него есть замечательный патч, который мы можем вызвать и тем самым поменять наш текущий store.

У нас будет default value.

То есть мы обратно возвращаемся к нашему значению по умолчанию.

Это будет экшен очистки.

Чтобы потом мы легко могли вызвать clear и очистить наш стейт.

Дальше мы берем set А set это для краски для более простого назначения Для более простого изменения нашего состояния Помните, вот принимать какой-то input, какие-то данные Которые должны быть по типу, как вот этот eye-off-store И тут все мы просто назначаем this

патч, также берем, только уже берем юзера непосредственно, да, юзер будет назначаться на input, все, вот, то есть мы просто с этим наше значение, еще раз, получаем input, который по типу, как вот наш store, вот эти поля мы получаем, и их потом перезаписываем, их обновляем, вот наш set, сейчас давайте так сделаем, поставьте на паузу, вот это все изучите, поставьте на паузу, сделайте такой же абсолютно, ну, чуть его изменив под концепцию, да,

более простой стор, который будет отвечать уже непосредственно не за авторизацию, а за глобальный лоудинг.

Помните, я вам говорил, что у нас вот это есть лоудинг, да, помните, вот этот лоудинг?

Вот это, да, красивенький.

Он будет грузиться при, допустим, мы хотим в каком-то месте сайта его запустить, и чтобы он там запустился.

То есть, условно, у нас будет глобальный store, который мы могли контролировать.

Вот сделайте store для этого loading, который будет просто два иметь состояния.

True, false.

Все, boolean значение, true, false.

Вот поставьте на паузу и попробуйте сейчас разработать эту всю историю.

Вот так должно у вас получиться.

Use is loading store.

Я пишу обычно is всегда, да, чтобы было понятно, что это boolean значение.

Дальше называется он is loading.

State is loading true по умолчанию.

И при сете мы просто назначаем сюда boolean.

Все.

Максимально все примитивно и просто.

И потом мы еще с вами сделаем еще один store, но это будет чуть потом.

Для выпадающего меню, для выезжающего меню, помните, который у нас будет выезжать.

Потом мы его тоже разработаем, поэтому не забывайте про этот момент.

Здесь возьмем наш самый user's loading store, который мы уже только что инстализировали.

И опять же, как видишь, он его не видит.

Я не знаю, что у меня происходит.

Давай я попробую заново поставить наш проект.

Я сделал rm, rf, node-modules, почищу, да, и запущу yarn заново.

Переустановлю проект.

Возможно, что-то поменяется, потому что у нас какая-то, ну, лажа.

Видишь, нам приходится каждый раз сбрасывать кэш.

Когда я разрабатывал проект на Vue, вот первую версию, да, у меня такого не было ни разу.

То есть, да, нужно было иногда перезагружать, но это было там пару раз, скажем так.

Прям такой нужды не было в перезагрузке никогда.

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

Что-то как будто не работает.

Я не знаю почему.

Вроде бы в U мы все, ничего не выключали, все вроде бы работает.

Честно, не знаю.

Мы сейчас сюда сразу закидываем два хука, use из loading store, то, что мы только что сделали, да, и мы уже имеем это состояние здесь для понимания, когда будет идти загрузка.

Ну, точнее, не загрузка, а здесь мы будем ее как раз-таки включать, нашу загрузку, чтобы у нас появлялся лоадинг на всю страницу, чтобы человек не замечал, когда будет происходить изменение страницы, чтобы он просто не висел на форуме, когда идет долгая загрузка.

Для нас это актуально, потому что у нас сервак очень долго отвечает.

И роутер.

Роутер для чего мы берем?

Роутер мы берем для того, чтобы мы в потенциале сделали редирект на другую страничку.

То есть, когда человек успешно вошел в систему, его нужно перенаправить успешно на главную страничку сайта.

Поэтому указываем роутер здесь.

Нужно сделать логин и регистрацию.

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

Давайте их создадим непосредственно.

Мы будем регистрацию делать и логин через AppWrite, напомню.

Давайте это позакрываем лишнее.

Вот сюда, да.

Вот наш AppWrite, который уже полностью у нас готов.

И уже готов принимать себе авторизацию.

Напомню, здесь можно авторизацию делать разными способами.

Как через e-mail пароль, так и анонимную, так и через телефон, Team Invites, Magic URL, GVT.

огромное количество разнообразия.

Там и Apple, и Amazon, и даже вплоть до российских есть, даже Яндекс.

То есть в этом плане все очень сильно круто, и мы можем использовать то, что вам будет по кайфу вообще.

И даже Stripe есть.

Так что, кому надо, чекайте.

Вот, кстати, наш сайт выглядит таким образом, да, почему-то.

Давайте сейчас мы его запустим.

Видимо, я его выключал вчера перед уходом.

Так, давайте перезапустим, посмотрим, что у нас по сайту сейчас.

Ну, хотя там у нас все стабильно, да, мы уже это все видели, тут все стабильно.

Так, давай мы напишем const login.

Я сделал стрелочную функцию, можно сделать и обычную функцию, разницы особо здесь нету.

Обязательно делаем ее асинхронной, потому что мы будем работать с сервером, да, и нам нужно отслеживать, точнее, ожидать ответа от сервера, поэтому нужно async await использовать.

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

Для этого мы создали с вами глобальный loadingStore.

Давайте его зададим из loadingStore.set.true.

Все, вот наш метод set, который мы указывали вчера, вот он, да, принимает себя boolean и просто его записывает в state.

Вот, из loadingStore.set.true.

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

Больше, поэтому мы с вами и сделали экшены Теперь делаем await, ожидаем, да, от сервера И выполняем функцию, которую нам предоставляет app.write То есть делаем client, точнее не client, а аккаунт Точка, значит, create И вот видишь, да, есть create анонимная сессия, там email сессия, jvt, magic url, ooof, фон и так далее Мы с вами возьмем непосредственно email session И вводим сюда email и пароль У нас уже они подготовлены, email.ref и name.ref

Не name.ref, а password.ref.

Это касаемо полей.

Но опять же, они так не будут.

Нужно через value указывать, как я говорил уже до этого момента в этом ролике, что если вы используете здесь внутри реактивные переменные, нужно писать .value.

Но если вы их используете где-то вне в HTML, можно писать просто вот email.ref.

Дальше.

Мы хотим смотреть, что сделать.

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

Но мы хотим все-таки, как я и говорил, поработать немножко со State Manager, со своим локальным, да И хотим туда добавить состояние о том, что мы человека залогинили в систему Для этого нам нужно выполнить еще одну функцию к серверу для того, чтобы получить текущего юзера Пишем const response, то есть ответ, да Пишем await и указываем, значит, account, опять же, get session Вот, получаем текущую сессию

Прошу прощения, можно без get session, можно просто get написать, и тогда мы тоже получим сессию текущую.

Давайте вверху обозначим, вот у нас есть loading store, добавим сюда также наш store, который из авторизации.

Вот он, useAufStore.

Тут можно также его написать, в принципе, чтобы было понятно, что это именно он.

И он нам потребуется для записи.

Если ответ есть какой-то,

Если все-таки данные приходят, то мы должны записать это дело все в Store.

В Store, на самом деле, максимально просто записываем, берем Store, потом берем .set, наш любимый, и заполняем по очереди, там, email, name и status.

Я возьму все поля отсюда, response.email, response.name, response.status.

Все, это все, что у нас приходит.

Вот, тут даже написано userStatus, pass true for enabled, false for disabled.

Вот, то есть у нас все уже полноценно готово в этом плане.

В конце что нам нужно сделать?

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

Для этого мы выполняем email ref value, пустое значение, password тоже пустое значение, name тоже пустое значение.

Мы полностью все обнуляем.

Дальше делаем push.

Смотрите, push, вот так можно делать push, вот так.

Да, не многие из вас знают, но push является промисом на самом деле.

Некоторые новички думают, что push это не промис, но как видите, push является промисом.

Поэтому нам в идеале его дождаться.

И только потом выключить загрузчик непосредственно, потому что иначе это будет неправильно.

Мы дождемся, а потом уже выключим загрузчик.

Вот такая функция у нас получается.

Давайте еще раз разберем.

Значит, смотрите, есть состояние у нас, да, состояние наших полей, то есть там текущий email, пароль и имя.

То есть это вот те данные, которые мы ввели.

Есть глобальные сторы, глобальные хранилища состояния, скажем так, да, данных каких-то локальных.

Есть общая загрузчика, которая будет вешать лоадинг на весь сайт в состоянии загрузки.

И есть ауф-стор, который отвечает за текущую авторизацию на проекте.

Есть также роутер непосредственно.

Значит, здесь роутер нужен для пуша.

Дальше мы инициализируем функцию логин.

Вешаем сначала загрузчик на весь сайт.

В момент, пока грузится загрузчик, мы создаем сессию Create Email Session.

Дальше мы получаем текущий аккаунт, непосредственно его записывая в наш стор, чтобы спокойно к нему иметь доступ и чтобы немножко добавить практики по Street Manager'ам.

Дальше сюда мы назначаем пустоту для того, чтобы обнулить поля все.

И дальше мы делаем редирект, то есть перенос на главную страничку со странички авторизации и выключаем загрузчик.

Все.

Осталось теперь сделать регистрацию.

Давайте скопируем отсюда.

Здесь будет называться регистр.

Регистр.

Окей.

Сделаем await.

Опять же берем аккаунт.

Тут уже смотрите, если здесь мы брали аккаунт get, здесь брали аккаунт create email session, то здесь мы берем уже аккаунт create.

Нам нужно создать сначала аккаунт.

Вот, это для регистрации именно.

Тут передаем user ID какой-то определенный.

Опять же, как я и говорил, для этого буду использовать библиотечку uiid.

Ярн, это d, u, id.

Окей.

И также yarn add сразу же, минус d, types Сразу types поставим для этой библиотеки, она будет требовать Все, ставим библиотечку UID Так, быстренько ее сразу же импортируем

Опять же, мы могли бы использовать... Помните, мы с вами брали ID unique?

Вот этот вот ID unique.

Берешь ID, там у него точка unique есть метод.

Но, опять же, он у меня нестабильно работал почему-то.

Не знаю, может, потому что еще в бете находится сам app-write, и бывают какие-то баги.

Ну, короче, у меня прям ID-шник не генерировался именно, и я решил сделать его сам.

Опять же, они это сами пишут в документации, что вы можете либо наш использовать, либо свой.

Я буду использовать свой.

Вот тут мы пишем you... Так, давай.

From...

UID.

И тут мы указываем, по-моему, V4, да, мы берем.

Уже, кстати, V5 есть, нифига себе.

Я что-то и не туда.

Как V5 выглядит, кстати?

Может его воспользоваться?

Что-то я уже и не туда UID.

А ну-ка, V5, что это такое?

Что-то я как-то и забыл эту историю.

Так.

Ладно, не будем запаривать, сейчас тратим время на эту историю.

Короче, напишите в комментах, в чем отличие.

Вот, кто шарит.

Возьмем UID, четвертую версию.

Инициализируем его сразу же.

Он будет генерировать нам просто рандомную строку ID-шник.

Все, нам этого достаточно вполне.

Дальше принялся email, password и name.

Name, причем поле не обязательно.

Я бы вообще его в форме убрал на самом деле.

Но как кому нравится, скажем так.

Можете его оставить, в принципе.

Можно убрать для минимализма, можно оставить, тут уже как бы на ваш вкус и цвет.

Так, password.ref и name.ref.

Опять же, потом я покажу, как можно работать с формами немножко по-другому.

Когда мы будем делать добавление там карточки какой-то определенной, там будет чуть поинтереснее.

Но пока что вот таким образом.

И везде добавляем value, не забываем этот моментик.

Value и .value.

Отлично.

И после успешной регистрации, вот когда мы ожидаем, да, мы можем спокойно выполнить с вами логин.

То есть делаем await и выполняем функцию выше.

Просто логин выполняем.

Так, только логин смотрите.

Смотрите, мы могли бы в логин передавать прямо сюда, да, вот email.ref, но так у нас есть такой как бы локальный стейт, я могу прям целиком сюда закидывать сразу же без принятия аргументов лишних.

Поэтому нам здесь даже просто можно вызвать опять же логин, у нас уже все данные есть без проблем Так что это очень удобно на самом деле Теперь у нас есть и регистры логин, осталось их привязать к конкретным кнопочкам Как идет привязка во Vue.js?

Через собаку, клик, тем самым вешайте событие какое-то определенное Я буду вешать сюда логин, а сюда я буду через собачку клик

Клик, вешать сюда регистр.

Регистр.

Отлично.

Сохраняемся.

Так, ну и по идее должно все сработать.

Мы, к сожалению, проверить сейчас прям полноценно не сможем.

Нам нужно еще кое-что поднастроить.

Но, тем не менее, предварительно можем посмотреть.

У нас, опять же, никого сейчас загрузчика не будет.

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

Эти warning мы уберем чуть позже.

Нужно просто страницу создать и все.

Давай, допустим, попробуем регистрацию произвести.

Пишем test.ru.

1, 2, 3, 4, 5, 6, 7, 8.

Здесь 8 символов нужно обязательно.

И, значит, напишем «акс».

Так, регистр.

Видишь, как долго сервак отвечает, то есть очень долго вот ждем, ждем, ждем, вот только сейчас запрос ушел.

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

Смотрим сюда, видите, произошло три запроса, аж целых три запроса.

Значит, первый запрос у нас был на, собственно, да, посмотрим, какой он запрос.

Так, это на сессию, да, а это на аккаунт.

Значит, на создание аккаунта у нас был запрос.

В ответ мы получаем наш ID-шничек.

Вот, кстати, можно посмотреть, вот такой ID-шник я сгенерировал, видите, за счет UI ID.

Чуть выше, наверное, еще поднять нужно.

Ну, там, я думаю, плюс-минус вам видно, о чем идет речь.

Так, давай это уберем.

Случайно отрезок выбрал не тот.

Вот так, да?

Потом мы e-mail получаем сессию текущую.

Вот превью, вот наша сессия.

Он наш браузер говорит и так далее.

И дальше вот наш аккаунт непосредственно, да?

Наш аккаунт вот такой.

Еще раз мы его получаем.

Окей.

С этим, я думаю, понятненько все.

Запрос идет успешно, ну, как видите, передрессация тоже сработала.

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

Вот, но можем пойти дальше, использовать наш Store.

Опять же, для того, чтобы мы попрактиковались немножечко со стейт-менеджером, да, использовать наш Store непосредственно.

Поэтому, ну, как бы, и такой, и такой вариант хорош.

Наверное, я бы нативку все-таки использовал, да, эту историю, да, которую он предоставляет.

Но, опять же, в рамках этого видео, так как это видео, ну, скорее всего, наверное, может быть последнее, ну, мало будет видео на канале по Vue.js и по Nux, поэтому я должен был охватить максимальное количество технологий рядом с ними.

То есть тот же Pinio я должен был использовать.

Поэтому я оставлю таким образом.

Но, опять же, знайте, что вы можете, в принципе, использовать просто аккаунт, где-то не париться.

Теперь нам предстоит, собственно, перейти в наш лейаут и повесить тот самый загрузчик.

Загрузчик на страницу.

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

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

Это только для тех, кто уже в системе.

Давайте сделаем эту историю.

Откроем дефолт здесь.

Импортируем все нужные нам моменты, основные, да, то есть это аккаунт app.write.

Вот аккаунт app.write.

Так, у нас все правильно, да, app.write здесь находится.

Опять же, это мы уже с вами делали.

Берем наш стор глобальный, этот и этот стор для отслеживания.

Берем роутер для редиректа.

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

И теперь что важно.

Я хочу, чтобы у нас действия определенные происходили при маунте компонента.

То есть у нас компоненты, как вообще в разработке, в SPA-приложении, как происходят.

Компоненты могут монтироваться и размонтироваться.

То есть когда они вот инициализируются, это называется монтирование компонента.

Так он появляется.

И вот нам нужно как раз при этом событии отслеживать нашу авторизацию.

Поэтому пишем событие onMounted.

То есть это аналог в реакции юз эффекта При монтировании, да?

Так, здесь переборочило немножечко Тут не забываем асинхронность добавить, асинг, да?

И не забываем также добавить try-catch Для отлова ошибок И finally обязательно, finally Значит, finally мы сразу же выключаем наш загрузчик То есть из loading store false Глобальный, да?

Ну, опять же, мы это уже делали, поэтому здесь, думаю, объяснение не требуется лишнее

Давайте сейчас посмотрим наш сторм.

Да, мы видим, что по умолчанию у нас загрузчик уже включен изначально.

То есть нам его нужно только выключить, поэтому он уже изначально у нас будет включен.

Так.

Выключить.

Дальше здесь при ошибке мы сразу же выводим роутер push и на страничку авторизации, потому что это логично.

Если ошибка выпала, значит человек не в системе.

И тут мы выполняем сам запрос.

Получаем нашего юзера с помощью того, что мы уже делали await account get.

Получаем нашего юзера.

И если юзер есть, то мы записываем его в store.

store.set нашего юзера.

Вот таким образом.

Посмотрим сюда.

Да, будет правильно вот так записать его без фигурных скобок.

Сохраним.

Еще раз, давайте посмотрим, что мы проделали.

Взяли два store глобальных для загрузки, общего загрузка экрана нашего, для store авторизации непосредственно, для редиректора роутера взяли.

Дальше что мы делаем?

Мы с вами при монтировании компонента выполняем асинхронную функцию, стрелочную.

Дальше тройкетчем отлавливаем ошибки и при финале, то есть при любом из результатов, то есть неважно, это будет ошибка либо не ошибка, мы всегда выключаем загрузчик.

Если ошибка, редиректим на логин пейдж, если нет, то тогда...

Мы с вами получаем нашего текущего юзера и спокойненько записываем его в наш замечательный стор.

Теперь, помните, мы с вами делали loader.

Вот он наш loader, очень такой простенький, примитивный и так далее.

Можно, кстати, nuxt сюда повесить, nuxt image можно повесить без проблем.

Он будет кэшировать, будет чуть-чуть получше на самом деле.

Давайте оставим его таким образом.