Surf Flutter Team

2022-09-21 16:55:40 Открыть/Комментировать

2022-09-21 16:55:25 Третий шаг: выделить UI-компоненты и то, как работать с внешними виджетами приложения.

Перед нами экран, в рамках которого необходимо реализовать:

• заголовок страницы с текстовым полем поиска,
• список с карточками мест,
• карточку места,
• функциональную кнопку «лайк».

На самой странице отчетливо выделяются состояния (стейты):

• состояние списка мест,
• состояние нажатие кнопки,
• к состоянию также можно отнести значения ввода в текстовое поле.

Бизнес логика UI:

• получения данных;
• обновление данных (pull to refresh);
• поиск локальный и удаленный,
• добавление и удаление из избранного.

Теперь перед нами полная картина. Чтобы дать окончательную оценку, осталось понять, сколько времени уйдет на реализацию каждого компонента. Для этого я пользуюсь таблицей на основе личного опыта и опыта коллег Открыть/Комментировать

2022-09-21 16:55:09 Второй шаг: выделить классы Repository, которые будут отвечать за получение данных и первоначальную работу с ними, — PlaceRepository.

В нашем случае нужно получать список мест из сети. Есть возможность добавить место в избранное.

Чтобы использовать локальное хранилище и работать со списком офлайн, необходимо реализовать два DataSource-класса:

• RemotePlaceDataSource
• LocalPlaceDataSource

На этом описание слоя работы с данными можно завершить.

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

2022-09-21 16:51:49 Как оценивать задачи. Часть 2: из чего состоит задача

Первый шаг:

Понять, какие данные нужны со стороны бэкенда,
Какие сущности, модели, датаклассы понадобятся для взаимодействия,
Определить, что выводится на экране,
Включить фантазию на предмет того, какие поля может содержать сущность.

Примерное представление о содержании полей необходимо для понимания сложности конкретного класса.

На нашем экране можно выделить две сущности:

— Сущность, которая описывает место: название места, тип места, id места, рабочее время.
— Рабочее время. Открыть/Комментировать

2022-09-21 16:38:48 Как оценивать задачи. Часть 1

Предположим, пришёл заказчик и попросил реализовать экран

Как оценить задачу: сроки, трудозатраты?

Меня зовут Дима Шевченко, я Tech Lead Flutter Surf. Расскажу, как правильно подходить к оценке, чтобы не краснеть за сорванные дедлайны.

Составим вопросы для понимания задачи. Иногда ответы на них есть в ТЗ, но иногда информации недостаточно:

• Бэкенд готов? Если нет, когда можно ожидать готовность?
• Реализована ли нижняя навигация? Если нет, включаем в оценку?
• Что должно происходить во время нажатия на кнопку фильтрации в поиске: всплывающее окно или отдельный экран?
• Что должно происходить при нажатии на карточку?

Ответы на эти вопросы помогут точнее декомпозировать задачу и сделать оценку. В нашем случае необходимо реализовать самую простую функциональность: отображение списка мест и поиск. Открыть/Комментировать

2022-09-15 12:20:54 Смотри фотоотчёт с CrossConf Открыть/Комментировать

2022-09-13 16:39:52 Обёртки над необычными модулями: часть 3. Подключение к основному проекту

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

На стороне проекта был написан сервис, объединяющий их в единый интерфейс.
__

Каким бы экзотическим не казалось устройство, подключаемое к проекту, скорее всего производитель написал библиотеку/SDK и инструкцию для нативных платформ. Совсем несложно обернуть её в простенький Flutter-плагин, а понимание базовых концепции работы нативных платформ поможет справится с проблемами, которые не описаны в мануалах. Открыть/Комментировать

2022-09-13 16:38:03 Обёртки над необычными модулями: часть 2. Подключение к проекту нативных библиотек от производителей устройств

Подключить нативную библиотеку к проекту можно как минимум двумя способами:
1. «В лоб»: работая с папками /ios/ и /android/ в корне проекта.
2. Создать Flutter-плагин и подключить его к проекту через pubspec.yaml. Это удобно: модуль гораздо проще шарить между проектами и даже можно выложить на pub.dev.
Если это ваш первый опыт, лучше идти от первого пункта ко второму, экспериментируя на пустом проекте.

Подключение библиотеки к пустому Flutter-проекту

Библиотеки подключаются по инструкциям от производителя. Их можно найти на официальных сайтах и в readme примеров на github.

В случае со сканером штрих-кодов подключить .jar-библиотеку к Android оказалось несложно: открываешь папку android в корне проекта и действуешь по инструкции.

Для iOS небольшое расхождение с инструкцией возникло: на вкладке проекта Build Settings в строчке Objective-C Bridging Header нужно было указать ссылку на заголовочный файл библиотеки DTDevices.h, но в нормальном Flutter-приложении там уже указана ссылка на Runner-Bridging-Header.h.

Решение оказалось простым: открыть этот Runner-Bridging-Header.h файл и импортировать заголовочный файл в него

Вынесение библиотеки в нативный плагин

После экспериментов с пустыми проектами и привязкой к нему методов библиотек через method-channel пришло время выносить изменения в отдельный плагин.

Как создать плагин, описывать не буду. На официальном сайте есть отличная статья на эту тему.

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

Осложняло отладку кода то, что анализатор Android Studio не хотел воспринимать плагин как целый проект и при открытии Kotlin/Java-файла с расписанными method-channel отказывался подсвечивать ошибки.

Решение оказалось тривиальным: нужно открывать папку android не в плагине `/название_плагина/android/`, а в примере его использования `/название_плагина/example/android/`. В таком случае Android Studio отображает две папки Android, в одной из которых лежат файлы нашего пакета. Открыть/Комментировать

2022-09-13 16:34:52 Открыть/Комментировать