[השמעת מוסיקה] 

דוד י מלאן: שלום. בואו לטייל דרך הבעיה סט 8 Mashup, שהוא הולך לאתגר אותך ל לשאוב אלמנטים לGoogle Maps עם אלמנטים מGoogle News ומועך אותם יחד ליישומון אינטרנט ש מאפשר למשתמש לחפש מפה לחדשות מקומיות לערים ספציפיות, ערים, ומספרי מיקוד. כדי לעשות זאת, אנחנו הולכים לשלב כמה HTML, CSS, PHP, SQL, JavaScript, וטכניקה בדרך כלל ידוע כAJAX על מנת ליצור את זה immersive חוויית משתמש. 

בואו ראשון לGoogle Maps עצמו. זה, כמובן, הוא אולי ממשק מוכר. אבל מתברר ש- Google Maps גם מספק יישום API-- תכנות interface-- באמצעות ש אתה יכול לקחת אלמנטים של Google Maps ולשלב אותם ב יישומים משלך. ואכן, לאורך זו תהליך, אתה הולך כדי למצוא כמה כתובות אינטרנט מועיל במיוחד ש מוזכרים ב מפרט לבעית סט 8, במיוחד זה תחילת עבודה מדריך או מדריך למפתחים לגרסת API Google Maps 3, כמו גם כAPI JavaScript מפות Google התייחסות v3, שהוא קצת יותר מסתורי לקרוא אבל בעצם יש את כל הרמה נמוכה יותר פרטים על מה פונקציות או שיטות ואובייקטים ומאפיינים ו אירועים למעשה מגיעים עם API, דומה מאוד ברוחו ל[ לא ברור] דפים. 

עכשיו, אם אנחנו נסתכל ב- Google News, שתצליח אולי תראה את ממשק מוכר כאן. אבל מתברר גם אתה יכול לחפש Google News לאזורים גיאוגרפיים ספציפיים באמצעות פרמטר HTTP נקרא גיאו. למעשה, אם אני להתמקד ב עד כאן, תראה ש אני ב news.google.com/news/section?geo=02138. ואכן, אם אני זום את, אתה תראה שאני מסתכל על דף עם חבורה של כל דעות על קיימברידג ', מסצ'וסטס. 

בינתיים, אם אני באמת לשנות את כתובת אתר לא להיות מיקוד כזה, אבל משהו קצת מבולגן כמו קיימברידג ', מסצ'וסטס +, שבו בתוספת היא דרכך לקודד תו רווח בכתובת אתר ולחץ על Enter, אתה תראה שאני באמת לראות כמעט את אותן חדשות. אולי זה קצת שונה בגלל קיימברידג למעשה יש מספרי מיקוד מרובים. עכשיו איך אני יכול לדעת וש, למעשה, איך יכולתי איכשהו לקשור ערים ועיירות למספרי מיקוד במקרה ש רוצה לאפשר למשתמש להסתכל למעלה או? ובכן, מתברר שיש אתר שם בחוץ שנקרא geonames.org שהוא יוזמה ליש לי מסד הנתונים זמינים באופן חופשי מכל סוגים שונים של מידע גיאוגרפי, לא רק בארה"ב, אלא גם למדינות אחרות גם כן. למעשה, אם אני הולך לכתובת אתר זו כאן, ש מוזכר גם בבעיה להגדיר מפרט, אתה תראה את זה שלוש רשימה של חבורה של קבצי zip כל כל אחד מהם ניתן להוריד על ידי לך. למעשה, לבעיה זו מוגדרת אתה הולך להוריד us.zip. עכשיו בתוך קובץ זה, הוא כל חבורה של נתונים בפורמט טקסט. הקבצים דומים מאוד ל CSV-- ערכים מופרד באמצעות פסיק file-- אבל זה בעצם משתמש כרטיסיות לתחום את השדות. עכשיו, בינתיים, אם אתה מסתכל כאן במה שהדגשתי, השדות בקובץ זה הולכים להיות דברים כמו קודי מדינה, מיקודים, שמות מקומות, ולאחר מכן, בצורה כלשהי או, מדינות ומחוזות אחרים, קהילות, ועוד. למעשה, יש לי כבר הורד קובץ זה מראש. תן לי ללכת קדימה ולפתוח אותו here-- us.text-- ו, אכן, שתצליח לראות אם אני לגלול למטה בשורה 16792 תראה כמה רשומות לקיימברידג ', מסצ'וסטס ומספרי המיקוד השונים שלה. מה גם שאתה רואה יש המחוז, כמה מספרים שאני לא ממש להבין, אלא גם את כל הדרך מהימין, כמה GPS coordinates-- קווי אורך ורוחב. זה נהדר, כי אחד מ התכונות של ה- API של Google Maps היא היכולת לזהות איפה אתה נמצא מבחינה גיאוגרפית במונחים של קואורדינטות GPS. 

עכשיו בואו נתחיל להבין איך להתחיל קושר יחד את הדברים האלה. אנחנו נותנים לך כל חבורה של קוד הפצה, כמו גם מסד נתוני MySQL. למעשה, אם אני מושך phpMyAdmin ש כבר מיובא, כפי שאתה בקרוב, pset8.SQL, תראה בטבלת MySQL ש נראה כך, שדה מזהה, ארץ קוד, מיקוד, שם מקום ועוד. הסוגים של כל אלה עמודות שהפקתי פשוט על ידי קריאת readme.text להגיש כאן שצוין אם שדה הוא מספר שלם, או varchar או משהו דומה. 

לכן יצרנו שולחן של שלך ונתן לך את פקודות SQL לבצע כדי ליצור ש טבלה במסד נתונים משלך, אבל יש למעשה אין נתונים בזה עדיין. במקום זאת, אתה הולך צריך להוריד us.zip או המיקוד של כל מדינה קובץ מכתובת האתר שיש. ואז אתה הולך לצריך לכתוב תסריט שורת הפקודה ב- PHP זה הולך לפתוח טקסט ש להגיש, לחזר על הקווים שלה, ולאחר מכן לכל אחד מ קווים אלה לעשות insert שלמציב שולחן במסד נתוני MySQL. אז בסופו של תהליך, שתצליח יש להפעיל את תסריט סופו של דבר רק פעם אחת בתורה. במציאות אתה בטח להפעיל אותו כמה פעמים בעת שניסה לתקן באגים שונים. 

סופו של דבר, אתה הולך לי מסד הנתונים גדולים באמת עם אלפים ואלפי שורות גיאוגרפיות. ואז אתה הולך לשים את היבוא ש תסריט בצד ברגע שזה עובד ומסד הנתונים שלך הוא נחמד ונכון, ולאחר מכן אתה הולך לעבור למעשה יישום mashup עצמו. Mashup הולך להיראות משהו קטן כמו זה. בmashup.cs50.net, אנחנו יש פתרון צוות שנראה קצת משהו כזה. ואכן, אם אני לוחץ על עיתון זה סמל לקיימברידג ', מסצ'וסטס, תראה ספינינג סמל בקצרה ולאחר מכן רשימה, הורה רשימה עם תבליטים של מאמרים הקשורים לקיימברידג ', מסצ'וסטס. אם אני לוחץ על צ'רלסטאון, מסצ'וסטס, אני אראה אותו לעיירה ש. ואם אני לוחץ על Watertown, מסצ'וסטס, אולי לא יהיה כל חדשות של מווטרטאון, אז אתה תראה משהו כמו יום חדשות איטי. 

עכשיו, בינתיים, בפינה השמאלית העליונה הם כמה פקדי Google Maps מוכרים כדי לאפשר לך להקטין את התצוגה, מחבת למעלה, למטה, שמאלה וימינה, אבל גם תיבת חיפוש שאנחנו מכניסים לשם. אז אם אני מחפש, בכנות, הקוד רק אחר zip אני יודע, 90210, אנחנו ממש לראות בוורלי הילס, קליפורניה. כשלחץ על זה מוביל אותי ל קליפורניה וכל חבורה חדשות על בוורלי הילס. עכשיו שם לב, גם, מה שקרה שם. אם אני חיפוש בזמן זה ל02138 או אפילו פסיק מסצ'וסטס קיימברידג 'או חלק גרסתם, אתה מקבל נפתחת השלמה אוטומטית קטנה. עכשיו זה משתמש בתוסף לספרייה שנקראת jQuery, והתוסף שנקרא typeahead. אנחנו פשוט לקרוא דרך התיעוד, הוריד את .js להגיש משולב לקוד ההפצה, כך שאתה סופו של דבר יכול לכתוב הקוד ש ממלא שתפריט הנפתח עם הרכב בחירות או ההצעות האוטומטית. 

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

בואו נסתכל אז בקוד ההפצה. ברגע שהורדת pset8.zip ופתח את הרוכסן לתוך ספריית vhost שלך בAppliance CS50, תראה אלה מדריכים כאן בפנים. Bin-- אשר בדרך כלל עומד ל בינארי לprograms-- הפעלה כולל, כמו בpset7, כמה PHP קבצים שקבצים אחרים כוללים, אז ציבור, שהוא את הקבצים שצריכים להיות נגיש לציבור למשתמש עם דפדפן. בואו נסתכל ב ספריית בן, ואנו רואה שיש קובץ יש כבר נקרא יבוא. אם אנחנו פותחים את זה עם gedit, אנחנו תראו כי, למרבה הצער, אין הרבה יש. כל מה שיש, אם כי, הוא עֵסֶק בראש אשר מציין ש interpreter-- במקרה זה PHP-- יש להשתמש כדי למעשה לבצע את הקובץ. אבל אז שבו כתוב TODO המקום שבו אתה הולך צריך לכתוב קצת קוד שכנראה דורש config קובץ זה בכולל ספרייה כפי שעשינו בעבר עם קבצי PHP. ואז אתה הולך ל יש לי איכשהו לפתוח את us.text שבו אתה כנראה יש רוכסן כבר. ואז אתה הולך לצריך לחזר על הקווים בקובץ ש, אולי להשתמש בחלק מהפונקציות הציע במפרט. לאחר מכן, הכנס כל אחד מאלה קווים לתוך מסד נתוני MySQL על ידי שימוש בפונקצית השאילתה, ש סיפקנו אותך שוב with-- או לפחות גרסה שלו בfunctions.php, שאנו רואים ברגע. 

עכשיו בואו נסגור יבוא ולחזור ל הספרייה שלנו וזה זמן להיכנס ל כולל. ואם אני עושה ls שם, אתה תראה שלושה קבצים ממש כמו בעיה 7 סט. ובואו ניקח מבט מהיר, למשל, בconfig.php. שם, הוא פחות שורות יותר מאשר בעבר, וזה נראה קובץ זה כולל constants.php וfunctions.php. אנחנו משתמשים במעט שונים טכניקה זו הפעם לבעצם לציין כי קבצים אלה ביחס לספרייה הנוכחית __ DIR__ מייצג כל מה שמדריך זה קובץ, config.php, הוא בעצמו ב. אז זה יותר דרך מפורשת של ציון מה אחר קבצים שברצונך דורש. 

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

עכשיו בואו נחזור לpset8 הספרייה, נכנסה לציבור, ושם אם אני עושה ls, תראה זה-- articles.php, index.html, search.php, וupdate.php-- את כל הקבצים. ולאחר מכן גופני css, img, ו ספריית js ממש כמו pset7. 

בואו נסתכל index.html, שהוא הולך להיות באמת נקודת כניסה לsmashup. עכשיו בindex.html, תראה כל חבורה של קישור אלמנטים בראש, במיוחד, לbootstrap לנו CSS ואחריו חבורה של תסריט שלמה תגים עבור דברים כמו המפות, API עצמו, סמן מיוחד עם תווית שירות שאנו נזכרים ב מפרט זמין לך, jQuery עצמו, bootstrap עצמו, וספרייה אחרת קו תחתון בשם ש אנחנו מדברים על במפרט. Underscore.js כמו jquery.js היא ספריית JavaScript שיש לו חבורה של פונקציונליות כל שהרבה אנשים במשאלת העולם קיים בJavaScript עצמו. אז כל אלה הם למעשה די פופולרי. אנחנו גם הזכרנו typeahead המהווה את הספרייה ש עושה את זה הנפתח השלמה אוטומטית ו לבסוף קישור לJavaScript שלנו. 

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

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

לבסוף, יש טופס בתוך מכאן ש מיישם את התיבה את הטקסט שמאלי עליונה בממשק שלנו לחיפוש. שים לב שאנחנו כבר בשימוש קצת bootstrap כאן too-- דברים כמו טופס מוטבע וצורה-קבוצה. אנחנו כבר נתנו לשעבר זיהוי ייחודי של טופס. ואז, בסופו, אני ממש צריך סוג קלט, שהוא די מוכר, זיהוי שלו הוא q. רק מוסכמה. Q ליש לי query-- יכול כבר קרא כל דבר. ולאחר מכן מציין המיקום, בינתיים, היא עיר, מדינה, ומיקוד שבו אתה יכול להיזכר ב רואה בmashup שלנו הדגמה קודם לכן. בואו לסגור את הקובץ הזה. 

עכשיו תסתכל על קבצי PHP ש מחכה ולאחר מכן את קבצי JavaScript. בקבצי PHP שלנו, יש לנו כבר מיושם בשבילך, למשל, עדכונים. Update.php-- שלא אוציא ענק כמות הזמן על here-- על קצה מזלג הוא הקובץ שבנו קוד JavaScript הולך ליצור קשר באמצעות AJAX ש טכניקת אסינכרוני זה מובנה בתוך JavaScript בימים אלה זה הולך כדי לאפשר לנו לשאול update.php לקבלת מידע נוספת. 

באופן ספציפי, בכל עת המשתמש גורר המפה או מבצע חיפוש שקופץ המשתמש למקום אחר, קוד JavaScript שלנו, כפי שאנו רואים בקרוב, הוא הולך לקרוא update.php ולבקש 10 או כך סמנים בתוך viewport מבוסס על קואורדינטות GPS של החלק העליון ותחתון פינות של המפה ש. לאחר מכן, אנו יכולים לאכלס מחדש את המפה עכשיו ש המשתמש עבר המסך כדי כדי לראות כנראה 10 חדשים סמנים לערים שונות. בינתיים, קובץ זה הוא סופו של דבר הולך לבצע שאילתא SQL נגד בסיס הנתונים של מקומות טבלה בשם ש הוא הולך לחזור אלה 10 או פחות מקומות. 

בינתיים, בarticles.php, הוא עוד קובץ שכתבנו בשלמותו. זה דומה מאוד ברוחו ל פונקצית בדיקה של הבעיה סט 7, שיצר קשר עם Yahoo Finance בשבילך. אנשי קשר בקובץ זה Google News בשבילך, סופו של דבר תופס מכונה-קריא version-- במשהו נקרא RSS format-- של החדשות לקיימברידג 'או בוורלי הילס או מה שהעיר שחפשת למבוסס על geoparameter ש. אנו לנתח RSS ש, שהוא רק סוג של שפת סימון בשם XML, ואז אנחנו באמת להחזיר אותו לדפדפן שלך ולקוד JavaScript שלך, במיוחד, בפורמט הנקרא JSON, סימון אובייקט JavaScript. עכשיו תראה ב specification-- אנו מצביעים לך איך אתה יכול ממש לראות חלק מback-- הקרוב JSON כי את הפונקציונליות הזו סופו של דבר מאפשר לך לאכלס תפריטים קופצים אלה כל כך כי כאשר אתה לוחץ על סמן במפה אתה באמת רואה כל חבורה כדורים, כל אחד מהם קישורים למאמר. 

עכשיו בואו נסתכל על אחת אחרון קובץ PHP אשר, למרבה המזל, לא יש הרבה הולך on-- רק TODO די גדול. עכשיו בקובץ זה מצהיר מערך נקרא מקומות. ואז בסופו של הדפסים מערך שבformat-- JSON די-הדפסתו רק כדי ש דברים קלים יותר לאתר באגים. למרבה הצער, ב אמצע יש TODO זה, שקורא לך לחפש ב מסד הנתונים למקומות התאמה גיאוגרפי HTTP פרמטר. 

ואכן, זה הולך להיות אחד challenges-- שלך כדי ליישם את הפונקציונליות הזו כאן כך שכאשר אתם פונים לקובץ זה עם כתובת אתר כמו חיפוש. php? הגיאו = משהו, הקוד שלך יהיה סופו של דבר לחזור JSON מערך של כל המקומות בך טבלת מסד נתונים התואמים את הקלט ש. אז אם המשתמש מקליד בקיימברידג ', הקובץ כאן search.php שלך צריך סופו של דבר להחזיר מערך JSON לכל המשחקים לקיימברידג ', אשר עשוי להיות במסצ'וסטס אבל יכול להיות גם בכל מקום אחר. 

לבסוף, בואו נסתכל על שתי קבצים שultimately-- סטטי הקובץ שלך CSS וקבצי JavaScript שלך. אם אני הולך לספריית CSS שלנו, יש חבורה של קבצים שלמה שם, אבל רובם הספריות. אני הולך להעיף מבט, במיוחד, בstyles.css, שהוא CSS שלנו בעולם זה הולך לסגנן כל mashup זה. אני אשאיר את זה לך לקרוא את ההערות במסמך זה, אבל, בקליפת אגוז, זה CSS שמבטיח כי mashup, כברירת מחדל מחוץ לקופסא, נראה בדיוק כפי שאנחנו רוצים it-- עם המפה מילוי נמל התצוגה ועם החיפוש תיבה למעלה בפינה השמאלית העליונה. אנחנו גם לקחנו את חירותו של stylizing שנפתח typeahead תפריט קצת גם כן. 

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

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

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

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

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

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

אבל בואו נתמקד ב כמה מקומות במסמך זה. באופן ספציפי, זה לעשות כאן. אני לדחות לאינטרנט תיעוד והמפרט לאיך למלא בTODO זה. אבל על קצה המזלג, ספרייה זו typeahead מאפשר לך לעבור במה שידוע בדרך כלל כתבנית, שבו יש כמה מצייני מיקום משתנים דומה מאוד ברוחו ל% של printf. * s. אבל במקרה הזה, תבנית למפרט מאפשר לך לציין מה אתה רוצה משתנים להזריק מהנתונים כי הוא בא חזרה ממשהו כמו PHP קבצים שנכתבתם הפולטים פלט JSON. 

עכשיו כאן למטה להבין שאנחנו האזנה לבחירות typeahead כאשר המשתמש מבצע בפועל חיפוש ובוחר ערך. כך אנחנו למעשה מתכוון להקשיב של ולבצע כמה קוד כתוצאה מכך. לאחר מכן אנו ממשיכים להגדיר mashup רק קצת. וסופו של דבר, אנחנו קוראים ל עדכון בפונקציה זו. הוא מעדכן את הסמנים על המסך. עוד על כך ברגע. בינתיים, יש כמה פונקציות קטנות בפה. אחד מהם הוא hideInfo ש פשוט סוגר את InfoWindow. פונקציה אחרת כאן, שסופו של דבר לא יהיה ארוך מדי, להסיר סמנים. זה הולך לבטל את כל מה ש פונקצית סמן התוספת שלך עושה. ואז כאן הוא חיפוש. ואת זה הוא מעניין, כי אנחנו כתב את קוד JavaScript זה הולך לדבר על search.php שרת ולקבל בחזרה איזו תגובה. 

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

עכשיו בואו נסתכל על האחרון כמה פונקציות בקובץ זה. כאן למטה היא פונקציה showInfo נקרא, ש תערוכות מידע באחד מאותם חלונות מידע הקטנה ש צץ כאשר המשתמש לוחץ על סמן. כאן למטה עוד יותר הוא שפונקצית העדכון שיישמנו לך. הוא קובע את הגבולות של המפה. מה הן קואורדינטות GPS שלה מצפון-מזרח ודרום-מערב פינות כאן. אנחנו כבר מוכנים כמה פרמטרים HDP כאן ולאחר מכן העביר אותם בסופו של לupdate.php, שיש לנו מיושם גם בשבילך. שאחזור סופו של דבר כמה JSON מהקובץ שנקרא update.php ולאחר מכן מסיר את כל סמנים על המסך ולאחר מכן סובב מעל הנתונים שהוא יחזור מupdate.php, ש שוב הוא פשוט מערך JSON. ואז זה הסוף של דבר מוסיף סמן ל כל אחד מהמקומות האלה כישלון טיפול, או שגיאות שעלולות לקרות גם מאוד. 

עכשיו רק כדי לתת לכם טעימה של איך אתה אולי ללכת על באגים הפרויקט הזה, מבין שאני כבר פתחתי ב לקדם כרטיסייה זו כאן לכתובת אתר זו, pset8 / articles.php? הגיאו = 02138. עכשיו, שוב, מאמרים על PHP יישמנו לך אז זה לא כל כך הרבה מה תהיה שימוש ב לאתר באגים, אלא הטכניקה. שים לב שאני כבר חיפשתי המיקוד של קיימברידג 'כאן, ואני כבר קיבלתי בחזרה, אכן, JSON מערך של אובייקטי JSON ובתוכה שני קישור וכותרת keys--. 

אז פונקציונליות זו עובד כבר בשבילך. אבל טכניקה זו של ידני הולכת לכתובת אתר כמו זה למשהו כמו search.php? הגיאו = קיימברידג 'או 02138 או כל מה שהמשתמש הקליד בצריך להוכיח שאתה לא יסולא בפז, את עצמך, לנסות כדי להבין בדיוק אם או מדוע search.php עובד או לא. 

סופו של דבר אז, יש לך כמה Todos לפניך. אתה הולך לכולים הראשונים כי תסריט יבוא ש קורא בus.text לתוך מסד הנתונים שלך. לאחר מכן אתה הולך צריך ליישם search.php כך שהוא מתנהג בדיוק כפי שצוין. לאחר מכן אתה הולך רוצה להתמקד בscripts.js וסופו של דבר מיישם אלה כמה todos, ובכלל זה לקביעה תצורה ותבנית ש, להוסיף סמנים, להסיר סמנים, ו לאחר מכן תימשך, אך לא פחות חשוב, אחד מגע אישי. 

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

[השמעת מוסיקה]