Как Связать Бэкенд и Фронтенд? React + FastAPI Full Stack приложение | Python + JavaScript

  Переглядів 23,180

Артём Шумейко

Артём Шумейко

День тому

Делаем крутой трекер криптовалют на Python + Javascript всего за 1 час!
Пишу про свой стартап, рынок труда и способы развития разработчиков в телеграм канале - подписывайся: t.me/artemshumeiko
План изучения FastAPI в PDF формате в телеграм боте: t.me/ArtemShumeikoBot?start=eXQ
Погружение в Backend разработку за 3 месяца - научись писать API с нуля до вывода в продакшен на моем авторском курсе: clck.ru/39qJXV (есть 3 бесплатных урока)
🚨 Продажи открыты только до 31 мая 2024 года! 🚨
Прочитать отзывы к курсу можно на Stepik: clck.ru/38ZdhZ
Ссылка на репозиторий: t.me/artemshumeiko/71
Получить API ключ CoinMarketCap бесплатно: pro.coinmarketcap.com/signup/
Python сообщество в телеграме (здесь тебе помогут с любым вопросом): t.me/python_community_rus
Поддержать меня и получить ранний доступ к видео можно здесь: boosty.to/artemshumeiko
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

КОМЕНТАРІ: 98
@artemshumeiko
@artemshumeiko Місяць тому
План изучения FastAPI в PDF формате в телеграм боте: t.me/ArtemShumeikoBot?start=eXQ Погружение в Backend разработку за 3 месяца - научись писать API с нуля до вывода в продакшен на моем авторском курсе: clck.ru/39qJXV (есть 3 бесплатных урока) 🚨 Продажи открыты только до 31 мая 2024 года! 🚨 Прочитать отзывы к курсу можно на Stepik: clck.ru/38ZdhZ
@neyfiz7948
@neyfiz7948 Місяць тому
Это именно тот вопрос который так долго меня мучал, как же это все работает вместе? Наконец-то я узнаю ответ!)
@DmitryPonomareF
@DmitryPonomareF Місяць тому
Случайно наткнулся на канал пару недель назад. Чувак, твои видосы - одни из лучших в русскоязычном сегменте. Все четко и по делу. Хороший звук и картинка, никаких мычаний, заминок и прочего, приятно смотреть. Сам занимаюсь статистикой на Python. R, но чувствую в ближайшее время придется лезть и в разработку, твои видосы - просто супер помогают. Я аж слезу пустил, что есть такой контент)))))) Продолжай в том же духе.
@artemshumeiko
@artemshumeiko Місяць тому
Спасибо большое!
@k0repan0ff
@k0repan0ff Місяць тому
Очень красивая картинка у вас, видимо свет и камера хорошие. Приятно смотреть. Содержимое тоже +
@artemshumeiko
@artemshumeiko Місяць тому
Спасибо! Буду повышать качество каждое видео
@user-sg6qz2ki4q
@user-sg6qz2ki4q 27 днів тому
Спасибо за видео)) Круто было бы увидеть настройку docker контейнера, и деплой на сервер
@s0lgryn291
@s0lgryn291 Місяць тому
Смотрел много других подобных видео, какое то понимание появлялось, но это видео закрыло все вопросы
@user-gb8jq6oj6g
@user-gb8jq6oj6g Місяць тому
Спасибо огромное за качественный контент! Было очень интересно посмотреть про Vue.
@artemshumeiko
@artemshumeiko Місяць тому
услышал! Обязательно запишу про Vue, тем более его я знаю лучше Реакта)
@arch1sb
@arch1sb Місяць тому
О, спасибо за видео
@qeez4434
@qeez4434 Місяць тому
очень хочу увидеть в будущем написание и реализацию полноценных микро сервисов для приложение по типу этого
@semeiniekursi
@semeiniekursi Місяць тому
22:44 Да, очень хотелось бы видео про TypeScript в связке с React. Без типизации тяжко.
@ivanowdenis
@ivanowdenis Місяць тому
Для ускорения нужно тут не кеширование использовать, а graphql(если сервис поддерживает). Кеширование хорошо для статических данных, а не для динмаических )) А видео, подача, звук, мимика -- просто отлично. Время при просмотре пролетает незаметно.
@artemshumeiko
@artemshumeiko 25 днів тому
спасибо!
@crafters2454
@crafters2454 25 днів тому
Спасибо хороший контент
@kochenof
@kochenof Місяць тому
Привет. Спасибо за контент
@lockservice-pro6227
@lockservice-pro6227 Місяць тому
Артем, давай еще по этой теме. Было бы неплохо спарить FastAPI c frontend фреймворком на Vue, Nuxt например.
@artemshumeiko
@artemshumeiko Місяць тому
С Vue скорее всего сделаю, а вот Nuxt еще самому освоить нужно)
@user-mk6zm8sm1q
@user-mk6zm8sm1q Місяць тому
@@artemshumeiko еще как идея - библиотека shadcn. На их сайте всё выглядит прям круто, интересно глянуть, как это всё привязывается к фреймворкам.
@cape4129
@cape4129 15 днів тому
Понравилась ваша подача, очень приятно смотреть :))
@artemshumeiko
@artemshumeiko 15 днів тому
Спасибо! Приятно слышать
@drillmaker5455
@drillmaker5455 Місяць тому
крутое видео, давно хотел такое посмотреть
@extressar679
@extressar679 Місяць тому
Мне как начинающему было интересно смотреть. Делаю сейчас свой проект и после просмотра понял что многое делаю не так. Стало интересно во многом какие стеки применяют в разных сферах, хотел бы увидеть подобное видео где будет объяснено что вот есть у нас реакт, с ним хорошо заходят такие и такие штуки, вот есть фаст апи, к нему хорошо заходит то и то под те и те задачи, было бы невероятно полезно и мне кажется что не слишком сложно для видео. Спасибо за контент!
@artemshumeiko
@artemshumeiko Місяць тому
Спасибо за идею и отзыв!
@alexeymatveev9031
@alexeymatveev9031 29 днів тому
Золотой контент, спасибо большое.
@artemshumeiko
@artemshumeiko 29 днів тому
Спасибо!
@Voskanyan-sz5ph
@Voskanyan-sz5ph Місяць тому
Артем, спасибо большое, что снимаешь качественный контент. После просмотра видео у меня возник вопрос Могли ли мы не добавлять бэкенд к этому сайту, если бы данные не кешировали, и делали запросы на API на клиентской стороне? Спасибо.
@artemshumeiko
@artemshumeiko Місяць тому
Не могли, так как API ключ в таком случае хранился бы на фронте. А весь фронт просматривается через консоль разработчика в браузере. Наш ключ в таком случае легко бы украли и использовали в своих целях.
@Prosto_oo_doramax
@Prosto_oo_doramax 26 днів тому
Можно узнать какие плагины вы используете в pycharm
@user-ej8tb4ni8v
@user-ej8tb4ni8v Місяць тому
Какое сочетание клавиш для импорта модуля ты используешь, или ты делаешь какие то дополнительные расширения для этого
@artemshumeiko
@artemshumeiko Місяць тому
PyCharm подсвечивает всегда сочетание, когда мышкой наводишь на неимпортированный объект На маке это option + return
@slmpnv
@slmpnv Місяць тому
На протяжении всего видео вызывало тревожность то, что ты пишешь в последней строке. Я обычно в предпоследней, чтобы потом не ставить. Вроде мелочь, а все равно триггерит... А само видео очень крутое. Нраица)
@artemshumeiko
@artemshumeiko Місяць тому
я обычно так никогда не пишу) просто при монтаже зумил так, чтобы все влезало в следующих видео учту, спасибо за комментарий!
@unicoxr5tj417
@unicoxr5tj417 Місяць тому
это интересно
@user-cp8ou1ot5z
@user-cp8ou1ot5z Місяць тому
В видео не хватает тестирования. Тестирование сервиса, мок репозиториев (мок того-же unit of work). Так же тестирование эндпоинтов. Если сделаешь, будет пушка.
@artemshumeiko
@artemshumeiko Місяць тому
В видео нет ни сервиса, ни репозиториев :/
@user-cp8ou1ot5z
@user-cp8ou1ot5z Місяць тому
@@artemshumeiko В этом да, в предыдущих по FastApi было (где UOW обсуждался). Касательно этого видео, всё супер! Но Хотелось бы уделить внимание тестированию! Здоровья и успехов тебе, Артём!)
@Artem36
@Artem36 Місяць тому
Видео с Вью 3 было бы шикарно
@saitaro
@saitaro Місяць тому
Спасибо, Артём! Сделаешь по HTMX видео?
@artemshumeiko
@artemshumeiko Місяць тому
сделаю
@samandarturdaliev04
@samandarturdaliev04 Місяць тому
Есть ли у тебя планы сделать контентов про клонирование известных сайтов ?
@artemshumeiko
@artemshumeiko Місяць тому
3-4 часовые видео почти никто не готов смотреть :) Поэтому вряд ли. Разве что в формате платных мастер-классов или курсов. Но вроде запрос на такое небольшой. Мб ошибаюсь
@danyderden
@danyderden Місяць тому
10:48 сделал api_key параметром метода, но ключ оставил от СМС. Надо, наверно, в headers ставить service: api_key и выносить service в параметры метода
@artemshumeiko
@artemshumeiko Місяць тому
все верно, спасибо что заметили
@Katar1x
@Katar1x Місяць тому
Мёд, просто мёд...
@ersabd5230
@ersabd5230 Місяць тому
очень крутой контент, хотелось бы уроки на джанге
@artemshumeiko
@artemshumeiko Місяць тому
спасибо! Я не джангист, поэтому вряд ли)
@PacoOfficial
@PacoOfficial Місяць тому
каааааайф
@user-vi1fw4ep3j
@user-vi1fw4ep3j Місяць тому
9:40 а зачем мы используем aiohttp для создания сессии? Вроде в FastApi есть свой клиент?
@artemshumeiko
@artemshumeiko Місяць тому
Своего нету. Скорее всего вы про httpx. Его тоже можно использовать
@PacoOfficial
@PacoOfficial Місяць тому
мне кажется сейчас тренд на фуллстак, и все идет в эту сторону, да и это просто круто, когда ты можешь и в фронт и в бэк
@artemshumeiko
@artemshumeiko Місяць тому
Фуллстак бустит уверенность в себе и зарплату) Про тренд не знаю 🤷‍♂️ Надо будет чекнуть
@gedal9841
@gedal9841 29 днів тому
Лол. Недавно только смотрел курс по бэку фастапи, но не знал как это связывать вообще с тем же фронтом (который я, к слову, не знаю). И вот всего лишь 9 дней назад вышло это видео. Совпадение?
@user-sz5yn3fk8d
@user-sz5yn3fk8d Місяць тому
Ещё видео не досмотрел, но уже хочу спросить: какие то плагины в Пайчарме подключены? Мой пайчарм не настолько умный 😂
@artemshumeiko
@artemshumeiko Місяць тому
PyCharm Professional стоит Каждый месяц новый аккаунт создаю, чтобы продлить подписку 😂
@rikpopkov3668
@rikpopkov3668 Місяць тому
Там под капотом ai assistant у продуктов от jb. Но часто он ернуду подсовывает.
@Advokat7V
@Advokat7V Місяць тому
AI в твоем PyCharm удобрая тема
@user-tn1fw1cn1h
@user-tn1fw1cn1h Місяць тому
шагии... за ги... вобщем много всего)
@danilbanan406
@danilbanan406 Місяць тому
Артем будет ли отдельный курс по фронту?
@artemshumeiko
@artemshumeiko Місяць тому
прям по фронту вряд ли - на ютубе уже много хороших курсов. Но по full stack разработке вполне может быть, если будет достаточный интерес аудитории
@Katar1x
@Katar1x Місяць тому
давай)@@artemshumeiko
@danilbanan406
@danilbanan406 Місяць тому
@@artemshumeiko океее)Просто помню ты говорил , что в январе начинал что- то подобное по фуллстаку писать
@erdauletbayangali7470
@erdauletbayangali7470 Місяць тому
А можно теперь вместо пайтона использовать ноду?
@artemshumeiko
@artemshumeiko Місяць тому
можно у меня опыта нету с нодой
@user-yc7pw3dn5r
@user-yc7pw3dn5r 25 днів тому
​@@artemshumeikoПодскажите пожалуйста. Работаю фронтендом пишу на React , думаю начать учить бэк, что лучше учить Питон или Ноду? И ещё сейчас NextJs учу
@vinc2OOO
@vinc2OOO Місяць тому
FastApi самые популярный?))) Джанго не забыли?))))
@artemshumeiko
@artemshumeiko Місяць тому
Если зайти сейчас на hh.ru, то по Django будет 810 вакансий, а по FastAPI 747. Судя по этим данным и тренду последних двух лет, FastAPI очень скоро обгонит Django по востребованности
@phat80
@phat80 Місяць тому
@@artemshumeikoПо вашей логике надо тогда писать на Go. Он уже обогнал и Django, и FastAPI вместе взятых.
@artemshumeiko
@artemshumeiko Місяць тому
@@phat80 дружище, мы тут на Python пишем. Какой Go?)
@phat80
@phat80 Місяць тому
@@artemshumeiko Я о том, что если ориентироваться на количество вакансий, то пора на Go переходить. А в принципе у нормального бэкендера не может быть проблем, на чем писать бэкенд, хоть на Python, хоть на PHP, хоть на Go, хоть на Java или C#. Все фремворки плюс-минус похожи. Переход с одного на другой вообще не проблема. Если мне, дилетанту, все равно на чем писать, профессионалу еще легче. Сам начинал когда-то с Symfony. Разобравшись в нем, все последующие фреймворки давались в разы легче, даже на других ЯП. Главное - знать базу.
@daruleus
@daruleus Місяць тому
Сугубо ради популяризации проекта и, возможно, курса. Нужно прикрутить телеграмм бота. Дабы, весь хайп на тему крипты и ботов, направить в какой-то адекватное русло, не без пользы для автора, надеюсь
@PavelSamodurov-hi3bx
@PavelSamodurov-hi3bx Місяць тому
эм, а разве fast api популярнее django?
@artemshumeiko
@artemshumeiko Місяць тому
Сложный вопрос. Если зайти сейчас на hh.ru, то по Django будет 810 вакансий, а по FastAPI 747. Судя по этим данным и тренду последних двух лет, FastAPI скоро обгонит Django по востребованности
@Chel1k7
@Chel1k7 Місяць тому
Нет, опрос на стэк оверфлоу подтверждает что джанго популярнее, просто автор любит фастапи и сказал так для красоты)
@user-gb8jq6oj6g
@user-gb8jq6oj6g Місяць тому
Амбициознее, всё таки джанге уже 18 лет...
@artemshumeiko
@artemshumeiko Місяць тому
опрос stackoverflow не отражает спрос на FastAPI в РФ и СНГ, поэтому спорно
@aim6558
@aim6558 Місяць тому
Если бы у автора был платный курс по джанге, он бы говорил что джанга самая популярная.
@MrSmokeDi
@MrSmokeDi Місяць тому
как в pycharm включить такие же подсказки с созданием классов. У меня он почему-то не такой умный)
@artemshumeiko
@artemshumeiko Місяць тому
это PyCharm Professional - либо ключи покупать, либо каждый месяц новый акк создавать
@MrSmokeDi
@MrSmokeDi 27 днів тому
@@artemshumeiko принял, спасибо 🙏🏼
@danyderden
@danyderden Місяць тому
А с какого момента fastapi самый популярный фреймфорк на python?
@artemshumeiko
@artemshumeiko Місяць тому
С тех пор как на рынке спрос на фастапи скоро обгонит спрос на Джанго. Осталось разница около 5%
@dmitry-lz1ny
@dmitry-lz1ny Місяць тому
С точки зрения посмотреть, как там на фронте, ролик интересный. Но с точки зрения новичка/джуна+ наверное лучше использовать jinja и htmx
@artemshumeiko
@artemshumeiko Місяць тому
Вот не знаю, есть ли сегодня смысл бэкендеру учить, как верстается html, если весь фронт пишется на фреймворках
@dmitry-lz1ny
@dmitry-lz1ny Місяць тому
@@artemshumeiko Ну верстку там всеравно так или иначе делают. А так беку вообще по хорошему фронтом заниматься не надо. Конечно нужно немного знать, как там твои данные обрабатываются. Но есть куда более полезные сферы изучения, чем лезть в js фреймворки. Сейчас лучше уж простую модель научиться делать. (я про ml)
@user-zl5sp9yh1n
@user-zl5sp9yh1n Місяць тому
Да смысла нет чистый HTML ковырять с htmx. Js очень дружелюбный язык и реакт тоже не сильно сложный фрэйм. За месяц там освоиться для человека кто уже разобрался в одном языке - не проблема. Зато профит гораздо выше чем от шаблонов. Можно прочувствовать весь путь работы твоего проекта.
@dmitry-lz1ny
@dmitry-lz1ny Місяць тому
​@@user-zl5sp9yh1n Если ты уже хорошо разбираешься в беке в целом, то да смысл есть. А если ты плаваешь в sql, аутентификации, паттернах, то лучше не распыляться. А так я бы вообще подумал о go как 2 язык. На вакансиях не редко его могут спросить. Там может быть пару сервисов
@zion4d
@zion4d Місяць тому
Биток упал на 10% а клиент всё еще видит цену из кэша 😂 Наверно курсы криптовалют не лучшее место для кэширования
@artemshumeiko
@artemshumeiko Місяць тому
мы пассивные инвесторы :)
@zion4d
@zion4d Місяць тому
Кошмар бекэндера этот ваш js о_О
@MeterMavrick
@MeterMavrick 26 днів тому
Почему?
Микросервисы - Простым Языком на Понятном Примере
19:08
Піхотинці - про потребу у людях
00:57
Суспільне Новини
Переглядів 1 млн
Normal vs Smokers !! 😱😱😱
00:12
Tibo InShape
Переглядів 16 млн
😳 Домінація! ОГЛЯД БОЮ ЛОМАЧЕНКО - КАМБОСОС
04:06
顔面水槽がブサイク過ぎるwwwww
00:58
はじめしゃちょー(hajime)
Переглядів 66 млн
Что такое WebSockets (веб-сокеты)
2:59
Хочу вАйти
Переглядів 3,8 тис.
FastAPI ТОП Библиотек и Расширений [2024]
12:21
Артём Шумейко
Переглядів 12 тис.
Стал Senior Разработчиком за 2 года. Главные выводы
31:04
Способы учиться программировать
14:21
Winderton
Переглядів 105 тис.
Піхотинці - про потребу у людях
00:57
Суспільне Новини
Переглядів 1 млн