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

💡 Попробуй онлайн-тренажёр для подготовки к техническому собеседованию: 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

[@artemshumeiko]

💡 Попробуй онлайн-тренажёр для подготовки к техническому собеседованию: clck.ru/3B5gwP 💡 Забирай роадмап изучения самого востребованного фреймворка на Python - FastAPI здесь: t.me/ArtemShumeikoBot

[@neyfiz7948]

Это именно тот вопрос который так долго меня мучал, как же это все работает вместе? Наконец-то я узнаю ответ!)

[@DmitryPonomareF]

Случайно наткнулся на канал пару недель назад. Чувак, твои видосы - одни из лучших в русскоязычном сегменте. Все четко и по делу. Хороший звук и картинка, никаких мычаний, заминок и прочего, приятно смотреть. Сам занимаюсь статистикой на Python. R, но чувствую в ближайшее время придется лезть и в разработку, твои видосы - просто супер помогают. Я аж слезу пустил, что есть такой контент)))))) Продолжай в том же духе.

[@artemshumeiko]

Спасибо большое!

[@k0repan0ff]

Очень красивая картинка у вас, видимо свет и камера хорошие. Приятно смотреть. Содержимое тоже +

[@artemshumeiko]

Спасибо! Буду повышать качество каждое видео

[@s0lgryn291]

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

[@user-tf7nf7nd9w]

Лучший, продолжай в том же духе. У тебя талант объяснять.

[@user-gb8jq6oj6g]

Спасибо огромное за качественный контент! Было очень интересно посмотреть про Vue.

[@artemshumeiko]

услышал! Обязательно запишу про Vue, тем более его я знаю лучше Реакта)

[@qeez4434]

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

[@user-sg6qz2ki4q]

Спасибо за видео)) Круто было бы увидеть настройку docker контейнера, и деплой на сервер

[@renatsu_dev]

)

[@ivanowdenis]

Для ускорения нужно тут не кеширование использовать, а graphql(если сервис поддерживает). Кеширование хорошо для статических данных, а не для динмаических )) А видео, подача, звук, мимика -- просто отлично. Время при просмотре пролетает незаметно.

[@artemshumeiko]

спасибо!

[@arch1sb]

О, спасибо за видео

[@semeiniekursi]

22:44 Да, очень хотелось бы видео про TypeScript в связке с React. Без типизации тяжко.

[@cape4129]

Понравилась ваша подача, очень приятно смотреть :))

[@artemshumeiko]

Спасибо! Приятно слышать

[@Katar1x]

Мёд, просто мёд...

[@lockservice-pro6227]

Артем, давай еще по этой теме. Было бы неплохо спарить FastAPI c frontend фреймворком на Vue, Nuxt например.

[@artemshumeiko]

С Vue скорее всего сделаю, а вот Nuxt еще самому освоить нужно)

[@user-mk6zm8sm1q]

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

[@extressar679]

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

[@artemshumeiko]

Спасибо за идею и отзыв!

[@slmpnv]

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

[@artemshumeiko]

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

[@kochenof]

Привет. Спасибо за контент

[@Prosto_oo_doramax]

Можно узнать какие плагины вы используете в pycharm

[@Voskanyan-sz5ph]

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

[@artemshumeiko]

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

[@alexeymatveev9031]

Золотой контент, спасибо большое.

[@artemshumeiko]

Спасибо!

[@crafters2454]

Спасибо хороший контент

[@user-ej8tb4ni8v]

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

[@artemshumeiko]

PyCharm подсвечивает всегда сочетание, когда мышкой наводишь на неимпортированный объект На маке это option + return

[@drillmaker5455]

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

[@Artem36]

Видео с Вью 3 было бы шикарно

[@saitaro]

Спасибо, Артём! Сделаешь по HTMX видео?

[@artemshumeiko]

сделаю

[@samandarturdaliev04]

Есть ли у тебя планы сделать контентов про клонирование известных сайтов ?

[@artemshumeiko]

3-4 часовые видео почти никто не готов смотреть :) Поэтому вряд ли. Разве что в формате платных мастер-классов или курсов. Но вроде запрос на такое небольшой. Мб ошибаюсь

[@unicoxr5tj417]

это интересно

[@user-cp8ou1ot5z]

В видео не хватает тестирования. Тестирование сервиса, мок репозиториев (мок того-же unit of work). Так же тестирование эндпоинтов. Если сделаешь, будет пушка.

[@artemshumeiko]

В видео нет ни сервиса, ни репозиториев :/

[@user-cp8ou1ot5z]

@@artemshumeiko В этом да, в предыдущих по FastApi было (где UOW обсуждался). Касательно этого видео, всё супер! Но Хотелось бы уделить внимание тестированию! Здоровья и успехов тебе, Артём!)

[@thelokrit9741]

а такой вопросик, вот например для установки библиотек в питоне -> все ставится в папку venv, а как обстоят дела у js, куда например ставятся файлы при установке tailwindcss, или же все зависимости в файле tailwind.config.js?

[@artemshumeiko]

все зависимости живут в папке node_modules, это аналог venv

[@ersabd5230]

очень крутой контент, хотелось бы уроки на джанге

[@artemshumeiko]

спасибо! Я не джангист, поэтому вряд ли)

[@danyderden]

10:48 сделал api_key параметром метода, но ключ оставил от СМС. Надо, наверно, в headers ставить service: api_key и выносить service в параметры метода

[@artemshumeiko]

все верно, спасибо что заметили

[@1978rembo]

Можно ли использовать для фронта htmx в связке с fastapi?

[@artemshumeiko]

да

[@PacoOfficial]

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

[@artemshumeiko]

Фуллстак бустит уверенность в себе и зарплату) Про тренд не знаю 🤷‍♂️ Надо будет чекнуть

[@Advokat7V]

AI в твоем PyCharm удобрая тема

[@gedal9841]

Лол. Недавно только смотрел курс по бэку фастапи, но не знал как это связывать вообще с тем же фронтом (который я, к слову, не знаю). И вот всего лишь 9 дней назад вышло это видео. Совпадение?

[@user-tn1fw1cn1h]

шагии... за ги... вобщем много всего)

[@user-vi1fw4ep3j]

9:40 а зачем мы используем aiohttp для создания сессии? Вроде в FastApi есть свой клиент?

[@artemshumeiko]

Своего нету. Скорее всего вы про httpx. Его тоже можно использовать

[@hexvel]

кайф)

[@danilbanan406]

Артем будет ли отдельный курс по фронту?

[@artemshumeiko]

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

[@Katar1x]

давай)@@artemshumeiko

[@danilbanan406]

@@artemshumeiko океее)Просто помню ты говорил , что в январе начинал что- то подобное по фуллстаку писать

[@erdauletbayangali7470]

А можно теперь вместо пайтона использовать ноду?

[@artemshumeiko]

можно у меня опыта нету с нодой

[@user-yc7pw3dn5r]

​@@artemshumeikoПодскажите пожалуйста. Работаю фронтендом пишу на React , думаю начать учить бэк, что лучше учить Питон или Ноду? И ещё сейчас NextJs учу

[@PacoOfficial]

каааааайф

[@user-sz5yn3fk8d]

Ещё видео не досмотрел, но уже хочу спросить: какие то плагины в Пайчарме подключены? Мой пайчарм не настолько умный 😂

[@artemshumeiko]

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

[@rikpopkov3668]

Там под капотом ai assistant у продуктов от jb. Но часто он ернуду подсовывает.

[@vinc2OOO]

FastApi самые популярный?))) Джанго не забыли?))))

[@artemshumeiko]

Если зайти сейчас на hh.ru, то по Django будет 810 вакансий, а по FastAPI 747. Судя по этим данным и тренду последних двух лет, FastAPI очень скоро обгонит Django по востребованности

[@phat80]

@@artemshumeikoПо вашей логике надо тогда писать на Go. Он уже обогнал и Django, и FastAPI вместе взятых.

[@artemshumeiko]

@@phat80 дружище, мы тут на Python пишем. Какой Go?)

[@phat80]

@@artemshumeiko Я о том, что если ориентироваться на количество вакансий, то пора на Go переходить. А в принципе у нормального бэкендера не может быть проблем, на чем писать бэкенд, хоть на Python, хоть на PHP, хоть на Go, хоть на Java или C#. Все фремворки плюс-минус похожи. Переход с одного на другой вообще не проблема. Если мне, дилетанту, все равно на чем писать, профессионалу еще легче. Сам начинал когда-то с Symfony. Разобравшись в нем, все последующие фреймворки давались в разы легче, даже на других ЯП. Главное - знать базу.

[@PavelSamodurov-hi3bx]

эм, а разве fast api популярнее django?

[@artemshumeiko]

Сложный вопрос. Если зайти сейчас на hh.ru, то по Django будет 810 вакансий, а по FastAPI 747. Судя по этим данным и тренду последних двух лет, FastAPI скоро обгонит Django по востребованности

[@Chel1k7]

Нет, опрос на стэк оверфлоу подтверждает что джанго популярнее, просто автор любит фастапи и сказал так для красоты)

[@user-gb8jq6oj6g]

Амбициознее, всё таки джанге уже 18 лет...

[@artemshumeiko]

опрос stackoverflow не отражает спрос на FastAPI в РФ и СНГ, поэтому спорно

[@aim6558]

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

[@daruleus]

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

[@MrSmokeDi]

как в pycharm включить такие же подсказки с созданием классов. У меня он почему-то не такой умный)

[@artemshumeiko]

это PyCharm Professional - либо ключи покупать, либо каждый месяц новый акк создавать

[@MrSmokeDi]

@@artemshumeiko принял, спасибо 🙏🏼

[@danyderden]

А с какого момента fastapi самый популярный фреймфорк на python?

[@artemshumeiko]

С тех пор как на рынке спрос на фастапи скоро обгонит спрос на Джанго. Осталось разница около 5%

[@dmitry-lz1ny]

С точки зрения посмотреть, как там на фронте, ролик интересный. Но с точки зрения новичка/джуна+ наверное лучше использовать jinja и htmx

[@artemshumeiko]

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

[@dmitry-lz1ny]

@@artemshumeiko Ну верстку там всеравно так или иначе делают. А так беку вообще по хорошему фронтом заниматься не надо. Конечно нужно немного знать, как там твои данные обрабатываются. Но есть куда более полезные сферы изучения, чем лезть в js фреймворки. Сейчас лучше уж простую модель научиться делать. (я про ml)

[@user-zl5sp9yh1n]

Да смысла нет чистый HTML ковырять с htmx. Js очень дружелюбный язык и реакт тоже не сильно сложный фрэйм. За месяц там освоиться для человека кто уже разобрался в одном языке - не проблема. Зато профит гораздо выше чем от шаблонов. Можно прочувствовать весь путь работы твоего проекта.

[@dmitry-lz1ny]

​@@user-zl5sp9yh1n Если ты уже хорошо разбираешься в беке в целом, то да смысл есть. А если ты плаваешь в sql, аутентификации, паттернах, то лучше не распыляться. А так я бы вообще подумал о go как 2 язык. На вакансиях не редко его могут спросить. Там может быть пару сервисов

[@zion4d]

Биток упал на 10% а клиент всё еще видит цену из кэша 😂 Наверно курсы криптовалют не лучшее место для кэширования

[@artemshumeiko]

мы пассивные инвесторы :)

[@zion4d]

Кошмар бекэндера этот ваш js о_О

[@MeterMavrick]

Почему?