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);
• поиск локальный и удаленный,
• добавление и удаление из избранного.

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

Как оценивать задачи. Часть 3: таблица временных затрат

Обратить на колонки с заголовками Story point.

Первая колонка (1 Story point) рассчитывается по формуле, которая описана в методике PERT: (a + 4m + b) / 6

a – минимальное время, m – предполагаемое время, b – максимальное время

Во второй и третьей колонке значения умножаются на 1,5 и 3 соответственно.

Поскольку компоненты могут иметь различный уровень сложности, к отдельному взятому компоненту можно указать дополнительный коэффициент от 1 до 3 в зависимости от сложности. Таким образом, значение веса по времени будет выбираться из соответствующей колонки Story point.

Осталось внести все данные в специальную таблицу. По итогу вышло, что примерное время реализации экрана из первого поста составляет 55 часов.

Расскажите, а как вы подходите к оценке задач?

Пять плагинов для продуктивного написания кода

Всем привет 👋

Меня зовут Иван Таранов, я Flutter-разработчик в Surf. Сегодня расскажу, как улучшить пользовательский опыт работы в IDE и повысить продуктивность при написании кода с помощью плагинов.

В посте разберём плагины для Android Studio: это та среда, которой я пользуюсь. Но аналоги этих инструментов присутствуют и в VS Code.

Поговорим о:
🔹Шорткатах с помощью KeyPromoter X
🔹Изменении строк с помощью String Manipulator
🔹Кастомизации иконок с помощью Atom Material Icons
🔹Упрощении работы с зависимостями с помощью Flutter Enhancement Suite
🔹Спецэффектах с помощью Power Mode II

1️⃣ KeyPromoter X: больше шорткатов богу шорткатов

Скажу честно, мне очень нравятся комбинации клавиш. С их помощью я могу очень быстро совершать рутинные задачи: навигацию в IDE, манипуляцию с файлами, дебаггинг приложения и многое другое. Если какую-то комбинацию пропустил, плагин подскажет о её существовании. Очень просто, а главное — полезно 👍

2️⃣ String Manipulation: изменение строк

Зачастую приходится рефакторить строковые данные, и нет ничего хуже, чем необходимость вручную перебирать форматы: camel case в snake case или наоборот.

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

Здесь на помощь приходит String Manipulation — плагин, позволяющий совершать десятки превращений строковых данных. Это, несомненно, сохраняет время и рассудок.

3️⃣ Atom Material Icons: иконки — просто космос

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

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

В общем, повышение читаемости и лёгкость навигации в коде — однозначно плюс.

4️⃣ Flutter Enhancement Suite — упрощение работы с зависимостями для Flutter

Не мог обойти вниманием этот замечательный плагин. Основная его фича — выдавать подсказки, какие конкретно библиотеки в pubspec.yaml обновились и что требует повышения версии.

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

5️⃣ Power Mode II: когда надо показать коду, кто тут главный

Самое лучшее я оставил напоследок 😂

Power Typer — плагин, создающий взрывы и спецэффекты при наборе, вставке или изменении кода в редакторе.

Бывает полезно для лайв-кодинга или парного программирования: с 🔥 и 💥 на экране тяжело отвлечься даже от скучного рефакторинга. А ещё эффекты помогают следить за местоположением курсора.

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

На этом я завершаю мою небольшую подборку. Всем спасибо за прочтение.

❓А какими плагинами пользуетесь вы? Делитесь обязательно в комментариях 👇