неділя, 22 серпня 2021 р.

Кросплатформена розробка на Flutter. Частина II

 Основи Flutter

В першій частині я розповів постановку задачі. Тепер переходжу до опису процессу розробки.

Dart

Ядро Flutter написано на C++. А ось розробка виконується на мові програмування Dart. Вона розроблялась Google як більш сучасна альтернатива JavaScript. Використання не дуже поширенної мови замість, наприклад, Python або навіть JavaScript, розробники Flutter аргументують в тому числі і можливістю швидко вносити в мову необхідні нові можливості. Dart дуже схожа на більшість сучасних мов. Однак, не така солоденька, як Swift.

Flutter - все є віджет

Заголовок підрозділу - це основна концепція Flutter. Наприклад, є віджет для відображення тексту:

Text('Copyright(c) 2021 Vadym A. Khokhlov')

Якщо необхідно додати навколо тексту відступи, ми вставляємо його у віджет Padding:

Padding(
   padding: EdgeInsets.symmetric(vertical: 8.0),
   child: Text('Copyright(c) 2021 Vadym A. Khokhlov'),
),

Программа - це теж віджет. Ось, наприклад, як зазвичай виглядає початок:

void main() {
  runApp(NumberFactsApp());
}
class NumberFactsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Facts about numbers',
      home: const NumberFactsScreen(),
    );
  }
}

Функція main запускає віджет NumberFactsApp як головний віджет програми. Він має обов'язково реалізувати метод build для своєї побудови. Цей метод повертає інший віджет - MaterialApp, якому в якості аргументу home треба вказати ще один віджет - в данному випадку NumberFactsScreen. Таким чином програма представляє собою дерево віджетів. Насправді дерев три:  Widgets, Elements, RenderObjects. Але програмісти в основному працюють саме з першим.

Стан віджета

Flutter надає крила два основних класа віджетів: stateless та statefull. 

Якщо вигляд віджету не від чого не залежить, то він утворюється як підклас StatelessWidget. Приклад - наведений вище NumberFactsApp.

Якщо ж віджет має змінювати вигляд у відповідь на дії користувача або залежить ще від якіхось факторів, то він утворюється як підкласс StatefulWidget. Такі віджети зберігають свій стан в об'єкті окремого класу, підкласу State. Ось приклад віджету, що дозволяє користувачеві вибирати мову, на якій будуть відображатись факти:

class _LangSelector extends StatefulWidget {
  ...
  @override
  __LangSelectorState createState() => __LangSelectorState();
}

class __LangSelectorState extends State<_LangSelector> {
  final LangsService langsService = serviceLocator<LangsService>();

  @override
  Widget build(BuildContext context) {
    return TextButton(
        onPressed: () {
          setState(() {
            _curLangIndex = 1 - _curLangIndex;
            ...
          });
        },
        child: Text(langsService.flag(_curLangIndex)));
  }

  int _curLangIndex = 0;
}

Для того, щоб повідомити Flutter, що стан віджету змінився і його необхідно перебудувати використвується метод setState. Одна з особливостей Dart полягає в тому, що в ній немає якогось слова для позначення  приватних методів або змінних. Замість цього достатньо ім'я розпочати з _. (Про langsService я розповім пізніше).

Звісно, що змішувати в одному класі і логіку роботи віджета, і опис його вигляду - погана ідея. Тому у Flutter використовуються механізми керування станом (state management), що дозволяют відокремити логіку від інтерфейсу. У наступних статтях я розповім про один з них. Хоча свою першу гру я написав без використання таких механізмів. Але я стидаюсь показати її код :)

Документація по widget'ам Flutter тут.

Зміст

2. Кросплатформена розробка на Flutter. Частина II

середа, 18 серпня 2021 р.

Кросплатформена розробка на Flutter. Частина I

 Коротко про Flutter

В компанії Postindustria я працюю iOS-розробником, а у вільний час в якості хобі займаюсь розробкой мобільних додатків для Android. Останні десь два роки я цікавлюсь Flutter - це фреймворк від Google для розробки додатків. Наразі це єдиний фреймворк (як запевняє Google), що дозволяє з одного коду отримувати додатки для шости платформ:
  • iOS
  • Android
  • web
  • Linux
  • macOs
  • Windows
Крім підтримки майже всіх популярних платформ він має наступні переваги:
  • на iOS та Android програма компілюється в нативний код, тобто немає ніяких js-bridges, як, наприклад, для React Native;
  • підтримує just-in-time та ahead-of-time режими компіляції. Перший дозволяє бистро компілювати код при розробці, а другий - отримувати оптимальну швидкодію для release-варіантів.
  • як на мене, підхід до побудови інтерфейсів на Flutter більш приємний і зручніший, ніж нативні варіанти для мобільних платформ; 
  • режим hot reload дозволяє тестувати зміни інтерфейсу без перекомпіляції коду;
  • версії додатка для різних платформ можуть мати однаковий вигляд оскільки всі віджети Flutter малює сам, а не делегує це базовій платформі
До недоліків можно віднести:
  • це продовження останньої переваги. Flutter має багатий набір віджетів, що імітують виджети iOS або Android. Але коли на якійсь платформі з'являється новий, доводиться чекати, коли буде реалізований аналог на Flutter;
  • дуже слабка підтримка SEO для web.
Таким чином, Flutter дуже підходить для розробки додактів, що мають виконуватись більш, ніж на одній платформі. При чому процес проходить дуже швидко и часто навіть приємніше ніж із застосуванням нативних засобів платформи.

 Мета

За останній час я встиг розробити на Flutter кілька простих ігор. В деякі можна грати навіть з іншими гравцями по Internet. Однак, переважна більшість додатків відрізняється від ігор. Як правило, вони звертаються до якогось серверу, отримують данні, показують їх користувачеві, дозволяють їх редагувати. Я вирішив написати один такий невеличкий додаток і описати процесс в кількох статтях. Це не буде детальний опис програмування на Flutter. Я планую показати основні можливості. Також я хочу трохи самому розібратися с Clean Architecture від дядечка Боба і з тестуванням Flutter-додатків.

Додаток

Я розробив невеличкий додаток, що використовує сервис NUMBERSAPI в якості серверної частини. Цей сервіс має невеличкий API для отримання цікавих фактів про числа та дати.
Моя програма буде показувати факти, а також мати можливість перекладати факти на декілька мов.
Декілька скриншотів.
Android:

iOS:

web:


Тут можна побачити, як працює web-версія на сторінці в iframe.
Є невеличка проблема в тому, що на Github використовується https, а на сайте Numbersapi - http. З цієї причини виникає помилка mixed-content при виконанні запитів на Numbersapi. Але загальне уявлення про flutter-додатки в web отримати можна: кнопки і переклад працюють.

На Android встановити додаток можна з Google Play.

Вихідні тексти додатка можна отримати тут.
Для самостійної зборки треба встановити Flutter, як описано тут a також засоби розробки для Android або iOS з емудяторами. Після цього можна запускати:

     flutter run -d Android

  flutter run -d iPhone

  flutter run -d chrome

Для Andoid/iOS після -d треба вказати справжнє ім'я емулятора.

В наступних статтях я буду пояснювати як саме розроблявся цей додаток.

Зміст

1. Кросплатформена розробка на Flutter. Частина I

середа, 15 червня 2016 р.

О мобильных приложениях в Советском Союзе

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

ТТХ

Девайс, о котором я писал - это программируемый микрокалькулятор (ПМК)   Электроника МК-61. Этот калькулятор использовал обратную польскую запись (привет, Forth!), поэтому почти все, кто его первый раз видел, спрашивал: "А где здесь равно". Также у калькулятора было 15 регистров для хранения данных и 105 байт оперативной памяти.
Так что в моем детстве игрушки были даже не килобайтными.

После выключения питания ОЗУ очищалось и при следующем включении программу приходилось вводить заново. Позже появилась Электроника МК-52, у которой была не только энергонезависимая память, но и возможность подключать блоки расширения памяти (БРП) с дополнительными программами.

ПМК Store/Play

В СССР было выпущено несколько десятков книг о ПМК и программах для них. Например, первой моей книжкой-учебником была Калькулятор - твой помощник и соперник в играх. Она у меня появилась даже раньше, чем сам калькулятор. Также было выпущено несколько БРП для МК-52.

Но, пожалуй, наибольший вклад в популяризацию ПМК и программирования внесли ряд советских журналов.Одним из первых стал писать о ПМК журнал "Наука и жизнь". Также ряд статей опубликовал журнал "Квант". За редким исключением рассматривались в основном прикладные программы. Игр было довольно мало. Кардинально ситуация изменилась с появлением в журнале "Техника молодежи" ("ТМ") рубрики "Клуб электронных игр". За годы существования рубрики в ней не только было опубликовано множество разнообразнейших игровых программ, но и много внимания уделялось недокументированным возможностям ПМК. Еще одним журналом, уделявшим внимание игровым программам была украинская "Пионерия".

В 1988 г. возник Клуб любителей игровых программ (КЛИП) своеобразная социальная сеть (а точнее BBS) по переписке. Клуб объединил до 600 пользователей ПМК со всего СССР. С историей КЛИПа можно ознакомиться здесь и здесь.

Классификация игр

Несмотря на довольно ограниченные ресурсы ПМК для них было разработано большое количество игровых программ. Можно выделить несколько жанров игр.

Симуляторы

Существовало множество разнообразных симуляторов. Как правило процесс игры выглядел следующим образом. Игрок вводил новые значения ряда параметров (расход топлива, новая скорость, угол наклона, период времени, в течение которого данные параметры действовали) и запускал вычисления. Через какое-то время ПМК показывал новое положение и параметры  симулируемого объекта (высота или пройденное расстояние, новая скорость и т.д.). Так как во времена СССР очень популярной была тема космоса, то существовал ряд симуляторов космических летательных симуляторов. В "ТМ" была напечатан фантастическая повесть "Путь к Земле", в которой герои на маленьком лунолете совершают  перелет с Луны на Землю. Каждая глава описывала какой-то один из этапов путешествия. Помимо этого главы также сопровождались одной или несколькими программами, с помощью которых читатели могли удостовериться, что все описанное - истинная правда. Таким образом, авторы "ТМ" создавали художественное произведение по программам для компьютеров (или программы по книге) задолго до того, как это стало мейнстримом.
Карта моих полетов в окрестностях орбитальной станции "Юрий Гагарин"
(к сожалению, в станцию попал метеорит)

Стратегии

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

Также были военные стратегии. Например, можно было повторить битву под Фермопилами или Невскую битву.

Настольные

Очевидно, что научить ПМК играть в шашки, а тем более в шахматы невозможно. Однако разыграть некоторые эндшпили вполне реально.
Фото шахматной доски, размеченной для игры с ПМК:


Самой интересной для меня игрой была Волк и овцы. Быстро выяснилось, что на обычной шахматной доске 8x8 играть не интересно: четыре овцы всегда выигрывают, а три - проигрывают. Поэтому был разработан вариант игры на поле 9x9. И хотя реализовать минимаксный алгоритм было нельзя, итоговая программа получилась довольно сильной. Эта игра меня на столько впечатлила, что позже я сделал вариант для MS-DOS, а пару лет назад и для Android.

Динамические видеоигры

Две особенности ПМК позволяли реализовать даже динамические видеоигры. Во-первых, во время вычислений на индикаторе отображались какие-то текущие значения. Таким образом можно было демонстрировать динамическую "картинку". Во-вторых, в первых моделях калькуляторов был забавный аппаратный баг. ПМК имели переключатель "Р-Г" для вычислений тригонометрических функций в градусах и радианах соответственно. Вскоре выяснилось, что если не устанавливать переключатель в крайние положения, а зафиксировать по центру, то он будет выполнять вычисления в градах (100 градов - это 90 градусов). Вскоре этот баг превратили в фичу: у переключателя появилось третье состояние "ГРД". Если вычислить значение cos100, то можно определить положение переключателя: для градусов получим значение -0,17, т.е. отрицательное значение, для градов - естественно, 0, для радиан  0,19 - положительное число. Все игры данного жанра строились по одному принципу: ПМК какое-то время показывал на экране текущую ситуацию, давая игроку возможность принять решение. Затем определял положение переключателя "Р-ГРД-Г" и выполнял вычисления. Со стороны это выглядело довольно забавно: игрок всматривался в мигающий экран и судорожно теребил переключатель.

Еггогология

Как всякий уважающий себя компьютер, ПМК мог отображать шестнадцатеричный числа. Но из-за ограничений индикатора выглядели они немного странно. Например, "A" обозначалась как "-", "B" - "L". При возникновении ошибок калькулятор выводил слово "Error", но выглядело оно как "ЕГГОГ", что и дало название процессу изучения недокументированных возможностей ПМК. Выполняя хитрые операции над очень большими числами (которые калькулятор теоретически не мог отображать) или обращаясь к большим адресам программной памяти можно было получать разнообразные надписи.

Например, в игре "Лунолет-3" из повести "Путь к Земле" положение лунолета относительно Земли и Луны отображалось следующим образом:

"E" - Земля, "0" - Луна, "-" - лунолет.

Калькуляторы МК-61/52 поддерживали операции булевой алгебры. Но их обычно использовали лишь для формирования ряда сообщений: "8CE" - игра окончена, "6-L6EC" - человек проиграл:
Также было несколько игр, использовавших эти операции для кодирования лабиринтов.

Более подробно история ПМК изложена здесь, а здесь большой набор игр.

Симуляторы и эмуляторы ПМК


Существует несколько симуляторов ПМК, например "Калькуляторы-3000". Существует также реальный эмулятор emu145. Автор эмулятора - Феликс Лазарев - даже покупал профессиональный микроскоп для фотографирования микроконтроллеров серии 145/745. На этом форуме можно проследить историю разработки.

На основе emu145 Станислав Боруцкий создал эмулятор для Android.

Мой путь


У меня калькулятор МК-61 появился в 1989г. Получилось так, что о существовании КЛИПа я не знал. Основную массу программ черпал из "ТМ" - либо переписывал в библиотеке (ксероксов тогда еще не было), либо брал у товарищей (как правило, потом уже обратно не отдавал). У нас были журналы "Наука и жизнь" за несколько лет. Но в нем печатались в основном прикладные программы, что меня мало интересовало. Однако больше чем играть мне нравилось писать программы. Я кстати никогда не понимал прелестей приставок типа Dendy - ведь их нельзя было программировать в домашних условиях. Первой моей игрушкой был космический симулятор, написанный под влиянием "Лунолетов". Это было в 6 классе, на уроках физики мы к этому времени изучили только равномерное прямолинейное движение. Поэтому играть в него было не очень интересно. На программирование я потратил времени больше, чем на саму игру. Потом был еще ряд программ. Наиболее серьезной моей программой была реализация калаха (манкалы). Не смотря на ограниченные ресурсы ПМК, он выигрывал у меня довольно часто. Я даже не знаю, когда я больше радовался: когда выигрывал сам или когда проигрывал своей программе.

Несколько фото упомянутых ранее носителей информации:




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

Попробовать


Конечно, настоящий задрот мужчина с удовольствием потратит полчаса на вбивание кода программы с тем, чтобы потом пять минут поиграть. Для тех же, что слаб духом, я приготовил специальную версию эмулятора с поддержкой экспорта/импорта программ (я разместил это эмулятор от своего имени с разрешения Станислава). Также я подготовил несколько программ для этого эмулятора. Достаточно скопировать *pmk-файл на смартфон и импортировать его в эмулятор.

Приятного изучения!

P.S. у сарая, в котором я нашел свои тетради была металлическая дверь с надписью "ЕС-1050".

четвер, 8 жовтня 2015 р.

Симуляция 3D Touch в xCode 7.1 beta

Как известно, в новом iPhone 6s появилась технология 3D Touch. Одно из её применений - Quick actions - специальное меню, с помощью которого можно выполнить быстрый доступ к какой-нибудь функции приложения. К сожалению, симулятор Xcode 7.1 beta пока что не позволяет симулировать эту технологию. Но, все не так уж сумрачно вблизи (с), с помощью волшебного cкрипта можно эмулировать вызов Quick actions. После установки скрипта, для вызова Quick actions следует отправить app’s bundle identifier на порт 8000, например, с помощью ncat:

echo 'net.naan.TwitterFonPro' | nc 127.0.0.1 8000

Скриншот симулятора:

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

вівторок, 16 червня 2015 р.

Тонкости crop’а UIImage

Иногда возникает необходимость вырезать часть изображения из UIImage (сделать crop). Обычно используется следующий подход:

- (UIImage)cropInRect:(CGRect)cropRect {
    CGImageRef imageRef = CGImageCreateWithImageInRect(self.CGImage, cropRect);
    UIImage cropped = [UIImage imageWithCGImage:imageRef scale:1. 
        orientation:self.imageOrientation];
    CGImageRelease(imageRef);
    return cropped;
}

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

Вырезанная часть:

Тонкость состоит в том, что необходимо трансформировать координаты вырезаемой части в зависимости от ориентации изображения:

- (UIImage)cropInRect:(CGRect)cropRect {
    CGAffineTransform rectTransform;
    switch (self.imageOrientation) {
        case UIImageOrientationLeft:
            rectTransform = CGAffineTransformTranslate(CGAffineTransformMakeRotation(M_PI_2), 
                    0, -self.size.height);
            break;
        case UIImageOrientationRight:
            rectTransform = CGAffineTransformTranslate(CGAffineTransformMakeRotation(-M_PI_2), 
                    -self.size.width, 0);
            break;
        case UIImageOrientationDown:
            rectTransform = CGAffineTransformTranslate(CGAffineTransformMakeRotation(-M_PI), 
                    -self.size.width, -self.size.height);
            break;
        default:
            rectTransform = CGAffineTransformIdentity;
    };
    rectTransform = CGAffineTransformScale(rectTransform, self.scale, self.scale);
    CGImageRef imageRef = CGImageCreateWithImageInRect(self.CGImage, 
            CGRectApplyAffineTransform(cropRect, rectTransform));
    UIImage cropped = [UIImage imageWithCGImage:imageRef scale:1. 
        orientation:self.imageOrientation];
    CGImageRelease(imageRef);
    return cropped;
}

После этого вырезается правильная часть:

середа, 1 квітня 2015 р.

UIView категория для скругления углов

Понадобилось мне для одного проекта под iOS реализовать вьюху, у которой углы должны быть скруглены только с одной стороны. Невозбранно стырив идею со Stack Overflow, сделал категорию для UIView и выложил файлики на GitHub.
Использование:

#import "UIView+Roundify.h

...

- (void) viewDidLayoutSubviews {
   [super viewDidLayoutSubviews];
   [self.someView addRoundedCorners:(UIRectCornerTopLeft | UIRectCornerBottomLeft)
                            withRadii:(CGSize){16.f, 16.f}];
 }
Пример работы:

Пользуйтесь.

вівторок, 24 лютого 2015 р.

Небольшой трюк при работе с git. Часть 2

В статье Небольшой трюк при работе с git я описал функцию g, которая немного упрощает работу с командой git. Однако, для этой функции не работает стандартное zsh-автодополнение. Помочь может команда compdef, которая позволяет связать существующие правила автодополнения с новой командой. После добавления в .zshrc строк:
# Actually set the compdef to git
compdef g=git
наша жизнь снова станет прекрасной и удивительной.