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

xnoraxمنذ سنتين

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

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

 

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

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

xamBlog1.PNG.411b4a3145158d8f8aac447005f22df4.PNG

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

xamBlog2.PNG.70f73e53a93fc852fcbc03c1692d585f.PNG

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

xamBlog3.PNG.4635475131208f65007ceb9b3578956a.PNG

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

xamBlog4.PNG.5653a1f0280c943b69458c7fc561fa96.PNG

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

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

Screenshot_20170426-152446.png.358f455fb4a0a636671a66f8306fa0e4.png

نعود إلى ملفات المشروع: في المجلد الأول (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.

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

Screenshot_20170426-152500.png.f5563e0b9d1dc00eae5f7b9f606e0290.png

 

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

انتهينا من تصميم التطبيق، لكن لو ضغطت زر موافق لن تظهر لك أي نتيجة لأننا لم نبرمجه بعد.
في ملف 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));
        }
    }
}

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

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

كلمات دليلية:
3
إعجاب
1287
مشاهدات
1
مشاركة
3
متابع
متميز
محتوى رهيب

التعليقات (4)

نورة:

عندي مشكلة في بعض الخيارات ماتطلع لي نفسها مثلا cross platform App 

مع ان سويت نفس الخطوات اخترت visual C# ومنها اخترت cross platform بس ماطلع لي زي الشرح اذا ابختار cross platform App 

xnorax:

غالباً فيه خطأ أثناء التحميل، لكن إذا ممكن تشاركيني الخيارات الظاهرة عندك.

نورة:

اذا اخترت visual C# بعدين اختار منها cross-platform 

ومنها يطللع لي خيار واحد

بس يطلع لي mobile App (Xamarin.Forms(

xnorax:

اختاري الخيار الظاهر Mobile App Xamarin.Forms

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !