[მუსიკალური სათამაშო] 

დევიდ ჯ Malan: Hello. მოდით გავლა პრობლემა Set 8 Mashup, რომელიც აპირებს დაუპირისპირდეს თქვენ დაეყრდნოს ელემენტები Google Maps ელემენტებით Google News და mash მათ ერთად შევიდა ვებ აპლეტი საშუალებას იძლევა მომხმარებლის მოძებნა რუკა news ადგილობრივი კონკრეტული ქალაქის, ქალაქები და საფოსტო კოდები. ამის გაკეთება, ჩვენ ვაპირებთ ინტეგრირება ზოგიერთ HTML, CSS, PHP, SQL, JavaScript და ტექნიკა საყოველთაოდ ცნობილია, როგორც AJAX, რათა შექმნა ამ immersive მომხმარებლის, გამოცდილება. 

მოდით პირველი Google Maps თავად. ეს, რა თქმა უნდა, არის, ალბათ, ნაცნობი ინტერფეისი. მაგრამ აღმოჩნდება, რომ Google Maps ასევე უზრუნველყოფს API-- განცხადება პროგრამირების ინტერფეისი მეშვეობით, რომელიც თქვენ შეგიძლიათ მიიღოს ელემენტები Google Maps და მათ ინტეგრაციას საკუთარი პროგრამა. მართლაც, მთელი ამ პროცესი, თქვენ აპირებს იპოვოს რამდენიმე მისამართები განსაკუთრებით სასარგებლოა, რომ ნახსენები დაზუსტება პრობლემა Set 8, სპეციალურად ამ ნაცნობობა სახელმძღვანელოს ან შემქმნელი სახელმძღვანელო for Google Maps API Version 3, ასევე როგორც Google Maps JavaScript API v3 მინიშნება, რომელიც ცოტა უფრო arcane წაკითხული მაგრამ რეალურად აქვს ყველა ქვედა დონეზე დეტალები, თუ რა ფუნქციები და მეთოდები და ობიექტების და თვისებები და მოვლენები რეალურად მოდის API, ძალიან მსგავსი სულისკვეთებით [INAUDIBLE] გვერდებზე. 

ახლა თუ ჩვენ შევხედოთ at Google News, თქვენ ალბათ ვხედავთ ნაცნობი ინტერფეისი აქ. მაგრამ აღმოჩნდება, ასევე შეგიძლიათ მოძებნოთ Google News კონკრეტული გეოგრაფია მეშვეობით HTTP პარამეტრი ეწოდება geo. ფაქტობრივად, თუ მე zoom აქ, თქვენ დაინახავთ, რომ მე ვარ news.google.com/news/section?geo=02138. და, მართლაც, თუ მე zoom გარეთ, დაინახავთ, რომ მე ვარ ეძებს გვერდზე მთელი bunch of შეხედულებები კემბრიჯი, მასაჩუსეტსი. 

ამასობაში, თუ რეალურად შეცვლის URL არ უნდა იყოს zip კოდი მოსწონს, მაგრამ რაღაც ცოტა მძიმეა როგორიცაა Cambridge, + Massachusetts, სადაც plus არის გზა encode ფართი პერსონაჟი URL და დააჭიროთ, დაინახავთ, რომ მე რეალურად , თითქმის იგივე ამბავია. ალბათ ეს ცოტა განსხვავებული იმიტომ, Cambridge რეალურად მრავლობითი საფოსტო კოდები. ახლა რა ვიცი, რომ და, ფაქტობრივად, როგორ შეიძლება მე რატომღაც ჰალსტუხი და პატარა ქალაქების zip კოდები შემთხვევაში მე გვინდა, რომ საშუალებას მისცემს მომხმარებელს ეძებოთ ან? ისე, გამოდის, რომ იქ ნახვა out არსებობს ე.წ. geonames.org რომელიც ინიციატივა აქვს თავისუფლად ხელმისაწვდომი მონაცემთა ბაზის ყველა სახის გეოგრაფიული ინფორმაცია, არა მარტო აშშ, არამედ სხვა ქვეყნებშიც. ფაქტობრივად, თუ მე ამ URL აქ, რომელიც ასევე აღნიშნულია, პრობლემა შეიქმნა დაზუსტება, დაინახავთ სამ ჩამონათვალი მთელი bunch of zip ფაილი ნებისმიერი, რომელიც შეიძლება გადმოწერილი მიერ. ფაქტობრივად, ამ პრობლემის მითითებული თქვენ ვაპირებთ ჩამოტვირთოთ us.zip. ახლა ამ ფაილს, მთელი bunch of მონაცემები ტექსტურ ფორმატში. ფაილი არის ძალიან ჰგავს CSV-- მძიმით გამოყოფილი მნიშვნელობები ფაილი მაგრამ ეს რეალურად იყენებს ჩანართების დემარკაცია სფეროებში. ახლა კი, ამ დროს, თუ გადავხედავთ აქ რა მე ხაზგასმით, სფეროში ამ ფაილის ვაპირებთ იყოს რამ, როგორიცაა ქვეყნის კოდები, საფოსტო კოდები, ტოპონიმები, და მაშინ, გარკვეული ფორმით ან სხვა, სახელმწიფოები და ქვეყნები, თემებში, და სხვა. ფაქტობრივად, მე უკვე გადმოწერილი ფაილის წინასწარ. ნება მომეცით წავიდეთ წინ და გახსნა აქ us.text-- და, რა თქმა უნდა, თქვენ თუ მე გადახვევა ქვემოთ ხაზი 16.792 დაინახავთ რამდენიმე ჩანაწერი Cambridge, Massachusetts და მისი სხვადასხვა zip კოდები. რა აგრეთვე, არსებობს ქვეყანა, ზოგიერთი ნომრები, რომ მე ნამდვილად არ მესმის, მაგრამ ასევე ყველა გზა მარჯვენა ზოგიერთი GPS კოორდინატები გრძედი და განედი. ეს არის დიდი, რადგან ერთ-ერთი თვისებები Google Maps API არის უნარი აღმოაჩინოს სადაც თქვენ გეოგრაფიულად თვალსაზრისით GPS კოორდინატები. 

ახლა დავიწყოთ გაერკვნენ, თუ როგორ უნდა დაიწყოს ჩვევების ეს ყველაფერი ერთად. ჩვენ მოცემული მთელი bunch განაწილების კოდი, ისევე როგორც MySQL მონაცემთა ბაზაში. სინამდვილეში, თუ მე გაიყვანოს phpMyAdmin მქონე უკვე იმპორტირებული, როგორც თქვენ მალე, pset8.SQL, დაინახავთ MySQL მაგიდა, რომელიც ასე გამოიყურება, ID სფეროში, ქვეყნის კოდი, საფოსტო კოდი, ადგილი სახელი და სხვა. სახის ყველა იმ სვეტები მე მიღებული, უბრალოდ, კითხულობს readme.text ფაილი აქ, რომ მითითებული თუ არა ველი რიცხვი, ან varchar ან მოსწონს. 

ამიტომ, ჩვენ შევქმენით, რომ მაგიდა თქვენ და მოცემული SQL ბრძანებები შეასრულოს, რათა შევქმნათ, რომ მაგიდაზე თქვენი საკუთარი მონაცემთა ბაზა, მაგრამ არსებობს რეალურად მონაცემები არ ამაზე. უფრო მეტიც, თქვენ აპირებთ უნდა ჩამოტვირთვა us.zip ან ნებისმიერი ქვეყნის zip შეიტანოს, რომ URL არსებობს. და მაშინ ვაპირებთ უნდა დაწეროს ბრძანების სკრიპტი PHP, რომ ვაპირებ გახსნას, რომ ტექსტი შეიტანოს, iterate მისი ხაზები, და შემდეგ თითოეული იმ ხაზები გავაკეთოთ ჩასმა შევიდა, რომელიც განათავსებს მაგიდა თქვენი MySQL მონაცემთა ბაზაში. ასე რომ, ეს პროცესი დასასრულს, თქვენ არ აწარმოებს, რომ სცენარი საბოლოოდ მხოლოდ ერთხელ თეორია. სინამდვილეში თქვენ ალბათ გაუშვით რამოდენიმე ჯერ ხოლო ცდილობს დააფიქსიროს სხვადასხვა შეცდომებს. 

საბოლოო ჯამში, თქვენ აპირებს აქვს მართლაც დიდი მონაცემთა ბაზა ათასობით და ათასობით გეოგრაფიული რიგები. მაშინ თქვენ აპირებს დააყენოს, რომ იმპორტი script გარდა კიდევ ის სამუშაო და თქვენს მონაცემთა ბაზაში არის ლამაზი და სწორი, ხოლო შემდეგ თქვენ აპირებს გადავიდეს რეალურად ახორციელებს mashup თავად. Mashup აპირებს გამოიყურებოდეს ცოტა რაღაც მსგავსი. ამავე mashup.cs50.net, ჩვენ აქვს პერსონალის გადაწყვეტა რომ გამოიყურება პატარა რაღაც მსგავსი. მართლაც, თუ მე დააჭირეთ ამ გაზეთი ხატი კემბრიჯი, მასაჩუსეტსი, დაინახავთ spinning icon მოკლედ და შემდეგ უბრძანა სიაში, ბურთულებიანი სია სტატიები დაკავშირებული კემბრიჯი, მასაჩუსეტსი. თუ მე დააწკაპუნეთ Charlestown, Massachusetts, მე ვხედავ იგივე ქალაქია. და თუ მე დააკლიკეთ WATERTOWN, მასაჩუსეტსის, იქ არ უნდა იყოს ნებისმიერი ახალი ამბები from Watertown, ასე რომ თქვენ ხედავთ, რაღაც როგორც ნელი news ყოველდღე. 

ახლა კი, ამ დროს, ზედა მარცხენა რამდენიმე ნაცნობი Google Maps კონტროლი ნება თქვენ დააშორებს, პან up, down, მარცხნივ და მარჯვნივ, არამედ საძიებო ველში, რომ ჩვენ იქ. ასე რომ, თუ მე მოძებნოთ, გულწრფელად, მხოლოდ სხვა საფოსტო ინდექსი ვიცი, 90210, ჩვენ რეალურად ვხედავთ Beverly Hills, California. როდესაც დაწკაპავთ გამახსენა California და მთელი bunch საინფორმაციო შესახებ Beverly Hills. ახლა შეამჩნია, ძალიან, იქ რა მოხდა. თუ მე ამ დროს ძიების 02138 ან თუნდაც Cambridge მძიმით Massachusetts ან რამდენიმე ვარიანტი მისი, თქვენ მიიღებთ პატარა autocomplete dropdown. ახლა ამ გამოყენებით მოდული ბიბლიოთეკა მოუწოდა jQuery, და რომ მოდული ეწოდება typeahead. ჩვენ უბრალოდ წავიკითხე მეშვეობით დოკუმენტაცია, გადმოწერილი Js ფაილი ინტეგრირებული შევიდა განაწილების კოდი ისე, რომ თქვენ საბოლოოდ შეუძლია დაწეროს კოდი, რომელიც ავსებს, რომ dropdown menu ერთად ავტო არჩევანი ან განცხადება წინადადებები. 

ახლა განაწილების კოდი, მიუხედავად იმისა, რომ თქვენ მიიღო არ აკეთებს თითქმის იმდენი. თქვენ მიიღებთ Google Map ჩართული, და თქვენ მიიღებთ კონტროლის ზედა მარცხენა, და თქვენ მიიღებთ საძიებო ველში. მაგრამ თუ მე აკრიფოთ რაღაც 02138, არ ადგილები ნაპოვნი არ არის. ასე რომ, ეს იქნება ერთი ჩვენი მიზნები აქ. უფრო მეტიც, თუ თქვენ მიიღოს ნაბიჯი უკან და შევხედოთ რუკა თავად, არ არსებობს news განაწილებაზე. მაშინაც კი, თუ მე დააჭირეთ და drag, არ მარკერები რეალურად როგორც ჩანს, ახალი ამბების იმიტომ, რომ გამოწვევა რჩება ასევე. 

მოდით შევხედოთ შემდეგ განაწილების კოდი. ერთხელ თქვენ გადმოწერილი pset8.zip და unzipped მას თქვენი vhost დირექტორია CS50 ელექტრო მოწყობილობების, დაინახავთ ამ დირექტორიები აქ შიგნით. Bin-- რომელიც ზოგადად დგას ორობითი შესრულებადი პროგრამების მოიცავს, როგორც pset7, ზოგიერთი PHP ფაილი, რომელიც სხვა ფაილი მოიცავს, შემდეგ საჯარო, რომელიც ფაილი, რომელიც უნდა უნდა იყოს საჯაროდ ხელმისაწვდომი მომხმარებელი ბრაუზერში. მოდით შევხედოთ ბინ კატალოგი, და ჩვენ , რომ არსებობს ფაილი იქ უკვე მოუწოდა იმპორტი. თუ ჩვენ გახსნა ამ gedit, ჩვენ დავინახავთ, რომ, სამწუხაროდ, იქ არ არის ბევრი არსებობს. ყველა, რომ არსებობს, თუმცა, არის shebang ზედა რომელიც განსაზღვრავს, რომელიც interpreter-- ამ შემთხვევაში PHP-- გამოყენებული უნდა იქნას რეალურად შეასრულოს ამ ფაილის. მაგრამ შემდეგ, სადაც იგი აცხადებს TODO არის, სადაც თქვენ აპირებთ უნდა დაეწერა რაღაც კოდი რომ ალბათ მოითხოვს config ფაილი, რომელიც არის მოიცავს დირექტორია როგორც ჩვენ გავაკეთეთ ადრე ერთად PHP ფაილი. და მაშინ თქვენ აპირებს უნდა როგორმე გახსნას us.text რომელიც თქვენ სავარაუდოდ არ unzipped უკვე. მაშინ თქვენ აპირებთ უნდა გადაურბინოთ ხაზები, რომ ფაილი, შესაძლოა, გარკვეული ფუნქციები შესთავაზა დაზუსტება. შემდეგ ჩადეთ თითოეული იმ ხაზები შევიდა 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, დაინახავთ, მთელი რამოდენიმე ბმული ელემენტების ხელმძღვანელი, კონკრეტულად, ჩატვირთვის ჩვენი საკუთარი CSS მოჰყვა მთელი bunch of script tags რამ, როგორიცაა რუკები, API თავისთავად, სპეციალური მარკერი ეტიკეტების უტილიტა, რომელიც ჩვენ ნახსენები დაზუსტება ხელმისაწვდომი, jQuery თავისთავად, ჩატვირთვის თავად, და კიდევ ერთი ბიბლიოთეკა მოუწოდა ხაზგასმა, რომელიც ჩვენ ვსაუბრობთ სპეც. Underscore.js როგორიცაა jquery.js არის JavaScript ბიბლიოთეკა რომელსაც აქვს მთელი bunch ფუნქციონალობას რომ ბევრი ადამიანი მსოფლიოში სურვილი არსებობდა JavaScript თავად. ასე რომ ყველა მათგანი რეალურად საკმაოდ პოპულარულია. ჩვენ ასევე აღნიშნა, typeahead რომელიც არის ბიბლიოთეკაში, რომ აკეთებს, რომ autocomplete dropdown და საბოლოოდ ბმული ჩვენი საკუთარი JavaScript. 

იმავდროულად, და, ალბათ, საბედნიეროდ, ამ mashup ამოძრავებს შედარებით პატარა HTML ქვემოთ აქ ბოლოში. ცნობა, რომ ჩვენ მითითებული div in ჩვენი სხეულის კლასის კონტეინერი სითხე. ამ, თითო ჩატვირთვის მიერ დოკუმენტაცია, უბრალოდ იმას ნიშნავს, რომ ამ div აპირებს შეავსოთ ხედის ფანჯრის ან ბრაუზერის ფანჯრის სრულად. 

იმავდროულად, ქვემოთ, რომ ჩვენ გვაქვს div რომ გაიხსნა და მაშინვე დაიხურა უნიკალური ID რუკა ტილო. ეს ახლა არის Google Maps დოკუმენტაცია მისი API, რომლითაც მე უბრალოდ უნდა გაქვთ ცარიელი div რომელშიც მიეცეს, საბოლოო ჯამში, ფაქტობრივი Google Maps. მაგრამ უფრო, რომ მხოლოდ ცოტა. 

და ბოლოს, არსებობს ფორმა შიგნით აქ, რომელიც ახორციელებს ტექსტში ყუთი up ზედა მარცხენა ჩვენს ინტერფეისი ძებნას. ცნობა, რომ ჩვენ გამოყენებული ცოტა ჩატვირთვის აქ ძალიან რამ, როგორიცაა ფორმა inline და ფორმა ჯგუფი. ჩვენ, ყოფილ უნიკალური ID ფორმა. და შემდეგ, საბოლოო ჯამში, მე რეალურად შეყვანის ტიპის, რომელიც არის საკმაოდ ნაცნობი, რომლის ID არის ქ. მხოლოდ კონვენციას. Q for შეკითხვის შეეძლო უკვე მოუწოდა არაფერი. და შემდეგ placeholder, იმავდროულად, ქალაქი, სახელმწიფო, საფოსტო კოდი, რომელიც თქვენ ალბათ გახსოვთ, ხედავს ჩვენს mashup დემო ადრე. მოდით დახურვა ფაილი. 

ახლა შევხედოთ PHP ფაილი, რომელიც დაელოდება და შემდეგ JavaScript ფაილი. ჩვენი PHP ფაილი, ჩვენ გვაქვს უკვე განხორციელდა, თქვენ, მაგალითად, განახლებები. Update.php-- ჩვენ არ დახარჯოს დიდი დროის აქ მოკლედ არის ფაილი, რომ ჩვენი JavaScript კოდი აპირებს წიგნში მეშვეობით AJAX, რომ ასინქრონული ტექნიკა, რომელიც არის ჩაშენებული JavaScript ამ დღეებში, რომ აპირებს საშუალებას მოგვცემს ვთხოვო update.php დამატებითი ინფორმაციისათვის. 

კერძოდ, ნებისმიერ დროს მომხმარებლის ტრანსვესტიტები რუკა ან ასრულებს ძიების, რომ გადასვლა მომხმარებელი სხვა ადგილას, ჩვენი JavaScript კოდი, როგორც ჩვენ მალე, არის ვაპირებ მოვუწოდო update.php და ითხოვენ 10 ან იმდენად მარკერები ფარგლებში ხედის დაფუძნებული on GPS კოორდინატები ზედა და ქვედა კუთხეში რომ რუკაზე. ჩვენ შეგვიძლია მაშინ აივსო რუკა არის, რომ მომხმარებლის გადავიდა ეკრანზე, რათა რომ 10 ალბათ new მარკერები სხვადასხვა ქალაქებში. იმავდროულად, ეს ფაილი საბოლოოდ აპირებს შეასრულოს SQL query წინააღმდეგ ჩვენი მონაცემთა ბაზა მაგიდა სახელწოდებით ადგილებში, რომელიც დაბრუნებას აპირებს იმ 10 ან ნაკლები ადგილას. 

იმავდროულად, articles.php, კიდევ ერთი წარადგინოს ჩვენ წერილობითი მთლიანად. ეს არის ძალიან მსგავსი სულისკვეთებით პრობლემა Set 7 საძიებელი ფუნქცია, რომელიც დაუკავშირდა Yahoo Finance თქვენთვის. ეს ფაილი კონტაქტები Google News თქვენ, საბოლოო ჯამში, grabbing მანქანით წაკითხვადი version-- რაღაც ე.წ. RSS format-- საინფორმაციო კემბრიჯის ან Beverly Hills ან რასაც ქალაქის თქვენ ჩხრეკა for ეფუძნება, რომ geoparameter. ჩვენ გარჩევის რომ RSS, რომელიც მხოლოდ ტიპის markup ენის მოუწოდა XML, და მაშინ ჩვენ რეალურად დაუბრუნონ იგი თქვენს ბრაუზერში და თქვენი JavaScript კოდი, კერძოდ, ფორმატი მოუწოდა JSON, JavaScript Object ნოტაცია. ახლა თქვენ დაინახავთ specification-- ჩვენ აღვნიშნო, რომ თქვენ როგორ შეგიძლიათ რეალურად ვხედავ ზოგიერთი JSON უახლოეს back-- რომ ეს ფუნქცია საბოლოოდ გაძლევთ populate იმ popup მენიუები ასე რომ როდესაც თქვენ დააჭირეთ on მარკერის რუკა თქვენ რეალურად ვხედავ მთელი bunch ტყვიები, რომელთაგან თითოეული ბმულები სტატია. 

ახლა მოდით შევხედოთ ერთი ბოლო PHP ფაილი, რომელიც, საბედნიეროდ, არ აქვს ბევრი აპირებს on-- უბრალოდ საკმაოდ დიდი TODO. ახლა ეს ფაილი აცხადებს მასივი მოუწოდა ადგილებში. და მაშინ საბოლოოდ ანაბეჭდები რომ მასივი JSON format-- pretty-ბეჭდვა ეს მხოლოდ ისე, რომ რამ ადვილია გამართვისა. სამწუხაროდ, შუა არსებობს ამ TODO, რომელიც მოუწოდებს გაძლევთ მოძებნოთ მონაცემთა ადგილებში შესატყვისი geo HTTP პარამეტრი. 

და, მართლაც, ამ აპირებს იყოს ერთი თქვენი challenges-- განახორციელოს ამ ფუნქციის აქ ასე რომ, როდესაც თქვენ დაუკავშირდით ეს ფაილი URL მოსწონს ძებნა. php? geo = რაღაც, თქვენი კოდი საბოლოოდ დაბრუნების JSON მასივი ყველა ადგილას თქვენი მონაცემთა ბაზის ცხრილში რომ ემთხვევა, რომ შეყვანა. ასე რომ, თუ მომხმარებლის ტიპის Cambridge, თქვენი ფაილი აქ search.php საბოლოოდ დაბრუნების JSON მასივი ყველა მატჩი კემბრიჯის, რომელიც შეიძლება იყოს Massachusetts მაგრამ შეიძლება იყოს კიდევ სადმე სხვაგან. 

და ბოლოს, მოდით შევხედოთ ორი ფაილი, რომელიც არის სტატიკური ultimately-- თქვენი CSS ფაილი და თქვენი JavaScript ფაილი. თუ მე წასვლას ჩვენი CSS დირექტორია, არსებობს მთელი bunch of ფაილი არსებობს, მაგრამ მათი უმრავლესობა ბიბლიოთეკები. მე ვაპირებ შევხედოთ, კერძოდ, styles.css, რაც ჩვენი გლობალური CSS, რომ აპირებს stylize ეს მთელი mashup. მე დატოვოს იგი წაიკითხოთ მეშვეობით კომენტარები შესაბამისად, მაგრამ, მოკლედ, ეს არის CSS, რომელიც უზრუნველყოფს, რომ ჩვენი mashup, ჩვეულებრივ იმ ყუთი, გამოიყურება ზუსტად ისე, როგორც ჩვენ გვინდა it-- რუკის შევსების კალენდარი პორტი და ძებნის ყუთი up ზედა მარცხენა. ჩვენ ასევე მიღებული თავისუფლების stylizing რომ typeahead dropdown მენიუ ცოტა, ისევე. 

ყველაზე მნიშვნელოვანი ფაილი ალბათ, ამ პრობლემის მითითებული ეს არის ბოლო ერთი, scripts.js. შიგნით თქვენი JS დირექტორია კიდევ უფრო ფაილი. ყველა მათგანი ბიბლიოთეკის ფაილი გარდა ამ ერთი, scripts.js. თუ ჩვენ გახსნა up, ავიღოთ ჩვენი ფინალური ტური მეშვეობით ფუნქციები, რომელიც ჩაშენებული ეს ფაილი თქვენ და ყურადღებას რომ TODOs რომ კიდევ წინ. 

ზედა ფაილი, სამი გლობალური ცვლადები. ერთი რუკა, რომელიც აპირებს იყოს მინიშნება ჩვენი Google რუკა. შეგიძლიათ წარმოიდგინოთ, რომ ეს სახის მაჩვენებელი. იმავდროულად, ჩვენ გვაქვს სხვა გლობალური ცვლადი მოუწოდა ინფორმაცია, რომელიც, როგორც ჩანს, შენახვის დაბრუნების ღირებულება ზარი ახალი google.maps.InfoWindow. JavaScript ოპერირებს ობიექტი, რომელიც ძალიან მსგავსი სულისკვეთება Struts. და რა ეს ხაზი ჩვენი მიზნებისთვის აკეთებს ქმნის ახალ ინფორმაცია window მეხსიერება და შემდეგ შენახვა გარშემო მინიშნება მასთან ცვლადში ინფორმაცია. და მათ შორის, ვინც, იმავდროულად, არის ის, რაც, როგორც ჩანს, უნდა იყოს ცარიელი JavaScript მასივი მოუწოდა მარკერები. ყველა იმ გაზეთის ხატები, ან თქვენ შესაძლოა აირჩიოს სხვა ხატი საერთოდ, ვაპირებთ იყოს შენახული საბოლოო ჯამში ამ მასივი ასე რომ ჩვენ შეგვიძლია ძალიან ადვილად რჩეულებში რუკა და ამოიღონ მათ რუკაზე. 

ახლა მოდით გადახვევა ქვემოთ ცოტა და პროგრამირებაში მეშვეობით კოდი, რომელიც იქნება შესრულებული, როგორც კი DOM ან დოკუმენტი ობიექტის მოდელი და გვერდზე თავად მზად არის. შეგახსენებთ, რომ ეს სინტაქსი აქ უბრალოდ აკონკრეტებს რომ შემდეგი კოდი უნდა განხორციელდეს მხოლოდ როდესაც ბრაუზერის დაასრულა ჩატვირთვის ყველაფერი. 

ჩვენ გამოვაცხადებთ მთელი bunch of სტილის, რომელიც დასრულდება up stylizing რუკაზე თითო სპეც. ჩვენ მაშინ განაცხადოს მთელი bunch of პარამეტრები, რომელიც შემდგომი სახის Google რუკა, რომელიც ჩვენ შესახებ ხმა. ჩვენ მაშინ გამოიყენოს ცოტა jQuery კოდი, რომელიც განმარტა ცოტა უფრო დეტალურად სპეც, რათა დაიბრუნოს რომ ელემენტს, რუკა ტილო რომ ჩვენ ასე ცალსახად განსაზღვრული. და შემდეგ ეს ხაზი აქ რა ჩანს magically მოგვცეს Google რუკა შიგნით ჩვენი საკუთარი განცხადების საფუძველზე, შენახვის მინიშნება მასთან ამ ცვლადში რუკაზე. 

და ბოლოს, ქვემოთ აქ ჩვენ რეგისტრაცია რა მოუწოდა მსმენელს. ვფიქრობ back-- გზა, გზა back-- კვირის ნულოვანი in CS50 როცა ჩვენ შევხედეთ Scratch და თავისი მხარდაჭერა მეშვეობით გარეშე მეშვეობით რამ მოუწოდა ღონისძიებები და მაუწყებლობს. თქვენ შეიძლება არ გამოიყენება იგი საკუთარ თავს, მაგრამ ეს მექანიზმი, რომლის დროსაც ბრაუზერის ამ შემთხვევაში შეგიძლიათ მიიღოთ ჩვენს ყურადღებას, როდესაც ეს მზად რეალურად შეასრულოს ზოგიერთი კოდი. ამ შემთხვევაში, ის აპირებს მოუსმინოთ რუკის ღონისძიება სახელწოდებით მოჩვენებითი. ეს ნიშნავს, რომ ბრაუზერის აქვს დასრულდა ჩატვირთვისას Google რუკა. ამ ეტაპზე ფუნქცია მოუწოდა კონფიგურაცია უნდა, საბოლოო ჯამში, შესრულდება. რომ ფუნქცია, კონფიგურაცია, ჩვენ დავინახავთ, მიერ დაწერილი us. 

ახლა ქვემოთ აქ არის ფუნქცია რომ, სამწუხაროდ, მხოლოდ TODO add მარკერი. პოსტი სპეც. თქვენ აპირებთ უნდა დაწერა კოდი, რომელიც რეალურად დასძენს marker-- თუ არა ეს გამოიყურება როგორც გაზეთში, ან thumb tack, ან რამე else-- Google რუკა. აქ არის ის არის, რომ ფუნქცია ე.წ. კონფიგურაცია. მე დავტოვებთ მას, რომ თქვენ წაიკითხოთ ამ უფრო დეტალურად, მაგრამ გახსოვდეთ, რომ ჩვენ დაამატოთ bunch მეტი მსმენელი ასე რომ ჩვენ შეგვიძლია შეასრულოს კოდი, როდესაც მომხმარებელი დააჭერს და ტრანსვესტიტები რუკაზე. ჩვენ ასევე გვაქვს კოდი აქ, რომ ველში რომ typeahead მოდული ისე, რომ dropdown მენიუ რეალურად მუშაობს. 

მაგრამ მოდით ფოკუსირება მხოლოდ რამდენიმე ადგილებში შესაბამისად. კერძოდ, ეს უნდა გავაკეთოთ აქ. მე თვლიან ონლაინ დოკუმენტაცია და დაზუსტება როგორ უნდა შეავსოთ ამ TODO. მაგრამ მოკლედ, ამ ბიბლიოთეკაში typeahead საშუალებას გაძლევთ გაივლის რა საყოველთაოდ ცნობილია, როგორც შაბლონი, რომელსაც აქვს რამდენიმე ცვლადი placeholders ძალიან მსგავსი სულისკვეთება printf ს%. * s. მაგრამ ამ შემთხვევაში, თარგი თითო Spec გაძლევთ საშუალებას რა ცვლადები გსურთ მიეცეს მონაცემები, მოდის უკან რაღაც PHP ფაილი, რომელიც თქვენ წერილობითი რომ ასხივებენ JSON გამომავალი. 

ახლა ქვემოთ აქ მიხვდებიან, რომ ჩვენ მოსმენის typeahead არჩევანი როდესაც მომხმარებელს რეალურად ატარებს ძიება და ირჩევს მნიშვნელობა. ეს არის თუ როგორ ჩვენ, ფაქტობრივად, მოისმენენ, რომ და შეასრულოს გარკვეული კოდი შედეგად. მაშინ ჩვენ გავაგრძელებთ კონფიგურაციის mashup უბრალოდ ცოტა. და, საბოლოო ჯამში, ჩვენ მოვუწოდებთ ეს ფუნქცია განახლება. განახლებები მარკერები ეკრანზე. უფრო, რომ რაღაც მომენტში. ამავდროულად, არსებობს რამდენიმე პატარა ფუნქციები აქ. რომელთაგან ერთი hideInfo რომელიც უბრალოდ ხურავს InfoWindow. სხვა ფუნქცია აქ, რაც, საბოლოო ჯამში, არ იქნება ძალიან დიდი ხანია, ამოიღონ მარკერები. რომ აპირებს გაუქმება რასაც თქვენი add მარკერის ფუნქცია აქვს. და შემდეგ ქვევით აქ არის მოძებნილი. და ეს ერთი არის საინტერესო, რადგან ჩვენ დაწერილი JavaScript კოდი, რომელიც არის დაველაპარაკები search.php შესახებ სერვერზე და დავუბრუნდეთ გარკვეული პასუხი. 

თქვენ, რა თქმა უნდა, ჯერ კიდევ უნდა განახორციელოს search.php, მაგრამ ჩვენ განხორციელდა JavaScript კოდი, რომელიც არის აპირებს გაუმკლავდეს ფაქტობრივად ასრულებენ ეძებს, რომ ტექსტში ყუთი. კერძოდ, ცნობა რომ ამ ფუნქციის აქ, ძებნა, არ მოვუწოდებთ search.php მეთოდით მოუწოდა მიიღეთ JSON, რომელიც ჩვენ ვნახეთ ლექციების. და სინტაქსი აქ არის პატარა სხვადასხვა ლექცია, რომ ჩვენ გამოყენებით jQuery ე.წ. დაპირება ინტერფეისი. უფრო, რომ სპეც. ეს უბრალოდ ნიშნავს, რომ ჩვენი მიზნებისათვის არის, რომ იქ ორი სპეციალური ფუნქციების ჩვენ უნდა მოვუწოდებთ ერთად dot notation აქ მაშინვე მოუწოდებს მიიღოს JSON. ერთი ეწოდება გაკეთდეს. ერთი ეწოდება ვერ. შეგიძლიათ წარმოიდგინოთ, რომ ეს როგორც წარმატება კურატორმა და მარცხი კურატორმა მხოლოდ იმ შემთხვევაში, თუ რაღაც მიდის არასწორი. 

ახლა მოდით შევხედოთ ბოლო რამდენიმე ფუნქციები ამ ფაილის. ქვემოთ აქ არის ფუნქცია მოუწოდა showInfo, რომელიც აჩვენებს ინფორმაცია ერთ იმ პატარა ინფორმაცია ფანჯრები, რომ pops up როდესაც მომხმარებელი იმოქმედებს მარკერი. ქვემოთ აქ უფრო არის რომ განახლების ფუნქცია რომ ჩვენ განვახორციელეთ თქვენთვის. იგი განსაზღვრავს საზღვრები რუკაზე. რა არის GPS კოორდინატები მისი ჩრდილო და სამხრეთ-დასავლეთ კუთხეში აქ. ჩვენ მზად რაღაც HDP პარამეტრები აქ და შემდეგ გაიარა მათ საბოლოოდ to update.php, რომელიც ჩვენ გვაქვს ასევე განხორციელდა თქვენთვის. რომ საბოლოოდ იღებს უკან ზოგიერთი JSON საწყისი ფაილი სახელად update.php და შემდეგ შლის ნებისმიერი მარკერები ეკრანზე და მაშინ iterates მეტი მონაცემები, რომ დავბრუნდებით საწყისი update.php, რომელიც ერთხელ არის მხოლოდ JSON მასივი. და მაშინ საბოლოოდ დასძენს მარკერის თითოეული იმ ადგილებში, გატარება მარცხი ან შეცდომები, რომლებიც შეიძლება ძალიან კარგად მოხდება. 

ახლა მხოლოდ გადმოგცეთ გემოვნების, თუ როგორ შეიძლება წავიდეს გამართვის ამ პროექტის, გააცნობიეროს, რომ მე გაიხსნა წინასწარ ამ tab აქ ამ URL, pset8 / articles.php? geo = 02138. ახლა, ისევ, სტატიები PHP ჩვენ განხორციელებული თქვენთვის ასე რომ, ეს არ არის იმდენად ის, რაც თქვენ უნდა გამოყენებით გამართვის, არამედ ტექნიკით. შეამჩნია, რომ მე ეძებდნენ კემბრიჯის ZIP კოდი აქ, და მე მიღებული თავში, მართლაც, JSON მასივი JSON ობიექტების შიგნით, რომელიც ორი keys-- ბმულზე და სათაური. 

ასე რომ, ეს ფუნქციონირებისთვის მუშაობს უკვე თქვენთვის. მაგრამ ამ ტექნიკას ხელით აპირებს რომ URL მოსწონს ეს რაღაც search.php? geo = კემბრიჯის ან 02138 ან მიუხედავად შესახებ უკვე აკრეფილი უნდა ადასტურებს, ფასდაუდებელი, როგორც თქვენ, საკუთარ თავს, ცდილობენ გაერკვნენ ზუსტად თუ რატომ search.php მუშაობს თუ არა. 

საბოლოო ჯამში, მაშინ, თქვენ უნდა რამდენიმე TODOs წინ თქვენ. თქვენ აპირებს პირველი იარაღები რომ იმპორტის სცენარი, რომ ნათქვამია us.text თქვენს მონაცემთა ბაზაში. თქვენ მაშინ აპირებს უნდა განახორციელოს search.php ისე, რომ იგი იქცევა ზუსტად მითითებული. თქვენ მაშინ აპირებს მინდა ფოკუსირება scripts.js და საბოლოოდ ახორციელებს იმ რამდენიმე TODOs, მათ შორის კონფიგურაცია და რომ template, რჩეულებში მარკერები, ამოიღონ მარკერები და შემდეგ ბოლო, მაგრამ არანაკლებ, ერთი პირადი შეხება. 

მას შემდეგ, რაც თქვენ გაქვთ თქვენი mashup სამუშაო საკმაოდ, როგორიც ჩვენია, მიზანი მხრივ თქვენთვის დაამატოთ პირადი შეეხოთ თქვენი mashup, თუ არა ეს ესთეტიკური და ფუნქციური. მიიღოს mashup ოდესმე ასე ოდნავ მომდევნო დონეზე. ასე რომ, სანამ დააყენებს თავს მიღმა თქვენი მნიშვნელოვანია იმ სპეც თავად და შეარჩიო ერთი ტექნიკა ახალი, თუნდაც ეს მხოლოდ რაღაც ესთეტიკური როგორიცაა შეცვლის განლაგება რუკაზე რომ თქვენ იყენებთ, ფარგლებში, რომ ჩვენ ველით კმაყოფილი იქნება. რომ არის მაშინ პრობლემა Set 8 Mashup. ადევნეთ თვალყური მეტი დაზუსტება და საუკეთესო luck მოგვარება ამ, თქვენი ბოლო CS50 პრობლემა კომპლექტი ოდესმე. 

[მუსიკალური სათამაშო]