Создание приложения Books Tracker с .NET MAUI и Supabase

Введение

Supabase – это решение на основе модели Backend-as-a-Service (BaaS), предоставляющее ряд услуг, таких как аутентификация, управление базами данных и облачное хранилище. С помощью Supabase разработчики могут легко создавать и масштабировать веб-приложения и мобильные приложения без необходимости самостоятельно управлять инфраструктурой.

В этом руководстве вы узнаете, как создать приложение MVVM .NET MAUI (Books Tracker), которое подключается к базе данных Supabase с использованием архитектуры Model-View-ViewModel (MVVM). Вот краткая демонстрация приложения:

Чтобы продолжить работу с этим руководством, вам потребуются следующие установленные инструменты разработки:

• Visual Studio 2022 с рабочей нагрузкой по разработке пользовательского интерфейса многоплатформенного приложения .NET.
• SDK для .NET 7.

Создание учетной записи и базы данных Supabase

1. Для начала вам необходимо создать учетную запись на Supabase. Вы можете зарегистрироваться, связав свою учетную запись GitHub или используя свой адрес электронной почты.

2. После входа в систему нажмите Новый проект и выберите Новая организация в раскрывающемся списке.

1. Создайте новую организацию, введя предпочтительное название организации, выбрав тип организации и нажав Создать организацию.

1. Вам будет предложена форма для создания нового проекта. Заполните форму и нажмите Создать новый проект.

1. После завершения процесса настройки проекта вы будете перенаправлены на информационную панель. Перейдите в Редактор таблиц и нажмите Создать новую таблицу.

1. Всплывающее меню для создания таблиц и столбцов появляется справа. Введите имя таблицы, снимите флажок «Включить безопасность на уровне строк» ​​и добавьте столбцы таблицы.

Столбец id и created_at были добавлены в таблицу автоматически. Столбец id служит первичным ключом, а столбец created_at генерирует отметку времени для каждой строки при вставке. Вы можете добавить новый столбец, нажав Добавить столбец в левом нижнем углу всплывающего меню.

Нажмите Сохранить, чтобы создать новую таблицу.

1. Перейдите к Настройки -> API и скопируйте URL проекта и открытый ключ API в безопасное место.

Создание приложения .NET MAUI, которое работает с Supabase

1. Откройте Visual Studio 2022 и создайте новый проект приложения .NET MAUI со следующими данными.
2. Название проекта: BooksTracker
3. Название решения: BooksTrackerApp
4. Местоположение. Выберите предпочтительное местоположение проекта.

После открытия проекта удалите созданную по умолчанию MainPage.

1. Добавьте следующие пакеты NuGet:
2. CommunityToolkit.Mvvm: вспомогательная библиотека .NET MVVM.
3. CommunityToolkit.Maui. Чтобы использовать набор инструментов сообщества .NET MAUI, следуйте инструкциям в файле ReadMe, который появляется в Visual Studio после его установки.

4. supabase-csharp: библиотека C# Supabase. Чтобы узнать больше, вы можете ознакомиться с документацией.

   3. Создайте в своем проекте следующие папки: * Модели * Модели просмотра * Просмотры * Услуги

Модели

1. В папку Models добавьте новый файл класса с именем Book.cs со свойствами, как показано в следующем коде:

https://gist.github.com/ZadokJoshua/1d04c2d3f4d2d60bd7ee4d32b891b1f4?embedable=true

Этот класс наследует BaseModel, предоставленную библиотекой Postgrest, которая включена в клиент Supabase. Атрибут таблицы совпадает с именем таблицы, которую мы создали в Supabase. Кроме того, каждый атрибут столбца совпадает с именем соответствующего столбца таблицы.

1. Добавьте новый файл класса с именем AppConfig.cs в папку Models. В AppConfig.cs определите статический класс с двумя полями для хранения URL-адреса и ключа Supabase, которые вы скопировали изначально.

https://gist.github.com/ZadokJoshua/14e6c9d405235104da82dfd5d53daf77?embedable=true

(Для демонстрационных целей мы жестко закодировали ключ API и URL-адрес в нашем коде. Однако, пожалуйста, используйте более безопасные методы, такие как сохранение их в файле конфигурации, чтобы избежать совместного использования ваших учетных данных.)

Услуги

1. Добавьте интерфейс с именем IDataService.cs в папку Services.

https://gist.github.com/ZadokJoshua/c8e7d025cb0c41d87e364992e2edade0?embedable=true

1. Этот интерфейс будет реализован новым классом DataService в папке Services. Методы интерфейса изменены для выполнения CRUD-операций с таблицей books в Supabase.

https://gist.github.com/ZadokJoshua/16e73629e2476064ab111ebd409d07f3?embedable=true

Модели просмотра

В папке ViewModels

1. Добавьте файл класса с именем BooksListingViewModel.cs.

https://gist.github.com/ZadokJoshua/88271bc6522950d41f8ebed87ca7e7f7?embedable=true

1. Добавьте новый файл класса с именем AddBookViewModel.cs.

https://gist.github.com/ZadokJoshua/4fe0abaa320c896dfa6022c8edd1998d?embedable=true

1. Последняя создаваемая ViewModel — UpdateBookViewModel.cs.

https://gist.github.com/ZadokJoshua/ac8caa801d0bbcf956e5b06b533a3acd?embedable=true

Просмотры

1. Создайте три страницы содержимого в папке Views со следующими именами и соответствующими разметками XAML:
   • AddBookPage
   • BooksListingPage — это основное представление приложения. Он имеет CollectionView для отображения книг из базы данных и использует два элемента из набора инструментов сообщества .NET MAUI — BoolToObjectConverter и EventToCommandBehavior.
   • UpdateBookPage

https://gist.github.com/ZadokJoshua/419bef7c2fee56333d50978387b23aa1?embedable=true

Чтобы включить привязку данных, внедрите модели представления в конструкторы страниц в программном коде и установите их BindingContext.

https://gist.github.com/ZadokJoshua/66f68ae75332195f9870fd2448f3bb08?embedable=true

Регистрация маршрутов

1. В AppShell.xaml определите маршрут BooksListingPage для объекта ShellContent и зарегистрируйте другие страницы в AppShell.xaml.cs.

https://gist.github.com/ZadokJoshua/3a8e1d4f132b8f2a96375a8857abdd75?embedable=true

Зарегистрируйте службы и зависимости в MauiProgram.cs

1. В MauiProgram.cs настройте и зарегистрируйте службы, страницы, модели представления и клиент Supabase в контейнере внедрения зависимостей (DI).

https://gist.github.com/ZadokJoshua/0da084463d7f7a21aaa079de457692d7?embedable=true

1. Создайте и запустите приложение.

Исходный код проекта

https://github.com/ZadokJoshua/supabase-maui-demo/tree /master?embedable=true

Спасибо за чтение! Надеюсь, это руководство было вам полезно.