MudBlazor - это амбициозная библиотека компонентов для Blazor, основанная на дизайне Material и с акцентом на простоту использования и четкую структуру. Она идеально подходит для разработчиков .NET, которые хотят быстро создавать веб-приложения, не сталкиваясь с проблемами CSS и JavaScript. MudBlazor полностью написан на C#, что позволяет вам легко адаптировать, исправлять или расширять фреймворк. https://mudblazor.com/
Задачей была разработать полезное приложение для нашей семьи, названное "Семейный календарь", которое объединяет функциональность от Google, Yandex и Mail для удобного ведения семейного расписания. Я хотел создать приложение, которое позволит нам легко планировать и отслеживать события, задачи и важные даты в нашей семье.
Установка и настройка MudBlazor
Установка MudBlazor происходит по стандартной схеме, как описано в документации.
Однако, возможны некоторые нюансы, с которыми я столкнулся при использовании интерактивных компонентов.
Для обновлеения и отрисовки интерактивных компонет пришлось добавть код:
@if (RenderModeForPage is not null)
{
<HeadOutlet @rendermode="@RenderModeForPage"/>
}
else
{
<HeadOutlet/>
}
</head>
<body>
@if (RenderModeForPage is not null)
{
<Routes @rendermode="@RenderModeForPage"/>
}
else
{
<Routes/>
}
В приложении для отрисовки календаря я решил использовать библиотеку Heron.MudCalendar. Хотя она не полностью функциональна и имеет некоторые ограничения, она все же помогла создать красивую отрисовку компонентов.
Heron.MudCalendar предоставляет удобные инструменты для работы с календарными компонентами, такими как дни, недели и месяцы. Она обладает гибкими настройками, которые позволяют настраивать внешний вид и поведение компонентов в соответствии с требованиями проекта.
Хотя библиотека не полностью завершена, я смог использовать ее возможности для создания красивого и интуитивно понятного интерфейса календаря. Она предоставила мне необходимые инструменты для отображения дат, выделения текущей даты и навигации по различным периодам времени.
Кроме того, Heron.MudCalendar также предоставляет возможность обработки событий, связанных с выбором даты или изменением периода. Это позволило мне реализовать функциональность, такую как выбор даты, добавление событий и управление расписанием.
Несмотря на некоторые ограничения и недоработки, использование библиотеки Heron.MudCalendar значительно упростило процесс разработки и позволило создать эстетически привлекательный календарный компонент. Благодаря ей, пользователи могут наслаждаться удобным и приятным интерфейсом при работе с календарем в приложении.
Создание моделей данных
В приложении для отрисовки календаря я использовал модель данных, которую взял за основу из библиотеки Heron.MudCalendar, и добавил несколько дополнительных полей, необходимых для моих целей.
public class Event : CalendarItem
{
private string _idKey;
public Event()
{
_idKey = Id;
}
public string Master { get; set; } = String.Empty;
public string Title { get; set; } = String.Empty;
public string Location { get; set; } = String.Empty;
public Color Color { get; set; } = Color.Primary;
[Key]
public string IdKey
{
get => _idKey;
set => _idKey = value;
}
}
Определение моделей данных для календаря семьи, включая события, участников и другие необходимые атрибуты.
Разворачивание на Ubuntu
Установка необходимых зависимостей на Ubuntu.
В приложении MudBlazor база данных работает на SQLite, но это неудобно для запуска в контейнере. Поэтому я принял решение перевести базу данных на PostgreSQL. Это позволит более гибко управлять базой данных и обеспечит лучшую совместимость с контейнеризацией приложения.
version: '3.8'
services:
postgres:
ports:
- '5455:5432'
image: postgres:12.3-alpine
restart: always
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=example
volumes:
- postgres:/var/lib/postgresql/data
pgadmin-compose:
image: dpage/pgadmin4
environment:
PGADMIN_DEFAULT_EMAIL: "postgres@domain.com"
PGADMIN_DEFAULT_PASSWORD: "password"
ports:
- "16543:80"
depends_on:
- postgres
blazor_calendar:
image: blazor.family.calendar.v.01
restart: always
build:
context: .
dockerfile: ./blazor.famely.calendar/Dockerfile
ports:
- "8080:8080"
- "8081:8081"
depends_on:
- postgres
portainer:
image: portainer/portainer-ce:latest
ports:
- 9443:9443
volumes:
- data:/data
- /var/run/docker.sock:/var/run/docker.sock
restart: unless-stopped
volumes:
postgres:
data:
Был момент, когда я не понял, что при развертывании приложения нужно обновлять не только контейнеры, но и образы после исправления кода. Это было для меня не так привычно, потому что на Windows в Rider обновление происходит автоматически.
В качестве заключения, работа с приложением была интересным опытом, но также встретились некоторые нюансы как в работе самого приложения, так и в его развертывании. Например, я столкнулся с тем, что при обновлении кода необходимо также обновлять и образы приложения, что отличается от автоматического обновления, которое я привык видеть в Rider на Windows. Это требовало некоторой адаптации и внимательности при развертывании приложения.
Также, в процессе работы с приложением, возникали некоторые нюансы, которые требовали дополнительного изучения и решения. Однако, благодаря этим вызовам, я получил ценный опыт и научился эффективно решать проблемы, связанные с разработкой и развертыванием приложений.
В целом, работа с приложением была увлекательной и позволила мне расширить свои знания и навыки в области разработки и развертывания приложений.
