>> [Muzik bermain]
>> DAVID J. MALAN: Hello.
Mari kita berjalan-jalan melalui Set Masalah 8 Mashup,
yang akan mencabar anda untuk menimba dari unsur-unsur untuk Peta Google
dengan unsur-unsur dari Google News dan mash mereka bersama-sama ke dalam applet web yang
membolehkan pengguna untuk mencari peta untuk berita tempatan
ke bandar-bandar tertentu, bandar-bandar, dan kod zip.
Untuk melakukan ini, kita akan mengintegrasikan beberapa HTML, CSS, PHP, SQL,
JavaScript, dan teknik yang umumnya dikenali sebagai AJAX dalam perintah
untuk mewujudkan ini imersif pengalaman pengguna.
>> Mari kita pertama untuk Google Maps sendiri.
Ini, sudah tentu, adalah mungkin antara muka yang biasa.
Tetapi ternyata bahawa Peta Google juga menyediakan permohonan API--
pengaturcaraan interface-- melalui yang anda boleh mengambil unsur-unsur Peta Google
dan mengintegrasikan mereka ke dalam aplikasi anda sendiri.
Sesungguhnya, seluruh ini proses, anda akan
untuk mencari beberapa URL terutamanya yang membantu
disebut dalam spesifikasi bagi Set Masalah 8,
khusus ini Bermula Panduan atau Panduan Pemaju
untuk Peta Google API Versi 3 serta sebagai API Peta Google JavaScript
rujukan v3, yang merupakan sedikit lebih sukar difahami untuk membaca
tetapi sebenarnya mempunyai semua tahap rendah butir-butir mengenai apa fungsi atau kaedah
dan benda-benda dan harta dan peristiwa sebenarnya datang dengan API,
hampir sama dalam semangat kepada [didengar] muka surat.
>> Sekarang jika kita lihat di Google News, anda akan
mungkin melihat antara muka yang biasa di sini.
Tetapi ternyata anda juga boleh mencari Google News untuk geografi tertentu
melalui parameter HTTP dipanggil geo.
Malah, jika saya mengezum masuk di sini, anda akan melihat bahawa
Saya di news.google.com/news/section?geo=02138.
Dan sesungguhnya, jika saya zum keluar, anda akan melihat bahawa saya
melihat halaman dengan sejumlah besar pandangan tentang Cambridge, Massachusetts.
>> Sementara itu, jika saya benar-benar mengubah URL tidak menjadi kod zip seperti ini,
tetapi sesuatu yang sedikit Messier seperti Cambridge, Massachusetts +,
di mana campur adalah cara anda mengekod yang aksara ruang di URL dan tekan Enter,
anda akan melihat bahawa saya sebenarnya lihat hampir berita yang sama.
Mungkin ia sedikit berbeza kerana sebenarnya Cambridge
mempunyai kod zip berbilang.
Sekarang bagaimana saya akan tahu itu dan, sebenarnya, bagaimana boleh saya entah bagaimana
mengikat bandar-bandar dan bandar-bandar untuk kod zip dalam kes saya
mahu membenarkan pengguna untuk melihat sama ada?
Nah, ternyata bahawa terdapat laman web di luar sana yang dipanggil
geonames.org yang inisiatif untuk mempunyai
pangkalan data boleh diperolehi secara percuma dari semua macam maklumat geografi,
bukan sahaja untuk Amerika Syarikat, tetapi juga bagi negara-negara lain juga.
Malah, jika saya pergi ke URL ini di sini, yang juga disebutkan dalam masalah yang ditetapkan
spesifikasi, anda akan melihat ia tiga penyenaraian sejumlah besar fail zip
mana-mana yang boleh dimuat turun oleh anda.
Malah, bagi masalah ini ditetapkan anda akan turun us.zip.
Kini dalam fail ini, adalah keseluruhan sekumpulan data dalam format teks.
Fail-fail yang hampir sama dengan yang CSV-- Comma Nilai Berpisah file--
tetapi ia sebenarnya menggunakan tab untuk menanda bidang.
Sekarang, sementara itu, jika anda melihat penggunaan di sini apa yang saya telah menekankan,
bidang dalam fail ini akan menjadi perkara-perkara seperti kod negara,
poskod, nama tempat, dan kemudian, dalam bentuk tertentu
atau lain-lain, negeri dan daerah-daerah, komuniti, dan banyak lagi.
Malah, saya telah pun turun fail ini terlebih dahulu.
Biar saya pergi ke hadapan dan membukanya here-- us.text-- dan, sememangnya, anda akan
melihat jika saya tatal ke bawah ke talian 16792 anda akan melihat beberapa rekod untuk Cambridge,
Massachusetts dan pelbagai kod zip itu.
Apa yang anda lihat juga terdapat daerah, beberapa nombor yang saya tidak benar-benar
memahami, tetapi juga semua jalan di sebelah kanan,
beberapa GPS coordinates-- latitud dan longitud.
Ini bagus kerana salah satu ciri-ciri Google Maps API
adalah keupayaan untuk mengesan di mana anda berada geografi
dari segi koordinat GPS.
>> Sekarang mari kita mula memikirkan bagaimana untuk mula mengikat perkara-perkara bersama-sama.
Kami telah memberikan anda secara keseluruhan sekumpulan kod pengedaran,
dan pangkalan data MySQL.
Malah, jika saya tarik phpMyAdmin mempunyai telah diimport, seperti yang anda akan,
pset8.SQL, anda akan melihat jadual MySQL yang kelihatan seperti ini, medan ID, negara
kod, poskod, nama tempat dan banyak lagi.
Jenis-jenis semua orang-orang ruangan saya hanya diperolehi
dengan membaca readme.text yang memfailkan di sini yang dinyatakan
sama ada bidang yang ialah integer, atau varchar atau seumpamanya.
>> Oleh itu, kita telah mencipta bahawa jadual untuk anda dan anda diberi arahan SQL
untuk laksana untuk mewujudkan yang jadual dalam pangkalan data anda sendiri,
tetapi ada benar-benar tiada data dalam lagi.
Sebaliknya, anda akan perlu turun us.zip atau zip mana-mana negara
memfailkan dari URL yang ada.
Dan kemudian anda akan mempunyai untuk menulis skrip baris arahan dalam PHP itulah
akan membuka teks yang memfailkan, melelar melalui talian yang,
dan kemudian untuk setiap orang-orang garis melakukan bersisipan
ke yang meletakkan meja dalam pangkalan data MySQL anda.
Jadi pada akhir proses ini, anda akan telah menjalankan skrip yang akhirnya
hanya sekali dalam teori.
Pada hakikatnya anda akan mungkin menjalankannya sekumpulan kali
ketika cuba untuk menetapkan pelbagai bug.
>> Akhirnya, anda akan mempunyai pangkalan data yang sangat besar dengan beribu-ribu
dan beribu-ribu baris geografi.
Kemudian anda akan meletakkan import yang skrip mengetepikan sekali ia bekerja
dan pangkalan data anda adalah bagus dan betul, dan kemudian
anda akan bergerak ke sebenarnya melaksanakan Mashup itu sendiri.
Mashup ini akan kelihatan sesuatu yang kecil seperti ini.
Pada mashup.cs50.net, kita mempunyai penyelesaian kakitangan
yang kelihatan sesuatu yang kecil seperti ini.
Sesungguhnya, jika saya klik pada akhbar ini icon untuk Cambridge, Massachusetts,
anda akan melihat yang berputar icon secara ringkas dan kemudian
senarai diperintahkan, yang senarai berbulet artikel
berkaitan dengan Cambridge, Massachusetts.
Jika saya klik di Charlestown, Massachusetts,
Saya akan melihat yang sama untuk bandar itu.
Dan Jika saya klik pada Watertown, Massachusetts,
tidak mungkin menjadi apa-apa berita dari Watertown,
jadi anda akan melihat sesuatu seperti hari berita perlahan.
>> Sekarang, sementara itu, di sebelah kiri atas adalah beberapa akrab Peta Google kawalan
untuk membolehkan anda zum keluar, pan atas, ke bawah, ke kiri dan kanan,
tetapi juga kotak carian kami meletakkan di sana.
Jadi, jika saya mencari, terus-terang, satu-satunya kod zip lain yang saya tahu,
90210, kita sebenarnya akan melihat Beverly Hills, California.
Apabila diklik ia membawa saya untuk California dan sejumlah besar
berita mengenai Beverly Hills.
Sekarang perhatikan, terlalu, apa yang berlaku di sana.
Jika saya ini carian masa untuk 02138 atau Cambridge koma Massachusetts atau beberapa
varian itu, anda akan mendapat jatuh turun autoselesai sedikit.
Sekarang ini menggunakan plugin untuk perpustakaan dipanggil jQuery,
dan plugin yang dipanggil typeahead.
Kita membaca dokumentasi,
turun yang js memfailkan bersepadu ke dalam kod pengedaran supaya anda
akhirnya boleh menulis kod yang mengisi bahawa menu jatuh turun dengan auto
Pilihan-pilihan atau cadangan auto.
>> Sekarang kod pengedaran, walaupun, bahawa anda menerima tidak melakukan hampir sebanyak.
Anda mendapatkan Google Map terbenam, dan anda mendapat kawalan atas sebelah kiri,
dan anda mendapatkan kotak carian.
Tetapi jika saya menaip sesuatu seperti 02138, tiada tempat didapati lagi.
Jadi yang akan menjadi salah satu matlamat kami di sini.
Selain itu, jika anda mengambil langkah yang belakang dan melihat peta itu sendiri,
tidak ada berita sekalipun.
Walaupun saya klik dan seret, tiada penanda sebenarnya
muncul untuk berita kerana yang cabaran yang tinggal untuk anda juga.
>> Mari kita lihat, maka pada kod pengagihan.
Sebaik sahaja anda telah dimuat turun pset8.zip dan unzipped ia
ke dalam direktori vhost anda dalam Appliance CS50,
anda akan melihat ini direktori di sini di dalam.
Bin-- yang umumnya bermaksud binari untuk programs-- laku
termasuk, seperti dalam pset7, beberapa PHP fail yang fail lain termasuk,
kemudian awam, iaitu fail-fail yang perlu
menjadi diakses oleh orang awam kepada pengguna dengan pelayar.
Mari kita lihat di Direktori bin, dan kami akan
melihat bahawa terdapat fail ada sudah dipanggil Import.
Jika kita membuka ini dengan gedit, kita akan melihat bahawa, malangnya, tidak banyak
ada.
Segala yang ada di sana, walaupun, adalah shebang di bahagian atas
yang menyatakan yang interpreter-- dalam kes ini PHP--
harus digunakan untuk benar-benar melaksanakan fail ini.
Tetapi di mana ia mengatakan TODO adalah di mana anda
akan perlu menulis beberapa kod yang mungkin memerlukan config
fail itu dalam termasuk direktori seperti yang telah kami lakukan sebelum dengan fail PHP.
Dan kemudian anda akan perlu entah bagaimana membuka
us.text yang anda mungkin telah unzipped sudah.
Kemudian anda akan perlu melelar lebih garisan dalam fail itu,
mungkin menggunakan beberapa fungsi disyorkan dalam penentuan itu.
Kemudian masukkan setiap orang garis ke dalam pangkalan data MySQL
dengan menggunakan fungsi pertanyaan tersebut, yang kami sekali lagi kepada kamu with--
atau varian sekurang-kurangnya satu mengenainya dalam functions.php,
yang kita akan melihat dalam seketika.
>> Sekarang mari kita menutup import dan kembali ke direktori kami dan kali ini pergi ke
termasuk.
Dan jika saya lakukan ls di sana, anda akan melihat tiga fail yang seperti Set Masalah 7.
Dan mari kita lihat yang cepat, misalnya, di config.php.
Di sana, adalah lebih sedikit garis daripada sebelumnya, dan ia
seolah-olah fail ini termasuk constants.php dan functions.php.
Kami menggunakan yang sedikit berbeza teknik kali ini untuk benar-benar
menentukan fail ini berada relatif untuk direktori semasa __ DIR__
mewakili apa direktori ini fail, config.php, adalah dirinya dalam.
Jadi ini adalah lebih cara jelas menyatakan
apa fail lain yang anda ingin memerlukan.
>> Sekarang jika saya menutup fail ini dan membuka constants.php sebaliknya,
anda akan melihat fail yang sangat mengingatkan Masalah untuk Set 7 dan juga, walaupun
dengan pangkalan data yang berbeza dipanggil pset8.
Akhir sekali, dalam functions.php, kita akan melihat hanya satu fungsi
masa ini dipanggil pertanyaan.
Ini adalah hampir sama kecuali kita mengendalikan kesilapan kali ini sedikit
berbeza, tetapi ia adalah penggunaan yang sama seperti dalam masalah menetapkan tujuh.
>> Sekarang mari kita kembali ke dalam pset8 kami direktori, pergi ke awam, dan di sana
jika saya lakukan ls, anda akan melihat this-- articles.php, index.html, search.php,
dan update.php-- semua fail.
Dan kemudian fon css, img, dan Direktori js agak seperti pset7.
>> Mari kita lihat pada index.html, yang
akan menjadi benar-benar yang pintu masuk ke smashup itu.
Sekarang dalam index.html, anda akan melihat keseluruhan sekumpulan elemen pautan di kepala,
secara khusus, untuk bootstrap untuk kita sendiri CSS diikuti oleh sejumlah besar skrip
tag untuk perkara-perkara seperti peta, API sendiri, penanda khas dengan label
utiliti yang telah dinyatakan dalam spesifikasi boleh didapati untuk anda,
jQuery sendiri, bootstrap sendiri, dan perpustakaan lain
dipanggil garis yang kita bercakap tentang dalam spec.
Underscore.js seperti jquery.js sebuah perpustakaan JavaScript
yang mempunyai sejumlah besar fungsi bahawa ramai orang dalam hasrat dunia
wujud dalam dirinya JavaScript.
Jadi semua ini adalah sebenarnya cukup popular.
Kami juga telah disebut typeahead yang merupakan perpustakaan yang
adakah itu autoselesai jatuh turun dan akhirnya pautan ke JavaScript kami sendiri.
>> Sementara itu, dan mungkin bersyukur, Mashup ini
didorong oleh yang sikit HTML turun di sini di bahagian bawah.
Notis bahawa kami telah dinyatakan dalam sebuah div badan kita cecair-bekas kelas.
Ini, setiap bootstrap ini dokumentasi, hanya
bermakna div ini akan mengisi port pandang atau tetingkap pelayar sepenuhnya.
>> Sementara itu, di bawah yang kita ada div yang yang yang dibuka dan ditutup serta-merta
dengan ID yang unik peta kanvas.
Ini sekarang adalah dari Google Peta dokumentasi
untuk API, di mana saya hanya perlu mempunyai div kosong ke dalam yang menyuntik,
akhirnya, seorang Peta Google sebenar.
Tetapi lebih kepada yang dalam hanya sedikit.
>> Akhir sekali, terdapat bentuk yang bahagian dalam sini yang
Laksana kotak teks di bahagian atas kiri di muka kita untuk mencari.
Perhatikan bahawa kita telah menggunakan sedikit bootstrap
di sini too-- perkara seperti bentuk-bentuk dalam baris dan kumpulan.
Kami telah diberikan bekas ID unik bentuk.
Dan kemudian, akhirnya, saya benar-benar mempunyai jenis input, yang cukup akrab,
yang ID adalah q.
Hanya konvensyen.
Q untuk query-- boleh mempunyai telah dipanggil apa-apa.
Kemudian pemegang tempat itu, Sementara itu, adalah bandar atau negeri,
dan poskod yang anda mungkin ingat melihat dalam Mashup kami demo awal.
Mari kita menutup fail ini.
>> Sekarang kita lihat pada fail PHP yang menanti dan kemudian fail JavaScript.
Dalam fail PHP kita, sudah tentu kita telah dilaksanakan untuk anda,
misalnya, kemas kini.
Update.php-- kita tidak akan menghabiskan besar jumlah masa pada here-- secara ringkas
adalah fail yang kami Kod JavaScript akan
untuk menghubungi melalui AJAX yang teknik tak segerak itulah
dibina ke dalam JavaScript hari ini itulah akan membolehkan kita untuk meminta update.php
untuk maklumat lanjut.
>> Secara khusus, bila-bila masa pengguna drags peta
atau memberi carian yang melompat pengguna ke lokasi yang lain,
kod JavaScript kami, seperti yang kita tidak lama lagi akan melihat, adalah
akan memanggil update.php dan meminta 10 atau jadi penanda
dalam viewport berasaskan pada koordinat GPS
daripada bahagian atas dan bawah penjuru peta itu.
Kemudian kita boleh repopulate peta sekarang pengguna telah bergerak skrin dalam perintah
untuk melihat 10 mungkin baru penanda bagi bandar-bandar yang berbeza.
Sementara itu, fail ini akhirnya akan melaksanakan pertanyaan SQL
terhadap pangkalan data kami tempat meja yang dipanggil
akan kembali mereka 10 atau kurang lokasi.
>> Sementara itu, dalam articles.php, merupakan satu lagi memfailkan kami telah ditulis keseluruhannya.
Ia adalah hampir sama dalam semangat untuk Fungsi lookup Set Masalah 7 ini,
yang dihubungi Yahoo Kewangan untuk anda.
Fail ini kenalan Google News untuk anda, akhirnya menarik
yang boleh dibaca oleh mesin version-- dalam sesuatu
dipanggil RSS format-- berita untuk Cambridge atau Beverly Hills
atau apa sahaja bandar yang telah anda cari untuk berdasarkan geoparameter itu.
Kami menghuraikan bahawa RSS, yang hanya jenis bahasa markup dipanggil XML,
dan kemudian kita sebenarnya kembalikan kepada penyemak imbas anda
dan kod JavaScript anda, secara khusus, dalam format yang dipanggil
JSON, JavaScript Objek notasi.
Sekarang anda akan melihat dalam specification-- kami tunjukkan anda
bagaimana anda sebenarnya boleh melihat beberapa back-- kedatangan JSON
bahawa fungsi ini akhirnya membolehkan anda menempatkan penduduk yang menu pop jadi
bahawa apabila anda klik pada penanda di peta
anda sebenarnya melihat sejumlah besar peluru, setiap yang
pautan kepada artikel.
>> Sekarang mari kita lihat pada terkini File PHP yang, mujurlah, tidak
mempunyai banyak berlaku on-- hanya TODO cukup besar.
Sekarang fail ini mengisytiharkan array dipanggil tempat.
Dan kemudian akhirnya cetakan yang pelbagai dalam JSON format--
cantik-mencetaknya hanya supaya perkara yang lebih mudah untuk debug.
Malangnya, dalam pertengahan terdapat TODO ini,
yang memerlukan anda untuk mencari pangkalan data bagi tempat-tempat yang sepadan geo HTTP
parameter.
>> Dan sesungguhnya, ini akan menjadi salah satu challenges-- anda
untuk melaksanakan fungsi ini di sini supaya apabila anda menghubungi fail ini dengan
URL seperti carian. php? geo = sesuatu, kod anda akhirnya akan mengembalikan JSON
pelbagai semua tempat di anda jadual pangkalan data yang sesuai dengan input itu.
Jadi jika jenis pengguna di Cambridge, fail anda di sini search.php
akhirnya kembali pelbagai JSON untuk semua perlawanan untuk Cambridge,
yang mungkin berada di Massachusetts tetapi boleh menjadi lebih mana-mana sahaja.
>> Akhir sekali, mari kita lihat pada dua fail yang ultimately-- statik
fail CSS anda dan fail JavaScript anda.
Jika saya pergi ke direktori CSS kami, ada sejumlah besar fail ada,
tetapi kebanyakan mereka adalah perpustakaan.
Saya akan melihat, secara khusus, di styles.css,
yang CSS global kami sendiri itulah akan menyesuaikan dgn mode Mashup ini keseluruhannya.
Saya akan serahkan kepada anda untuk membaca keseluruhan komen-komen di sini, tetapi, secara ringkas,
ini adalah CSS yang memastikan kami Mashup, secara lalai di luar kotak,
kelihatan betul-betul cara kita mahu it-- dengan peta mengisi pelabuhan pandangan
dan dengan carian sehingga kotak di sebelah kiri atas.
Kami juga telah mengambil kebebasan stylizing yang typeahead jatuh turun
Menu sedikit juga.
>> Fail yang paling penting mungkin kerana masalah ini ditetapkan
adalah salah satu ini lepas, scripts.js.
Di dalam direktori JS anda adalah lebih fail.
Kesemua mereka adalah fail perpustakaan kecuali yang satu ini, scripts.js.
Jika kita membuka sehingga ini, mari kita mengambil kami pelancongan akhir melalui fungsi-fungsi yang
dibina ke dalam fail ini untuk anda dan perhatian panggilan
kepada todos yang mendatang.
>> Di bahagian atas gambar ini, tiga pembolehubah global.
Satu untuk peta, yang akan menjadi rujukan kepada peta Google kami.
Anda boleh memikirkan ia semacam sebagai penunjuk.
Sementara itu, kami mempunyai lain pembolehubah global
dipanggil info, yang muncul untuk menjadi menyimpan nilai pulangan panggilan
untuk google.maps.InfoWindow baru.
JavaScript menyokong objek yang yang hampir sama dalam semangat untuk tupang.
Dan apa baris ini untuk tujuan kami lakukan
mewujudkan satu maklumat baru tetingkap dalam memori dan kemudian
menjaga sekitar rujukan kepadanya dalam pembolehubah yang dipanggil Maklumat.
Dan di antara mereka, Sementara itu, adalah apa yang kelihatan
menjadi JavaScript kosong pelbagai dipanggil penanda.
Semua orang-orang ikon akhbar, atau anda mungkin memilih ikon lain sama sekali,
akan disimpan akhirnya dalam pelbagai ini
supaya kita boleh dengan mudah menambah peta dan mengeluarkannya dari peta.
>> Sekarang mari kita tatal ke bawah sedikit dan jagoan
melalui kod yang akan menjadi dilaksanakan sebaik sahaja DOM atau dokumen
model objek atau Laman dirinya bersedia.
Ingat bahawa sintaks ini di sini hanya menetapkan
bahawa kod berikut hendaklah dilaksanakan hanya
apabila pelayar telah selesai memuatkan segala sesuatu yang lain.
>> Kami pertama mengisytiharkan sejumlah besar gaya,
yang berakhir stylizing peta seperti spec.
Kami kemudian mengisytiharkan sejumlah besar pilihan,
yang selanjutnya menyesuaikan Google peta yang kami akan membenamkan.
Kami kemudian gunakan sedikit kod jQuery, yang dijelaskan dalam detail sedikit lebih
dalam spec, untuk merebut bahawa unsur, peta-kanvas
bahawa kita begitu dikenal pasti secara unik.
Dan kemudian baris ini di sini adalah apa yang seolah-olah ajaib memberikan kami
peta Google di dalam permohonan kita sendiri,
menyimpan rujukan dengannya dalam pembolehubah yang dipanggil peta.
>> Akhir sekali, turun di sini kita mendaftar apa yang dikenali sebagai pendengar yang.
Fikirkan cara back--, cara back-- untuk minggu sifar dalam CS50
apabila kita memandang Gores dan sokongan melalui berjalan-jalan
melalui untuk perkara-perkara yang dipanggil acara dan siaran.
Anda mungkin tidak digunakan sendiri, tetapi ia
mekanisme di mana satu pelayar dalam kes ini
boleh mendapatkan perhatian kita ketika itu bersedia untuk benar-benar melaksanakan beberapa kod.
Dalam kes ini, ia akan mendengar untuk peta untuk sebuah acara yang dipanggil terbiar.
Ini bermakna bahawa pelayar yang mempunyai selesai memuatkan Peta Google.
Pada ketika ini fungsi yang dipanggil konfigur harus akhirnya
dilaksanakan.
Fungsi itu, mengkonfigurasi, kita akan melihat, ditulis oleh kami.
>> Sekarang turun di sini adalah fungsi yang bahawa, malangnya,
hanya penanda TODO add.
Per spec. anda akan memerlukan untuk menulis kod yang sebenarnya
menambah marker-- sama ada ia kelihatan seperti surat khabar, atau jelujur ibu jari,
atau sesuatu else-- untuk peta Google.
Di sini kini adalah fungsi yang dipanggil konfigur.
Saya akan serahkan kepada anda untuk membaca melalui ini dengan lebih terperinci,
tetapi sedar bahawa kita menambah sekumpulan lebih Pendengar
supaya kita boleh melaksanakan kod apabila pengguna klik pada dan drags peta.
Kami juga mempunyai kod di sini bahawa kepada asal yang typeahead plugin
supaya jatuh turun Menu sebenarnya berfungsi.
>> Tetapi mari kita memberi tumpuan kepada hanya satu beberapa tempat di sini.
Khususnya, ini lakukan di sini.
Saya akan menangguhkan kepada talian yang dokumentasi dan spesifikasi yang
untuk mengisi dalam TODO ini.
Tetapi secara ringkas, perpustakaan ini typeahead membolehkan anda untuk lulus
dalam apa yang umumnya dikenali sebagai templat, yang mempunyai beberapa pemegang tempat pembolehubah
hampir sama dalam semangat untuk printf ini%. * s.
Tetapi dalam kes ini, template setiap spec yang
membolehkan anda untuk menentukan apa pembolehubah anda mahu
untuk menyuntik daripada data yang yang datang kembali dari sesuatu seperti PHP
fail yang telah anda tulis yang mengeluarkan output JSON.
>> Sekarang turun di sini sedar bahawa kita adalah mendengar untuk pilihan typeahead
apabila pengguna sebenarnya menjalankan yang mencari dan memilih nilai.
Ini adalah bagaimana kita sebenarnya akan mendengar bahawa
dan melaksanakan beberapa kod hasilnya.
Kemudian kami terus mengkonfigurasi Mashup yang hanya sedikit.
Dan, akhirnya, kita panggil fungsi update.
Ia mengemas kini penanda pada skrin.
Lanjut mengenai bahawa dalam seketika.
Sementara itu, terdapat beberapa fungsi kecil di sini.
Satu di antaranya adalah hideInfo yang hanya menutup InfoWindow.
Fungsi yang lain di sini, yang akhirnya tidak akan menjadi terlalu panjang, keluarkan penanda.
Itu akan membatalkan apa sahaja fungsi penanda add anda tidak.
Dan kemudian turun di sini adalah carian.
Dan yang satu ini adalah menarik kerana kita telah menulis kod JavaScript yang itu
akan bercakap kepada search.php pada pelayan dan kembali beberapa tindak balas.
>> Anda, sudah tentu, akan masih perlu melaksanakan search.php,
tetapi kami telah melaksanakan Kod JavaScript itulah
akan mengendalikan sebenarnya berbayar mencari dari kotak teks.
Khususnya, notis bahawa fungsi ini di sini,
carian, tidak memanggil search.php melalui kaedah yang dipanggil
mendapatkan JSON, yang kita lihat dalam kuliah.
Dan sintaks di sini adalah sedikit berbeza
dari kuliah kerana kami menggunakan jQuery dipanggil muka janji.
Lebih banyak yang di dalam spec.
Ini bermakna untuk kami tujuan sekarang bahawa terdapat
dua fungsi khas kami perlu memanggil dengan tatatanda dot
di sini serta-merta selepas memanggil mendapatkan JSON.
Satu dipanggil dilakukan.
Satu dipanggil gagal.
Anda boleh memikirkan ini sebagai pengendali kejayaan
dan pengendali kegagalan hanya dalam kes sesuatu yang tidak kena.
>> Sekarang mari kita lihat yang lalu beberapa fungsi dalam fail ini.
Down di sini adalah fungsi yang dipanggil showInfo, yang
menunjukkan maklumat dalam salah satu info sedikit tingkap yang boleh
timbul apabila pengguna klik penanda.
Down di sini lagi adalah bahawa fungsi kemas kini
yang kami telah melaksanakan untuk anda.
Ia menentukan batas-batas peta.
Apakah koordinat GPS yang timur laut dan barat daya sudut di sini.
Kami telah menyediakan beberapa parameter HDP di sini dan kemudian berlalu mereka akhirnya
untuk update.php, yang kita telah juga dilaksanakan untuk anda.
Yang akhirnya mendapat kembali beberapa JSON dari fail yang dipanggil update.php
dan kemudian memindahkan apa-apa penanda pada skrin
dan kemudian lelaran lebih data yang yang kembali
dari update.php, yang lagi hanya pelbagai JSON.
Dan kemudian ia akhirnya menambah penanda untuk setiap tempat-tempat, kegagalan pengendalian
atau kesilapan yang mungkin berlaku dengan baik.
>> Sekarang hanya untuk memberi anda rasa bagaimana anda mungkin pergi tentang debugging projek ini,
menyedari bahawa saya telah dibuka pada memajukan tab ini di sini untuk URL ini,
pset8 / articles.php? geo = 02138.
Kini, sekali lagi, artikel tentang PHP kita dilaksanakan untuk anda
jadi ini tidak begitu banyak apa yang anda boleh menggunakan
untuk debug, tetapi teknik.
Notis bahawa saya telah cari Kod zip Cambridge di sini,
dan saya telah mendapat kembali, sesungguhnya, yang JSON pelbagai objek JSON bahagian dalam yang
dua pautan keys-- dan tajuk.
>> Jadi fungsi ini kerja-kerja sudah untuk anda.
Tetapi teknik ini secara manual akan kepada URL seperti ini untuk sesuatu seperti
search.php? geo = cambridge atau 02138 atau apa sahaja yang pengguna telah ditaip perlu
membuktikan yang tidak ternilai kerana anda, diri anda, cuba untuk memikirkan sama ada tepat atau mengapa
search.php bekerja atau tidak.
>> Akhirnya kemudian, anda mempunyai a todos beberapa di hadapan anda.
Anda akan alat pertama bahawa skrip import yang
membaca dalam us.text ke dalam pangkalan data anda.
Anda kemudian akan memerlukan untuk melaksanakan search.php
supaya ia berkelakuan betul-betul seperti yang dinyatakan.
Anda kemudian akan mahu memberi tumpuan kepada scripts.js
dan akhirnya melaksanakan mereka beberapa todos,
termasuk untuk mengkonfigurasi dan template yang,
menambah penanda, keluarkan penanda, dan kemudian bertahan, tetapi tidak kurangnya, satu
sentuhan peribadi.
>> Setelah anda mempunyai kerja Mashup anda agak seperti kami, matlamat di tangan
adalah untuk anda untuk menambah peribadi sentuh untuk Mashup anda,
apakah itu estetik atau fungsi.
Ambil Mashup yang pernah jadi sedikit ke tahap yang seterusnya.
Selagi anda menolak diri anda di luar kebiasaan anda dengan spec itu sendiri
dan mengambil satu teknik baru, walaupun ia hanya
sesuatu yang estetik seperti mengubah susun atur peta yang anda gunakan,
skop yang kami jangka akan berpuas hati.
Yang kemudian adalah Set Masalah 8 Mashup.
Nantikan lebih dalam spesifikasi dan selamat mencuba
menangani ini, lalu anda Masalah CS50 set lamanya.
>> [Muzik bermain]