طور تطبيقك الأول للهواتف الذكية باستخدام Xamarin

في هذا المقال سنبرمج سوياً تطبيق يعمل على جميع الهواتف باستخدام منصة زامرن Xamarin. التطبيق ببساطة سيقوم بتحويل الرقم الذي يدخله المستخدم إلى رقم روماني.

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

 

إنشاء التطبيق

من شريط الأدوات، اختر File، ومن ثم اضغط New Project. بعد ذلك، من قائمة Cross-Platform اختر تطبيق (Cross-Platform App (Xamarin.Forms or Native، وسنسمي المشروع “RomanNumerals”

ستظهر لك هذه النافذة تلقائياً، تأكد من اختيار Xamarin.Forms و PCL بالإضافة إلى Blank App كما في الصورة:

بعد الانتهاء من إنشاء المشروع، ستلاحظ من مستعرض الملفات في الجهة اليمنى بأن المشروع يحتوي على 3 مجلدات، الأول Portable مشترك، والثاني لأجهزة الأندرويد، والثالث لأجهزة الآيفون. وقد يظهر لك مجلد آخر أيضاً لأجهزة الويندوز.

سأجرب التطبيق الآن على جهازي سامسونج  بالضغط باليمين على مجلد الأندرويد RomanNumerals.Droid واختيار Set as StartUp project. ثم الضغط على زر التشغيل كما في الصورة:

في حال واجهتك مشاكل في تشغيل التطبيق على جوالك فأنصحك بالرجوع إلى هذا الفيديو، كما يمكنك تشغيله على محاكي في الكمبيوتر باتباع هذه الطريقة.

هذه صورة من التطبيق بعد تشغيله على الجوال:

نعود إلى ملفات المشروع: في المجلد الأول (Portable) نقوم بكتابة الكود مرة واحدة ليعمل في جميع الأنظمة، لكن مستقبلاً ربما تحتاج استخدام المجلدات الأخرى لكتابة كود مخصص لأحد الأنظمة، أو للاستفادة من أحد المميزات التي تتوفر على نظام واحد فقط.

في المجلد المشترك يوجد ملفين من نوع .xaml، هذه الملفات تحتوي على كود يشبه كود XML لتصميم الواجهات. عند الضغط على السهم بجانب الملف، سيظهر لك ملف بنفس الاسم من نوع cs. يحتوي على الكود البرمجي الخاص بالتنفيذ.

ملف App هو الملف الأساسي الذي سيبدأ منه البرنامج التنفيذ، ولكل ملف واجهة أو صفحة Page. وداخل هذا الملف الأساسي App.cs وُضعت الصفحة الرئيسية للتطبيق = MainPage.xaml:

MainPage = new RomanNumerals.MainPage();

لنلقي نظرة على تصميم الصفحة الرئيسية MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:RomanNumerals" 
             x:Class="RomanNumerals.MainPage"> 
  <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" /> 
</ContentPage>

باختصار تحتوي على صفحة من نوع ContentPage، وهذه الصفحة تحتوي على عنوان Label، نص العنوان= Welcome to Xamarin Forms! والنص يتوسط الصفحة أفقياً وعمودياً.

 

تصميم واجهة التطبيق

لتصميم تطبيق تحويل الأرقام سنحتاج لتعديل الصفحة بإضافة ثلاثة عناصر:

1. Entry لنأخذ إدخال المستخدم
2. Button زر يضغطه المستخدم بعد إدخال الرقم
3. Label نكتب فيه النص أو الرقم الروماني بعد التحويل

سنضع هذه العناصر في قالب StackLayout لتكون مرتبة فوق بعضها البعض.

بالتالي استبدل كود الصفحة الرئيسية MainPage.xaml بهذا:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RomanNumerals"
             x:Class="RomanNumerals.MainPage">
    <StackLayout VerticalOptions="Center" Padding="20,0,20,0" Spacing="20">
        <Entry x:Name="userEntry" />
        <Button x:Name="doneButton" Text="موافق"/>
        <Label x:Name="resultLabel" Text="هنا ستظهر النتيجة" HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage>

لاحظ أننا أعطينا كل عنصر اسم x:Name حتى نتمكن من استخدامه في الكود التنفيدي في MainPage.cs.

جرب تشغيل البرنامج الآن! من المفترض أن تكون الشاشة كما هي فالصورة:

 

برمجة التطبيق

انتهينا من تصميم التطبيق، لكن لو ضغطت زر موافق لن تظهر لك أي نتيجة لأننا لم نبرمجه بعد.
في ملف MainPage.cs مباشرة تحت 

using Xamarin.Forms;

أضف 

using Xamarin.Forms;

وتحت ()InitializeComponent أضف السطر التالي:

doneButton.Clicked += DoneButton_Clicked;

والذي بدوره ينفذ الدالة DoneButton_Clicked كلما ضغط المستخدم الزر الذي أسميناه سابقاً doneButton من خلال x:Name في MainPage.xaml.

بعد القوس {، وقبل أن نعرف الدالة التي ستُنفَّذ عند ضغطة الزر، أضف الدالة المسؤولة عن تحويل الرقم:

public static string ToRoman(int number)
{
    if ((number < 0) || (number > 3999)) throw new ArgumentOutOfRangeException("insert value betwheen 1 and 3999");
    if (number < 1) return string.Empty;            
    if (number >= 1000) return "M" + ToRoman(number - 1000);
    if (number >= 900) return "CM" + ToRoman(number - 900); //EDIT: i've typed 400 instead 900
    if (number >= 500) return "D" + ToRoman(number - 500);
    if (number >= 400) return "CD" + ToRoman(number - 400);
    if (number >= 100) return "C" + ToRoman(number - 100);            
    if (number >= 90) return "XC" + ToRoman(number - 90);
    if (number >= 50) return "L" + ToRoman(number - 50);
    if (number >= 40) return "XL" + ToRoman(number - 40);
    if (number >= 10) return "X" + ToRoman(number - 10);
    if (number >= 9) return "IX" + ToRoman(number - 9);
    if (number >= 5) return "V" + ToRoman(number - 5);
    if (number >= 4) return "IV" + ToRoman(number - 4);
    if (number >= 1) return "I" + ToRoman(number - 1);
    throw new ArgumentOutOfRangeException("something bad happened");
}

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

private void DoneButton_Clicked(object sender, EventArgs e)
{
	resultLabel.Text = ToRoman(Convert.ToInt16(userEntry.Text));
}

ليصبح كامل الكود بهذا الملف كالتالي

using Xamarin.Forms;
using System;

namespace RomanNumerals
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            doneButton.Clicked += DoneButton_Clicked;
        }

        public static string ToRoman(int number)
        {
            if ((number < 0) || (number > 3999)) throw new ArgumentOutOfRangeException("insert value betwheen 1 and 3999");
            if (number < 1) return string.Empty;
            if (number >= 1000) return "M" + ToRoman(number - 1000);
            if (number >= 900) return "CM" + ToRoman(number - 900); //EDIT: i've typed 400 instead 900
            if (number >= 500) return "D" + ToRoman(number - 500);
            if (number >= 400) return "CD" + ToRoman(number - 400);
            if (number >= 100) return "C" + ToRoman(number - 100);
            if (number >= 90) return "XC" + ToRoman(number - 90);
            if (number >= 50) return "L" + ToRoman(number - 50);
            if (number >= 40) return "XL" + ToRoman(number - 40);
            if (number >= 10) return "X" + ToRoman(number - 10);
            if (number >= 9) return "IX" + ToRoman(number - 9);
            if (number >= 5) return "V" + ToRoman(number - 5);
            if (number >= 4) return "IV" + ToRoman(number - 4);
            if (number >= 1) return "I" + ToRoman(number - 1);
            throw new ArgumentOutOfRangeException("something bad happened");
        }

        private void DoneButton_Clicked(object sender, EventArgs e)
        {
            resultLabel.Text = ToRoman(Convert.ToInt16(userEntry.Text));
        }
    }
}

لقد انتهينا من برمجة التطبيق وأصبح جاهزاً للاستخدام! ?

إذا أردت تحميل التطبيق كاملاً، فبإمكانك تحميله من هنا.

كلمات دليلية: