מדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א'

[א.מ.ד.]

Kodular - הכרת הפלטפורמה

אז מה זה בעצם קודולאר?

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

לקודולאר יש גם תוכנית פרימיום משתלמת, שמאפשרת יצירת פרוייקטים ללא הגבלה (במקום 10 בחינמי), יצירת אפליקציות ללא הגבלת גודל (במקום עד 32MB), העלאת נכסים לפרוייקט כמו תמונות ואודיו ללא הגבלה (במקום עד 10MB), ושימוש ללא הגבלה בהרחבות (במקום עד 5), וכל זה בכמה דולרים בודדים (בסביבות 13 ש"ח) בחודש, כך שאם אתם מתכוונים ליצור פרוייקט משמעותי, כדאי להשקיע את זה.

יצירת פרוייקט ראשון ב-Kodular

נתחיל.

ניכנס לקישור הבא: https://creator.kodular.io/

ניצור חשבון kodular. נאשר את תנאי השירות. אחרי תהליך ההרשמה, נגיע למסך הזה:

זה המסך שבו מוצגים הפרוייקטים הקיימים.
נלחץ על "צור פרוייקט":

תיפתח חלונית שבה נזין את שם הפרוייקט. השם צריך להיות באנגלית, ללא תווים מיוחדים וללא רווחים. אפשר לכתוב "_" במקום רווח. שימו לב: את שם הפרוייקט אי אפשר לשנות מאוחר יותר! לאחר מכן נלחץ על "הבא":

עכשיו תיפתח לנו חלונית של הגדרות ראשוניות לפרוייקט:

בשדה הטקסט הראשון נזין את שם האפליקציה שאנחנו מפתחים. זה יכול להיות גם בעברית ועם רווחים. זה השם של האפליקציה שיופיע במסך הבית של אנדרואיד וכדומה.
בשדה הטקסט השלישי נזין את שם החבילה. זה נראה כמו com.android.[שם המפתח].[שם האפליקציה], אבל זה לא באמת משנה כרגע ואתם יכולים להזין כל טקסט דומה באנגלית.
שאר ההגדרות עוסקות בצבעים הראשיים של האפליקציה. מומלץ לא לגעת בהם כרגע.
להגדרות שבחלונית הזו ניתן לגשת בכל עת מאוחר יותר ולשנות אותן.
נלחץ על הכפתור הכחול לסיום.
המערכת תיצור את הפרוייקט.
אפשר לדלג על הפרסומת של kodular לתוכנית המונטיזציה. זה יהיה רלוונטי רק כשנרצה להכניס כסף בעתיד מהאפליקציות שנפתח.

היכרות עם סביבת העבודה שלנו ב-kodular

זהו, אחרי הרבה דיבורים והכנות הגענו לממשק הפיתוח של kodular!
אנחנו רואים לפנינו את ממשק העיצוב של האפליקציה. בחלק הזה, כפי שנלמד תיכף, אנחנו גוררים רכיבים, גלויים (כמו כפתורים, תוויות) ונסתרים (כמו סאונד, מיקום) מתוך פלטת הרכיבים (מסומן באדום) לתוך מסך התצוגה מקדימה (מסומן בכחול). הרכיבים שנגרור יופיעו ברשימת הרכיבים המסומנת בירוק. בלחיצה על רכיב מתוך רשימת הרכיבים, נראה את המאפיינים (="נכסים") שלו, אם ישנם, בצד ימין (מסומן בורוד).

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

Spoiler

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

הדגמה חיה במכשיר האנדרואיד שלכם!

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

כמובן שאפשר לדלג על השלב הזה, או לחבר את המכשיר מידי פעם כדי לראות שהכל טוב ויפה.

לצורך חיבור המכשיר, עלינו להתקין את אפליקציית הבדיקה במכשיר: Kodular Companion.apk
ב-kodular, בצד שמאל למעלה, יש כפתור בשם Test. נלחץ עליו, ואז נבחר בפריט הראשון - התחבר למלווה:

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

מסך העיצוב - "דיזיינר"

מתחילים לבנות את האפליקציה הראשונה שלנו!
נתחיל מפעולות מאוד קטנות ופשוטות, רק כדי להבין איך זה עובד...
מפלטת הרכיבים, במגירה הראשונה ("ממשק משתמש"), נגרור את הרכיב הראשון - button ("כפתור"), ונשחרר אותו בתוך מסך התצוגה מקדימה.

אפשר לראות שמיד נוסף רכיב button לרשימת הרכיבים בצד ימין, ומימין לה נראה את המאפיינים הניתנים להגדרה של הכפתור, כמו צבע רקע, טקסט, צורה וגודל.
כמו כן, תוכלו לראות מיד באנדרואיד הפיזי המחובר שנוסף כפתור במסך!
נשנה את צבע רקע הכפתור לכחול, באמצעות לחיצה על המאפיין המתאים ובחירת צבע מפלטת הצבעים.
נשנה את הטקסט המופיע על הכפתור ל-"לחץ עלי!" במאפיין המתאים.

מסך הלוגיקה - "בלוקים"

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

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

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

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

הסמל של הפח משמש למחיקת בלוקים ע"י "השלכתם" לתוכו.

מתחילים לקודד! או שלא...

אז זהו. בקודולאר אנחנו לא צריכים לכתוב שורות קוד מפרכות ומבלבלות, וללמוד שפות תכנות שופעות כללים.
אנחנו פשוט גוררים את הבלוק המתאים למשטח העבודה, ומחברים אליו בלוקים אחרים תואמים!
איך זה עובד?
נלחץ על מגירת הבלוקים של הרכיב button. תיפתח לנו מגירה עם הרבה בלוקים בצבעים שונים.

נגרור את הבלוק הראשון, שבעצם אומר "כאשר הכפתור נלחץ, תעשה---", למשטח העבודה:

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

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

עכשיו הבלוקים שלנו אומרים: "כשהכפתור נלחץ, תגדיר את הטקסט של הכפתור ל---".

בואו נאמר לאפליקציה איזה טקסט להגדיר לכפתור:
נגרור ממגירת בלוקי הטקסט (מהמגירות העליונות) את הבלוק הראשון - בלוק טקסט ריק,

ונחבר אותו לבלוקים שעל המשטח:

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

זהו! עכשיו הבלוקים שלנו אומרים: "בלחיצה על הכפתור, תגדיר את הטקסט של הכפתור ל'שלום עולם!'". פשוט, נכון?

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

קימפול האפליקציה לקובץ APK

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

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

התקינו את האפליקציה שהורדתם במכשיר, והנה יש לכם אפליקציה משלכם!

אז בחלק א':

• הכרנו את סביבת העבודה שלנו
• הכרנו את אפליקציית המלווה (האמולטור)
• למדנו ליצור פרוייקט
• הכרנו את מסך העיצוב ומסך הבלוקים
• למדנו להוסיף רכיב למסך
• למדנו לשנות מאפיינים ("נכסים") ברכיב
• למדנו לבנות לוגיקה פשוטה בבלוקים
• למדנו לקמפל את האפליקציה ל-APK.

בחלקים הבאים של המדריך, נתקדם בעז"ה לרמות יותר מורכבות בפיתוח אפליקציות ב-Kodular, עד כדי שתופתעו מה אפשר לעשות עם ה"פאזל" הזה...

אפשר להגיב, לשאול, להאיר ולהעיר בשמחה!!!

[שלמה רביב]

@א.מ.ד.
אחלה מדריך

Spoiler

מטורף שבדור שלנו עוד משהו מוציא מדריך לבנית אפלקציות בלי להזכיר פעם אחת "AI"...

[א.מ.ד.]

@שלמה-רביב כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

מטורף שבדור שלנו עוד משהו מוציא מדריך לבנית אפלקציות בלי להזכיר פעם אחת "AI"...

Spoiler

לקחתי את זה כמטרה...
רציתי לכתוב מדריך לפיתוח אמיתי של אפליקציות עם שליטה מלאה על התהליך, ולא ע"י ג'ינרוט ב-AI...

[יאיר דניאל]

@א.מ.ד.
זה מדהים.
וגם כושר ההסברה והרהיטות שלך - גם מדהימה!

[איש אמת]

@א.מ.ד. כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

רציתי לכתוב מדריך לפיתוח אמיתי של אפליקציות עם שליטה מלאה על התהליך, ולא ע"י ג'ינרוט ב-AI...

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

[א.מ.ד.]

@איש-אמת כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

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

אתה טועה ובגדול לענ"ד. אני מפתח בקודולאר כבר כמה שנים, במקביל לפיתוח בקוטלין, ואני הרבה יותר נהנה בקודולאר, מעבר למהירות הפסיכית של הפיתוח. לרוב הדברים זה מספיק. (דהיינו, אני כבר מזמן ב"עולם הגדול" כלשונך, ועדיין נהנה יותר בקודולאר).
לא ראיתי אף אפליקציה ותוכנה שפותחה ב-AI שיכולה לספק יותר מפונקציה בודדת (אולי למעט אוצריא שעובדים עליה כבר שנים), מה שאין כן בקודולאר. שלא יישמע לא נכון, אני אחד מתומכי ה-AI בפורום, ויודע טוב מאוד איך להתעסק עם AI, אבל עדיין זה לא שם.
בלי קשר, זה גם כלי נפלא ללמידת יסודות התכנות, כמו שכתב @ישיבישער
אשמח שתגיד לי מה לא הצלחת לפתח בקודולאר, שגרם לך לעזוב.

[ישיבישער]

@א.מ.ד. כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

לא ראיתי אף אפליקציה ותוכנה שפותחה ב-AI שיכולה לספק יותר מפונקציה בודדת

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

[איש אמת]

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

Spoiler

מערכת ads שלמה שעובדת

[ישיבישער]

@איש-אמת כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

@ישיבישער לזה בדיוק התכוונתי...

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

[איש אמת]

@ישיבישער ברור לגמרי.

אבל במחשבה שניה יש הרבה אנשים שמסתבכים עם תכנות ai וזה מה שיתן להם גשר לעולם הגדול

הבעיה שגם על זה תווכחו איתי

[א.מ.ד.]

@איש-אמת כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

חוץ מהפן העיצובי שצריך לעשות שמיניות באוויר כדי להגיע לרמה סבירה

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

@איש-אמת כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

לאנצ׳ר

יש הרחבה ייעודית בדיוק לזה.

@איש-אמת כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

אפליקציית קיוסק

עם MDM? נכון, אבל זה לא מצוי.

@איש-אמת כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

התממשקות לפיירביס

מאוד פשוט עם הרכיבים הייעודיים.

@איש-אמת כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

דאטה בייס

כנ"ל.

@איש-אמת כתב במדריך | בניית אפליקציות לאנדרואיד ב-Kodular, בלי ידע קודם בתכנות, בקלות ובמהירות! חלק א':

גוגל שיטס

הרחבה כנ"ל.

[איש אמת]

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