ינון רביב
17 פבר 20207 דקות
עודכן ב: 14 מרץ 2020
במדריך זה נלמד כיצד לבנות אפליקציה בגלייד, פלטפורמה המאפשרת להפוך כל קובץ גוגל שיטס (Google Sheets) לאפליקציה עשירה הכוללת, טקסט, תמונות, גלריה, כפתורים אקטיביים ליצירת קשר וכן טופס השארת פרטים וכל זאת ללא שימוש בקוד (No Code)
בכדי לבנות אפליקציה בגלייד יש צורך בחשבון גוגל פעיל (אם אין לכם, ניתן ליצור חשבון בחינם כאן) וחשבון גלייד אשר תקימו במהלך המדריך הזה.
בנוסף, נצטרך קובץ גוגל שיטס אשר ישמש כמקור המידע (database) עבור אפליקציית כרטיס הביקור שלנו.
את קובץ הגוגל שיטס אשר מופיע במדריך תוכלו למצוא כאן). הקובץ יפתח לקריאה בלבד ויש לייצר עותק ממנו לחשבון הגוגל שלכם בצורה הבאה:
ראשית עלינו להתחבר לחשבון הגוגל שאיתו נרצה לעבוד בגלייד מאוחר יותר (רלוונטי למי שמחזיק חשבונות גוגל פרטיים ועסקיים).
לאחר השלמת ההתחברות יופיע שם החשבון שלנו ונוכל להעתיק את הקובץ על ידי לחיצה על קובץ / File בראש המסך (מימין או שמאל תלוי בשפת החשבון שלכם עברית יופי מימין ואנגלית יופיע משמאל)
כעת נלחץ על כפתור הקובץ / File ונבחר ביצירת עותק (make a copy) בכדי להעתיק את הקובץ לחשבון הגוגל שלנו בצורה הבאה:
נשלים את התהליך על ידי בחירת שם הקובץ והמיקום בו נרצה לשמור בדרייב (Drive) שלנו:
הקובץ החדש יפתח בחלון חדש כאשר אנחנו מוגדרים כבעלי הקובץ וכעת נוכל להתחבר לגלייד ולהתחיל בבנית אפליקציית כרטיס הביקור שלנו.
לפני כן, הסבר קצר על הקובץ שלנו. כפי שנוכחתם לראות הקובץ מכיל 2 גליונות: "פרטים אישיים" ו"מידע מהטופס". בשלב הראשון נסתכל על הגליון שנקרא "פרטים אישיים" בלבד אשר מכיל 2 שורות בלבד:
שורה 1 המכילה כותרות לעמודות שלנו
שורה 2 המכילה את הפרטים שלנו (בשלב ראשון תראו את הפרטים שלי הנמצאים בקובץץ שהעתקתם - כעת יהיה זמן טוב לתקן את המידע ולהכניס את הפרטים שלכם במקום שלי.
**שימו לב!
בשלב זה אל תמחקו את הקישורים המופיעים בעמודות שכתורתן תמונה (תמונה 1... תמונה 5) - זה יעזור לנו בהמשך כאשר נרצה להכניס את התמונות שלנו.
**בכדי להציג תמונה באפליקציה יש להכניס קישור לתמונה הנמצאת ברשת - זו יכולה להיות תמונה מאתר או תמונה המאוחסנת בענן הפרטי שלנו בגוגל דרייב או דרופבוקס - יש לוודא כי תמונות המאוחסנות בענן פרטי מוגדרות כמשותפות כך ש"כל אחד עם הלינק יכול לצפות".
כעת לאחר שעדכנו את קובץ השיטס בפרטים שלנו נוכל לגשת לגלייד בכתובת https://go.glideapps.com/ ולהתחיל לבנות את האפליקצה.
אם זו הפעם הראשונה שלכם בגלייד, תיתבקשו להתחבר עם חשבון גוגל - יש לשים לב כי מתחברים עם אותו החשבון שבו שמרנו את הקובץ שיטס שלנו מתחילת המדריך ובו הפרטים שלנו.
לאחר סיום תהליך התתחברות ואישור גישה לגלייד לחשבון יפתח מסך הבית של גלייד אשר נמצא בו:
כפתור יצירת אפליקציה חדשה (+ כחול)
סרטוני הדרכה
תבניות מוכנות של גלייד אשר ניתן להעתיק לחשבון שלנו ליצור מהן אפליקציות חדשות כאשר התבנית משמשת כבסיס)
נלחץ על כפתור יצירת אפליקציה חדשה ונבחר את קובץ השיטס שהכנו.
בשלב הזה גלייד תיפתח את מסך העורך (editor) ותשבץ את הנתונים מקובץ השיטס שלנו בהתאם לזיהוי המידע ובעצם מנסה לנחש כיצד אמורה להיראות האפליקציה שלנו. בנוסף, בפעם הראשונה שניכנס לעורך יופיע לנו סרטון היכרות - ניתן לצפות בו או לסגור ולהמשיך עם המדריך.
במרכז המסך נמצא את האפליקציה שלנו כפי שנראה אותה בתצוגת המכשיר הנייד.
מצד שמאל נמצא את מרכז השליטה אשר מאפשר לנו לעבור בין חלקי הפלטפורמה השונים.
מצד ימין בחלק העליון תחת סגנון (Style) נוכל לבחור ממגוון הסגנונות את סוג תצוגת המסך שנרצה בהתאם לנתונים שלנו (רשימות, אריכים (רשימות עם תמונות), תצוגת לוח שנה, מפה, רשימה הכוללת קוביות צ'קליסט, פרטים).
מצד ימין למטה תחת רכיבים (Components) נמצא את כל הרכיבים שגלייד שיבץ באופן עצמאי לאחר ביצוע ניחוש מושכל לפי ניתוח המידע הקיים בקובץ השיטס שבחרנו.
חלקים 3-4 ברשימה משתנים בהתאם לבחירות שנעשה בחלק הימני של מסך העורך (ז"א שבחירה למשל של Tabs בחלק השמאלי תציג לנו בצד ימין את הגליונות והטאבים של קובץ השיטס והאפליקציה ובחירה ב-Layout תציג את רשימת הרכיבים והסגנונות בצד ימין)
באפליקציה שאנו בונים, גלייד בחר בסגנון של מסך פרטים שזהו בדיוק המסך שנרצה שכן הוא מאפשר גמישות בהוספה והורדה של רכיבים.
כעת, בכדי ללמוד כיצד לבנות את האפליקציה שלנו, נמחק את כל מה שהמערכת שיבצה ונתחיל לבנות את האפליקציה מההתחלה - בכדי למחוק את הרכיבים ששובצו בצורה אוטומטית, יש ללחוץ על ה-X המופיע בצד ימין של כל רכיב (רשימת הרכיבים מופיעה בצד ימין של המסך בחלקו התחתון. ריחוף (hover) מעל רכיב יציג את סימן ה-X ולחיצה עליו תמחוק את הרכיב.
לאחר שמחקנו את כל הרכיבים נתחיל לבנות את האפליקציה על ידי הוספת רכיבים למסך שלנו לפי המידע (העמודות) שיש לנו בקובץ השיטס שלנו.
הוספת רכיב מתבצעת על ידי לחיצה על כפתור ה-+ הכחול-לבן המופיע בראש המסך מצד ימין מעל סגנונות המסך שלנו.
1. נוסיף רכיב מסוג כותרת (Title) בכדי להכניס את התמונה שלנו ביחד עם השם והתפקיד שלנו - אנו יכולים לבחור כל עמודה שמכילה טקסט להצגה ברכיב הכותרת ולמשל במקום התפקיד לבחור את העמודה המכילה את שם הארגון שלנו ולהציג אותו במקום.
2. כעת נוסיף רכיב טקסט בסיסי (Basic Text) להצגת שם הארגון שלנו.
3. נוסיף רכיב המציג את האימייל שלנו - נוכל להוסיף פשוט רכיב שנקרא טקסט בסיסי (basic text) אבל נרצה להוסיף רכיב דינמי אשר יאפשר לכל מי שלוחץ עליו ליצור עימנו קשר ישירות למייל המופיע דרך אפליקציית המייל במכשיר שלו (אותו דבר נעשה בהמשך עם מספר הטלפון לטובת יצירת קשר בהודעת טקסט או שיחה).
**שימו לב!
ניתן להכין הודעה מוכנה בקובץ השיטס שלנו אשר ברגע שמשתמש ילחץ על רכיב המייל או הודעת טקסט ההודעה תופיע בצורה אוטומטית. לדוגמא: נרצה שכל פניה אלינו תתחיל בהודעה "היי ינון, אני מעוניין לשמוע מידע נוסף על", נוסיף עמודה לקובץ שלנו אשר תכיל את הכותרת גוף ההודעה ובשורה השניה (היכן ששאר הפרטים שלנו) נוסיף את ההודעה עצמה.
4. כעת נוסיף את רכיב הטלפון - גם כאן נרצה לבחור ברכיב מיוחד בכדי לאפשר פתיחת חייגן ושליחת הודעת טקסט. באותה צורה נוכל להוסיף את מספר הטלפון במשרד אך חשוב לזכור שאם מדובר בטלפון קווי, יש לבטל את האפשרות שליחת הודעת טקסט על ידי ביטול סימן ה-✅ בתחתית הרכיב
5. כעת נוסיף קישורים לעמודי הפייסבוק, לינקדאין, האתר שלנו וטוויטר (למי שיש) - ניתן להוסיף בצורה הזו כמה קישורים שנרצה. נבחר ברכיב מסוג קישור (Link) ונגדיר את העמודה שיציג וכן כיצד להציג אותה (קישור מלא, חלקי או שם העמודה)
6. נוסיף רכיב טקסט בסיסי (Basic Text) המכיל את המידע עלינו
7. כעת נוסיף גלריית תמונות - ניתן להשתמש ברכיב זה בכדי להציג עבודות שלנו למשל או כל תמונה אחרת שנרצה - כרגע הוספנו מקום ל-5 תמונות אך ניתן להוסיף כמה תמונות שנרצה על ידי הוספת עמודות לקובץ השיטס שלנו עם הכותרת תמונה 6....תמונה x.
**שימו לב 1!
בכדי שנקבל גלריה ולא תמונה בודדת יש לבחור בעמודה שגלייד מייצר עבורנו ובדוגמא נקראת "תמונה" ולא למשל "תמונה 1" או "תמונה 2" אשר בחירה בהם תציג רק את הלינק של התמונה המופיעה באותה עמודה - בעצם כאשר נתנו לכותרות העמודה את השם "תמונה X) "X מייצג מספר), גלייד מבין שמדובר ברכיב מאותו סוג ומייצר עבורנו עמודה מיוחדת לבחירה (עמודת "תמונה" ללא מספר) אשר בחירה בה תציג גלריה ולא תמונה סטטית אחת.
**שימו לב 2!
כעת אתם יכולים להחליף את התמונות בקובץ בשתי דרכים:
החלפת הלינקים בקובץ השיטס שלכם בלינקים לתמונות מהרשת או המענן הפרטי שלכם בגוגל דרייב ו/או דרופבוקס כפי שהוסבר בתחילת המדריך.
הוספת רכיב תמונה (Image) וגרירת תמונות מתיקיה במחשב שלנו.
לאחר שסיימנו לעדכן את התמונות ניתן למחוק את רכיבי התמונה העודפים שהוספנו ולהישאר עם הרכיב שמציג את הגלריה בלבד.
כעת נלמד כיצד להוסיף טופס אשר יאפשר לאנשים שקיבלו את הכרטיס שלנו להשאיר לנו פרטים במקום ליצור קשר ישירות (על ידי שיחה, הודעת טקסט או מייל).
לצורך הוספת טופס נשתמש ברכיב הנקרא כפתור טופס (Form Button). לאחר הוספת הרכיב נוכל להיכנס לתוך מסך הטופס ולהגדיר את השאלות / השדות אשר נרצה שהמשתמש ימלא.
כפי שבטח שמתם לב, בקובץ השיטס שלכם יש גליון נוסף בשם "מידע מהטופס" אשר אליו נרצה לשלוח את המידע שימולא בטופס.
1. נוסיף ונגדיר את רכיב כפתור הטופס עצמו
**שימו לב!
השדה שנקרא תווית (Label) הינו הטקסט שיופיע על הכפתור.
השדה שנקרא כותרת (Title) הינו הטקסט שיופיע בראש העמוד של הטופס עצמו כאשר ניכנס לטופס.
2. כעת נגדיר את השדות בטופס עצמו - ז"א, נגדיר את השאלות שאותם נרצה שהמשתמש ימלא בכדי שנוכל ליצור עימו קשר.
גם כאן גלייד ינסו ליצור את הטופס עבורנו, אתם יכולים להשתמש במבנה שגלייד יצר ולתקן אותו או לבנות את הטופס מהתחלה כפי שיוצג כאן (נמחוק את כל הרכיבים שגלייד הוסיף ונבנה את הטופס מהתחלה)
כעת לאחר שהטופס שלנו ריק נתחיל להוסיף את הרכיבים הבאים:
הכנסת טקסט (Text Entry) - לאפשר לממלא הטופס להכניס את השם - נשייך לשדה זה את העמודה שנקראת "שם יוצר הקשר"
הכנסת מייל (Mail Entry) - לאפשר לממלא הטופס להזין את המייל שלו - נשייך לשדה זה את העמודה שנקראת "מייל"
הכנסת טלפון (Phone Entry) - לאפשר לממלא הטופס להזין את הטלפו שלו - נשייך לשדה זה את העמודה שנקראת "טלפון"
הכנסת סיבת הפניה (Text Entry) - נשייך לשדה זה את העמודה שנקראת "סיבת הפנייה"
בחירת דרך יצירת הקשר - צ'קבוקס (Chekbox) - לאפשר לממלא הטופס לבחור כיצד ירצה שניצור עימו קשר - את רכיב זה נוסיף 3 פעמים עבור 3 אפשרויות יצירת הקשר שאיפשרנו (מייל, הודעת טקסט, שיחה)
ניתן להגדיר לכל רכיב האם הוא שדה חובה (Required) או לא (שדה חובה הינו שדה שאם לא ימלאו אותו לא ניתן יהיה לשלוח את הטופס)
את המידע שיוזן לטופס על ידי משתמשים שירצו שניצור עימם קשר נוכל למצוא בקובץ השיטס שלנו תחת הגליון שנקרא "מידע מהטופס".
כעת אנו יכולים לסדר את האפליקציה ולשנות את סדר הרכיבים כרצוננו על ידי לחיצה, החזקה וגרירת הרכיב למקום אחר ברשימת הרכיבים ולמשל להעלות את טופס השארת הפרטים לראש האפליקציה לפני פרטי יצירת הקשר כמופיע בדוגמא
כעת נגדיר את שם האפליקציה, נשייך לה את הפביקון (התמונה אשר תופיע כאשר יפתחו את האפליקציה ו/או כאשר ישמרו אותה למסך הבית של המכשיר הנייד).
1. העלמת הטאב אשר נקרא "מידע מהטופס" בתחתית האפליקציה - נבחר בחלק השמאלי של העורך את האפשרות Tabs ובמסך שיפתח מימין נגרור החוצה את הטאב שברצוננו להעלים לחלק שנקרא טאבים נסתרים (HIDDEN TABS).
2. נגדיר את שם האפליקציה, תמונת הכניסה והפביקון, סוג האפליקציה (Public), מראה וצבע.
נבחר בתפריט מצד שמאל באפשרות הגדרות (Settings) ובמסך מצד ימין נגדיר את הדברים הרלוונטיים.
3. שינוי כותרת האפליקציה מ"פרטים אישיים" לכל שם שנרצה - נבחר בתפריט מצד שמאל באפשרות Tabs, מצד ימין מלחץ על הטאב שנקרא "פרטים אישיים" ובשדה שיפתח גם הוא מימין נוכל להקליד את השם שנרצה (שימו לב, זהו שם העמוד ולא שם האפליקציה).
הדבר האחרון שנותר לנו להגדיר הינו הלינק שנרצה עבור האפליקציה שלנו וכמובן לפרסם אותה באופן רשמי כדי שנוכל לשתף אותה.
בכדי לשתף את האפליקציה ולהגדיר את כתובת ה-URL נבחר בתפריט השמאלי באפשרות שיתוף אפליקציה (Share app).
בשלב הראשון נלחץ על הכפתור פירסום אפליקציה (Publish app) בכדי לקבל לינק כלשהו מגלייד אשר אותו נערוך כרצוננו.
בתפריט שיפתח מימין נוכל להגדיר את ה-URL - שימו לב כי ניתן להכניס אותיות באנגלית ומספרים בלבד (לא ניתן לכלול רווחים או אותיות בעברית). ניתן לייצר הפרדה על ידי שימוש בסימן המקף (-) לדוגמא: yinon-raviv.
כעת אתם יכולים לשתף את האפליקציה שלכם על ידי שליחת הלינק בכל דרך שתרצו ישירות מתוך האפליקציה על ידי לחיצה על סמין ה-i בראש המסך מימין ובחירה באפשרות שיתוף אפליקציה (Share app) ולאחר מכן בחירה של דרך השיתוף (מייל, הודעת טקסט, וואטסאפ, פייסבוק ועוד) או לאפשר לאדם שאתם נפגשים עימו פשוט לסרוק את קוד ה-QR אשר מופיע במסך השיתוף.
את האפליקציה אשר בניתי במדריך זה ניתן למצוא כאן. ניתן להעתיק אותה כתבנית ולראות בדיוק כיצד הגדרתי את כל הרכיבים השונים על ידי פתיחת האפליקציה במחשב ולחיצה על "העתק אפליקציה זו" (COPY THIS APP) אשר מופיע מימין לאפליקציה אשר תופיע על המסך. הלחיצה תעתיק את התבנית לחשבון הגלייד עימו אתם מחוברים או תבקש מכם להתחבר לגלייד.