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. Это требовало некоторой адаптации и внимательности при развертывании приложения.

Также, в процессе работы с приложением, возникали некоторые нюансы, которые требовали дополнительного изучения и решения. Однако, благодаря этим вызовам, я получил ценный опыт и научился эффективно решать проблемы, связанные с разработкой и развертыванием приложений.

В целом, работа с приложением была увлекательной и позволила мне расширить свои знания и навыки в области разработки и развертывания приложений.

GitHub