React & Firebase БЫСТРЫЙ КУРС real-time ЧАТ с авторизацией через Google
Вставка
- Опубліковано 24 чер 2024
- В этом курсе мы на практике рассмотрим такой крутой инструмент как FireBase, научимся авторизовываться через Google и взаимодействовать с базой данных.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Ссылка на исходный код - github.com/utimur/firebase_re...
Таймкоды:
00:00 - Введение
01:12 - Ядро приложения, постраничная навигация
07:00 - Material UI и верстка
12:45 - Подключаем Firebase
14:40 - Авторизация с помощью Google
21:00 - Страница чата
25:20 - Взаимодействие с БД. Коллекции. Сохранение\получение сообщений
31:40 - Время ставить лайки и оставлять комментарии =)
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469 - Наука та технологія
Как же круто, ни нудной вёрстки не по теме, только функционал, спасибо тебе!
Именно такой контент я и стараюсь делать, спасибо друг!)
@@UlbiTV Привет, при созданий папки, я использовал базовую комплектацию, и у меня нету индекс.нтмл ( 7:16 ), мне стоит начинать все с начало, или есть другой путь?
i guess it's kind of randomly asking but does anyone know of a good place to stream newly released movies online?
@@UlbiTV тебе спасибо
С недавних пор, этот канал стал для меня главным источником прокачки тех. скиллов, максимальная выжимка полезной и практичной информации в коротких и понятно изложенных роликах, все супер, успехов бро!
Блин, оч приятно друг) Спасибо за поддержку!
Присоединяюсь к каждому слову!!!
Афигеть я только firebase подумал, а тут оно. Не канал а бомба )
Спасибо Андрей!) Стараюсь!
Красавчик, очередной супер-полезный видос. Когда появляется какая-то задача которую я не знаю, всегда иду на этот канал.
Дай бог здоровья.
Спасибо огромное за твой труд!!!! Очень полезное видео. Кратко, четко, понятно, доходчиво.
еще днем видел репозиторий с курсом, дождался теперь видоса)
Ого, кто то замечает мои репозитории на гите))
Быть не может, я как раз сейчас делаю проект с firebase.... Вчера вечером как раз сидел и думал, вот бы видео вышло новое какое-нибудь, а тут два в одном, сейчас буду смотреть!!! Спасибо огромное!
Ты думаешь также как я, или я каждый раз угадываю твои мысли?))
@@UlbiTV ахахаха, ну это прямо очень веселое совпадение было:))) тут не хватает вставки из кунг-фу панды: случайности не случайны:)))
Switch и Redirect больше не работают, такой подход устарел и у вас вылезет ошибка. Исправить это можно следующим образом, вот аналогичное решение, но с использованием нового подхода и синтаксиса:
return user ? (
{privateRoutes.map(({path, Component}) => (
))}
) : (
{publicRoutes.map(({path, Component}) => (
))}
)
Теперь Route нужно присваивать уникальный ключ, а вместо Redirect мы создаем еще один Route с универсальным путем (*) и с помощью Navigate переправляемся туда, куда нам нужно.
Спасибо
Еще можно так npm i react-router-dom@5
спасибо, самому бы Редиректом пришлось бы подольше разбираться. А мне нужно быстро
Несколько роликов посмотрел, очень насыщенные, респектос. Редко коменты пишу, тут прям не удержался
Спасибо, спасибо!)
Шикарнейший канал с очень доступной инфой!
Бро, спасибо за очередной годный курс!!! Я с тобой можно сказать с первого видео на этом канале! Получается заходить редко, но всегда захожу!
Ты круто, бро!!!)
Олды на месте!)) спасибо бро
Как я рад, что наткнулся на твой канал! Отличная подача материала, без воды, с необходимыми объяснениями. Продолжай в том же духе! Давай ещё приложение запилим, по типу сервиса доставки, или такси...
Когда такие комменты вижу, прям сразу хочется еще что нибудь полезного выложить) Спасибо друг!
Спасибо за урок, как всегда очень круто!
классный урок, без воды, все понятно, однозначно лайк
Как всегда отличный и полезный контент! Спасибо за труд!
Спасибо! Пришлось многое исправлять, так как библиотеки и прочее обновилось, но суть та же осталась) так что спасибо большое!
Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.
Хоть работу бросай и проходи твои курсы ))) Отличное видео!!!
Я думаю это неплохая идея :D Спасибо Артем!)
спасибо, было полезно и интересно. успехов в выпуске дальнейших видео.
Спасибо друг! И тебе успехов!
Так ждала новое видео, наконец дождалась!
Спешл фор ю, Даяна
Капец интересная тема, обязательно чекну попозже 🔥🔥
спасибо, приятного просмотра!)
Более понятного объяснения я еще за бесплатно нигде не видел, спасибо большое!
На канале много интересного, рекомендую! Спасибо вам!
Как всегда, понятно, четко, быстро!
Как всегда все толково рассказал. Большое спасибо)
Супер ! React & Firebase,real-time ЧАТ
Очень круто! Без воды и по делу! Продолжай в том же духе!
Спасибо, Кирилл!
Благодарю! Крутое видео! Многое подчеркнул для себя!
спасибо за качественный контент, много интересных вещей узнаешь тут🔥
Четко и по делу. Спасибо за контент!
Смотреть твои видео уже как хобби, firebase наврядли буду использовать, тк цена немаленькая, но посмотреть очень интересно, вот про хуки не знал, все через стандартные средства делал, спасибо.
Спасибо дружише!) стараюсь
Так firebase же бесплатный на сколько то приложений, нет?
@@kostasancez2358 сейчас вроде как уже нет
Чувак! БОБОБОБОБОБОБОБОМБА!!!! если бы все так четко выражались, жили бы на луне
Храни тебя Боже, добрый человек. Видео очень помогло разобраться!
Спасибо! Посмотрел с удовольствием и контент полезный!
Спасибо!) Стараюсь!)
на видео 1.88к подписчиков, на данный момент ровно 150к, желаю успехов, чтоб через год было 1.5лям подписчиков!!!!
Спасибо!
Топ контент, кстати, если вдруг захотите сделать так, чтобы при добавлении сообщения скролл автоматически прокручивался вниз - после массива сообщений ( после map ) добавьте пустую дивку, на нее накиньте реф ссылку ( с помощью реакт createRef ) и потом при нажатии на кнопку отправки вызывайте ссылку ( как вы ее назвали ), к примеру blabla.scrollToView({smooth:scroll-behavior}) - скрол бехейвиор можно не добавлять, это просто добавит анимацию прокрутки вниз ( шобы резко не было ). Это похоже на костыль, но я пока ничего другого не придумал.
Можно не пустой див, а просто ref={index === messages.length - 1 ? lastMessageRef : null } на сообщение, и просто в useEffect скролить к єлементу под ссылкой lastMessageRef
твой канал находка для меня, кладезь знаний так сказать.спасибо
Спасибо друг, рад что полезно!
Круто, полезно, спасибо))
Круто что показываешь как делается в реальных проектах)) полезно будет.
#react #firebase #chat
Спасибо!)
У тебя крутые видео без воды, спасибо!
Спасибо!)
Мощно! Тимур красавчик!
Спасибо большое! Отличный канал
Я не успеваю их смотреть.)) Спасибо, все как обычно, круто!)
Спасибо большое!))
Все по делу, очень приятно смотреть!
Спасибо!
Топовый контент 🤘🏻
если у кого-то не получится сейчас импортировать firebase, попробуйте заменить все импорты на следующие
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
мега классссссный проект. Ооочень круто вышло.
Отличный курс!)
Это реально лучший канал для быстрого обучения React в русском сегменте ютуба. Огромная благодарность автору!
С новой версией react router пришлось чуть чуть повозиться, чтобы переделать код из видео, но там совсем ничего сложного для владеющих гуглом. =)
Спасибо за контент, было интересно
Спасибо за полезное видео
Очень круто!
Хорошо бы еще чтоб были разъяснения как подключать не dev режим на файирбейс, а prod.
за год +60к подписчиков, красава)
Реально крутой чат. Хоть библиотеки устарели, пришлось документацию читать) Авторизация через системы.... И так просто . Сортировка сообщений еще правда нужна.
Очень четко и по-делу!
Спасибо друг!)
6:50
У кого не рендерит Login, поменяйте в файле routes.js Component: Login на Component: .
Так же в AppRouter замените component на element. Вот так:
Спасибо, лучший
Из-за того, что обновились библиотеки я получил 999% знаний из этого видео) Пришлось читать документацию, причем по пути понял очень много другого... Спасибо =)
жиза
бля ахахахах так же
Отлично!
Если бы у вас, Тимур, стажировались преподаватели ВУЗов, высшее образование могли бы получать гораздо быстрее и с существенно большей пользой для применения на практике.
Прекрасно проведенные полчаса, за которые познается Firebase и React в их сути.
И, хотя вы до сих пор не закончили мой любимый курс по Redux, я бессомненно остаюсь в рядах ваших фоловеров. Спасибо за видео.
Каждый раз чуть ли не со слезами на глазах читаю твои комментарии!) Спасибо огромное!) Курс по редакс закончу, обязательно!
годно :)
без лишней воды.
Спасибо!)
Отличное видео по теме создания такого чата, остальные на английском, так что большой плюс за пополнение русскоязычного контента 👍👍👍 вопрос - как добавить возможность хранить переписки с разными контактами и в случае если заходят 2 конкретных контакта чтобы подгружалась их история?
Воды нет. Всё по делу 👍
Недавно обнаружил твой канал, еще ничего не смотрел, но когда увидел список видео - поставил автолюкс и подписался.
Спасибо!) тогда советую приступить к просмотру!)
@@UlbiTV Уже смотрю. Планируются ли видео по GraphQL ?
Да, возможно даже в ближайшее время)
однозначно топ )
Большое спасибо❤
спасибо за ролик!
Кайф брат, от души, еще твое видео по алгоритмам тоже пушка )
Спасибо братан!) Есть еще крутые видосы, смотри!)
@@UlbiTV Весь канал крутой, щас все пересмотрю!)
@@NeoJohnSmit ахах, давай, спасибо!)
Спасибо большое, в23 году все еще актуально, главное разобраться, что после обновления многих библиотек синтаксис изменён, но это не страшно, пару дней убить,разобраться и всё готово, Тимур тебе спасибо большое 🤍🤘👍
видео огонь!
Спасибо!)
Лайк, коментарий, все по традиции.
Забыл обернуть auth.signOut() в функцию. Долго гадал, почему вход не работает..... :)
За урок огромное спасибо!
Спасибо. Ты молодец.
Спасибо вам!
Капец уже 2к подписоты )) Помню когда я тебя нашел было всего 400+...
С вашей поддержкой потихоньку растем))
37,3k уже)
Спасибо тебе за хороший контент)) Неплохо было бы увеличь немного шрифт
Огонь🔥🔥🔥🔥🔥
Чат огонь
Спсибо за полезный контент!
Подскажите, пожалуйста, повторил аналогично, но когда делаешь логаут, состояние user не обновляется и попасть на страницу логина можно только с рефреша страницы
Быстро и понятно
На этапе подключения firebase у вас могут не работать импорты, потому что недавно вышла новая firebase 9.0 и теперь дефолтный импорт firebase (а также библиотек auth и firestore) делается следующим образом:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
+ у меня почему-то не работало приложение при написании const app = initializeApp(...) (initializeApp было импортировано из firebase/app), вылетала ошибка в консоль, я поменял на firebase.initializeApp(...) и это решило проблему!
Спасибо, чувак
Ты просто топ, респект
Тоже с таким столкнулся и ещё понял, что compat это старое и для обратной совместимости оставлено. По новому так следует делать:
import {initializeApp} from 'firebase/app'
import {getStorage} from 'firebase/storage'
import {getAuth} from 'firebase/auth'
const app = initializeApp(firebaseConfig)
export const auth = getAuth(app);
export const firestore = getStorage(app)
Спасибо!
Добрый день. Начиная с 27:00 в таблицу 'messages' добавляем поля для сообщения. С полями UID и text всё понятно - идентификатор как ключ для связи с таблицей данных пользователя, текст - это, собственно, само сообщение. А для чего сохранять другие поля? Они ведь, по сути, дублируют данные пользователя, при том на каждом сообщении, что сильно раздувает БД. Это просто для наглядности сделано или есть иной смысл? Ведь эти данные можно взять просто из таблицы пользователей. Спасибо
Спасибо огромное за твой труд! Очень полезное видео! А если использовать Supsanse и Lazy с React 18 & Firebase с авторизацией через Google
благодарю!
Спасибо за урок! Вопрос: почему после обновления страницы происходит автоматически запрос на авторизацию?
2 тысячи подписчиков🙂 скоро будет 200 тысяч!
А ты неплох)
спасибо!
Спасибо за урок.Возник вопрос - допустим ,я создал сервер с БД и буду отправлять сообщения в БД и отрисовывать на фронте ,но там нужно будет постоянно обновлять состояние или обновлять запрос на получение сообщений, вижу что в firebase это встроенная фича,а как быть с обычными SQL бд и запросами с фронта?
Спасибо автору за замечательный контент!
Проблема следующая у меня - как реализовать аутентификацию через VK в firebase?
Очень много примеров в интернете , где аутентификацию проводят с помощью готовых provider (google, twitter, facebook, github)
А вот как кастомно сделать для VK?
класс))
respect !
"На канале почти 2к подписчиков" :D
Ты просто демон. Лайк подписка. Сделай пожалуйста для хтмл видос как по цсс, для собесов.
Спасибо!) для хтмл это оверхед уже, как мне кажется)
@@UlbiTV или лыжи не едут, или я у тебя не нашел по нему.. )
Спасибо за видео) А с каких пор массивы называются кортежем?
Мне очень понравился вариант роутинга в данном видео,поэтому я решил использовать его в одном из тестовых заданий, но у меня возникла проблема( Идея в том, что я бы хотел иметь публичые роуты, которые будут доступны не только не вошедшим пользователям. Но, как бы я ни старался, у меня не особо получается это реализовать, из-за редиректов, которые срабатывают или просто перемещая на другую страницу, или вызывая залупленные редиректы. В общем, мб, кто-то тоже пробовал делать подобное и смог придумать нормальную реализацию? А так, видео, конечно, крутое. Спасибо за это автору)
У меня, вроде бы, получилось придумать некоторое решение данной проблемы. Вот ссылочка на данный вопрос на stack overflow: ru.stackoverflow.com/questions/1287616/%d0%9a%d0%b0%d0%ba-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d1%82%d1%8c-%d1%80%d0%be%d1%83%d1%82%d0%b8%d0%bd%d0%b3-%d0%bf%d1%80%d0%b8-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d0%b8-%d0%bc%d0%b0%d1%81%d1%81%d0%b8%d0%b2%d0%b0-%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d0%be%d0%b2react-router-dom/1287667#1287667
Спасибо! Рад слышать, успехов!)
Текст сообщения юзера выводится в фаербейсе, в логах, внутри личного кабинета фб, судя по ролику , это типа конфиденциальная информация , верно? Отсюда появляется вопрос Можно ли использовать чат через ФБ для коммерческого использования и многотысячного трафика людей ? И пропустит ли Гугл или эпстор такое приложение в сторы ?
В прошлом году было 2к подписчиков а теперь 92)
Спасибо за отличный урок! Подскажите, вы какой-то утилитой пользуетесь для автогенерации начальной разметки React-компонента?
Спасибо!) в веб шторме сниппет, пишем rsc и нажимаем tab)
@@UlbiTV Спасибо :)
круто
Тимур, подскажи пожалуста, а можно реализовать авторизацию через google firebase на бэке (nodejs, express)?
Всем добрый день! С новой документацией никак не могу понять как получать сообщения "realtime". Может кто-то подсказать как это сделать?
Я могу получить данные при рендеринге страницы, но после данные не обновляются пока страница не будет перезагружена.
Спасибо*