18.03.2024 06:43
ShadowGreg 9 1600 Источник

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

Комментарии (9)


  1. cypok
    18.03.2024 08:32
    #26623477
    +2

    Я либо чего-то не понимаю, либо что-то другое. Очень коротко, как-то сумбурно.
    Это учебный или реальный проект? Если учебный, то мало подробностей и скриншотов, если реальный, то чем существующие календари не угодили, которые отлично шарятся между аккаунтами.
    И почему famely?


    1. ShadowGreg Автор
      18.03.2024 08:32
      #26626607

      Пока учусь. Спасибо за острый глаз)


  1. impwx
    18.03.2024 08:32
    #26624449
    +1

    Возможно вам будет интересно:
    https://github.com/impworks/bonsai
    На главной странице есть календарь, но помимо него на каждого члена семьи можно написать статью, заполнить факты, загрузить фотки и посмотреть дерево. И тоже на дотнете, хотя и не Blazor


    1. ShadowGreg Автор
      18.03.2024 08:32
      #26626597

      Здорово, я только не увидел как добавлять события


  1. Azerich
    18.03.2024 08:32
    #26626567
    +1

    Из статьи не понятно, почему решили использовать @rendermode="@RenderModeForPage Так же не понятно, откуда берётся значение для @RenderModeForPage.


    1. ShadowGreg Автор
      18.03.2024 08:32
      #26626605

      А этот момент мне GPT подсказал. Что бы заработало - а как это дело сделать я пока не понимаю


      1. ShadowGreg Автор
        18.03.2024 08:32
        #26626613

        Там проблема в том что отрисовка интерактивных элементов не срабатывает у меня даже из шаблона MudBlazor и вот такой костыль воткнул. Может есть решение другое?


        1. Azerich
          18.03.2024 08:32
          #26626801

          Это в последней версии шаблонов такая проблема. На официальном гите такой подход подсказан как решение, но без объяснения причин. Завели issue (https://github.com/MudBlazor/MudBlazor/issues/8179). Фактически эта проблема мешает любой интерактивности в компонентах, т.е. не работают show/hide как от меню, так и от аккордеонов (к примеру). В качестве рекомендации предлагают использовать предыдущую версию. За то в их песочнице такой проблемы нет.


          1. ShadowGreg Автор
            18.03.2024 08:32
            #26627265

            Да вот только разобрался, заработало - спасибо!! Большое очень полезно.