הסבר על Google Map - API

תמלול ההרצאה: הסבר על Google Map - API

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

1. 00:02

   אז בשיעור הזה נלמד איך להטמיע את גוגל מאפס באפליקציית פלאטר שלנו. אז דבר ראשון, נעבור לעמוד של הספרייה, נרשום בגוגל "Google Maps Flutter" ונגיע מיד לעמוד הזה.

2. 00:13

   כמו תמיד נעבור לטאב של אינסטולינג ונעתיק את השורה הזאת לפרויקט שלנו, ל-pubspec.yaml, נשמור packages get והכל סבבה. עכשיו נעבור ל-read me.

3. 00:36

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

4. 00:52

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

5. 01:06

   יש לגוגל המון המון APIs של תרגום, של יוטיוב, אנחנו מעוניינים במפות. אז נחפש פה Maps, ואיפה אנחנו רואים Maps SDK for Android, נתחיל עם זה, וכרגע הוא Disabled, אז פשוט נעשה לו Enable, מעולה.

6. 01:32

   ועכשיו אנחנו צריכים לקבל את המפתח עצמו, אז נבוא ל-Credentials, והנה המפתח שלנו. אם נלחץ על האייקון הזה, הוא מעתיק אותו ל-Keyboard.

7. 01:41

   בואו נשמור אותו לרגע אצלנו בפרויקט. נבוא ל-Main, ונשים אותו כאן בהערה, נקרא לזה Android API. אוקיי, עכשיו בואו נשיג מפתח של iOS, אז נרשום שוב Maps, ויש לנו Maps SDK for Android, סליחה, for iOS, וגם לא נעשה Enable, בוא ל-Credentials, תיק גם אותו.

8. 02:19

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

9. 02:36

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

10. 02:44

    אז ניכנס לאנדרואיד, לאפ, ל-SRC ול-Main וכאן נראה את הקובץ Android Manifest. עכשיו לפני שתגיד אפליקיישן נסגרת נדביק כאן את הקוד שראינו ואת המפתח נדביק לכאן אז בוא נעתיק אותו למפתח של אנדרואיד נדביק אותו לכאן מעולה עכשיו נעבור להטמעה של iOS אז קודם כל בשביל להריץ על iOS אתם חייבים לעבוד על מחשב Mac אז אנחנו צריכים לפתוח את הפרויקט

11. 03:18

    ב-Xcode אז נסגור את האנדרואיד על התיקיה של iOS נעשה מכה שמני פלאטר ו-open iOS module in Xcode אז הנה Xcode שלנו נפתח ואנחנו נחפש את הקובץ שנקרא app.delegate.swift מעולה.

12. 03:38

    אז הפונקציה הזאת didFinishLaunchingWithOptions היא הפונקציה הראשונה שתרוץ כשהאפליקציה שלנו עולה.

13. 03:44

    ואנחנו צריכים להוסיף לכאן שורה כלשהי. בואו נעתיק אותה. אז הנה didFinishLaunchingWithOptions אבל זה נכון ל-objectiveC ואנחנו לרוב משתמשים ב-swift.

14. 03:57

    אז הנה הפונקציה ואנחנו מעתיקים את הקוד הזה. שורה ראשונה yourKey here בואו נעתיק אותו. בואו נחזור לדוקומנטציה. עכשיו החלק הזה רלוונטי ל-flutter ובעצם לשתי החלקים אז אנחנו רק צריכים לייצר מסע חדש ולהטמיע בו את המפות בואו נסתכל רגע על הקוד הם כאן בנו וידג'ט שנקרא map sample שהוא בעצם stateful וידג'ט ובבאדי שבתוך הסקייפולד

15. 04:33

    הם יצרו גוגל מאפ מופע חדש של גוגל מאפ ושימו לב שהוא מקבל כאן map type יש כמה סוגים של מפה יש מפה לוויינית מפה של כבישים initial camera position זה המיקום הראשוני של המצלמה ו-onmap created זה איזשהו callback שייעוץ לנו ברגע שהמפה סיימה להתעיין.

16. 04:50

    טוב, אז בואו נחזור לקוד שלנו ונתחיל לממש. אז אפשר לסגור את ה-X-code ובואו ניצור מסך חדש תחת screens, נקרא לו mapScreen וזה יהיה stfull mapScreen import me material, כאן נחזיר כמו תמיד scaffold וב-body נפנה לפונקציה get body.

17. 05:23

    ניצור אותה, מעולה. בואו נסתכל שוב על הדוקומנטציה. אז יש לנו כאן גוגל מאפ, בואו נבנה את זה עם map type כמובן, return google map, הוא כבר מייצר לנו אימפורט באופן אוטומטי, ה-map type יהיה map type נקודה בואו נלך על satellite, מפה לוויינית, מה עוד יש לנו?

18. 05:50

    Initial camera position, בואו נדלג כרגע על השלב הזה, ו-onmap created, נריץ פונקציה משלנו. צועק עליי בגלל שהוא מקבל כפרמטר google map controller, אז נגדיר כאן google map controller, ובואו נדפיס רגע את מה שקיבלנו, פרינט גוגל מאפ קונטרולר.

19. 06:16

    למה הוא צועק עלינו? זה פרמטר initial camera position is required, אז אנחנו למעשה לא יכולים לוותר על המיקום הראשוני של המפה, אנחנו חייבים לציין אותו.

20. 06:24

    אז בואו נגדיר אותו. נעתיק את הקוד הזה, camera position, לפרויקט שלנו, קוראים לזה גוגל פלקס, אני אקרא לזה initial position, initial camera position יהיה initial position, והוא לא מכיר אותו.

21. 06:51

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

22. 07:13

    אז נמחק כאן את ה-change notifier שעשינו, ונחזיר כאן material app, כשה-home הוא יהיה ה-map screen שלנו. נריץ שוב, אוקיי. והנה המפה שלנו, בדיוק כמו שציפינו, סוג המפה הוא satellite.

23. 07:34

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

24. 07:47

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

25. 08:06

    מעולה, אז הילד הראשון של ה-stack הוא פשוט המפה, ועכשיו נוסיף איזשהו material-button בתוך-align, אז נגדיר כאן-align שה-alignment שלו יהיה, בוא נגדיר, top-left, מעולה, וה-child יהיה איזשהו כפתור, material-button, שה-child שלו יהיה טקסט שרשום עליו Change Map Type,

26. 08:38

    ואת ה-onpress שלו מיד אממש. אבל דבר ראשון, אנחנו רואים שכאן באופן קשיח אנחנו מגדירים את המפה כ-satellite. בואו נהפוך את זה למשהו דינמי ונגדיר כאן משתנה.

27. 08:49

    אז נגדיר כאן var map type שווה ל-map type.satellite וכאן במקום לעשות את זה hardcode נשים כאן את ה-map type שלנו, יפה, ועכשיו בכל פעם שלוחצים על הכפתור אנחנו פשוט נשנה את ה-map type ונפנה ל-set state.

28. 09:08

    אז בואו נראה, if map type שווה שווה map type.satellite