NET MAUI (Multi-platform App UI) ve .NET Core MVC kullanarak muhasebe veritabanındaki uyeler tablosunu bir API üzerinden mobilde görüntülemek için, adım adım bir yol haritası hazırlayalım. Bu çözümde .NET MAUI mobil uygulama ile API üzerinden veri çekilecek ve .NET Core MVC backend'i ile API endpoint'leri tanımlanacak.

Adım 1: API'yi .NET Core MVC ile Oluşturma

İlk olarak, .NET Core MVC API'sini oluşturacağız. Bu API, veritabanından uyeler tablosundaki verileri döndürecektir.

1.1. Yeni bir .NET Core API Projesi Oluşturma

Visual Studio'yu açın ve yeni bir ASP.NET Core Web API projesi oluşturun.

Projeyi oluştururken, API şablonunu seçin.

1.2. Veritabanı Bağlantısı ve Model Tanımlamaları

Veritabanınızla bağlantı kurabilmek için Entity Framework Core kullanacağız.

Entity Framework Core Paketlerini Yükleyin:

NuGet Paket Yöneticisi ile şu paketleri yüklemeniz gerekecek:

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools

Bunu terminal üzerinden aşağıdaki komutla yapabilirsiniz:

dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools

Model Sınıfı:

Uyeler tablosuna karşılık gelen bir model sınıfı oluşturacağız. Bu modelde, Kodu, Adi, Soyadi, Username, ve Password alanlarını ekleyeceğiz.

using System.ComponentModel.DataAnnotations;

namespace UyeBilgileri.Models
{
    public class Uye
    {
        [Key]
        public int Kodu { get; set; }
        public string Adi { get; set; }
        public string Soyadi { get; set; }
        public string Username { get; set; }
        public string Password { get; set; }
    }

}

DbContext Sınıfı:

Veritabanı bağlantısını yönetmek için DbContext sınıfı oluşturacağız:

using Microsoft.EntityFrameworkCore;
using UyeBilgileri.Models;

public class MuhasebeContext : DbContext
{
    public MuhasebeContext(DbContextOptions<MuhasebeContext> options)
        : base(options)
    { }

    public DbSet<Uye> Uyeler { get; set; }
}

Program.cs dosyasına, DbContext sınıfını ve veritabanı bağlantısını ekleyelim. Veritabanı bağlantı dizesini appsettings.json dosyasına ekleyebilirsiniz.

{
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft.AspNetCore": "Warning"
        }
    },

    "ConnectionStrings": {
        "MuhasebeDB": "Server=muhasebe.mssql.somee.com;Database=muhasebe;User Id=atml_SQLLogin_1;Password=4amtopvujx;"
    },

    "AllowedHosts": "*"
}

Ve ardından Program.cs dosyasına şunu ekleyin:

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// API Controller'larını kullanmak için gerekli servisleri ekleyin
builder.Services.AddControllers();

// DbContext'i yapılandırma ve veritabanı bağlantısını ekleme
builder.Services.AddDbContext<MuhasebeContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("MuhasebeDB")));

// Swagger/OpenAPI desteği ekleyin
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Geliştirme ortamında Swagger'ı etkinleştirme
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

// Yetkilendirme middleware'ını ekleme (Varsa)
app.UseAuthorization();

// API Controller'larını bağlama
app.MapControllers();

app.Run();

1.3. API Endpoint'i Oluşturma

API endpoint'i oluşturmak için bir Controller sınıfı ekleyeceğiz. Bu controller, Uyeler tablosundaki verileri JSON formatında döndürecek.

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using UyeBilgileri.Models;

[Route("api/[controller]")]
[ApiController]
public class UyelerController : ControllerBase
{
    private readonly MuhasebeContext _context;

    public UyelerController(MuhasebeContext context)
    {
        _context = context;
    }

    [HttpGet]
    public async Task<ActionResult<IEnumerable<Uye>>> GetUyeler()
    {
        var uyeler = await _context.Uyeler.ToListAsync();
        return Ok(uyeler);
    }
}

Bu API, GET /api/uyeler endpoint'ini sağlayacak ve veritabanındaki uyeler tablosundaki tüm kayıtları döndürecektir.

1.4. API'yi Test Etme

API'nin düzgün çalıştığından emin olmak için, projenizi çalıştırın ve Postman veya tarayıcı üzerinden şu URL'yi test edin:

http://localhost:5000/api/uyeler

Eğer doğru çalışıyorsa, JSON formatında veriler dönecektir.

Adım 2: .NET MAUI Mobil Uygulamasını Oluşturma

Şimdi, mobilde verileri görüntülemek için bir .NET MAUI uygulaması oluşturacağız. Bu uygulama, API'ye istek göndererek verileri alacak ve ekranda listeleyecek.

2.1. Yeni .NET MAUI Projesi Oluşturma

Visual Studio'da yeni bir .NET MAUI App projesi oluşturun.

Projeyi oluştururken platformları (Android, iOS, vb.) seçebilirsiniz.

2.2. HttpClient ile API'den Veri Çekme

Mobil uygulama, HttpClient sınıfı ile API'den veri çekecek.

App.xaml.cs'ye HttpClient Servisini Ekleyin:

HttpClient'ı uygulama genelinde kullanabilmek için App.xaml.cs dosyasına şu servisi ekleyin:

public static HttpClient HttpClient = new HttpClient
{
    BaseAddress = new Uri("http://atml.somee.com/api")
};

Veri Modelini Tanımlayın:

API'den dönen JSON verisi ile eşleşecek bir model sınıfı oluşturun:

using System.ComponentModel.DataAnnotations;

namespace MauiApp1.Models
{
    public class Uye
    {
        [Key]
        public int Kodu { get; set; }
        public string Adi { get; set; }
        public string Soyadi { get; set; }
        public string Username { get; set; }
        public string Password { get; set; }
    }
}

API'den Veri Çekme ve Listeleme:

MainPage.xaml.cs dosyasına şu kodları ekleyin:

using MauiApp1.Models;
using Newtonsoft.Json;
using System.Collections.ObjectModel;

namespace MauiApp1
{
    public partial class MainPage : ContentPage
    {
        public ObservableCollection<Uye> UyelerList { get; set; } = new ObservableCollection<Uye>();
        public MainPage()
        {
            InitializeComponent();
            BindingContext = this;
            LoadData();
        }

        private async void LoadData()
        {
            try
            {
                var response = await App.HttpClient.GetStringAsync("/uyeler");
                var uyeler = JsonConvert.DeserializeObject<List<Uye>>(response);

                if (uyeler != null)
                {
                    foreach (var uye in uyeler)
                    {
                        UyelerList.Add(uye);
                    }
                }
            }
            catch (Exception ex)
            {
                await DisplayAlert("Hata", ex.Message, "Tamam");
            }
        }
    }
}

MainPage.xaml'da Veriyi Listeleme:

Verileri bir ListView ile göstereceğiz. MainPage.xaml dosyasına şu kodu ekleyin:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <ListView ItemsSource="{Binding UyelerList}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Padding="10,5">
                        <Label Text="{Binding Adi}" FontAttributes="Bold" />
                        <Label Text="{Binding Username}" FontSize="Small" TextColor="Gray"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

Adım 3: Son olarak uygulamayı Android ortamında çalıştıracaksanız Manifest dosyasını düzenleyelim.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.INTERNET" />

  <application
      android:allowBackup="true"
      android:icon="@mipmap/appicon"
      android:roundIcon="@mipmap/appicon_round"
      android:supportsRtl="true"
      android:usesCleartextTraffic="true">
  </application>

</manifest>

Adım 4: API ve MAUI Uygulamasını Çalıştırma

API'yi Çalıştırın:

.NET Core API'yi çalıştırın ve http://localhost:5000/api/uyeler endpoint'inin çalıştığından emin olun.

.NET MAUI Uygulamasını Çalıştırın:

.NET MAUI uygulamanızı mobil cihazda veya emülatörde çalıştırın.

Uygulama, API'den gelen verileri listeleyecektir.

Bu adımlar, .NET MAUI mobil uygulamanızın, .NET Core MVC backend API'sinden verileri alıp görüntülemesini sağlar.