Flutter с нуля до профи | #7 - Работа с API, http | Библиотека dio | Курс для начинающих 2023
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- Flutter - это идеальный инструмент, чтобы начать путь в айти или перейти на него в 2023. А я как раз тот самый коуч, которого ты искал.
В этом уроке мы научимся работать с API из Flutter приложения. Рассмотрим особенности библиотеки для работы с http - dio. Узнаем как разделять код UI и логику приложения. Познакомимся с концепцией репозиторий в Flutter приложениях.
В ходе курса, мы вместе разберемся с тем, что такое Flutter и как на нем сделать первое приложение. Научимся программировать на dart, узнаем про основные виджеты в Flutter, как работать с сетью http dio, узнаем про основной стейт менеджемнт в Flutter - BLoC.
Ссылки из видео:
😎 Репозиторий с кодом из уроков: github.com/Frezyx/flutter_tut...
🤓 Документация API CryptoCompare:
min-api.cryptocompare.com/doc...
✅ Полезные ссылки:
👨💻 Мой GitHub github.com/Frezyx (Куча кода на dart / Flutter)
💬 Telegram с анонсами t.me/frezycode
🚀 Boosty boosty.to/frezycode
📸 Instagram / frezycode
00:00 - 00:21 Вступление
00:21 - 01:55 Что такое API ?
01:55 - 02:30 Библиотеки на dart для работы с сетью - dio, http
02:30 - 03:00 В чем отличие библиотек dio и http ?
03:00 - 03:29 Устанавливаем библиотеку dio
03:29 - 05:06 Какое мы будем использовать api | API CryptoCompare
05:06 - 05:36 Нужно ли получить специальный API KEY ?
05:36 - 06:43 Как оформлять http - запросы в flutter проекте
06:43 - 07:16 Когда мы поговорим про разделение UI и логики ?
07:16 - 07:41 Что такое репозиторий
07:41 - 08:54 Создаем наш первый репозиторий
08:54 - 09:36 Про асинхронность async await
09:36 - 10:51 Пишем первый метод работы с сетью
10:51 - 11:28 Что такое debugPrint ? Отличия от print
11:28 - 13:12 Вызываем API метод из Flutter приложения
13:12 - 14:37 Что такое response и из чего он состоит ?
14:37 - 15:13 Что приходит в ответе от крипто API
15:13 - 16:36 Как показывать данные из API на экране. Про модели.
16:36 - 18:31 Создаем модель криптовалюты
18:31 - 22:07 Парсим сложный json в нашу dart модель
22:07 - 22:53 Финализируем логику парсинга в голове
22:53 - 27:05 Показываем данные из API на экране
27:05 - 27:34 Любуемся результатом загрузки данных
27:34 - 28:44 Передаем полученные данные в виджет
28:44 - 34:17 Меняем метод API, чтобы получить все данные о криптовалютах
34:17 - 35:37 Добавляем иконку криптовалюты из апи
35:37 - 36:42 Немного правим дизайн, убираем elevation у AppBar
36:42 - 37:32 Добавляем виджет загрузки в приложение
37:32 - 38:25 Автоматическая загрузка при заходе на экран
38:25 - 39:53 Добавляем в список больше криптовалют
39:53 - 40:15 Подведение итогов урока
40:15 - 40:43 Что будет в следующем уроке ?
#войтивайти #программирование #flutter
Не ожидал, что Том Холланд устанет от роли Человека-паука и станет снимать обучающие видео по Flutter... Спасибо тебе огромное! Все доступно и понятно.
Спасибо большое! Да я пока с Гоблином разобрался, остальных паучков по домам отправил и сижу думаю, делать нечего - изучу професиию будущего
@@frezycode кринге
Прикольно. Небольшая просьба на будущее => сделать шрифт крупнее и разрешение 1080, а то 720 мылит
Спасибо за урок!
очень круто!
Молодец! Все очень четко!
Отличные уроки, большое тебе человеческое спасибо!
Братан, харош! Давай-давай, вперед! Контент в кайф! Можно еще? Ваще красавчик! Можно вот этого вот почаще?
Хорошая речь. Понятно излагаешь. Спасибо
34:30 Стас, огромное тебе спасибо за уроки! Пожалуйста, можешь показать, как ты находишь решения в документации? Самостоятельное чтение документации - это очень важный навык для новичков.
Спасибо очень полезные информаци много чего узнал а теперь надо самостоятельно потыкать
супер
Автору респект
You are the BEST!!!
I like your videos. The presentation of the material is excellent!
Thank you🔥
Thanks man 🤝
Стас, спасибо тебе огромное. Мне кажется что у тебя самое простое и нативно понятное объяснение в твоих роликах. Не забрасывай плиз
Огромное спасибо за такой приятный фидбек 🙏
Огромное спасибо, делал админ панель на laravel, с api, базой данных и тд.
А теперь благодаря твоим урокам использую свое же api
Желаю тебе удачи ❤
Под конец видео всё же разобрался с хитросплетениями приложения )
Видео получилось очень полезным.
Стас, спасибо за науку. Поехали дальше....
Спасибо огромное! Рад что все получилось 👍
Опа, сижу такой думаю, почему бы флаттер не пощупать и нахожу твой канал😮
Все супер объясняешь продолжай в том же духе!
А мы тебя лайками подержим❤
Огромное спасибо за такой теплый фидбек 🙏
Полностью согласен. Самая лучшая подача информации из тех которые видел до сих пор
По чаще бы видео и по подробней о компоновке виджетов и рефакторинге
Спасибо, услышал. Думаю про это сделаю полноценный ролик не в рамках курса 👌
Большое спасибо за курс!!! Надеюсь ты вырастишь до канала миллионика))
Огромное спасибо! Постараемся 🚀
ETH: Object
USD: 3169.58
вот знать бы это год назад )
КРУТО ОЧЕНЬ ПОНЯТЕНЬ ТЫ ОЧЕНЬ ХОРОШО ОБЯСНЯЕШЬ
Огромное спасибо за фидбек 🙏
обработку ошибок хотелось бы увидеть
Подскажи пожалуйста, какие расширения для Vs Code ты используешь для генерации конструкторов и сереализации? Да и в общем и целом думаю будет очень полезно узнать о твоих любимых расширениях)
Была бы возможность повторно ставить лайки ставил бы) Успехов каналу! А у меня новый вопрос: Стас ты не подскажешь приходилось ли тебе работать с таким зверем как Strapi? Если да, можешь поделиться опытом или даже видос запилить на эту тему.
Не думал что человек паук, или же сам Том Холланд будет обучать меня флаттеру!
Аххххпрззз, да не похож я 😅😅😅
А в репозитории входит логика взаимодействия с файловой системой компьютера?
- you know how they pronounce "API" in Russian?
- how?
- "AH PEE"
😄😄
😂😂😂 That's really how we pronounce API. Also SDK on Russian sounds like ESDEKA
Привет , очень нравится твой контент , но возникла проблема , Invalid Internet address , по возможности пытался найти ошибку самостоятельно , но пока нет результата , подскажи с какой стороны можно зайти )
Стас где тебе можно написать вопрос с картинкой?
CryotoCoinTıle откуда у нас?)
В эмуляторе все верно работает, но когда запускаю apk на телефоне, то вижу только CircularProgressIndicator, список валют не отображается. С чем может быть связано?
cпасибо огромное за урок Стас
Уменя почему то проблемы с АPI выдает ( throw createError(response, "Failed host lookup: '$host'");
Не может достучаться до апи, возможно проблемы с интернетом, либо можно попробовать включить впн.
Привет Стас. Заранее большое спасибо за пополнение наших знаний. Мой вопрос заключается в следующем: В этом видео priceInUSD:{e.value as Map} было понятна, но какова цель ['USD'] с ним?
Привет 👋
В словаре который приходит с бекенда может быть эквивалент в нескольких валютах. И USD здесь - идентификатор этой валюты
Не могу понять, почему в мою мапу которую я возвращаю из репозитория данные записываются несколько раз. Т.е по апи я получаю данные, потом на моменте
final dataList = data.entries.map((e) => ... ) получается, что dataList хранит в себе мапу повторенную несколько раз. Получается массив массивов. Как сделать так, чтобы оно не итерировало больше 1го раза ?
ДО ЭТОГО ВИДЕО НАДО СДЕЛАТЬ САМ СМОГУ ЛИ НЕ ЗНАЮ ТОЧНО😃
Сделай урок по Json Flutter , не смог найти нормального обучения на youtube 🙏😊
Имеешь ввиду про json annotation ?
@@frezycode да, посмотри по блогу Феликса и verygood ventures. Они сделали генерацию всего проекта, репозитортев как пакетов отдельных... Было бы неплохо по этому записать обзор, для популяризации данного слоёного подхода.
@@frezycode Стас , добрый день , хочется все же базовые знания ручной сериализации Json в Flutter . Понимаю, все пишут что тема простая , но для меня оказалась трудней всего )))🤷♂
говоришь "папка models создается на уровне репозитория..." а сам сделал внутри внутренней папки... так спецом задумано? или ошибка?
Привет, не знаю уже и к кому обратиться. Я новичок в flutter. Хочу установить socket соединение. Использую телефон для дебага. Connection refused, errno 111. И все, вообще никак не хочет подключаться
Всем привет, у всех показывает на все валюти биткоина, ато у меня что то больше трёх не показывает
спасибо за урок
после джавы парсинг выглядит очень страшным
нельзя ли типа через аннотации в классе модели?
В flutter к сожалению или к счастью запрещена рефлексия. Поэтому только кодогенерация (
12:57
Здравствуйте, все прикольно и хорошо объяснили, но у меня вопрос. Когда вы создали floatingButton и нажали на кнопку, у вас функция как-то отработала, хотя вы не сделали OnPressed асинхронной и не вызвали метод с помощью await. У меня вопрос, как? Я смотрел по гуглу и узнал, что при использовании `OnPressed: () => ... ` await не нужен, но у вас получилось в `OnPressed: (){...}` тоже. Если я что-то не понял или там свои Flutter штучки, можете, пожалуйста, написать их здесь, просто очень интересно.
я ваще вот так сделал:
onPressed: () {
CryptoCoinsRepository()
.getCoinsList()
.then((cryptoList) {
setState(() => _CryptoCoinsList = cryptoList);
},
);
},
А как же retrofit?(
А подскажи пожалуйста, почему у меня отображаются коины на экране только тогда, когда я в VSCode ctrl + s нажимаю? Допустим я кликнул в приложении на кнопку, ничего не отобразилось, а когда нажал ктрл + с , то все отобразилось
Что-то очень странное происходит, как-будто экран не обновляется в нужный момент. Лучше перейди по ссылке прикрепленной к видео и посмотри как там код написан.
Сверься, может что-то пропустил 🤷♂️
а вы тоже хотите войти в айти через флатер?
окончательно мозг сломал 😵💫😆
UPD: Хотя по сути все app фреймворки плюс минус похожи. Модульность, state manager и всё такое.
А чем конкретно я так мозг сломал ?)
Действительно интересно, что может казаться странным и непонятным.
@@frezycode первое приближение к коду, языку... после js/ts код глаза режет. Но ничего, к концу ролика разобрался что к чему. Даже на телефоне запустил. Ты же мне в телеге про пермишн писал. Завтра думаю продолжить. Времени совершенно нет на учёбу 🙁
Я не знаю подскажет мне кто нибудь или нет, но все же. Я пытаюсь сделать post запрос к OpenAI, чтобы мне ответил ChatGPT, api ключ у меня есть. Попробовал через postman, все получилось, но почему то когда пытаюсь это сделать из кода, то получаю ошибку 403. Пробовал и сам код писать, и у этого самого chat gpt спрашивать, и брал код, который предлагает postman. Но все равно получаю ошибку 403.
сейчас биткоин по 63
Спасибо огромное за такой насыщений урок! На курсах программирования до АПИ добираются через 3-4 месяца, не раньше)) А тут бах! На 7 уроке уже иконки асинхронно получаем))
Как более корректно обрабатывать "!" при обработке "_cryptoCoinList!" ?
Я так понимаю, это forced unwrapping, как в Swift. Верно?
Спасибо большое за отзыв)
Да да, это как force unwrapping. Посмотрела сейчас как это в свисте делается. Один в один.
Лучше всего вообще не использовать этот механизм. Нужно всегда делать проверку на null. Анализатор при правильной проверке не даст совершить ошибку и получить выстрел из null в ноги)
@@frezycode В Swift безопасная конструкция с опционалами делается так:
let myString: String? = funcReturnsOptionalString()
if let wrappedStr = myString { //если myString != nil, то записать значение в wrappedStr
print(wrappedStr) // используем wrappedStr, как String != nil
}
В Flutter (Dart) так можно сделать?
почему у меня ошибка выходит Dio
Напиши лучше в телеграм
Зачем нужно объявлять каждую переменную как final?
Зачем нужно нижнее подчеркивание в названии метода? это особенность синтаксиса языка?
_ - это инкапсуляция
а. ясно.@@kutyshevdev3626
Ребята, убедитесь, что на вашем телефоне или эмуляторе есть подключение к wife
Библиотека ди.. стоп ЧТО?! ДИО!!
А что не так?)
@@frezycode отсылка на джоджо
Парсинг канеш жестокий!
Спасибо тебе за уроки! Прохожу вот твой курс и я на 21:42 столкнулся с проблемой. При дебагинге приложения нажимаю на кнопку в нижнем правом углу для загрузки данных, после чего в crypto_coins_repository.dart программа останавливается на 13 строчке (priceInUSD: (e.value as Map)['USD'],) и выдаёт следующее сообщение: "Произошло исключение. _TypeError (type 'double' is not a subtype of type 'Map' in type cast)". На форумах искал решение, не нашёл(
вот и у меня тоже самое
попробуй проверить ссылку на точность. Я переписал ее с видео все стало работать.