Создание простого веб-приложения с использованием GenieFramework¶

В данной статье будет рассмотрено создание простого веб-приложения с помощью GenieFramework. Приложение будет включать текстовый блок, поле ввода для имени пользователя и ползунок для указания возраста. Будет подробно описана структура приложения, включая части @app, ui и @page. Особое внимание будет уделено реактивности и различиям между внутренними (@in) и внешними (@out) переменными. В конце будет представлен полный код с комментариями, который должен быть сохранен в файле app.jl.

Что такое GenieFramework?¶

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

В рамках ознакомления с GenieFramework, приложение будет простым: пользователю будет предложено ввести имя и выбрать возраст, используя ползунок, а отображаемый текст будет обновляться в зависимости от этих данных.

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

Приложение на базе GenieFramework состоит из трёх основных частей, соответствующих паттерну 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.

Код приложения¶

Этот код должен быть сохранен в файле app.jl, который является стандартным именем для основного файла приложения в GenieFramework. После создания файла его можно запустить через команду engee.genie.start("путь/к/файлу/app.jl")

using GenieFramework
using Stipple

# Определяется модель данных с помощью макроса @app
@app begin
    # Внутренние переменные (@in) — данные, поступающие от пользователя
    @in user_name = "Ваше имя"      # Начальное значение поля ввода
    @in age = 50                    # Начальное значение ползунка возраста (0–100)

    # Внешние переменные (@out) — данные, отправляемые в интерфейс
    @out display_text = "уважаемый пользователь"  # Текст для отображения

    # Обработчик событий: обновляется display_text при изменении входных данных
    @onchange user_name, age begin
        display_text = """$(user_name)!
        Ваш возраст, согласно ползунку: $(age)"""
    end
end

# Определяется пользовательский интерфейс
function ui()
    [
        # Текстовая строка с использованием переменной display_text
        h2("Здравствуйте, {{display_text}}"),

        # Поле ввода, связанное с переменной user_name
        cell([textfield("Введите ваше имя:", :user_name),

        # Ползунок, связанный с переменной age
        slider(0:100, :age, label="")])
    ]
end

# Задается маршрут для страницы
@page("/", ui)

Разбор кода¶

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

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

   • @in user_name — строка, принимающая имя пользователя (начальное значение: "Ваше имя").
   • @in age — число, получаемое от ползунка (начальное значение: 50).
   • @out display_text — строка, отправляемая в интерфейс (начальное значение: "уважаемый пользователь").
   • @onchange — обработчик, обновляющий display_text при изменении user_name или age. Текст формируется с использованием многострочной строки.

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

   • h2("Здравствуйте, {{display_text}}") — заголовок второго уровня, отображающий значение display_text.
   • cell([...]) — контейнер, объединяющий поле ввода и ползунок.
   • textfield — поле ввода, связанное с user_name.
   • slider — ползунок с диапазоном 0–100, связанный с age.

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

Какой будет результат?¶

При запуске отображается текст "Здравствуйте, уважаемый пользователь!", поле ввода с "Ваше имя" и ползунок на значении 50. Ввод имени или изменение положения ползунка приводит к обновлению display_text, что сразу отражается в заголовке. Например, при вводе "Анна" и значении ползунка 25 текст станет: "Здравствуйте, Анна! Ваш возраст, согласно ползунку: 25".

Как запустить приложение?¶

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

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

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

• match(r"'(https?://[^']+)'" позволяет найти ссылку, исходя из вывода работа функции engee.genie.start, используя регулярные выражения
• Markdown.parse используется для отображения "кликабельных" ссылок в ячейке вывода.

Заключение¶

Было создано простое веб-приложение с использованием GenieFramework. Были продемонстрированы модель данных (@app), интерфейс (ui) и маршрутизация (@page), а также различия между @in (входные данные от пользователя) и @out (выходные данные для интерфейса).