הצגת אתר אינטרנט באפליקציה

תמלול ההרצאה: הצגת אתר אינטרנט באפליקציה

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

1. 00:01

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

2. 00:31

   יכול להיות גם שיש לנו אתר שבנוסף לאפליקציה אנחנו רוצים שהוא ייגש לאתר שלנו ואם הוא יעשה back הוא יחזור בחזרה לאפליקציה שלנו.

3. 00:40

   אז יש לנו אפשרות לעשות את זה בעזרת in-app browser. in-app browser אומר סך הכל שהאפליקציה שאנחנו בונים בפונג-אפ מסוגלת להציג אתר אינטרנט.

4. 00:52

   בואו נראה איך עושים את זה. בואו ניקח איזשהו לחצן input type button, נגדיר לו value show website וב-on-click אנחנו רוצים שהוא יקרא לאיזושהי פונקציה. בואו נבנה את הפונקציה הזאת, נשים את זה פה, function show website.

5. 01:33

   כל מה שאנחנו צריכים לעשות זה להגדיר את הדבר הבא, window.open ולהגדיר בדיוק מהו ה-web site שאנחנו רוצים להציג אצלנו באפליקציה.

6. 01:49

   נניח שאנחנו רוצים להציג את ה-web site שלנו, של החברה שלנו, ונניח שזה ה-web site http://www.practicu.com.

7. 02:03

   דבר נוסף שאנחנו צריכים להגדיר זה שאנחנו רוצים שהוא לא ייפתח בבראוזר חיצוני אלא ממש באפליקציה שלנו.

8. 02:13

   זה יהיה underline self. בואו נריץ. נלחץ על הלחצן ואנחנו רואים שמיד אנחנו בעצם גולשים לאתר האינטרנט המבוקש. עכשיו אנחנו יכולים גם לתת הוראה שאנחנו בעצם לא רוצים לגלוש ל-self באפליקציה שלנו אלא בדפדפן חיצוני רגיל.

9. 02:50

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

10. 03:11

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

11. 03:25

    אם אנחנו הולכים ואומרים כזה דבר אנחנו בעצם מציגים את האתר אבל על ידי underline blank בואו נריץ נלחץ על הלחצן ושימו לב שעכשיו גלשנו למקום אחר הדף הוא אותו הדף אבל אנחנו נמצאים בדפדפן של הטלפון הנייד של המשתמש כאן אנחנו יכולים לסגור את הדפדפן אנחנו יכולים ללכת forward וbackward אבל אם אנחנו גולשים

12. 04:02

    back אנחנו בעצם לא מגיעים בחזרה לאפליקציה כי אנחנו בעצם יצאנו ממנה ועברנו לדפדפן. בואו נחזור לאפליקציה. אם אנחנו לוחצים על לחצן ה-X אז אנחנו חוזרים בחזרה.

13. 04:23

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

14. 04:59

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

15. 05:25

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

16. 05:43

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

17. 06:00

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

18. 06:28

    בואו נראה איך זה מתבצע. אז יש לנו אפשרות לגשת לבראוזר ולהירשם על ידי Add Event Listener לאירוע שנקרא נניח Load Start. Load Start זה אירוע שמתבצע כל פעם שדף מתחיל להתאם.

19. 06:53

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

20. 07:17

    ואנחנו יכולים לדוגמה להציג את הטייפ שלו,