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

Меня зовут Марк Абраменко, я Flutter Team Lead. В апреле 2022-го мы решились на эксперимент: внедрили Github Copilot в проектную Flutter-команду из 5 человек.

Copilot — это AI, который умеет дописывать код за человека, пользуясь гигантской базой открытых Github-проектов.

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

Код, который он дописывает, имеет, мягко говоря, не уровень продакшена.

С момента начала эксперимента прошло уже 5 месяцев: за это время многие коллеги отказались от Copilot.

Но! Некоторые из нас, включая меня, продолжили им пользоваться. И в следующем посте я расскажу почему.

Github Copilot — второй пилот. Но не ваш, а кодогенератора

Copilot находится где-то на уровне обычного кодогенератора типа json_serializable, freezed, injectable.

Преимущества становятся очевидны только когда отключаешь его и возвращается привычная рутина.

Когда Copilot действительно помогал

1️⃣ Рефакторинг и миграция
Впервые мы почувствовали его помощь, когда мигрировали с уже легаси surf_mwwm на Elementary. Copilot очень быстро осознал, как именно соотнести старые классы и зависимости к новым.

2️⃣ Рутина
Хорошо помогает в написании вещей, которые всегда бесят: part/part of, сериализаторы, компараторы, backing fields.

3️⃣ Работа с языком, который не знаете или знаете плохо
Лично мне Copilot помог, когда пришлось писать фикс на Objective-C. Я не пишу на нём постоянно: регулярно забываю синтаксис и специфические конструкции. Copilot подыгрывает, если намекнуть ему, что именно хочешь написать.

4️⃣ Написание тестов
Подробно описав тест-кейс на английском, вы поможете Copilot сгенерировать тест. В большинстве случаев он достаточно хорошо мокает, но иногда приходится немного дописывать руками.

5️⃣ Стабы и мок-данные
Генерировать стабы или мок-данные для тестов тоже очень приятно с помощью Copilot. Для модели пользователя, например, он может сгенерировать что-то более оригинальное, чем «Имя Фамилия».

Перед написанием этого поста я отказался от Копилота на 2 недели и не почувствовал той ломки, которую вы можете испытать от отключённого статического анализатора или подсветки кода. Отказ от Copilot, скорее, похож на отказ от сниппетов.

Copilot: выводы

С самого начала у нас были ощущения от него, как от первых версий AI для генерации картинок по описанию — это прикольная игрушка. Так и было раньше, но сейчас в DALL-E 2 можно генерировать картинки для использования в статьях, для обложек журналов или анимации.

Надеемся, что когда-нибудь и Copilot дорастёт до версии, когда он станет незаменимым инструментом для программиста.

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

Кажется, что это не такая бесполезная подписка, как Telegram Premium, но решайте, стоит ли платить за кодогенератор такие деньги.

Обёртки над необычными модулями: часть 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, в одной из которых лежат файлы нашего пакета.

Обёртки над необычными модулями: часть 3. Подключение к основному проекту

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

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

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

Смотри фотоотчёт с CrossConf 👇

Как оценивать задачи. Часть 1

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

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

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

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

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

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

Как оценивать задачи. Часть 2: из чего состоит задача

Первый шаг:

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

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

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

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

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

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

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

• RemotePlaceDataSource
• LocalPlaceDataSource

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

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

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

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

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

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

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

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

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

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