Как Связать Бэкенд и Фронтенд? React + FastAPI Full Stack приложение | Python + JavaScript
Vložit
- čas přidán 7. 06. 2024
- 💡 Попробуй онлайн-тренажёр для подготовки к техническому собеседованию: clck.ru/3B5gxT 💡
Предзапись на курс по поиску работы разработчику и техническим навыкам для Middle: forms.gle/Zw7bPnQvTsfekVH47
Забирай роадмап изучения самого востребованного фреймворка на Python - FastAPI здесь: t.me/ArtemShumeikoBot
Пишу про свой стартап, рынок труда и способы развития разработчиков в телеграм канале - подписывайся: t.me/artemshumeiko
План изучения FastAPI в PDF формате в телеграм боте: t.me/ArtemShumeikoBot?start=eXQ
Ссылка на репозиторий: t.me/artemshumeiko/71
Получить API ключ CoinMarketCap бесплатно: pro.coinmarketcap.com/signup/
Python сообщество в телеграме (здесь тебе помогут с любым вопросом): t.me/python_community_rus
Поддержать меня и получить ранний доступ к видео можно здесь: boosty.to/artemshumeiko
Делаем крутой трекер криптовалют на Python + Javascript всего за 1 час!
0:00 - Пишем Бэк и Фронт!
1:57 - Демонстрация проекта
2:33 - Обзор API провайдера криптовалютных данных
5:20 - Создание и парсинг переменных окружения
8:05 - Пишем класс для работы с API CoinMarketCap
13:40 - Пишем FastAPI эндпоинты
19:49 - Отличие этого проекта от реальных
21:24 - Установка Фронтенд зависимостей
26:51 - Пишем Фронтенд!
29:13 - Компонент Карточка (+лайфхак с иконкой биткоина)
31:56 - Пишем CSS через Tailwind
35:00 - Компонент Меню
36:12 - Делаем запросы с Фронтенда на Бэкенд через axios
39:12 - Решаем CORS ошибку
49:00 - Подгружаем криптовалюту по клику в меню
53:17 - Пропсы (props) на Фронтенде
57:43 - Кэширование - ускоряем запросы в 100 раз
1:01:30 - Подводим итоги
#backend #python #fastapi #pydantic #шумейко #fullstack #react #javascript
💡 Попробуй онлайн-тренажёр для подготовки к техническому собеседованию: clck.ru/3B5gwP 💡
Забирай роадмап изучения самого востребованного фреймворка на Python - FastAPI здесь: t.me/ArtemShumeikoBot
Случайно наткнулся на канал пару недель назад. Чувак, твои видосы - одни из лучших в русскоязычном сегменте. Все четко и по делу. Хороший звук и картинка, никаких мычаний, заминок и прочего, приятно смотреть. Сам занимаюсь статистикой на Python. R, но чувствую в ближайшее время придется лезть и в разработку, твои видосы - просто супер помогают. Я аж слезу пустил, что есть такой контент)))))) Продолжай в том же духе.
Спасибо большое!
Это именно тот вопрос который так долго меня мучал, как же это все работает вместе? Наконец-то я узнаю ответ!)
Ну как, узнал?
Очень красивая картинка у вас, видимо свет и камера хорошие. Приятно смотреть. Содержимое тоже +
Спасибо! Буду повышать качество каждое видео
Смотрел много других подобных видео, какое то понимание появлялось, но это видео закрыло все вопросы
очень хочу увидеть в будущем написание и реализацию полноценных микро сервисов для приложение по типу этого
Спасибо огромное за качественный контент! Было очень интересно посмотреть про Vue.
услышал! Обязательно запишу про Vue, тем более его я знаю лучше Реакта)
Спасибо за видео))
Круто было бы увидеть настройку docker контейнера, и деплой на сервер
)
Можно узнать какие плагины вы используете в pycharm
Лучший, продолжай в том же духе. У тебя талант объяснять.
Понравилась ваша подача, очень приятно смотреть :))
Спасибо! Приятно слышать
Артем, давай еще по этой теме. Было бы неплохо спарить FastAPI c frontend фреймворком на Vue, Nuxt например.
С Vue скорее всего сделаю, а вот Nuxt еще самому освоить нужно)
@@artemshumeiko еще как идея - библиотека shadcn. На их сайте всё выглядит прям круто, интересно глянуть, как это всё привязывается к фреймворкам.
Какое сочетание клавиш для импорта модуля ты используешь, или ты делаешь какие то дополнительные расширения для этого
PyCharm подсвечивает всегда сочетание, когда мышкой наводишь на неимпортированный объект
На маке это option + return
Для ускорения нужно тут не кеширование использовать, а graphql(если сервис поддерживает). Кеширование хорошо для статических данных, а не для динмаических ))
А видео, подача, звук, мимика -- просто отлично. Время при просмотре пролетает незаметно.
спасибо!
22:44
Да, очень хотелось бы видео про TypeScript в связке с React.
Без типизации тяжко.
О, спасибо за видео
Артем, спасибо большое, что снимаешь качественный контент.
После просмотра видео у меня возник вопрос
Могли ли мы не добавлять бэкенд к этому сайту, если бы данные не кешировали, и делали запросы на API на клиентской стороне?
Спасибо.
Не могли, так как API ключ в таком случае хранился бы на фронте. А весь фронт просматривается через консоль разработчика в браузере. Наш ключ в таком случае легко бы украли и использовали в своих целях.
крутое видео, давно хотел такое посмотреть
Мёд, просто мёд...
Золотой контент, спасибо большое.
Спасибо!
Мне как начинающему было интересно смотреть. Делаю сейчас свой проект и после просмотра понял что многое делаю не так. Стало интересно во многом какие стеки применяют в разных сферах, хотел бы увидеть подобное видео где будет объяснено что вот есть у нас реакт, с ним хорошо заходят такие и такие штуки, вот есть фаст апи, к нему хорошо заходит то и то под те и те задачи, было бы невероятно полезно и мне кажется что не слишком сложно для видео. Спасибо за контент!
Спасибо за идею и отзыв!
Видео с Вью 3 было бы шикарно
На протяжении всего видео вызывало тревожность то, что ты пишешь в последней строке. Я обычно в предпоследней, чтобы потом не ставить. Вроде мелочь, а все равно триггерит... А само видео очень крутое. Нраица)
я обычно так никогда не пишу)
просто при монтаже зумил так, чтобы все влезало
в следующих видео учту, спасибо за комментарий!
а такой вопросик, вот например для установки библиотек в питоне -> все ставится в папку venv, а как обстоят дела у js, куда например ставятся файлы при установке tailwindcss, или же все зависимости в файле tailwind.config.js?
все зависимости живут в папке node_modules, это аналог venv
Спасибо хороший контент
Есть ли у тебя планы сделать контентов про клонирование известных сайтов ?
3-4 часовые видео почти никто не готов смотреть :) Поэтому вряд ли.
Разве что в формате платных мастер-классов или курсов. Но вроде запрос на такое небольшой. Мб ошибаюсь
Привет. Спасибо за контент
Спасибо, Артём! Сделаешь по HTMX видео?
сделаю
9:40 а зачем мы используем aiohttp для создания сессии? Вроде в FastApi есть свой клиент?
Своего нету. Скорее всего вы про httpx. Его тоже можно использовать
Можно ли использовать для фронта htmx в связке с fastapi?
да
В видео не хватает тестирования. Тестирование сервиса, мок репозиториев (мок того-же unit of work). Так же тестирование эндпоинтов. Если сделаешь, будет пушка.
В видео нет ни сервиса, ни репозиториев :/
@@artemshumeiko В этом да, в предыдущих по FastApi было (где UOW обсуждался). Касательно этого видео, всё супер! Но Хотелось бы уделить внимание тестированию! Здоровья и успехов тебе, Артём!)
очень крутой контент, хотелось бы уроки на джанге
спасибо! Я не джангист, поэтому вряд ли)
10:48 сделал api_key параметром метода, но ключ оставил от СМС. Надо, наверно, в headers ставить service: api_key и выносить service в параметры метода
все верно, спасибо что заметили
это интересно
каааааайф
кайф)
А можно теперь вместо пайтона использовать ноду?
можно
у меня опыта нету с нодой
@@artemshumeikoПодскажите пожалуйста. Работаю фронтендом пишу на React , думаю начать учить бэк, что лучше учить Питон или Ноду? И ещё сейчас NextJs учу
Ещё видео не досмотрел, но уже хочу спросить: какие то плагины в Пайчарме подключены? Мой пайчарм не настолько умный 😂
PyCharm Professional стоит
Каждый месяц новый аккаунт создаю, чтобы продлить подписку 😂
Там под капотом ai assistant у продуктов от jb.
Но часто он ернуду подсовывает.
мне кажется сейчас тренд на фуллстак, и все идет в эту сторону, да и это просто круто, когда ты можешь и в фронт и в бэк
Фуллстак бустит уверенность в себе и зарплату)
Про тренд не знаю 🤷♂️ Надо будет чекнуть
AI в твоем PyCharm удобрая тема
Артем будет ли отдельный курс по фронту?
прям по фронту вряд ли - на ютубе уже много хороших курсов.
Но по full stack разработке вполне может быть, если будет достаточный интерес аудитории
давай)@@artemshumeiko
@@artemshumeiko океее)Просто помню ты говорил , что в январе начинал что- то подобное по фуллстаку писать
Лол. Недавно только смотрел курс по бэку фастапи, но не знал как это связывать вообще с тем же фронтом (который я, к слову, не знаю). И вот всего лишь 9 дней назад вышло это видео. Совпадение?
шагии... за ги... вобщем много всего)
На 17:17мин выдает ошибку 500, `ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate`. Как поправить?
такая же история, автор канала, не подскажешь в чем проблема? Пишется, что проблема с сертификатом, какой-то пакет нужно установить ?
в таком случае обычно достаточно прописать ssl=False в запросе
self._session.get("/v1/cryptocurrency/listings/latest", ssl=False)
FastApi самые популярный?))) Джанго не забыли?))))
Если зайти сейчас на hh.ru, то по Django будет 810 вакансий, а по FastAPI 747. Судя по этим данным и тренду последних двух лет, FastAPI очень скоро обгонит Django по востребованности
@@artemshumeikoПо вашей логике надо тогда писать на Go. Он уже обогнал и Django, и FastAPI вместе взятых.
@@phat80 дружище, мы тут на Python пишем. Какой Go?)
@@artemshumeiko Я о том, что если ориентироваться на количество вакансий, то пора на Go переходить. А в принципе у нормального бэкендера не может быть проблем, на чем писать бэкенд, хоть на Python, хоть на PHP, хоть на Go, хоть на Java или C#. Все фремворки плюс-минус похожи. Переход с одного на другой вообще не проблема. Если мне, дилетанту, все равно на чем писать, профессионалу еще легче. Сам начинал когда-то с Symfony. Разобравшись в нем, все последующие фреймворки давались в разы легче, даже на других ЯП. Главное - знать базу.
эм, а разве fast api популярнее django?
Сложный вопрос.
Если зайти сейчас на hh.ru, то по Django будет 810 вакансий, а по FastAPI 747. Судя по этим данным и тренду последних двух лет, FastAPI скоро обгонит Django по востребованности
Нет, опрос на стэк оверфлоу подтверждает что джанго популярнее, просто автор любит фастапи и сказал так для красоты)
Амбициознее, всё таки джанге уже 18 лет...
опрос stackoverflow не отражает спрос на FastAPI в РФ и СНГ, поэтому спорно
Если бы у автора был платный курс по джанге, он бы говорил что джанга самая популярная.
Сугубо ради популяризации проекта и, возможно, курса. Нужно прикрутить телеграмм бота. Дабы, весь хайп на тему крипты и ботов, направить в какой-то адекватное русло, не без пользы для автора, надеюсь
как в pycharm включить такие же подсказки с созданием классов. У меня он почему-то не такой умный)
это PyCharm Professional - либо ключи покупать, либо каждый месяц новый акк создавать
@@artemshumeiko принял, спасибо 🙏🏼
А с какого момента fastapi самый популярный фреймфорк на python?
С тех пор как на рынке спрос на фастапи скоро обгонит спрос на Джанго. Осталось разница около 5%
Биток упал на 10% а клиент всё еще видит цену из кэша 😂
Наверно курсы криптовалют не лучшее место для кэширования
мы пассивные инвесторы :)
С точки зрения посмотреть, как там на фронте, ролик интересный. Но с точки зрения новичка/джуна+ наверное лучше использовать jinja и htmx
Вот не знаю, есть ли сегодня смысл бэкендеру учить, как верстается html, если весь фронт пишется на фреймворках
@@artemshumeiko
Ну верстку там всеравно так или иначе делают.
А так беку вообще по хорошему фронтом заниматься не надо. Конечно нужно немного знать, как там твои данные обрабатываются.
Но есть куда более полезные сферы изучения, чем лезть в js фреймворки. Сейчас лучше уж простую модель научиться делать. (я про ml)
Да смысла нет чистый HTML ковырять с htmx. Js очень дружелюбный язык и реакт тоже не сильно сложный фрэйм. За месяц там освоиться для человека кто уже разобрался в одном языке - не проблема. Зато профит гораздо выше чем от шаблонов. Можно прочувствовать весь путь работы твоего проекта.
@@user-zl5sp9yh1n Если ты уже хорошо разбираешься в беке в целом, то да смысл есть.
А если ты плаваешь в sql, аутентификации, паттернах, то лучше не распыляться.
А так я бы вообще подумал о go как 2 язык. На вакансиях не редко его могут спросить. Там может быть пару сервисов
Кошмар бекэндера этот ваш js о_О
Почему?