Flutter + IT

Я в это время усиленно думал о том, как я хочу выучить английский язык, а так как я ленивое существо по сути, то решил, что играя в какую-нибудь игру (а я люблю играть в игры, дота 2, варкрафт 3, цивилизация, герои 3) то смогу поднять свой уровень (играл кстати в wow classic на английском - с google translate переводчиком было круто, там очень интересные английские фразеологизмы используются). В общем, как-то, скачал приложение типа WordConnect, где в верхней части показывается кроссворд, а в нижней круг с буквами. И водя пальцами по этому кругу, нужно соединять буквы, что б образовалось слово. Мне в общем понравилось, так как не имея богатый словарный запас слов, можно попробовать логически или интуитивно угадывать неизвестные доселе английские слова. Ну и чуть залипательно. Одно "но": я совершенно не знал получившиеся слова. Данное приложение НЕ предоставляло возможности узнать перевод слова на мой язык.

И тут я смекнул - а чё б не создать подобное приложение, но только с переводом и шлюхами. Только с переводом.

А я что-то ранее слышал о Flutter. Flutter - это такой фреймворк, для языка программирования Dart, которые по словам Google позволяет иметь одну единую кодовую базу для того, что бы создать приложение и под iOS, и под Android (сейчас вроде можно это сделать и под Windows и под HTML, но я не проверял). Звучит круто чё! Для меня как для PHP разработчика с 6-летним стажем, добавить в свой стек знание про то как работать в мобильном сегменте (тем более тимлид на прошлой работе всегда меня хвалил) было приятно.

Сперва я пошёл за знаниями на coursehunter. В перемешку со сном (так как, когда слушаю лекции онлайн, то сразу засыпаю) прошёл курс по Dart и Flutter, и даже кое-что понял. Наверное, программирование - это плюс(+)/минус(-) про одно и тоже: у вас есть какие-то данные, возьмите их и сделайте что-то с ними и результат покажите пользователю.

И после того как ознакомился с Dart и Flutter и приступил к реализации приложения, я начал пользоваться ChatGPT (только платная версия, так как бесплатная - увы, ограничена по количеству сообщений в день).

Скажу сразу, что ChatGPT - НЕ напишет за вас приложение, НЕ решит за вас задачу, НЕ даст вам решение.

Лично моё восприятие и мнение - это прекрасный анализатор, великолепный систематизатор, далее идут супер эпитеты обозначающие, что ChatGPT, как великолепный джуниор, т.е. работник, который умеет супер безотказно работать, но только скажи ему КАК надо работать. В результате моя работа с ChatGPT сводилась к тому, что я был как некий тим-лид и происходил следующий цикл:

1. я дробил задачи на маленькие, рассказывал о том, какую логику хочу видеть в том или ином методе или компоненте, а ChatGPT подсказывал решения

2. я оценивал результат на жизнеспособность

3. иногда плакал и бился головой об стол, из-за того, что не всё всегда понимал и приходилось дополнительно въезжать, так как мобилка это больше про асинхронные процессы, в то время как PHP - рожден, что бы умереть в одном потоке. А тут присутствуют элементы асинхронности

4. кайфовал, когда наконец разобрался и всё работало как хотел

5. повторить этот цикл с начала

Далее, я по ходу создал толковый словарь английских слов с переводом на иностранные языки: русский, немецкий, испанский и китайский, а так же, значение слова и примеры. ChatGPT показал отличные способности в части генерации переводов на разные языки и толкования того или иного слова. Ошибки: встречаются, особенно, в примерах. Так как я совсем один, мне сложно обработать все возможные проблемные слова. Но я надеюсь, мне удалось создать вменяемый толковый словарь английских слова, напободие cambridge.dictionary или oxford.dictionary

Заключение

1. Спустя 6 месяцев я получил готовый результат. Мне пришлось заплатить 25$ долларов за публикацию в Google Store и 100$ за публикацию в App Store, и пройти 1.5 месяца проверки и тестов, что б опубликовать рабочую версию. Я сделялъ - я доволен.

2. Получил опыт работы с мобильными приложениями, с созданием приложений на Flutter.

3. Я получил опыт работы с ChatGPT Api в части генерации какого-то пользовательски-полезного обучающего материала

4. Я получил опыт работы с ChatGPT Chat, как лучше его использовать, что бы систематизировать мои знания и получить реальный результат в части написания кода

Выводы

Теоретически, я вижу дальнейшее развитие приложения в создании новых переводов для других языковых групп этого мира, добавления каких-либо новых фич и, вообще, монетизации этого продукта. Однако, для этого всего нужно инвестирование, а на данный момент у меня его нет:) Поэтому, и монетизации никакой тоже нет:)

ChatGPT и прочие модели на данном этапе - наше будущее в части систематизации знаний. Наши будущие помощники. Берите их на вооружение быстрее, чем позже.

Flutter - понравился, как инструмент для создания чего-то простого, кроссплатформенного. Идеально подойдёт для создания мобильного справочника, интернет-магазина, чего-то такого, где бизнес захочет иметь прямой доступ к своим пользователям с более низкими тратами.

Результат, если хотите, можете оценить вот тут:

Google Store - https://play.google.com/store/apps/details?id=com.linguapuzz...

AppStore - https://apps.apple.com/ru/app/lingua-puzzle/id6499212190?l=r...

P.S.
После релиза этого приложения, и набравшись опыта, я подумал, что могу создать свой маркетплейс в одно лицо, наподобие yandex.market, так же, используя chat gpt api. Если данный пост будет хоть кому-то интересен, я напишу процесс создания этого маркеплейса. Тут я решил его создавать уже используя PHP и Symfony, - это более привычная для меня среда + здесь я вижу перспективы монетизации, а значит, я всё таки, смогу купить себе хлеб, масло и велосипед.

Спасибо за чтение:)

Дизайн сдержанный, без ярких акцентов, с матовой поверхностью. Правда, на ней остаются следы от рук. Так что если приходится постоянно открывать ноутбук в присутствии клиентов или партнеров, лучше купить прозрачный кейс. Визуально и тактильно устройство ощущается надежно: не выскальзывает и не двигается по столу, благодаря специальным резиновым накладкам на задней части.

Шарнир работает мягко: чтобы открыть крышку даже одной рукой, не нужно придерживать корпус. Чтобы показать коллеге или клиенту презентацию, достаточно раскрыть экран на 180°. Это удобно и для работы лежа, и для подставок, которые требуют определенного угла обзора.

Также отметим 9 портов: USB-A, USB-C, HDMI, слот для карты памяти — можно забыть о переходниках.

В TECNO MEGABOOK K15S предустановлен Windows 11. Ноутбук готов к работе сразу после включения. Никаких лишних установок и обновлений. Все настроено и оптимизировано для вашей многозадачности.

Экран: яркая картинка и комфорт ночью

Экран — 15,6 дюйма, IPS-матрица с разрешением Full HD. Углы обзора отличные: изображение остается четким, даже если смотреть сбоку, цвета не искажаются. Есть антибликовое покрытие. Тестировали ноутбук при разном освещении: можно спокойно работать у окна. Когда солнце бьет прямо в экран, текст по-прежнему остается читаемым, картинки не искажаются. Это редкость в бюджетных моделях.

Неважно, работаете вы ночью или играете, выручит клавиатура с регулируемой четырехуровневой подсветкой. При среднем уровне в темноте все видно, глаза не устают. Из плюсов для тревожных людей: включали ноутбук в самолете и электричке, никто вокруг не жаловался на яркость. Все регулируется кнопками, не нужно лишний раз заходить в настройки.

Стеклокерамический крупный тачпад — 15 см. Он не залипает, не промахивается, срабатывает с первого касания. Не возникает дискомфорта, даже если несколько часов редактировать документы без мышки. После перехода с других устройств немного непривычно, что тачпад работает в двух направлениях: нижняя часть отзывается нажатием, верхняя — касанием.

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

Производительность: рендерим видео, открываем вкладки

Ноутбук работает на AMD Ryzen 7 5825U (опционально можно выбрать версию техники Intel Core i5-13420H). Восьмиядерный AMD с поддержкой 16 потоков подходит для ресурсоемких операций вроде рендеринга или работы с большими массивами данных. Встроенная графика Radeon справляется с редактированием видео в Full HD или играми.

Во время монтажа 30-минутного ролика в DaVinci Resolve и параллельной работе в Photoshop с несколькими большими PSD-файлами система сохраняла стабильность. Не было ни зависаний, ни заметного падения производительности. Ноутбук уверенно держит в фоне 10 приложений одновременно. Если запущены браузер с 20 вкладками, видеозвонок в Telegram, Excel с объемной таблицей и софт для монтажа, система не тормозит и не перегревается. Переход между окнами остается плавным, ничего не «проседает», даже при одновременном скачивании файлов и редактировании видео.

Базовая комплектация включает 16 ГБ оперативной памяти в двух слотах. При необходимости можно легко увеличить этот показатель до 32 ГБ, заменив стандартные модули на более емкие. Помимо установленного SSD на 1 ТБ предусмотрен дополнительный слот, поддерживающий диски объемом до 2 ТБ.

Чтобы во время нагрузки системы охлаждения не выходили из строя, в ноутбук встроен эффективный вентилятор, способный рассеивать до 35 Вт тепла. Устройство не греется, его спокойно можно держать на коленях. Это решение дополнено тремя режимами работы, которые переключаются простой комбинацией клавиш Ctrl+Alt+T. Тихий режим идеален для работы ночью или в общественных местах, сбалансированный подходит для повседневных задач. Производительный, на котором запускали рендеринг видео и игры, практически не шумит.

Автономность: 15 часов без подзарядки

Протестили автономность MEGABOOK K15S в условиях, знакомых каждому деловому путешественнику. Утром перед вылетом зарядили ноутбук до 100% и взяли его в рейс Москва — Калининград. В зале ожидания провели созвон, потом три часа смотрели сериал и в дороге до отеля редактировали документы. К моменту приезда оставалось 40% заряда: хватило бы еще на пару часов продуктивной работы.

MEGABOOK K15S может автономно работать до 15 часов и позволяет не оглядываться на индикатор заряда. Заявленное время достигается при типичном офисном использовании: одновременная работа с документами в Word и Excel, ведение переписки, видеоконференции, веб-серфинг.

Если все же понадобится, за  час восполняется до 70% батареи. Компактный адаптер мощностью 65 Вт на базе нитрида галлия поместился даже в карман пиджака. Один блок питания заряжает и ноутбук, и смартфон, и наушники. Экономия места: не нужно никаких дополнительных проводов.

Звук, который реально слышно

В TECNO MEGABOOK K15S установлены два мощных динамика по 2.5 Вт. Звук с глубокими низами, без пластикового дребезжания, объемный. Благодаря DTS можно смотреть видео даже в шумном помещении. В тестах специально включали сцены с шагами и выстрелами: локализация настолько точная, что в наушниках нет необходимости.

Та же стабильность и в микрофоне. Благодаря AI-шумоподавлению голос передается чисто. Во время тестовых звонков из оживленного кафе собеседник не услышал ни разговоры за соседним столом, ни городской шум. И все это — на расстоянии до пяти метров.

Кстати, о созвонах. В ноутбуке встроена обновленная камера. Она отслеживает положение лица, а еще есть физическая шторка приватности. Например, можно закрыть шторку для комфортных видеоконференций.

Для тех, кто предпочитает гарнитуру, идеально подойдут беспроводные наушники TECNO FreeHear 1 из экосистемы бренда. Когда не хотелось делиться разговорами с окружающими, подключали их. Чистый звук с акцентом на средние частоты, 11-мм драйверы, которые выдают неожиданную детализацию. Музыку слушать приятно: и фоновый плейлист на телефоне, и вечерний сериал на ноутбуке. Автономно работают наушники 6 часов, с кейсом — до 30 часов. 

Bluetooth 5.4 обеспечивает стабильное соединение на расстоянии до 10 метров. Удобная C-образная форма разработана специально для длительного ношения — после восьмичасового рабочего дня в ушах не возникает дискомфорта. Наушники поддерживают одновременное подключение к ноутбуку и смартфону. Переключение между устройствами происходит быстро и без заминок.

Через фирменное приложение Welife можно выбрать один из четырех эквалайзеров и отследить местоположение гарнитуры в случае утери. А еще кастомизировать виджет для управления наушниками. Функция настройки персонализированного дизайна доступна для устройств на Android и позволяет гибко изменить внешний вид окна подключения: вплоть до установки фоновой картинки или собственного фото.

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

Бесшовная синхронизация со смартфоном

Благодаря функции OneLeap ноутбук синхронизируется со смартфоном TECNO. Подключение происходит за пару секунд: достаточно один раз подтвердить сопряжение. После этого открывается доступ к бесшовному переключению между устройствами — объединенному буферу обмена, дублированию экранов и передаче файлов без кабелей и пересылок в мессенджерах.

Функция выручила, когда нужно было открыть приложение, у которого нет веб-версии. Удобно работает и буфер обмена: скопировал текст на одном устройстве — вставил на другом. Например, код, полученный в сообщении на телефоне, вводится в браузере на ноутбуке. Экономит минуты, а иногда и нервы. А когда в дороге пропал Wi-Fi, ноутбук сам подключился к мобильному интернету через смартфон.

TECNO CAMON 40 и сам по себе — мощный рабочий инструмент.  Смартфон выделяется камерой высокого качества 50 Мп, ярким AMOLED-экраном 120 Гц и множеством функций, которые упрощают процесс мобильной съёмки и использование искусственного интеллекта TECNO AI.

Телефон работает на HIOS 15.0.1 на базе Android 15.В фирменную оболочку встроен искусственный интеллект:

• Голосовой помощник Ella. Отвечает на вопросы, помогает с задачами и управлением устройством.

• Решение задач. Наводите камеру на задачу, ИИ решает ее.

• AI Редактор фотографий. Интеллектуальная обработка в одно касание.

• Быстрый поиск. Находит адрес на экране и запускает навигацию, распознает объекты и события, автоматически добавляет их в календарь.

Технические характеристики

• Процессор и память. 8 ядер, 16 потоков, Кэш L3 16 МБ, частота до 4.5 ГГц Графический процессор AMD Radeon™ graphics SSD 512 ГБ или 1 ТБ, М.2, 2280, PCle 3.0 Nvme DDR4 16 ГБ, 3200 МГц.

• Дисплей. 15.6", TFT, Full HD (1920×1080), 16:9, 280нит, 45% NTSC, 16.7 млн цветов, 60 Гц, 141 ррі.

• Веб-камера. 1 Мп, шторка приватности.

• Порты. 9 портов: 1*TF Card (microSD), 1*HDMI 1.4, 1*USB-A 3.1,

  1*USB-A 3.2, 1*3.5mm аудиовход, *Ethernet RJ45 до 1 Гбит, 2*Туре-С (Full Function), 1*слот для замка Kensington.

• Другое. Сканер отпечатка пальца в кнопке питания. Клавиатура с подсветкой (4 уровня яркости). Тачпад с поддержкой одновременно 4 касаний.

• Батарея. 70 Вт∙ч (6150 мА∙ч), Li-Pol, 11.55 B 65 Вт Type-C GaN, 20 В, 3.25 А, кабель 1.8 м (Туре-С-Type-C).

• Габариты. 17.3 мм (высота), 359.5 мм (ширина), 236 мм (глубина).

• Вес. 1,7 кг.

Если хотите создать собственную экосистему, в которой технологии подстроятся под ритм дня, попробуйте технику TECNO. Мощный ноутбук, быстрый смартфон и наушники соединяются в единое пространство. Быстрое переключение между устройствами, синхронизация файлов и стабильное соединение без лишних настроек.

КУПИТЬ НОУТБУК TECNO

Ближайший Weekend Offer для мобильных разработчиков пройдет 17–18 июня, но задачи надо решить до 12-го, поэтому лучше не откладывать. Все детали здесь.

Я случайно увидел где-то в интернете, что проходит такое мероприятие, и воспринял это как что-то вроде хакатона, только с призом в виде работы. Мне захотелось попасть в Яндекс, а это была удобная возможность попробовать свои силы, но при этом не потерять много времени. Плюс у меня уже была работа, поэтому собеседования в выходной показались удачной идеей.

Весь путь укладывается в несколько пунктов

1. Я откликнулся на сайте и попал на отборочный этап

Все задания нужно решать на платформе Яндекс Контест. Мне выпало найти ошибки в коде. На ближайшем Weekend Offer Mobile будет три задачи, по которым нужно набрать не менее 100 баллов, чтобы пройти дальше.

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

2. Пообщался с рекрутером Яндекса

Рассказал о себе, задал вопросы и поделился фидбеком, над какими продуктами мне бы хотелось работать. Тогда мне понравились Яндекс Такси и Яндекс Драйв. На Weekend Offer 17–18 июня искать мобильных разработчиков будут команды Яндекс Маркета, Яндекс Карт, Яндекс Прo и Яндекс Go.

3. Прошел сеанс быстрых свиданий :)

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

Дальше меня ждала серия собеседований с каждой командой по очереди — одно за другим, как на быстрых свиданиях. Я присматривался к ним, они ко мне.

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

Почему Weekend Offer не стоит пропускать

• Это слишком ценный опыт для разработчика

Вы не просто решаете задачи с автопроверкой (хотя это тоже полезно), а проходите через все наймовые мероприятия в ускоренном режиме. Это значит, что вы узнаете свои сильные и слабые стороны, посмотрите изнутри на технические собеседования в Яндексе (что нужно знать, с чем работают команды, какие задачи предлагают решить) и потренируетесь проходить собеседования.

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

• Быстрый офер не съест ваши нервные клетки

До Яндекса я поработал в двух компаниях, но собеседовался во многие. Это стресс. И чем дольше все продолжается, тем больше он выматывает. В рамках Weekend Offer все происходит быстро, поэтому и нервничать придется недолго. На ближайшем Weekend Offer Mobile все собеседования можно пройти за одни выходные.

Быстрый офер эмоционально намного проще, чем стандартный формат найма.

• Работа в Яндексе поможет прокачаться в своей специальности

Продуктами Яндекса пользуются миллионы людей, а команды решают по-настоящему интересные задачи. В такой обстановке сверхбыстро растет квалификация разработчика.

Коридор к тренажерному залу в одном из столичных офисов Яндекса

И еще мне кажется, что печеньки на кухне и другие удобства в офисе как-то недооценивают. Когда я устроился на вторую работу, искренне удивился бесплатному кофе. Офисы Яндекса предлагают намного больше: от библиотеки и спортзала до тех самых вкусных глазированных сырков по средам.

Чем стандартный найм отличается от быстрого офера в Яндексе

У меня были разные собеседования. На одних спрашивали очень много теории, а потом мы писали код. На других общался с людьми, с которыми потом не работал. Быстрые наймовые мероприятия в Яндексе — полная противоположность.

Конечно, у стандартного найма тоже есть свои плюсы, поэтому быстрый офер это не замена, а альтернатива привычному формату. Но, на мой взгляд, плюсы стандартных собеседований больше для работодателей, а не соискателей. Поэтому советую не тянуть до последнего дня и зарегистрироваться на Weekend Offer Mobile прямо сейчас. Чем раньше вы это сделаете, тем больше будет времени, чтобы спокойно подготовиться (советую порешать задачи по алгоритмам на LeetCode). Всем удачи!

ПОДРОБНЕЕ О БЫСТРОМ ОФЕРЕ

Реклама. ООО «Яндекс»

Так вот, мне дали 2-3 недельки на изучение и ещё немного времени на простенький демо-проект, чтобы проверить, как это вообще работает, и получится ли что-то дельное. Далее мы запустили первую версию Dexbee Клуб, в которой можно было авторизоваться и протестировать интернет на доступ к нашим сервисам. Этот функционал, в первую очередь, помогал нашей бравой техподдержке подсказывать клиентам как правильно разместить оборудование в клубе.

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

Нужно было создать два запроса на сервер – авторизацию и обновление логин-токена. Перечитав кучу статей и форумов с вопросом «А что выбрать-то?», я чаще всего получал ответы как раз про HTTP и Dio. Единогласного ответа, конечно же, не получить, но большинство рекомендовало именно эти пакеты. Я решил взять HTTP, он показался простеньким для изучения и справлялся с основными функциями, что и сейчас прекрасно делает.

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

Тема для холивара: проектировать сразу хорошо или всё-таки ради скорости можно поступиться качеством?

Для проверки теории, а может из-за опыта написания на Flutter, я решил поступиться качеством и спроектировать, так сказать, не самое «резиновое» решение, но быстро внедряемое.

Проект нуждался в доработках клиент-серверной части, а в нашей команде есть возможность облегчить себе жизнь, если это несет плюсы для всего проекта: разработчик описывает, что хочет улучшить, какие выгоды от этого получит проект, сколько времени потребуется, и что тестировщику придётся проверять в итоге. Задача уходит руководителю, а он, в зависимости от степени важности исправлений, заносит её в один из будущих релизов.

Преимущества Dio над HTTP

На этот раз я взял в работу Dio, сейчас объясню почему: HTTP умеет в GET, POST, PUT, DELETE, PATCH, загружать файлы с помощью Multipart запроса.

Dio умеет всё тоже самое, но с некоторыми преимуществами:

• Глобальные настройки - при создании Dio можно указать baseURL, таймауты соединения, получения ответа и так далее.

• Interceptor - это перехватчик, в котором можно дополнить или вставить дополнительные действия перед отправкой запроса, скорректировать его ответ или ошибку. Применить можно для логирования, обновление токена авторизации и так далее.

• Есть возможность отменить выполнение всех запросов разом. И отменить отдельно взятый.

Отмечу, для HTTP уже написаны пакеты, которые дополняют его функционал и есть возможность получить все плюшки, какие имеет Dio, но у Dio всё это есть «из коробки». Важно понимать, оба пакета работают с одинаковой скоростью и быстрее Dio отправлять/получать ответ от сервера не будет.

Кажется, будто бы HTTP – голый клиент, Dio – уже нарощенный дополнительными плюшками, но, как оказалось позже, есть ещё Chopper и Retrofit – кодогенераторы запросов. Для создания запроса надо описать сигнатуру метода: путь, параметры урла, боди, что должно вернуться в ответе, запустить генератор, и тело метода создастся. Ускорение ускорения или ещё один из этапов программистской лени?

Freezed

«yet another code generator» – как пишут создатели пакета. Я бы лучше назвал подобные пакеты «инструкцией для генерации», то есть генерирует код пакет build_runner, а во Freezed описано, как надо сгенерировать. Если вкратце, с помощью него можно описать структуру серверного ответа, запустить генерацию кода и, «вуаля», парсер готов. Описанный мной функционал лишь минимальная часть того, что умеет этот пакет, так что, если вы ещё не ознакомились с ним, то я рекомендую перейти и почитать подробнее здесь. Модель дополнится методами copyWith и toString. Всё это необходимо и, порой, занимает кучу монотонного времени.

Потоки Flutter

При запуске Flutter-приложения вызывается метод main, в котором создается главный изолят, т.е. главный поток или поток для отрисовки интерфейса. После main метода запускается цикл событий, Event Loop.
Event Loop, как и следует из названия, это цикл, конец которого зависит от жизни потока, в котором он работает, в данном случае цикл завершится, как только приложение будет выгружено из памяти.

В нём происходит выполнение очередей по принципу FIFO(First in - First out). Как следует из названия, хоть тут и имеется возможность создать асинхронные Future методы – они не выполняются синхронно. Очереди делятся на два типа:

1. Microtask – служит для выполнения задач, не занимающих много времени. Создать можно при помощи Future.microtask.

2. Event – все остальные операции. От взаимодействия с UI до работы с БД, API и т.д.

Очереди выполняются именно в такой последовательности. Сначала массив microtask, а далее events. После выполнения любой инструкции, будет запущена очередь microtasks. По работе Event Loop есть отличная видеопрезентация, смотрите тут.

Для выполнения реального синхронного кода есть две возможности: метод compute и, более сложное для реализации, использование класса Isolate. Оба варианта создают новый поток или, по-другому, – изолят. Назван он так не случайно. Каждый поток во Flutter изолирован от других и имеет свою собственную область памяти. Нет возможности допустить deadlock, и это круто. Но, чтобы воспользоваться объектами, созданными одним изолятом, надо передать их копию в другой изолят. Общение происходит через сообщения, поэтому оба изолята должны знать порты друг друга. Изоляты следует уничтожать, чтобы они не занимали память впустую .

Передать новому изоляту можно только функцию верхнего уровня, глобальную функцию, или статический метод класса.

Метод compute настраивает общение и уничтожение изолята внутри себя.

Вот отличная статья, иллюстрирующая, почему стоит пользоваться изолятами: https://dev.to/alphamikle/why-should-you-use-isolates-in-flu...

И ещё список для статей для более глубокого понимания работы изолятов:
• https://habr.com/ru/articles/497278/#
• https://blog.codemagic.io/understanding-flutter-isolates/
• https://martin-robert-fink.medium.com/dart-is-indeed-multi-t...
• https://dart.dev/language/concurrency
• https://skondratev.com/futures-isolates-event-loop-vo-flutter/#:~:text=Модель исполнения в Dart,Дарта — Изолят ( Isolate ).

Пример

В этой секции я напишу простенькое клиент-серверное приложение с использованием Dio, покажу, как добавить в проект кодогенератор freezed и как им воспользоваться, и выведу отправку запроса и декодирование JSON в отдельный изолят. В свободном доступе есть куча бесплатных API, на которых можно попрактиковаться, найти их можно здесь. Я выбрал Spaceflight News API, а метод v3/articles с загрузкой 100000 элементов за один запрос.

Итак, чтобы добавить Dio в проект, надо написать название пакета в pubspec.yaml и выполнить команду pub get.

Дабы не писать под каждый запрос отдельный метод, я описал класс NetworkRequest, в котором будут храниться необходимые параметры запроса.

Чтобы ответ не сломался из-за нескольких неожиданных элементов, имеющих не тот тип, который необходим нам, я сразу же описал класс ответа на запрос списка «космических» новостей. Для этого обернул конструктор ArticleResponse в конструкцию try catch.

Теперь и сам NetworkManager. При инициализации менеджера, создал клиент с настройками по умолчанию.

Метод performRequest принимает параметры запроса и функцию, по которой будет парсить ответ, если запрос успешен. Model - это тот объект, что мы ожидаем на выходе.

Вот и пример его применения.

В текущем виде запрос выполняется в главном изоляте, что, при развитии проекта, может мешать отрисовке интерфейса. Да и с добавлением новых запросов придётся описывать всё больше ответов с сервера. Не вручную же это делать. Так что, первым делом добавлю пакет freezed в проект. Делается это при помощи всё того же pubspec.yaml.

dependicies – пакеты с фреймворками и библиотеками, которые используются в проекте, например, элементы интерфейса или утилиты для использования возможностей телефона, локатора, блютуз и т.д.

dev-dependicies – пакеты, помогающие в разработке проекта, например: тесты, кодогенераторы и т.д.

Выполнить всё тот же pub get, и поехали пользоваться.

Все подчеркивания это нормально. Теперь необходимо запустить команду генерации. Делается это следующим образом: надо открыть Терминал, перейти в папку с проектом и выполнить команду flutter pub run build_runner build. После успешного выполнения команды подчеркивания должны пропасть. Вот таким нехитрым образом и дополнилась модель респонса.

Далее, я выведу выполнение каждого запроса в отдельный изолят, воспользовавшись функцией compute. Созданный изолят не может получить доступ к уже настроенному Dio клиенту, поэтому я создам класс, в котором будет храниться клиент, запрос и функции для парсера.

И опишу глобальный метод, который нужно будет выполнить.

Таким образом, в performRequest я создам IsolatedNetworkRequest и выполню метод compute.

Теперь каждый запрос будет выполняться в отдельном изоляте и не мешать работе главного.

Итог

У нас есть клиент с глобальными настройками, для которого можно написать перехватчики, если появится необходимость корректировать отправку и результаты запросов. На каждый новый ответ нет необходимости тратить время на описание класса. А запросы не мешают работе изолята, отвечающего за отрисовку интерфейса. Ознакомиться с демо проектом можно по этой ссылке: https://github.com/Wenomok/dio_example

Буду рад любым отзывам! Есть желание и дальше писать статьи и делать их качественными и максимально интересными.

Автор: Влад, iOS/Flutter-разработчик в DexSys

Так что же такое Flutter, и с чем его едят?

Flutter уверенно занимает ТОП-1 в кроссплатформенных языках. Он сокращает время на разработку, и, соответственно, на доставление продукта конечному пользователю. Если говорить бизнесовым языком, то «скорость выше и платишь меньше».

Едят Flutter вместе с языком Dart. На вкус такой же аппетитный, как и JavaScript.

Начав писать на Flutter, можно прочувствовать на себе следующие моменты:

• Нервные клетки исчезают гораздо реже;

• Появляется больше свободного времени;

• Повышается самооценка:)
  
  Чуть больше деталей:
  

• Под капотом свой графический движок Skia и рантайм Dart VM. Написано на C/C++. Соответственно, запускать код ты можешь прямо из консоли, без всяких IDE`шек;

• Очень хорошо поддерживаются 2 платформы – iOS/Android, чуть меньше – WEB, и потихоньку встает на ноги поддержка MacOS/Windows/Linux.

Как переводил? С чего начинал?

Я пришел на проект, когда нативные версии были в проде уже более 5-ти лет. А flutter-копия только училась ходить — был написан функционал одной роли. Всего в приложении их три:

• Курьеры: доставляют банковские продукты

• Кредитные специалисты на административных пунктах и сотрудники в банковских отделениях - осуществляют выдачу дистанционно одобренных продуктов

Архитектура:

Изначально я хотел переписать всё на BLoC, так как это чистая и всеспособная архитектура. Но любовь к трудностям победила — я решил оставить текущую реализацию, MobX.

Для начала я отрефакторил структуру папок, переписал некоторый код для лучшей производительности и приступил к двухфакторке. Она необходима для верификации пользователя и для нее используются стандартные http запросы.

И тут случился первый фейл - когда двухфакторная верификация уже была переписана, разработчики в команде решили перейти на gRPC.

Привести мысли в порядок помогли размышления о том, что у Flutter большое растущее комьюнити и наверняка для grpc-запросов уже есть готовые библиотеки. И я не ошибся! Мои нервные клетки сохранились:)

Но ненадолго… Вскоре после переписывания функционала, в связи с безопасностью тестовых сред, grpc-запросы отменили. Пришлось откатывать все обратно до http-запросов.

Функционал ролей

Если вам когда-либо потребуется работать с распределением ролей, рекомендую использовать абстракцию. Благодаря ей:

• сильно сокращается время багофиксов и изменений;

• один элемент может использоваться в 5-ти местах, не нарушая функциональность каждого из них

  
  Но продумать такую абстракцию за раз невозможно, поэтому лучше привести виджеты к универсальному виду, так как они могут понадобиться в новых ролях. А если это невозможно, то поделить на разные виджеты. Ведь универсальность — это, конечно, хорошо, но и чистоту кода нужно сохранять.
  
  Решением стал MobX. На нём можно сделать «обозреваемый геттер», который будет смотреть и следить за заданными условиями. Если условие поменялось – геттер сразу его подхватит и обновит информацию. Так мы оставляем чистый код и не переносим все условия на UI.

Перенос функционала курьеров:

В приложении курьеру нужно иметь карту с пакетами и список пакетов и договоров на доставку. По каждому договору нужны:

• Детальная информация

• Договоренности

• Реквизиты новой карты

• Печатные документы

• Фото клиента

• Фото залога и чек-листа

• Фото основного пакета документов
  
  Расскажу подробнее о некоторых пунктах:
  
  Реквизиты:
  На этом этапе реализовали для курьеров возможность ввести банковский счет, где мы используем overlay.
  
  Печатные материалы:
  У dart’а есть возможность запускать ссылки. Просто вставляешь в метод (launchUrl) диплинк для почты и вуаля: для того, чтобы отправить печатные материалы на почту, нужно нажать всего одну большую кнопку по центру экрана – трудно промахнуться.
  
  Фото клиента/залога/документов:
  Этот функционал используется для идентификации клиента. Основная задача заключалась в том, чтобы сделать единую, но при этом адаптивную схему фотографирования, так как UI и техническая часть не везде одинаковые. Также у самих фотопакетов могли различаться состояния.
  
  Решение: Разграничили state на следующие части: у каждого фотопакета есть своя view model с одинаковой структурой, у каждого сегмента/формы — отдельный state, в котором хранится основная информация по сегменту/форме + специфическое взаимодействие с сервером.
  
  Таким образом, мы получаем примерно такую структуру:
  PackageDetails -> ClientPhotoSegment -> ClientPhotoStore -> ClientPhotoVM.
  
  Также, в приложении «Мобильного банкира» есть функционал обращений. Каждый из пользователей приложения может задать любой интересующий вопрос тех. поддержке, скорость ответа на который особенно важна для выездных курьеров. В переписке должна быть реализована возможность выбрать готовые темплейты, помогающие быстрее получить ответ, и, для того чтобы UI не выглядел деревянно,— нужно была анимация.
  
  Решение: за ним далеко идти было не нужно, т.к. из коробки Flutter у нас уже есть подходящий SliverAnimatedListView

Что в итоге?

Убедившись в положительном результате, за 11 месяцев мы переписали все функциональные блоки приложения, которые команда писала на нативных приложениях с 2016 года, и, несмотря на сложности в процессе переноса, скорость разработки оказалась в 2 раза выше чем у нативных версий, а нервные клетки команды стали исчезать гораздо реже.

Таким образом, мы освободили еще и ресурс тестировщика — теперь не нужно тестировать две платформы. Появилось время на автотестирование и улучшение процессов.

Быть единственным разработчиком на проекте, конечно, классно, но порой мне не хватало еще одного разраба, на которого можно было скинуть пару задачек и спокойно пойти изучать что-то новое. Благо, сейчас время есть, и, в скором времени, проект «Мобильный Банкир» в очередной раз улучшится.

Рекомендации всем, кто хотел бы вникнуть во Flutter:
1) Очень советую пробежаться по официальной документации, ибо она написана какими-то невероятными гениями.
2) Можно глянуть ютуб канал разработчиков.
3) Ну и напоследок: чистая архитектура + BLoC понятным языком»

Автор статьи: Дмитрий, Flutter-разработчик DexSys.