FULL FIREBASE SETUP 2022. ALL CRUD + Registration, authentication, Database. Vue.js web application.
HTML-код
- Опубликовано: 5 авг 2024
- By the way, the current video is still relevant for working with firebase, since they haven’t changed it in any way in three years (I am writing this in 2022)
--------
In an hour and a half, we will fully connect our application to Firebase. Setting Registration, login and authentication, displaying errors and displaying loading. Connecting and configuring realtime database. Let's continue creating a full-fledged web application and bring everything to mind;)
--------
🚀 Thanks to your support, new videos are coming out:
tocode.ru/support/
--------
This is the final video, with a complete firebase setup.
⏰ Time codes:
00:00 - entry
03:40 - Selecting a database
04:30 - Setting up the database
07:03 - Connection
09:49 - User Store
12:59 - User registration
20:08 - Common Store - error output / downloads
24:56 - Common Store - analysis
32:00 - Login, authentication
34:26 - Protecting routes
38:12 - Session support
41:22 - Hide links + Logout
48:46 - New tasks
56:53 - Loading tasks
1:05:01 - Output tasks for a specific user
1:08:23 - Editing tasks
1:20:39 - Deleting tasks from the database
1:24:36 - RESULT AND CONCLUSION
Repository (all commented) - github.com/vedees/timelibrary
UPD: Link to the branch - github.com/vedees/timelibrary... everything that was done in the video is in it!
-----
🚀 New course on vue.js 3 - tocode.ru/r/v3-ytid
Enter promo code "Timelibrary" and get a fat discount :)
And one more course, but still relevant for view 2 - tocode.ru/r/v2-ytid
-----
► VK group, where I publish various news:
tocoderu
--------
SOURCE:
github.com/vedees/timelibrary...
goo.gl/s6S16V - Link to the commit
--------
UImini framework (updated 2022) - uimini.github.io/docs/
--------
Questions about the video, ask in the comments, and we can chat in groups:
► Add as a friend - id261337424
► VK group - tocoderu
► Telegram - t.me/jackcoder
![Налог на незнание JavaScript - [Hamster Kombat]](http://i.ytimg.com/vi/PTdUmkT-yas/mqdefault.jpg)
Я ждал, бро! Спасибо!
в порядке, не бросай только.
Интересное видео. Спасибо!
Плюс в копилку знаний! Спасибо за видео!
рад, что помогло)
Спасибо за серию уроков Jack.
Кстати под конец, когда мы удаляем все таски, в экшоне loadTasks мы ловим ошибку, что мол мы не можем сконвертировать null or undefined в объект, по хорошему это бы пофиксить но я просто убрал throw err и вывел как console.info :D
Все абсолютно предельно ясно, автор разъяснил великолепно! Хотелось бы больше видео от него, так как подобные встретить сложно.
Единственное, что я не понял, это что такое "commit" и "payload", они везде используется, но я не пойму его сущность...
Этот курс я записывал еще в 2018. Для новичков он норм, gulp + stylus - все еще актуален, но все же здесь вью-2, а там уже третья версия вышла.
Поэтому я хочу пригласить вас на новый курс по VUE.JS 3 - tocode.ru/r/v3-ytic
🚀Введи промокод "Timelibrary" и получи жирную скидку :)
Текущее видео, кстати, все еще актуально для работы с firebase тк они за три года его никак не поменяли (пишу этот комент в начале 2022)
Это завершающее видео, с полной настройкой firebase. Вот тайм коды:
3:10 - Настройка входа
3:40 - Выбор базы данных
4:30 - Настройка базы данных
7:03 - Подключение
9:49 - User Store
12:59 - Регистрация пользователей
20:08 - Common Store - вывод ошибок/загрузки
24:56 - Common Store - разбор
32:00 - Логин, аутентификация
34:26 - Защита роутов
38:12 - Поддержка сессий
41:22 - Скрываем ссылки + Логаут
48:46 - Новые таски
56:53 - Загрузка тасков
1:05:01 - Вывод тасков для определенного пользователя
1:08:23 - Редактирование тасков
1:20:39 - Удаление тасков из бд
1:24:36 - РЕЗУЛЬТАТ И ЗАКЛЮЧЕНИЕ
Репозиторий (всё прокомментировал) - github.com/vedees/timelibrary
UPD: Ссылка на ветку - github.com/vedees/timelibrary/tree/old-vue в ней всё то что делали в видео!
Смысл только снять новое видео про тоже самое, только с SSR - вот это будет действительно стоющий контент.
Все круто! Спасибо за видосы. А ты работал с nuxt? Если да, хотелось бы видео по этой теме от тебя, хотя бы кратко)
Да, обязательно это маст хев инструмент)
Текущее видео, кстати, все еще актуально для работы с firebase тк они за три года его никак не поменяли (пишу это в 2022)
Насчет это:
Поменяли они особенно конфигурацию подключения.
Jack спасибо тебе за видео, благодаря им ознакомился с vue js, но можешь все-так подробно описывать моменты, которые ты порой перескакиваешь, написал тут, скопировал оттуда, подредактировал там(конкретно говорю про момент со временем 1:08:23 ). Вроде более-менее понятно, но допустим у меня просто было несколько таких моментов, что просто терялся, и в консоле постоянно эрроры были, пока просто не открывал коммит на гитхабе и не копировал оттуда, конечно же с разбором, что куда, и в этих моментах просто теряется внимание. Плюс это будет полезно для ребят которые так же как и я знакомятся с vue.js.
Спасибо за эти уроки.
плюс не знаю почему title в таске(название фильма) все равно не прописывается, исчезает
Спасибо, приятно слышать!
Да, будет намного подробнее в курсе - tocode.ru/curses/vuejs-s-nylya-do-pro/ и также по остальным видео тоже уже наловчился в объяснении)) тайтл в таске возможно не заносится в бд либо наоборот - не выводится из бд тут только консоль лог)
Как подключить firebase на vue3? Если в main.js теперь createApp и created() не получается использовать
Приветствую. Очень интересные видео. Только начинаю изучать Vue. Возник вопрос: Вместо Fire Base можно использовать RESTful Api любого движка? Я так понял тут мы подключаемся напрямую к базе данных?
привет, да. даже к firebase можно обращаться по rest. Без установки в проект. Только формируя запрос-ответ
Спасибо Вам за проделанную работы, очень полезные видео.
Однако, хотел бы внести замечание: во vue есть прекрасный алиас "@", который направляет пользователя прямиком в папку "src". Очень помогает, когда приходится следить за иерархией директорий в проекте: не приходится раздумывать, сколько точек надо поставить, чтобы перейти к предыдущим папкам.
Cryo Brand и вам спасибо за отзыв) да я про него толи забывал толи он плохо работал на cli 2
I have an error Uncaught TypeError: (0 , _firebase__WEBPACK_IMPORTED_MODULE_1__.useAuth) is not a function
Чет не совсем понял, при выполнении find() на 1:19:30 мы получаем указатель на элемент в массиве или новый массив? Как ты просто отредактировав объект task отредактировал и стейт? Или оно так и работает?
вроде как просто данные приходят по новой, когда редактируется таск, если я правильно вспомнил
Помогите ошибка при установке firebase
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! grpc@1.19.0 install: `node-pre-gyp install --fallback-to-build --library=static_library`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the grpc@1.19.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
И может быть сделаете видео примера общения приложения vue через Rest api? Было бы очень интересно посмотреть
Я записал курс, в котором 80% это работа с api в том числе и REST. Так же работа с rest firebase, JWT, Cookie и еще много всего интересного)
tocode.ru/curses/vuejs-s-nylya-do-pro
Спасибо за отличную инструкцию, все по полочкам.
Вопрос: получается, что любой залогиненный клиент может получить данные других юзеров. Как это можно на сервере ограничить? Ведь POST запрос можно и подделать, вытащив конфиг firebase из приложения.
В файрбейз есть конфиг, если покопаться можно все защитить, я этим не стал заморачиваться тк видос итак длинный получился. Еще можно брать токен с помощью которого можно не заморачиваться с конфигами и тп, а об этом я рассказываю в курсе tocode.ru/curses/vuejs-s-nylya-do-pro
Привет, а можешь подсказать, как реализовать загрузку определенного таска? Т.е. чтобы только таск с конкретным id выводился. Уже измучился просто это пытаться реализовать(
sonorasorrow вот курс, в нем рассматриваем это на примере постов да и ещё очень много интересного) tocode.ru/curses/vuejs-s-nylya-do-pro/
Привет, слушай, пожалуйста, сделай ролик со сборкой проекта в продакшен и хотингом его, потому что подобного очень мало где есть
Ок, в след видео вместе с обзором покажу как залить на продакшен
объясните, пожалуйста, а чем заключается простота добавления юзера через вспомогательный класс? почему не передать в коммит uid юзера напрямую?
1-хорошая практика.2-у юзера может быть также дескрипшен, фото, ник и тд это проще делать так
Здравствуйте! Обращаюсь и к автору канала, и к подписчикам. Если есть цель углубиться в нюансы и работу Vue подойдёт ли курс и насколько проекты для портфолио схожи с реальными проектами на работе в компаниях?
Если есть те, кто хочет пройти курс или уже проходит, напишите пожалуйста и расскажите о своих впечатлениях.
стоит! =)
7:24 что-то этой кнопки больше нету кажется. Где теперь конфиги для веба взять?
Теперь это в Настройки проекта - Добавить веб приложение
Во время установки npm i firebase задолбался с проблемами установки. То зачем то питон был нужен, то одна приблуда ему нужна то другая. Все установил следуя инструкциям на просторах интернета и нифига! Не хочет ставиться firebase ((
У фб есть апи, с которым легче общаться и никаких приблуд ставить не нужно. Можно использовать стандартный феч ну или аксиос. Просто rest api в текущих видео был бы слишком тяжелым, поэтому я оставил это на курс (ссылка в описании), если будет интересно узнать больше
@@tocode также перерыл весь инет, firebase не ставится хоть убей. В поисках решения наткнулся на это видео. Jack, i need help please!!!
Хасан Мухамеджанов у меня было что-то схожее, попробуй:
1. Обновить ноду
2. Установить fb через флаг g
3. Использовать sudo
Если не поможет то пробуй удалять старые пакеты и пробовать ставить по новой
Спасибо, очень содержательно. Такой вопрос, сейчас получается, что на клиент выкачиваются все таски всех пользователей, просто показываются отфильтрованные по ид юзера? Т.е. если в firebase будет 100000 тасков, каждый клиент будет их выкачивать, или я что-то упустил? Также можешь ли рассказать о назначении ролей для пользователей в firebase, по типу "админ", "модератор", "просто юзер" и т.д.?
Клиенту будут отправлены только его таски. О ролях все просто, можно либо юзеру задать доп поле админ, которое будет фолс по умолчанию и в файр бейс задать ему тру. Также как тут я делал проверку на юзера делать проверку на админа и там уже открывать либо админку либо новые функции.
@@tocode Спасибо, в какую сторону думаешь двигать канал и думаешь ли?
@@artempushkarsky8924 Если наберется аудитория то да, а так мне это особо не нужно)
Тогда зачем их фильтровать по id пользователя? Мне кажется - надо на сервер делать запрос по id, потому как фильтровать тысячи тасков на клиенте - дорогая операция
@@TheKoloky уже был фильтр тасков и это самая простая реализация
Курс огонь!)
Но почему-то не работает поддержание сессии на 38:12
Уже не первый раз такую реализацию вижу и все равно при обновлении страницы перекидывает на логин и снова нужно логинется. Может быть это потому что у меня ссылки отображаются на двух разных лейаутах. А не на одном, как у тебя регистрация и логин.
Andrey Goryushin привет, спасибо! Способ самый простой поэтому он везде используется)) я не помню как это фиксил, но в каком-то коммите было. Лучший способ хранить токены - в куках. такой способ безопаснее и слетать не будет)
@@tocode Спасибо за ответ!))
Способ простой не спорю, но видимо он уже не работает :(
По крайней мере у меня точно.
Добрый! Скажите, а не опасно ключи хранить в js файле, их же может прочитать злоумышленник?
в фб другого способа по моему нету, только увидел ваш комментарий)
@@tocode так это опасно? Ведь, как я понимаю, любой может взять ключ, подставить в свой скрипт и получить доступ к бд. Или не ьудет работать с другого домена?
@@boomrest хранить ключи в js это всегда не безопасно, но у фб нету другого варианта. А так да, в настройках базы данных можно указать, что читать данные могут все, а вот делать записи только указанные домены. (либо закрыть read/write для всех других доменов)
Ни хрена не понятно но очень интересно, что такое mutation action stetLoading getter? и т д
Блин у меня какая то хрень получилась с роутингом. Когда home страницу перезагружаешь он в любом случае перенаправляет на /login. Хотя в стейте записано, Что checkUser: true. А когда не перезагружаешь а просто по роутингу через навигацию следуешь то все ок.
только что заметил, что и навигация не сразу отрабатывает, изначально показывается только Login и Registration из за того, что у нас checkUser по дефолту false и из за этого beforeEnter и отправляет меня постоянно на /login. Может для модуля user сделать какой нибудь computed который отрабатывал бы быстрее этот checkUser ? (чисто мои догадки) Прошу Jack ответь!!! Сам тоже что нибудь попытаюсь.
Jack нашел выход, нужно инициализировать Vue внутри метода onAuthStateChange
firebase.auth().onAuthStateChanged( user => {
if (user) {
store.dispatch('loggedUser', user)
}
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
})
Это получается потому что проверка залогинен ли пользователь не асинхронная. Скрипт пролетает этот момент, не дожидаясь ответа от firebase и в этот момент проверка на isAuth возвращает false и тебя кидает на логин, думая что ты не залогинился) Потом когда приходит ответ от сервера, статус пользователя меняется.
@@timurkhudiyev плез хелп, а где мне тогда ставить async await? что бы он дождался ответа от сервера
@@MultiVINTAG Я сам не очень большой знаток, но можно попробовать в хуке created в главном экземпляре vue в main.js
сейчас уже так не подключишься к ним
Прозвучит глупо,но у меня нет папки store ( время 10:00)
Там в 4 видео было его настройка, нужно установить vuex и создать эту папку) или проблема в другом?
Блин чет ты вобще все в этот компонент Task засунул, можно было хотя бы модалку с редактированием в другой компонент распихать.
С полным распределением по ui это было бы +30% времени всех видео, а из метрики я вижу, что чем дольше видео, тем больше людей "отваливается". Поэтому для таких вещей есть курс tocode.ru/curses/vuejs-s-nylya-do-pro с полным погружением во вьюшку и более 25 часов практики)
Ебать, запрашивать таски всех пользователей , а потом фильтровать их js'ом, что бы показать только созданные пользователем, это нечто)) так наверное даже на заре интернета не делали
Данные подключения к базе данных, не когда не стоит показывать в публичной части. И запрет с других доменов не поможет, потому что реферер можно подменить, у вас должна быть какая то серверная прослойка, которая не будет доступна публично иначе вы подарите доступ к свое базе данных
Дизлайк, всё поменяли уже 9 версия вышла
Для firebase и Vue есть много похожих уроков Этот тоже не плох! Хочу предложить осветить интересный фреймворк adonisjs.com/ на русском мало информации а функционал интересный с миграциями баз данных MySQL,PostgreSQL,SQLite3 и веб сокетами в коробке!
Ок, посмотрю