מדריך ראשוני ל- Xamarin

12/07/2014

8 תגובות

החודש החלטתי לבדוק את xamarin ולנסות לפתח אפליקציה לאנדרואיד שלי. בדרך כלל הגישה שלי היא אמנם חיים קלים אך לעשות את זה בצורה הטובה ביותר, ולכן לא מיהרתי לנסות את xamarin. העדפתי להתחיל עם eclipse ו- java.

מסתבר שבהחלט יש מה לדבר על xamarin.

התקנת xamarin כמצופה בסביבת וינדוס הינה ברורה וקלה, אך לא עוברת חלק אצלי.
ההתקנה הראשונה נכשלה בחלק הרביעי והאחרון ורק בהרצה שלישית סיימתי עם התהליך.
ההתקנה מוודאת לנו קיום של ארבעה חלקים חשובים:

1. Android SDK

2. GTK#

3. Xamarin Studio

4. Xamarin

מכל אלו די ברור לנו למה צריך את android sdk וגם מובן מה זה xamarin (שהרי לשמו הורדנו אותו) וה- xamarin studio. אך מה זה GTK#? ובכן, ישנו פרויקט בשם GTK+ אשר מעניק לנו ברמת קוד פתוח יכולת הקמת ממשקים גרפיים למגוון שפות פיתוח כגון C/C++, Perl, Python ועוד.
GTK# הינו חיבור בין ה- GTK+ לבין Mono (open source .net framework) ויוצר לנו ממשק גרפי לפיתוח עם ה- Mono.

מידע נוסף ניתן למצוא באתר פרויקט מונו.

לאחר שסיימנו עם תהליך ההתקנה, יש לנו בחירה בין xamarin studio לבין visual studio.
במדריך זה אשאר עם visual studio.

האפליקציה הראשונה שלי

נכתוב אפליקציה פשוטה אבל תאפשר למשתמש לכתוב הודעה, לכתוב מספר טלפון, וכמובן לשלוח את ההודעה למספר הטלפון.

לצורך זה נחוצים לנו שתי תיבות טקסט, אחת לטלפון ואחת להודעה, שתי שדות טקסט שיתארו מה להכניס בכל תיבת טקסט, וכמוכן כפתור לשליחת ההודעה.

נתחיל בשלב הראשון בפתיחת פרויקט חדש ונקרא לו SMS_Sender.

clip_image002

נפתח לנו פרויקט חדש עם עץ ספריות וקבצים כדלקמן:

clip_image003

למי שמכיר קצת פרויקטים של אנדרואיד מסביבת eclipse וגם למי שלא הנה סקירה קצרה של מה שחשוב כרגע:

  • תחת הספרייה Properties נמצא קובץ בשם AndroidManifest.xml. קובץ זה מאוד חשוב כיוון שבתוכו מוגדרים החלקים החשובים של האפליקציה וביניהם ניתן למצוא:
    1. שם האפליקציה כפי שתופיע במכשיר.
    2. האייקון של האפליקציה.
    3. גרסת היעד שאליה אנו מתכננים לפתח את האפליקציה.
    4. גרסה מינימלית שאנו מאפשרים להתקין את האפליקציה על מכשיר – אם נקבע גרסה מינימלית גבוהה מדי, כלומר לא נתמוך בגרסאות נמוכות, אנו עשויים לפספס קהל יעד לא קטן בכלל. עדיין ישנו אחוד גדול של אנשים עם גרסאות ישנות של אנדרואיד כגון 2.3.3 וחלק אף נמוך מזה.
    5. הרשאות – מרבית הפעולות שנרצה לבצע על המכשיר ידרשו הרשאות מהמשתמש וזה כולל אפשרויות כמו שימוש במצלמה, מיקרופון, גישה לאנשי קשר, ליומן, ל- SMS-ים, ועוד.
  • ספריית Resources – כאן יהיו לנו ספריות שונות כגון
    1. drawable אשר מכיל בתוכו אייקונים ותמונות שונות ברזולוציות שונות אשר יתאימו למכשירים שונים. יהיו לנו ספריות שונות לרזולוציות שונות כגון: drawable-hdpi (רזולוציה גבוהה), drawable-ldpi (רזולוציה נמוכה), וכדומה.
    2. layout אשר מכיל בתוכו את המסכים אשר המשתמש רואה ועובד איתם.
    3. values אשר מכיל בתוכו כל מיני ערכים וביניהם תרגום לשפות שונות. כאן ניתן למצוא קובץ Strings.xml ואת המקבילים שלנו בשפה שונו לדוגמא String_en-US.xml.
  • לכל layout יש activity – זהו ה- logic של ה- ה- view שלנו. אם נשווה זאת ל- mvvm (ממנו אני בא) זהו ה- viewmodel וה- layout הוא ה- view.
    כאן יש לנו בתור התחלה את MainActivity.cs בהתאמה ל- layout שלנו שנקרא Main.axml.

עריכת מסך המשתמש

בואו נפתח את Main.axml שזהו קובץ התצוגה של איך מסך המשתמש יראה.

לאחר הרינדור ע”י ה- visual studio אנו אמורים לקבל את המסך הויזואלי הבא:

clip_image005

המסך הזה נותן לנו מגוון רחב של פיצ’רים אשר מסייעים לנו בעת עיצוב ממשק המשתמש.

  • Tab – Alternative Layouts – כאן אנחנו יוכלים להגדיר רזולוציות שונות ומסכים שונים כגון Landscape, Portrait, מצב המקלדת (מוצגת או לא), מצב לילה/יום, ועוד. אחרי שהגדרנו מצבים שונים אנחנו יכולים בקלות לעבור ממצב למצב ולבדוק שהעיצוב שלנו נראה טוב בכל מצב רצוי.
  • Tab – סוג מכשיר – כל מכשיר והתצורה שלו. טאב זה נותן לנו לראות איך על מכשירים שונים תראה האפליקציה שלנו וזה כולל, טלפונים, טאבלטים, פאבלטים, ואפילו שעונים.
  • Tab – Portrait / Landscape – מעבר בין תצוגה רגילה לנוף.
  • Tab – Android Version – בין הגרסאות השונות של האנדרואיד היו שינויים לדוגמא ב- Navigation וטאב זה בא לעזור לנו לראות שעל גרסאות שונות האפליקציה שלנו עדיין נראית טוב.
  • Tab – שפות – ישנן שפות שבהן המילים הן מאוד ארוכות כמו גרמנית ולכן נשתמש בטאב זה לבדוק את העיצוב שלנו עם טקסטים ארוכים וקצרים.
  • Tab – Mode – מצב רכב, רגיל, לילה וכדומה.
  • Tab תחתון – Design / Source – מאפשר לנו לעבור בין מצב ויזואלי לבין מצב xml. המצב הויזואלי הוא מאוד נחמד אך לפעמים נוח לעבוד במצב xml כמו לדוגמא copy-paste שכל מתכנת מכיר.
  • חמישה כפתורים בצד ימין למעלה – זום.
  • Theme למעלה בצד ימין – מאפשר לנו לשנות את ה- Theme הנבחר ולראות במהירות את ההשפעה שלו תוך כדי מעבר על ה- Theme-ים עוד לפני שבחרנו.

בהחלט מסך רב יכולות שכדאי ללמוד טוב להכיר ולהשתמש.

התחלת העיצוב

נתחיל בלהסיר את הכפתור של “שלום, עולם” ולשים במקומו קונטרול מסוג Text (Large).

מצד שמאל יש לנו את תיבת הקונטרולים לשימוש ובחלק העליון שלה יש תיבת חיפוש מיידי.

נקיש שם “Text” ואחת התוצאות היא “Plain Text”. נגרור שניים ממנו למסך במקום שהיה הכפתור מקודם. עכשיו נחפש בתיבת כלים שלנו “Button” ונוסיף כפתור מתחת ל- Text שלנו.

עכשיו יש לנו במסך תיבת טקסט שבה המשתמש יכניס מספר טלפון בתור היעד לשליחת הודעה, תיבת הטקסט שבתוכה המשתמש יכניס את ההודעה שהוא מעוניין לסמס, ומתחתיה כפתור לשליחת ההודעה.

המסך שלנו אמור להיראות כך בתחילה כך:

clip_image006

וכעת בואו נערוך את המאפינים של כל קונטרול. נבחר את ה- Text העליון שלנו ונלחץ על F4 לקבלת מסך ה- Properties.

בשדה Text נמחק את הערך הקיים שם, ובמקום זאת נכניס בשדה Hint את הערך “Dest phone number”. זו תיבת הטקסט העליונה אשר תחזיק לנו את מספר הטלפון בתור יעד. נוסף על זה נעדכן את השדה id עם הערך “@+id/txtDestPhoneNumber”. כאשר נבקש לעבוד עם הקונטרול בקוד מאחורה נוכל לפנות אליו ע”י ה- id txtDestPhoneNumber. נראה זאת בהמשך.

אותו הדבר נעשה לגבי הקונטרול השני של Text.
שדה text למחוק את התוכן.
שדה Hint להכניס ערך “Message”.
שדה id להכניס ערך “@+id/txtMessage”
שדה Layout_height נכניס לו ערך 70dp על מנת לתת לו גובה כפול.

לגבי הכפתור נעדכן אותו כך:
שדה Text חהכניס ערך “Send”.
שדה id להכניס ערך “@+id/btnSend”.

כעת התצוגה שלנו אמורה להיראות כך:

clip_image007

אם נעבור למצב Source במקום Design נוכל לראות כיצד נראה ה- xml שמרכיב לנו את המסך:

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

   3:     android:orientation="vertical"

   4:     android:layout_width="fill_parent"

   5:     android:layout_height="fill_parent">

   6:     <EditText

   7:         android:layout_width="match_parent"

   8:         android:layout_height="wrap_content"

   9:         android:id="@+id/txtDestPhoneNumber"

  10:         android:hint="Dest phone number" />

  11:     <EditText

  12:         android:layout_width="match_parent"

  13:         android:layout_height="wrap_content"

  14:         android:id="@+id/txtMessage"

  15:         android:hint="Message" />

  16:     <Button

  17:         android:text="Send"

  18:         android:layout_width="match_parent"

  19:         android:layout_height="wrap_content"

  20:         android:id="@+id/btnSend" />

  21: </LinearLayout>

אנחנו יכולים לראות כאן שיש לנו קונטיינר בשם LinearLayout אשר המטרה שלו היא לסדר את הקונטרולים אשר בתוכו בצורה לינארית, במקרה שלנו בצורה אנכית (מלמעלה למטה). בתוכו יש לנו את שני שדות הטקסט שלנו לטלפון ולהודעה, ואחרון חביב את הכפתור לשליחת ההודעה.

וכעת הקוד

נפתח את הקובץ MainActivity.cs ונמחק את שורות הקוד מתחת לקריאה למתודה SetContentView.

כעת נכתוב את הקוד שלנו.

נתחיל בהשגת רפרנס לקונטרולים שיש לנו בתצוגה.

על מנת להשיג רפרנס לקונטרול כלשהו אנו צריכים להשתמש במתודה FinViewById<> אשר מקבלת ב- Generics את סוג הקונטרול שאנו מבקשים להביא, ובתור פרמטרים אנו צריכים לשלוח את ה- id של אותו קונטרול.

ה- id הוא לא טקסטואלי כמו שנראה בעת העיצוב אלא הוא מקבל ערך מספרי, integer-י, מאחורי הקלעים.
כל פעם שאנו שומרים את הפרויקט מתעדכן קובץ מיוחד שאין לערוך אותו ידנית בשם R.Java ואשר מחזיק בתוכו רפרנסים סטטיים בשם ה- id עם המספר ה- integer-י המדובר.

על מנת להגיע אל אותו מספר אנו יכולים לפנות לאוביקט Resource כך:

   1: EditText txtDestPhoneNumber = FindViewById<EditText>(Resource.Id.txtDestPhoneNumber);

   2: EditText txtMessage = FindViewById<EditText>(Resource.Id.txtMessage);

   3: Button btnSend = FindViewById<Button>(Resource.Id.btnSend);

כעת יש לנו רפרנס לשלושת הקונטרולים שלנו.

עכשיו אנו צריכים לטפל בקליק על כפתור Send.

נירשם לאירוע של Click על האוביקט כפתור btnSend כך:

   1: btnSend.Click += (sender, args) =>

   2:     {

   3:

   4:     };

ניצור instance של אוביקט בשם SmsManager אשר אחראי על פעולות שליחת sms כגון שליחת טקסט, דאטה, והודעת טקסט מחולקת (אם הטקסט גדול מדי ממה שהרשת מאפשרת).

   1: SmsManager smsMgr = SmsManager.Default;

וכעת לחלק האחרון, נקרא למתודה SendTextMessage ובין הפרמטרים שנעביר לה יהיו מספר טלפון, הודעה, וכמה null-ים:

   1: smsMgr.SendTextMessage(txtDestPhoneNumber.Text, null, txtMessage.Text, null, null);

המתודה המלאה שלנו נראית עכשיו כך:

   1: protected override void OnCreate(Bundle bundle)

   2: {

   3:     base.OnCreate(bundle);

   4:

   5:     // Set our view from the "main" layout resource

   6:     SetContentView(Resource.Layout.Main);

   7:

   8:     EditText txtDestPhoneNumber = FindViewById<EditText>(Resource.Id.txtDestPhoneNumber);

   9:     EditText txtMessage = FindViewById<EditText>(Resource.Id.txtMessage);

  10:     Button btnSend = FindViewById<Button>(Resource.Id.btnSend);

  11:

  12:     btnSend.Click += (sender, args) =>

  13:         {

  14:             SmsManager smsMgr = SmsManager.Default;

  15:             smsMgr.SendTextMessage(txtDestPhoneNumber.Text, null, txtMessage.Text, null, null);

  16:         };

  17: }

זהו, כאן כתיבת התוכנית שלנו הסתיימה.

דבר אחרון, ב- Properties של הפרויקט שלנו יש טאב שנקרא Android Options. בתוכו יש CheckBox שהכותרת שלו היא Use Fast Deployment אשר לא תמיד מתאפשרת (לפחות לא אצלי), ולכן אני כיביתי אותה.

עכשיו יש לכולנו אפליקציה מגניבה בטלפון שמאפשרת לשלוח sms-ים 🙂

באופן מעשי, עשינו בדיוק אותו הדבר כמו שהיינו עושים ב- eclipse, אפילו הפקודות בקוד נראות אותו הדבר.

עם זאת, העבודה ב- Visual Studio עושה את התהליך להרבה יותר נוח, קל, ומהיר, ולמרות התקלות שהיו לי בהתקנה זה בהחלט מדרבן אותי להמשיך ולעבוד עם xamarin.

תהנו

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

8 תגובות

  1. Uriel Jacobson13/07/2014 ב 14:40

    יפה מאוד.

    Reply
    1. Shahar Eldad
      Shahar Eldad13/07/2014 ב 14:51

      תודה 🙂

      Reply
      1. מוריס15/10/2016 ב 10:41

        שלום אלעד,
        רציתי לשאול בבקשה איך אני מעביר את האפליקציה לפלאפון שלי לאחר שקימפלתי אותה בויזואל סטודיו ?
        איזה קובץ אני אמור לקחת ?

        תודה רבה

        Reply
        1. Shahar Eldad
          Shahar Eldad02/11/2016 ב 11:40

          אתה יכול דרך הויזואל סטודיו לאחר שחיברת את הטלפון שלך למחשב (בדרך בחיבור מאחרוה – הוא יותר חזק מאשר מקדימה)
          בכפתור הירוק של Start בדרך כלל יופיעו מכשירים כמו אמולטורים או מכשירים אמיתיים.
          אם לא אז בגדול לאנדרואיד צריך קובץ עם סיומת APK.
          לאייפון אני פחות מכיר.

          Reply
  2. יוחאי18/11/2016 ב 11:48

    ניסיתי לבנות את האפליקציה לפי המדריך אבל המסך שאמור להיות בפתיחת Main.axml לא מוצג לי.

    Reply
    1. Shahar Eldad
      Shahar Eldad21/11/2016 ב 10:33

      האם התקנת את xamarin התוסף ל Visual Studio?

      Reply
  3. חיים04/12/2016 ב 07:24

    תיקון שגיאת כתיב ב
    “אותו הדבר נעמה לגבי הקונטרול השני של Text.

    אגב, פיתחת גם בJAVA לאנדרויד? איך ההבדלים? בעיות תאימות ב XAMARIN?

    איפה אפשר להגדיר בפרוייקט לאיזה API של אנדראויד אתה תומך?
    והאם בפיתוח הAPI יוצג לך שונה לפי הAPI שאתה משתמש בו?
    הרי לא דומה היכולות של ANDROID 5 ל 3 ולכן צריך API שונה

    Reply
    1. Shahar Eldad
      Shahar Eldad08/01/2017 ב 13:42

      הי

      פיתחתי גם ב Java לאנדרואיד. החבר’ה ב Xamarin עשו עבודה טובה מאוד כך שכמעט אין הבדלים, וכל מה שאתה יכול לעשות ב Java אפשר גם ב Xamarin.
      בתוך Properties יש לך קובץ בשם AndroidManifest.xml ובתוכו אתה יכול לתת כל מיני הגדרות נחוצות (שאתה פשוט יכול להיכנס להגדרות של הפרויקט).
      לא בדקתי לגבי פיתוח לכמה פלטרפומות שונות של Api.

      בהצלחה

      Reply