Создание пользовательских приложений в Engee

Основные принципы работы фреймворка Genie

Начальные сведения о фреймворке Genie

Engee предоставляет пользователю возможность разрабатывать собственные веб-приложения непосредственно в своей среде с помощью фреймворка Genie.

Genie — это фреймворк для разработки веб-приложений на языке Julia. Полную документацию по фреймворку вы можете найти на официальном сайте.

Фреймворк Genie представляет собой инструмент для разработки веб-приложений, объединяющий серверную часть и реактивный интерфейс через Stipple.jl. Stipple.jl обеспечивает реактивность и позволяет описывать интерфейс с использованием кода на языке Julia. Его часть, StippleUI, предоставляет удобные компоненты для построения интерфейса.

Использование Genie

Приложение в Engee должно находиться в jl-скрипте с именем app.jl.

Ниже описаны основные шаги для запуска, управления и работы с приложениями на основе Genie.

• Размещение приложения. Созданное приложение необходимо поместить в какую-либо директорию в рабочем пространстве Engee. Удалите из этой директории файлы config и *.toml, если они присутствуют. Пример размещения:

/user/apps/MyGenieApp/
    app.jl

• Запуск приложения. Для запуска приложения используется следующая команда:

engee.genie.start("/user/apps/MyGenieApp", devel=true, log_file="/user/apps/MyGenieApp")

Здесь первый аргумент – путь до файла app.jl; devel – опциональный параметр, включает режим разработки, что позволяет видеть изменения без перезапуска; log_file – путь для сохранения логов приложения. Его указывать необязательно. Если указан относительный путь, то команда ищет приложение относительно текущей директории.

• Остановка приложения. Для остановки запущенного приложения выполните команду:

engee.genie.stop("/user/apps/MyGenieApp")

• Список запущенных приложений. Чтобы проверить, какие приложения работают в данный момент, выполните команду:

engee.genie.list()

• Просмотр логов приложения. Для получения логов работающего приложения используйте команду:

engee.genie.logs("/user/apps/MyGenieApp")

Структура веб-приложения

Приложение на базе фреймворка Genie состоит из трех основных частей, соответствующих паттерну MVC:

1. Часть @app
   Здесь определяется модель данных. В этой части задаются реактивные переменные, связывающие интерфейс и серверную логику. Переменные делятся на два типа:

   • Внутренние (@in): используются для получения данных от пользователя. Они изменяются при взаимодействии с интерфейсом (например, при вводе текста или перемещении ползунка) и передают информацию от интерфейса к серверу.
   • Внешние (@out): предназначены для передачи данных из серверной части в интерфейс. Они обновляют отображаемые элементы (например, текст) и отражают результат обработки данных. Основное различие между @in и @out — направление потока: @in принимает ввод, а @out выводит результат.

2. Часть ui
   Здесь описывается интерфейс приложения с использованием функций библиотеки Stipple.jl (например, textfield или slider). Интерфейс задается через код на Julia, но также можно делать это и используя собственный html-шаблон страницы.

3. Часть @page
   Определяется маршрут приложения (URL-адрес), по которому будет доступен интерфейс. Эта часть связывает модель данных с функцией ui.

Реактивность в Stipple

Реактивность, обеспечиваемая библиотекой Stipple.jl, позволяет автоматически обновлять интерфейс при изменении данных и наоборот. Переменные @in реагируют на действия пользователя, а переменные @out обновляют отображаемую информацию. Связь между ними устанавливается через обработчики, например, такие как @onchange.

В чем состоит основной механизм реактивности? Благодаря нему разные объекты модели данных и интерфейса могут быть «неявно» связаны через асинхронные сигналы. Вслед за наступлением события «обновления» объекта-источника вызывается событие «обновления» целевого объекта.

Без Stipple.jl библиотека GenieFramework.jl позволяет вызывать функции Julia по событиям интерфейса, используя обычный, «явный» механизм передачи управления.

Таким образом, библиотека Stipple.jl предоставляет механизм для хранения причинно-следственных связей между переменными и элементами управления (макрос @out) и, наоборот, между элементами управления и переменными (макрос @in).

Пример создания приложения

✏️Задание 1

В папке данного курса откройте файл app1.jl. Вы увидите скрипт, создающий простое приложение на базе фреймворка Genie.

using GenieFramework, Stipple

@app begin
    @in r = 0.0
    @out S = 0.0
    @onchange r begin
        S = pi*r^2
    end
end

function ui()
    textfield("Введите радиус круга r:", :r),
    textfield("Площадь круга S:", :S)
end

@page("/", ui)

Интерфейс приложения состоит из двух текстовых полей. В первом поле пользователь вводит значение радиуса круга r. При вводе числа вычисляется площадь круга S и полученное значение выводится во втором текстовом поле.

Разбор кода

1. Импорт библиотек
   using GenieFramework, Stipple – подключаются библиотеки GenieFramework для работы с приложением и Stipple для реактивности и интерфейса.

2. Модель данных (@app)

   • @in r = 0.0 — объявляется переменная r, принимающая входные данные (радиус круга). Ее начальное значение равно 0.0.
   • @out S = 0.0 — объявляется переменная S, отправляемая в интерфейс (площадь круга). Ее начальное значение равно 0.0.
   • @onchange r — обработчик, обновляющий переменную S при изменении значения r. В операторных скобках begin и end выполняется вычисление площади круга по формуле S = pi*r^2.

Обратите внимание! Ключевое слово begin должно находиться в той же строке, что и заголовок обработчика @onchange r.

3. Интерфейс (ui)

   • textfield("Введите радиус круга r:", :r) — текстовое поле для ввода переменной r.
   • textfield("Площадь круга S:", :S) — текстовое поле для вывода переменной S.

4. Маршрут (@page)
   Интерфейс становится доступным по адресу, возвращаемому функцией engee.genie.start.

Как работает приложение

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

Запуск приложения

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

engee.genie.start("app1.jl")

Если вы не уверены, что текущая папка, в которой расположен скрипт, является рабочей папкой, предварительно выполните следующую команду:

cd(@__DIR__)

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

✏️Задание 2

Запустите приложение, выполнив следующие действия:

1. Находясь в папке данного курса, откройте командную строку и выполните в ней следующую команду:

engee.genie.start("app1.jl")

2. В результате выполнения команды будет сформирована ссылка на приложение. Например, такая:

https://engee.com/prod/user/demo54365636-alexey-5fbondarev/genie/app5/

Перейдите по ссылке. Приложение откроется в новой вкладке браузера.

Решение

Окно приложения:

✏️Задание 3

С помощью данного приложения вычислите площадь круга, радиус которого равен 10.

Решение

Окно приложения:

Тест для получения сертификата

Если вы впервые проходите тестирование на платформе Этюд по ссылке из Engee, то, нажав на ссылку ниже, вы увидите следующее диалоговое окно:

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

Если вы раньше уже проходили тестирование по ссылке из Engee, то ваша авторизация выполнится автоматически и тестирование начнется сразу же после нажатия на ссылку.

Пройти тест по разделу >>