بناء تطبيق جهات الاتصال باستخدام Xamarin – الجزء الثالث

في هذا الجزء الثالث من سلسلة بناء تطبيق جهات الاتصال باستخدام منصة Xamarin، سنغوص بشكل مفصل في المرحلة النهائية لتطوير التطبيق، مع التركيز على تحسين تجربة المستخدم، وإضافة ميزات متقدمة، وتنظيم الكود بشكل يجعل التطبيق أكثر مرونة وقابلية للصيانة. سنغطي الخطوات البرمجية المتعلقة بالتفاعل مع قاعدة البيانات المحلية، وتصميم واجهة المستخدم باستخدام XAML بشكل احترافي، إضافة إلى استخدام أنماط التصميم مثل MVVM لتعزيز الفصل بين منطق العمل وواجهة المستخدم.

مقدمة حول Xamarin في تطوير تطبيقات الهاتف

تُعد منصة Xamarin من أقوى الأدوات التي تتيح للمطورين بناء تطبيقات متعددة المنصات (iOS، Android، وWindows) باستخدام لغة C# مع إمكانية مشاركة جزء كبير من الشيفرة البرمجية بين الأنظمة. هذا يقلل من وقت التطوير والتكلفة، مع ضمان تجربة مستخدم متناسقة.

في الأجزاء السابقة، قمنا بتأسيس هيكل التطبيق، وإنشاء واجهة المستخدم الأساسية، وتهيئة مشروع Xamarin Forms. في هذا الجزء، سنركز على تحسين وظائف التطبيق وإدارة البيانات بشكل احترافي.

1. هيكلة التطبيق وفق نمط MVVM

1.1 تعريف نمط MVVM وأهميته

نمط Model-View-ViewModel (MVVM) هو نمط تصميم يُستخدم بشكل واسع في تطبيقات Xamarin Forms، حيث يقوم بفصل المنطق الخاص بالبيانات (Model)، عن واجهة المستخدم (View)، ومنطق عرض البيانات والتفاعل معها (ViewModel). هذا الفصل يسهل صيانة الكود، ويسمح باختبار وحدات منفصلة، ويُعزز من قابلية التوسعة.

1.2 إعداد مجلدات MVVM

• Model: يحتوي على تعريف كائنات البيانات، مثل جهة الاتصال (Contact) التي تشمل الخصائص الأساسية مثل الاسم، رقم الهاتف، البريد الإلكتروني.

• View: الصفحات والواجهات التي يتفاعل معها المستخدم، مكتوبة باستخدام XAML.

• ViewModel: منطق التطبيق المرتبط بالواجهة، يتعامل مع بيانات النموذج ويقوم بتنفيذ الأوامر.

2. إنشاء نموذج البيانات (Model) لجهات الاتصال

نموذج البيانات يعكس هيكل جهة الاتصال التي سيتم التعامل معها في التطبيق. يجب أن يتضمن الخصائص الرئيسية اللازمة لتخزين معلومات الاتصال.

csharp
CopyEdit
public class Contact
{
    public int Id { get; set; } // معرف فريد لكل جهة اتصال
    public string FullName { get; set; }
    public string PhoneNumber { get; set; }
    public string Email { get; set; }
    public string Address { get; set; }
}

3. استخدام SQLite كقاعدة بيانات محلية

3.1 أهمية استخدام قاعدة بيانات محلية

لتخزين جهات الاتصال بشكل دائم حتى بعد إغلاق التطبيق، من الضروري استخدام قاعدة بيانات محلية. SQLite تعتبر خيارًا مثاليًا لما تتميز به من بساطة في الاستخدام، وأداء مناسب للتطبيقات المحمولة.

3.2 إضافة حزمة SQLite إلى المشروع

يتم إضافة مكتبة SQLite-net-pcl عبر NuGet، وهي مكتبة تتيح العمل مع SQLite بطريقة سهلة باستخدام C#.

3.3 إعداد قاعدة البيانات

إنشاء فئة خاصة بإدارة العمليات على قاعدة البيانات مثل الإضافة، التحديث، الحذف، والقراءة.

csharp
CopyEdit
using SQLite;
using System.Collections.Generic;
using System.Threading.Tasks;

public class ContactDatabase
{
    readonly SQLiteAsyncConnection _database;

    public ContactDatabase(string dbPath)
    {
        _database = new SQLiteAsyncConnection(dbPath);
        _database.CreateTableAsync().Wait();
    }

    public Task<List<Contact>> GetContactsAsync()
    {
        return _database.Table().ToListAsync();
    }

    public Task<int> SaveContactAsync(Contact contact)
    {
        if (contact.Id != 0)
        {
            return _database.UpdateAsync(contact);
        }
        else
        {
            return _database.InsertAsync(contact);
        }
    }

    public Task<int> DeleteContactAsync(Contact contact)
    {
        return _database.DeleteAsync(contact);
    }
}

4. إنشاء الـ ViewModel للتحكم في البيانات

يعتبر الـ ViewModel الوسيط بين الواجهة ونموذج البيانات، حيث يتضمن الخصائص التي تُربط مع عناصر واجهة المستخدم وأوامر التعامل مع البيانات.

csharp
CopyEdit
using System.Collections.ObjectModel;
using System.Windows.Input;
using Xamarin.Forms;

public class ContactsViewModel : BaseViewModel
{
    private ContactDatabase _database;

    public ObservableCollection Contacts { get; set; }

    public ICommand LoadContactsCommand { get; }
    public ICommand AddContactCommand { get; }
    public ICommand DeleteContactCommand { get; }

    public ContactsViewModel(ContactDatabase database)
    {
        _database = database;
        Contacts = new ObservableCollection();

        LoadContactsCommand = new Command(async () => await ExecuteLoadContactsCommand());
        AddContactCommand = new Command(async (contact) => await AddContact(contact));
        DeleteContactCommand = new Command(async (contact) => await DeleteContact(contact));
    }

    private async Task ExecuteLoadContactsCommand()
    {
        var contacts = await _database.GetContactsAsync();
        Contacts.Clear();
        foreach (var contact in contacts)
        {
            Contacts.Add(contact);
        }
    }

    private async Task AddContact(Contact contact)
    {
        await _database.SaveContactAsync(contact);
        await ExecuteLoadContactsCommand();
    }

    private async Task DeleteContact(Contact contact)
    {
        await _database.DeleteContactAsync(contact);
        Contacts.Remove(contact);
    }
}

5. تصميم واجهة المستخدم باستخدام XAML

5.1 صفحة عرض قائمة جهات الاتصال

استخدام ListView لعرض قائمة جهات الاتصال بشكل ديناميكي مع ربط البيانات من ViewModel.

xml
CopyEdit
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.Views.ContactsPage">

    <ContentPage.BindingContext>
        <local:ContactsViewModel />
    ContentPage.BindingContext>

    <StackLayout Padding="10">
        <ListView ItemsSource="{Binding Contacts}"
                  SelectedItem="{Binding SelectedContact}"
                  HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding FullName}" Detail="{Binding PhoneNumber}" />
                DataTemplate>
            ListView.ItemTemplate>
        ListView>

        <Button Text="إضافة جهة اتصال" Command="{Binding AddContactCommand}" />
    StackLayout>

ContentPage>

5.2 صفحة إضافة جهة اتصال جديدة

تتضمن حقولاً لملء البيانات الأساسية مع زر حفظ.

xml
CopyEdit
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.Views.AddContactPage">

    <StackLayout Padding="10" Spacing="10">
        <Entry Placeholder="الاسم الكامل" Text="{Binding FullName}" />
        <Entry Placeholder="رقم الهاتف" Text="{Binding PhoneNumber}" Keyboard="Telephone" />
        <Entry Placeholder="البريد الإلكتروني" Text="{Binding Email}" Keyboard="Email" />
        <Entry Placeholder="العنوان" Text="{Binding Address}" />

        <Button Text="حفظ" Command="{Binding SaveCommand}" />
    StackLayout>

ContentPage>

6. تحسينات في تجربة المستخدم

6.1 استخدام التنقل بين الصفحات

عند الضغط على زر إضافة جهة اتصال، يتم التنقل إلى صفحة الإدخال الجديدة. بعد الحفظ، يتم العودة إلى صفحة القائمة مع تحديث البيانات.

csharp
CopyEdit
await Navigation.PushAsync(new AddContactPage());

وفي صفحة إضافة جهة الاتصال، بعد تنفيذ الحفظ:

csharp
CopyEdit
await Navigation.PopAsync();

6.2 عرض رسائل تأكيد وتنبيهات

يمكن استخدام DisplayAlert لإبلاغ المستخدم بنجاح الحفظ أو الحذف، أو في حالة وجود خطأ.

7. تنظيم الكود وتجربة الأداء

• التأكد من أن جميع العمليات على قاعدة البيانات تتم بشكل غير متزامن (Asynchronous) لمنع تجميد واجهة المستخدم.

• استخدام ObservableCollection لتحديث الواجهة تلقائياً عند تعديل البيانات.

• فصل واجهة المستخدم عن منطق التطبيق بشكل تام باستخدام MVVM، مما يسهل إضافة ميزات جديدة مستقبلاً.

8. جدول مقارنة بين المميزات الأساسية والمزايا المتقدمة في تطبيق جهات الاتصال

9. الخاتمة

تطوير تطبيق جهات الاتصال باستخدام Xamarin يوفر فرصة مثالية لفهم كيفية بناء تطبيقات متعددة المنصات باستخدام لغة C# وتقنيات حديثة مثل MVVM وSQLite. تطبيق هذه المفاهيم بشكل متقن يعزز من جودة التطبيق وكفاءته، ويوفر تجربة مستخدم متكاملة ومتطورة. باتباع الخطوات التفصيلية وتنظيم الكود بشكل احترافي، يصبح التطبيق جاهزاً للاستخدام العملي مع إمكانية توسع مستقبلي لإضافة ميزات أخرى كالرسائل النصية أو التزامن مع خدمات السحابة.

المصادر والمراجع

1. Documentation – Xamarin.Forms Official Documentation
   
   https://learn.microsoft.com/en-us/xamarin/xamarin-forms/

2. SQLite-net-pcl Library
   
   https://github.com/praeclarum/sqlite-net

بهذا، يكون المقال قد تناول شرحًا مفصلًا وعلميًا لإنهاء بناء تطبيق جهات الاتصال باستخدام Xamarin، مع تغطية كافة الجوانب المهمة لضمان التطبيق يعمل بكفاءة عالية ويسهل تطويره مستقبلاً.