См. Демонстрация Netlify, размещенная на PocketHost
Приложение для отслеживания расходов на транспортные средства обычно отслеживает расходы на ваши транспортные средства. Это могут быть такие расходы, как замена масла, ремонт, шины, плата за проезд, топливо и т. д. Он также может отслеживать показания счетчиков для ваших транспортных средств.
Транспортное средство имеет марку, модель и тип. Он имеет определенное количество мест. Маркой может быть, например, Toyota, Honda или Mercedes. Это может быть Camry (Toyota), Ballade (Honda) или C-Class (Mercedes).
Мы будем вести учет этих марок, моделей и типов транспортных средств. Они будут использоваться для создания наших списков транспортных средств.
Давайте посмотрим демонстрацию этого веб-приложения в действии.
Транспортные средства
Каждое транспортное средство в нашем списке будет иметь изображение. На Рисунке 1 ниже показана типичная форма для получения сведений о каждом транспортном средстве.
Расходы
Чтобы зафиксировать расходы, нам понадобятся типы расходов. Типами расходов могут быть замена масла, ремонт, шины, плата за проезд и т. д. Эти типы расходов помогают нам классифицировать наши расходы и могут быть использованы для построения диаграммы наших расходов с течением времени. На рис. 2 показана форма для учета расходов на транспортные средства.
Журналы учета топлива
Мы хотим записать количество топлива, которое мы покупаем для каждого из наших транспортных средств. Для этого мы создадим форму для записи наших покупок топлива. Мы изображаем нашу форму журналов топлива ниже на рисунке 3.
Напоминания
Мы хотим, чтобы нам напоминали о вехах в жизни наших автомобилей. Это может быть прием автомобиля для обслуживания, проверка жидкости, проверка шин и т. д. Для этого мы создадим форму, подобную той, что изображена на рисунке 4.
Показания счетчиков
Мы также можем регистрировать километраж, пройденный за день для каждого транспортного средства. В форме будет указано транспортное средство, дата, а также начальный и конечный километры, как показано на рис. 5 ниже.
Списки
Чтобы обеспечить целостность данных для нашего приложения, мы создадим списки. Эти списки будут содержать подробную информацию о наших моделях автомобилей, марках автомобилей, типах автомобилей и типах расходов.
В каждом списке будет уникальный идентификатор и имя каждого элемента. Идентификаторы будут скрыты в наших формах, и потребуется только имя.
SQLite WebServer — серверная часть
Бэкэнд для нашего приложения, который мы будем использовать для хранения наших записей для нашего приложения для отслеживания транспортных средств, будет базой данных SQLite. Он называется PocketBase.
PocketBase — это серверная часть с открытым исходным кодом, состоящая из встроенной базы данных (SQLite) с подписками в реальном времени, встроенным управлением аутентификацией, удобным пользовательским интерфейсом панели инструментов и простым REST-API.
TailwindCSS — внешний интерфейс
Наш интерфейс разрабатывается с использованием фреймворка компонентов Tailwind на основе CSS под названием DaisyUI.
Инструменты разработки
Для разработки нашего приложения мы будем использовать IDE под названием B4J. Эта IDE выглядит так.
Разработка пользовательского интерфейса
Я буду использовать существующий проект, чтобы объяснить, как это будет работать.
Мы будем использовать абстрактный конструктор B4J. Мы перетаскиваем компоненты, которые впоследствии становятся нашим пользовательским интерфейсом. С каждым компонентом могут быть связаны события, например, событие щелчка для кнопки или событие изменения для выбранного компонента.
На наших страницах для каждой из форм, описанных выше, будет таблица со списком существующих записей, а затем модальное окно для сбора деталей.
Компонент «tblprojects» выше становится таблицей, изображенной на рисунке 14 ниже, когда наше веб-приложение выполняется. В каждой строке таблицы есть кнопки редактировать и удалить.
Формы пакета недвижимости
Формы в приложении построены с использованием подхода диалогового окна свойств. На рис. 13 компонент контейнера свойств называется «pbprojects».
Различные компоненты определены в схеме файла JSON. Каждый компонент определяется следующим образом.
Этот компонент создает компонент ввода «Электронная почта», изображенный на рисунке 15.
Ниже я объясню, как работает типичный процесс добавления, обновления и удаления записей.
Добавление записей
Над таблицей у нас есть кнопка добавления. Нажатие этой кнопки активирует модальное диалоговое окно для ввода данных, как показано на рис. 15 ниже.
Модальное окно для добавления записей активируется кодом ниже.
Обновление записей
При нажатии кнопки редактирования в каждой строке таблицы выполняется код «tblprojects_edit». Это получает объект строки пар ключ-значение имен столбцов и значений для каждой записи.
Этот код также показывает модальное диалоговое окно, в котором отображается наша запись для обновления. Можно нажать Сохранить или Отмена. Сохранение обновит наш бэкэнд с учетом всех внесенных изменений.
Сохранение записей
Когда кто-то добавляет или редактирует существующую запись, ее можно добавить в базу данных, сохранив. Это проверяет введенное содержимое, когда оно требуется, а затем добавляет новую запись или обновляет существующую запись.
Все сохраненные записи будут перечислены в таблице, как показано на рис. 14.
Удаление записей
Когда кто-то хочет удалить запись из базы данных, он нажимает кнопку удаления в таблице, соответствующей удаляемой записи. Это активирует диалоговое окно подтверждения.
Этот диалог активируется этим кодом. Он получает строку для обработки и сохраняет ее для последующей обработки.
Вторая часть этого кода — это фактический код, который затем удаляет запись в базе данных, когда пользователь нажимает «Да».
Этот код получает идентификатор записи и использует его для удаления записи из базы данных.
Сводка
В заключение мы кратко описали, как будет выглядеть каждая из форм в нашем приложении для отслеживания транспортных расходов. Мы указали, какой бэкэнд будем использовать, какую IDE будем использовать и как будет работать исходный код для вязки приложения.
Мы также объяснили различные списки, которые помогут с целостностью данных приложения.
Вы можете найти больше статей об этом подходе здесь.
Введение: разработка кроссплатформенных приложений с использованием B4X
Веб-приложения TailwindCSS с использованием b4x
Использование PocketBase (альтернативы Firebase) для ваших веб-приложений
Клонирование счетчика расходов в TailwindCSS, DaisyUI, PocketBase и ChartJS
Как синхронизировать отдельные схемы и данные коллекции PocketBase
Вы можете поймать меня на Github.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
