3【MySQL】Azure Database for MySQLのデータベースにMAUIから接続する
前回の続きです。
matsrikagraphic.hatenablog.com
※セキュリティ上直接データベースに接続するのは危険なので避けるべきと言われてます。目指すのはAzure Web Appにデプロイしてアクセスできるユーザーを制限したいと思ってるのですが初心者なのでそこは勉強中です。
1. Workbenchからテスト用のデータを1、2個作っておく
2、3個ダミーデータを作っておきます。お好みなので作らなくてもOK
画像の通り、視覚的にも編集できるしコード記述もできます。
FormEditorから作れば選択肢のある項目はエラーなく作れます。
2. Visual studioでプロジェクト作成、UI部分を作ってみる
見た目の仕上がりから確認したいので、UI部分から作ります。
3つのフォルダーを作り、そのうち一つのフォルダーに新たにコンテンツページを追加します。
Models
ViewModels
Views - MainPageView
作成したコンテンツページのMainPageViewにUIを作っていきます。
<Grid ColumnDefinitions=".1*,.07*,.25*,.03*,.1*,.1*,.2*"
RowDefinitions="30,36,*">
<Label Text="日付" Grid.Column="0" Grid.Row="0"/>
<Label Text="勘定科目" Grid.Column="1" Grid.Row="0"/>
<Label Text="詳細" Grid.Column="2" Grid.Row="0"/>
<Label Text="現金" Grid.Column="3" Grid.Row="0"/>
<Label Text="会社名" Grid.Column="4" Grid.Row="0"/>
<Label Text="金額" Grid.Column="5" Grid.Row="0"/>
<Label Text="備考" Grid.Column="6" Grid.Row="0"/>
<DatePicker Grid.Column="0" Grid.Row="1" />
<Picker Title="勘定科目" Grid.Column="1" Grid.Row="1" />
<Entry Placeholder="詳細" Grid.Column="2" Grid.Row="1" />
<CheckBox Grid.Column="3" Grid.Row="1" />
<Picker Title="会社" Grid.Column="4" Grid.Row="1" />
<Entry Placeholder="金額" Grid.Column="5" Grid.Row="1" />
<Entry Placeholder="備考" Grid.Column="6" Grid.Row="1" />
</Grid>
めちゃくちゃざっくりこんな感じ
下の空白部分にデータベースを表示したいです。
3. データベース接続するテスト
MauiProgram.csに接続するためのコードを書いていきます。
公式の解説ページは以下
あと、nugetパッケージでMySql.DataをDLしておきます。
そしてAzureのほうでDLしたSSL証明書をプロジェクトにおいて、プロパティを開きます。
ビルドアクションを「EmbeddedResource」に変えます。(Embeddedは埋め込みという意味です。)
using MySql.Data.MySqlClient;
〜〜
public static MauiApp CreateMauiApp()
{
〜〜
string connectionString = "server=サーバー名.mysql.database.azure.com;database=データベース名;user=ユーザー名;password=パスワード;sslmode=Required;sslca=<path/to/ca.pem>;sslcert=/DigiCertGlobalRootCA.crt.pem;sslkey=<path/to/client-key.pem>";
using var connection = new MySqlConnection(connectionString);
try
{
connection.Open();
//作ったテーブル(スキーマ)を指定して接続
using var command = new MySqlCommand("SELECT * FROM balancemanagement", connection);
using var reader = command.ExecuteReader();
while (reader.Read())
{
int id = reader.GetInt32(0);
string name = reader.GetString(2);
//接続できてるか確認するため出力する(コンソールでなくMAUIはデバッグ)
Debug.WriteLine($"ID: {id}, Name: {name}");
}
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
}
そして、MainViewPageをすぐ確認できるようにしたいので、
AppShell.xamlを下記のようにコードを書き換えます。
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="McatBalance.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:McatBalance"
xmlns:views="clr-namespace:McatBalance.MVVM.Views"
Shell.FlyoutBehavior="Flyout">
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate views:MainViewPage}"
Route="MVVM.Views.MainViewPage" />
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
</Shell>
具体的には下記を変えています。
これで実行をすると、
デバッグに↑きちんとデータが出力されてるのがわかります。
これをアプリ上で操作したいのでバインディングしていきます。
*おまけ
macでのMAUI App作成とかC#でMySQL接続するとかの情報がなかなか見つからないので、そもそも構築の仕方が歪なのかもしれないです、、
情報が見つからないときはchatGPTでマンツーレッスンのように聞きながらやっていますが結構便利でした。chatGPTのすごいところは、前の質問を記憶して質問の意図をくんでくれるところなのかなと思いました。「これやったけどまだエラー出るんですけど」みたいなことを簡単な英文で書くだけで詳しく教えてくれます。
こんな感じで。
(次回に続きます。)