Skip to main content

Начало работы

Для разработки WEB приложений на N2O Framework вам понадобятся знания следующих технологий:

  • Язык разметки XML
  • Язык запросов к реляционным базам данных SQL

Также будут полезными знания:

Настройка окружения#

Для начала потребуется установить следующее программное обеспечение:

note

В качестве сервера баз данных можно использовать встроенную БД H2, что вполне достаточно для исследования возможностей фреймворка и прототипирования интерфейсов. Для создания реальных приложений рекомендуется установить и использовать в проекте какую-либо из полноценных СУБД, например, PostgreSQL.

Создание проекта#

Для сборки проектов на N2O Framework используется система сборки Maven и библиотека Spring Boot 2.1.1.RELEASE.

Создайте папку проекта, например: /myproject

В папке проекта создайте файл pom.xml

Структура pom.xml
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example.myproject</groupId>    <artifactId>myproject</artifactId>    <version>1.0</version>
    <parent>        <groupId>org.springframework.boot</groupId>        <artifactId>spring-boot-starter-parent</artifactId>        <version>2.1.1.RELEASE</version>    </parent>
    <build>      <plugins>          <plugin>              <groupId>org.springframework.boot</groupId>              <artifactId>spring-boot-maven-plugin</artifactId>              <configuration>                  <executable>true</executable>              </configuration>          </plugin>      </plugins>  </build>
</project>
tip

Для быстрого создания проекта можно использовать сервис Spring Boot Initializer.

Подключение N2O сервера#

Сервер N2O подключается к любому Spring Boot проекту. Для этого в pom.xml после раздела <parent> достаточно добавить одну зависимость:

<properties>  <n2o.version>7.16.0</n2o.version></properties>
<dependencies>  <dependency>    <groupId>net.n2oapp.framework</groupId>    <artifactId>n2o-spring-boot-starter</artifactId>    <version>${n2o.version}</version>  </dependency></dependencies>

Эта библиотека зарегистрирует REST сервисы, необходимые для работы клиента N2O.

В папке проекта /src/main/java/com/example/myproject создайте java класс Application.java с методом main:

package com.example.myproject;
import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplicationpublic class Application {    public static void main(String[] args) {        SpringApplication.run(Application.class, args);    }}

В папку /src/main/resources/ добавьте файл конфигурации Spring Boot приложения application.properties с настройками кодировки UTF-8 для http запросов:

spring.http.encoding.forceResponse=truespring.http.encoding.force=true

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

tip

Более полную информацию о сборке Spring Boot приложений можно прочитать здесь.

Подключение N2O клиента#

Клиент N2O - это обычное ReactJS WEB приложение. Его можно собрать самостоятельно, либо подключить готовую библиотеку n2o-web-[version].jar с собранным N2O React проектом внутри.

Самостоятельное создание N2O React проекта#

Для работы с React проектом потребуются Node.js 14+, npm 6+ и yarn.

Сборка React проекта выполняется менеджером пакетов yarn.

В корне проекта выполните команду:

npm init react-app frontend

Эта команда создаст папку frontend, в ней создаст необходимые для начала работы файлы и папки, включая index.js.

Перейдите в папку /frontend:

cd frontend

Затем установите библиотеку n2o-framework:

yarn add n2o-framework

Далее необходимо удалить лишние файлы, созданные после инициализации. Удалите файлы App.css, App.js, App.test.js, logo.svg, reportWebVitals.js.

Отредактируйте файл /frontend/src/index.js. Он должен выглядеть следующим образом:

import React from 'react';import ReactDOM from 'react-dom';import N2O from 'n2o-framework';import createFactoryConfig from "n2o-framework/lib/core/factory/createFactoryConfig";import { authProvider } from 'n2o-auth';
import 'n2o-framework/dist/n2o.css';import './index.css';
const config = {  security: {    authProvider,    externalLoginUrl: '/'  }};
ReactDOM.render(  <React.StrictMode>    <N2O {...createFactoryConfig(config)} />  </React.StrictMode>,  document.getElementById('root'));

Теперь N2O React проект готов.

Для сборки проекта в папке /frontend выполните команду:

yarn

А затем:

yarn build

В результате в папке /frontend/build появится index.html и другие статические ресурсы.

Чтобы подключить статические ресурсы к N2O серверу, в файле pom.xml в разделе <plugins> добавьте maven-resources-plugin:

<plugin>    <artifactId>maven-resources-plugin</artifactId>    <executions>        <execution>            <id>Copy frontend build</id>            <phase>generate-resources</phase>            <goals>                <goal>copy-resources</goal>            </goals>            <configuration>                <outputDirectory>target/classes/public</outputDirectory>                <overwrite>true</overwrite>                <resources>                    <resource>                        <directory>${project.basedir}/frontend/build</directory>                    </resource>                </resources>            </configuration>        </execution>    </executions></plugin>

Теперь N2O сервер будет раздавать статические ресурсы собранные в React проекте в папке /frontend/build.

tip

Более полную информацию о сборке React приложений можно прочитать здесь

Подключение готового N2O React проекта#

Для подключения библиотеки с уже собранным стандартным N2O React проектом, в файле pom.xml в разделе <dependencies> добавьте зависимость n2o-web:

<dependency>    <groupId>net.n2oapp.framework</groupId>    <artifactId>n2o-web</artifactId>    <version>${n2o.version}</version></dependency>

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

Перед тем как запустить приложение, его необходимо собрать системой сборки Maven.

В корне проекта выполните команду:

mvn clean package

В результате появится папка /target, в которой будет лежать исполняемый jar файл со встроенным WEB сервером, названный в формате [artifactId]-[version].jar. Например, myproject-1.0.jar.

Запустите сервер из корневой папки командой:

java -jar target/myproject-1.0.jar

В консоли должна будет отобразиться строка N2O was started. Приложение можно будет открыть в браузере по адресу http://localhost:8080.

Моментальный подхват изменений#

Приложение на N2O Framework может автоматически подхватывать изменения сделанные в N2O XML файлах.

Для этого, при запуске сервера, в аргументе командной строки укажите путь к проекту:

java -jar target/myproject-1.0.jar --n2o.project.path=/home/myProject

(в IDEA можно указать: Run/Debug Configurations -> Program arguments)

При старте сервера будет произведено сканирование директорий из которых N2O Framework будет брать XML файлы:

n.n2oapp.framework.config.ConfigStarter  : Start monitoring path: [/home/myProject/src/main/resources/META-INF/conf]net.n2oapp.watchdir.WatchDir             : WatchDir is started.n.n2oapp.framework.config.ConfigStarter  : N2O was started

Плагин для Intellij IDEA#

Для удобной работы с файлами N2O в IntelliJ IDEA создан специальный плагин. Шаги установки:

  1. Скачайте файл n2o-idea-plugin.zip
  2. В IDEA в меню выберите: Settings > Plugins > Install Plugin from disk
  3. В открывшемся окне выбора файла выберите скачанный файл
  4. Нажмите Apply, перезапустите IDEA

Создание Hello World#

В проекте создайте папку /src/main/resources/META-INF/conf, в которой будут храниться N2O XML файлы.

В папке /META-INF/conf создайте файл главной страницы приложения index.page.xml с формой и одним единственным текстовым полем hello:

<?xml version='1.0' encoding='UTF-8'?><simple-page xmlns="http://n2oapp.net/framework/config/schema/page-3.0"             name="Моя первая страница">    <form>        <fields>            <text id="hello">Привет, мир!</text>        </fields>    </form></simple-page>

Если был настроен моментальный подхват изменений, то просто обновите страницу браузера http://localhost:8080/, если нет - просто пересоберите и перезапустите сервер:

tip

Другие примеры простых приложений на N2O Framework находятся здесь: https://github.com/i-novus-llc/n2o-framework/tree/master/examples