Первое приложение и знакомство c шаблонами

Мы с вами рассмотрим пример создания простого web приложения, на базе которого познакомимся с шаблонами фреймворка FCF.

Это будет web приложение всего с одной страничкой, на которой будет размещена планета вращающаяся вокруг солнышка. Данное приложение удачно демонстрирует часть функционала шаблонов фреймворка. Данное приложение можно скачать по адресу: /examples/fcf-example-planet.

И так, приступим к построению нашего первого приложения.

Для начала выполните установку фреймворка (FCF Install), текстового редактора Sublime Text и плагина SublimeFCFPlugin или редактора VSCode и плагина для него VSCodeFCFFramework

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

$ cd [PROJECTS_DIRECTORY]

Создадим проект с именем fcf-example-planet, используя генератор шаблонов приложения fcfmngr

$ fcfmngr create project fcf-example-planet

Перейдите в каталог проекта.

$ cd [PROJECTS_DIRECTORY]/fcf-example-planet

Создайте базу данных, используя приложение fcfmngr. Первый аргумент - это наименование операции создания БД "create-db". Вторым аргументом является путь к JS файлу приложения. Если доступ к пользователю mysql выполняется только от суперпользователя системы нужно использовать sudo при вызове команды fcfmngr.

$ fcfmngr create-db ./fcf-example-planet.js

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

fcfserver server.json

Дождитесь установки модулей NODEJS и пакетов FCF. Когда приложение выполнит все подготовительные действия в терминал выведется запись:

... 2021-06-15 21:10:24.481 [PID:27887] [LOG] [MOD:FCF]: Applications is running ... ... 2021-06-15 21:10:25 [LOG] [SERVER]: Listening started with port 8080 2021-06-15 21:10:25 [LOG] [SERVER]: Listening started :: with port 8080

Убедитесь что приложение работает, откройте в браузере адрес http://localhost:8080

Для остановки приложения используется комбинация клавиш Ctrl+c


Ссылки описания

Структура файлов проекта - Описание структуры и назначения файлов проекта FCF

Правила описания путей к файлу - Правила описания путей к файлу в фреймворке FCF

Правила описания модулей JavaScript - Описание файлов модулей в фреймворке FCF

Общие описание работы шаблона приложения - Общие описание шаблонов в фреймворке FCF

Статическая маршрутизация - Описание задания статической маршрутизации через файл settings.config

Применение переводов - Использование переводов в шаблонах

Создание шаблона - Создание основного шаблона в котором будет выполняться анимация

Программные аргументы и добавление звездного неба - Описание применения программных аргументов

Добавление движущейся планеты и знакомство с враппером - Описывается добавление нового подшаблона с планетой и ее анимация с применением враппера

Добавление аргументов ссылочного типа, управление значением аргументов шаблона и привязка события - Добавление аргументов ссылочного типа, управление значением аргументов шаблона и привязка события