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. Это требовало некоторой адаптации и внимательности при развертывании приложения.
Также, в процессе работы с приложением, возникали некоторые нюансы, которые требовали дополнительного изучения и решения. Однако, благодаря этим вызовам, я получил ценный опыт и научился эффективно решать проблемы, связанные с разработкой и развертыванием приложений.
В целом, работа с приложением была увлекательной и позволила мне расширить свои знания и навыки в области разработки и развертывания приложений.
ссылка на оригинал статьи https://habr.com/ru/articles/800889/
Добавить комментарий