>> [MUSIC CHƠI]
>> DAVID J. Malan: Hello.
Chúng ta hãy đi bộ qua Vấn đề Set 8 Mashup,
đó là sẽ thách thức bạn để vẽ lên các thành tố cho Google Maps
với các yếu tố từ Google News và các mash chúng lại với nhau thành một applet web
cho phép người sử dụng để tìm kiếm một bản đồ cho tin tức địa phương
đến thị trấn cụ thể, các thành phố, và mã zip.
Để làm được điều này, chúng ta sẽ tích hợp một số HTML, CSS, PHP, SQL,
JavaScript, và một kỹ thuật thường được gọi là AJAX để
để tạo ra các giả lập này kinh nghiệm người dùng.
>> Trước tiên hãy cho Google Maps chính nó.
Điều này, tất nhiên, có lẽ một giao diện quen thuộc.
Nhưng nó chỉ ra rằng Google Maps cũng cung cấp một ứng dụng API--
lập trình interface-- qua đó bạn có thể có các yếu tố của Google Maps
và tích hợp chúng vào các ứng dụng của riêng bạn.
Thật vậy, trong suốt này quá trình, bạn sẽ
để tìm một vài URL đặc biệt hữu ích mà
được đề cập trong đặc điểm kỹ thuật cho Problem Set 8,
đặc biệt này Bắt đầu Hướng dẫn hoặc hướng dẫn của Nhà phát triển
cho Google Maps API Version 3 cũng như các API Google Maps JavaScript
tham khảo v3, mà là một chút phức tạp hơn để đọc
nhưng thực sự có tất cả các cấp độ thấp hơn thông tin chi tiết về những gì các chức năng hoặc các phương pháp
và các đối tượng và thuộc tính và các sự kiện có thực sự đến với các API,
rất tinh thần tương tự để [Không nghe thấy] trang.
>> Bây giờ nếu chúng ta có một cái nhìn tại Google News, bạn sẽ thấy
có lẽ thấy một giao diện quen thuộc ở đây.
Nhưng hóa ra bạn cũng có thể tìm kiếm Google News cho khu vực địa lý cụ thể
thông qua một tham số HTTP gọi là địa lý.
Trong thực tế, nếu tôi phóng to lên đây, bạn sẽ thấy rằng
Tôi đang ở news.google.com/news/section?geo=02138.
Và, quả thật, nếu tôi phóng to ra, bạn sẽ thấy rằng tôi là
nhìn vào một trang với một bó toàn bộ quan điểm về Cambridge, Massachusetts.
>> Trong khi đó, nếu tôi thực sự thay đổi URL không phải là một mã zip như thế này,
nhưng một cái gì đó một chút hỗn độn như Cambridge, Massachusetts +,
nơi các cộng là cách bạn mã hóa một nhân vật không gian trong một URL và nhấn Enter,
bạn sẽ thấy rằng tôi thực sự thấy hầu như những tin tức cùng.
Có lẽ đó là một chút khác nhau vì Cambridge thực
có nhiều mã zip.
Bây giờ làm thế nào tôi sẽ biết điều đó và, trên thực tế, làm thế nào tôi có thể bằng cách nào đó
buộc các thành phố và thị trấn để mã zip trong trường hợp tôi
muốn cho phép người sử dụng nhìn lên hai?
Vâng, nó quay ra rằng có một trang web ra có được gọi là
geonames.org đó là một sáng kiến ​​để có
một cơ sở dữ liệu có sẵn miễn phí của tất cả các các loại thông tin địa lý,
không chỉ đối với Mỹ, nhưng cũng cho các nước khác nữa.
Trong thực tế, nếu tôi đi đến URL này ở đây, mà cũng được đề cập trong các vấn đề đặt
đặc điểm kỹ thuật, bạn sẽ thấy nó ba danh sách của một bó toàn bộ các file zip
bất kỳ trong số đó có thể được tải về của bạn.
Trong thực tế, đối với vấn đề này đặt bạn đang đi để tải us.zip.
Bây giờ trong tập tin này, là một tổng thể bó dữ liệu trong định dạng văn bản.
Các tập tin này là rất tương tự như một Comma Separated Values ​​CSV-- file--
nhưng nó thực sự sử dụng tab để phân ranh giới các lĩnh vực.
Bây giờ, trong khi đó, nếu bạn nhìn ở đây vào những gì tôi đã nêu bật,
các trường trong tập tin này sẽ là những thứ như các mã quốc gia,
mã bưu chính, địa danh, và sau đó, trong một số hình thức
hay khác, các quốc gia và các quận, cộng đồng, và nhiều hơn nữa.
Trong thực tế, tôi đã đã tải về tập tin này trước.
Hãy để tôi đi trước và mở nó here-- us.text-- và, thực sự, bạn sẽ thấy
xem nếu tôi di chuyển xuống dòng 16.792 bạn sẽ thấy một vài hồ sơ cho Cambridge,
Massachusetts và mã zip khác nhau của nó.
Quận Những gì bạn cũng thấy có, một số con số mà tôi không thực sự
hiểu, mà còn tất cả các cách trên bên phải,
một số GPS coordinates-- vĩ độ và kinh độ.
Điều này là rất tốt bởi vì một trong các tính năng của Google Maps API
là khả năng phát hiện bạn đang ở đâu về mặt địa lý
về tọa độ GPS.
>> Bây giờ chúng ta hãy bắt đầu tìm hiểu làm thế nào để bắt đầu buộc những thứ cùng nhau.
Chúng tôi đã đưa cho bạn một tổng thể bó mã phân phối,
cũng như cơ sở dữ liệu MySQL.
Trong thực tế, nếu tôi kéo một phpMyAdmin có đã nhập khẩu, như bạn sẽ sớm biết,
pset8.SQL, bạn sẽ thấy một bảng MySQL mà trông như thế này, một trường ID, đất nước
mã, mã bưu điện, tên địa điểm và nhiều hơn nữa.
Các loại tất cả những cột tôi bắt nguồn đơn giản
bằng cách đọc các readme.text nộp ở đây là quy định
cho dù một lĩnh vực là một số nguyên, hoặc varchar hoặc tương tự.
>> Vì vậy, chúng tôi đã tạo cho rằng bảng bạn và đưa cho bạn các lệnh SQL
thực hiện để tạo ra rằng bảng trong cơ sở dữ liệu của riêng bạn,
nhưng có thực sự là không có dữ liệu trong nó.
Thay vào đó, bạn sẽ phải tải us.zip hoặc zip bất kỳ quốc gia
nộp từ URL đó.
Và sau đó bạn sẽ phải viết một kịch bản dòng lệnh trong PHP đó là
sẽ mở ra văn bản tập tin, duyệt qua các dòng của nó,
và sau đó cho mỗi các đường dây làm một chèn
vào mà đặt bảng trong cơ sở dữ liệu MySQL của bạn.
Vì vậy, vào cuối của quá trình này, bạn sẽ thấy đã chạy script mà cuối cùng
chỉ một lần trong lý thuyết.
Trong thực tế có thể bạn sẽ chạy nó một loạt các lần
trong khi cố gắng để sửa chữa các lỗi khác nhau.
>> Cuối cùng, bạn sẽ có một cơ sở dữ liệu thực sự lớn với hàng ngàn
và hàng ngàn hàng địa lý.
Sau đó, bạn sẽ đặt nhập khẩu kịch bản sang một bên khi nó đã làm việc
và cơ sở dữ liệu của bạn là tốt đẹp và chính xác, và sau đó
bạn đang đi để chuyển sang thực thực hiện các mashup tự.
Các mashup là sẽ xem xét một chút gì đó như thế này.
Tại mashup.cs50.net, chúng tôi có một giải pháp nhân viên
trông một chút gì đó như thế này.
Thật vậy, nếu tôi bấm vào tờ báo này biểu tượng cho Cambridge, Massachusetts,
bạn sẽ thấy một sợi biểu tượng một thời gian ngắn và sau đó
một danh sách đặt hàng, một danh sách gạch đầu dòng các bài viết
liên quan đến Cambridge, Massachusetts.
Nếu tôi bấm vào Charlestown, Massachusetts,
Tôi sẽ xem cùng thành đó.
Và Nếu tôi bấm vào Watertown, Massachusetts,
có thể không có bất kỳ Tin từ Watertown,
do đó, bạn sẽ thấy một cái gì đó như ngày tin tức chậm.
>> Bây giờ, trong khi đó, ở phía trên bên trái là một số điều khiển Google Maps quen thuộc
cho phép bạn phóng to ra, pan lên, xuống, trái, phải,
mà còn là một hộp tìm kiếm mà chúng tôi đặt ở đó.
Vì vậy, nếu tôi tìm kiếm, thẳng thắn, chỉ có các mã zip khác tôi biết,
90210, chúng tôi sẽ thực sự thấy Beverly Hills, California.
Khi nhấp vào nó dẫn tôi đến California và cả một bó
tin tức về Beverly Hills.
Bây giờ để ý, quá, những gì xảy ra ở đó.
Nếu tôi tìm kiếm thời gian này cho 02138 hoặc thậm chí Cambridge Massachusetts dấu phẩy hoặc một số
biến thể của chúng, bạn sẽ có được một ít autocomplete thả xuống.
Bây giờ điều này là sử dụng một plugin cho một thư viện được gọi jQuery,
và plugin đó được gọi là typeahead.
Chúng tôi chỉ đơn giản là đọc qua các tài liệu,
đã tải về các tập tin .js tích hợp vào mã phân phối để các bạn
cuối cùng có thể viết code mà đầy rằng menu thả xuống với các ô tô
Lựa chọn hoặc các gợi ý tự động.
>> Bây giờ mã phân phối, mặc dù, rằng bạn nhận được không làm gần như là nhiều.
Bạn nhận được các bản đồ của Google nhúng, và bạn sẽ có được các điều khiển phía trên bên trái,
và bạn nhận được hộp tìm kiếm.
Nhưng nếu tôi gõ một cái gì đó như 02138, không có nơi chưa được tìm thấy.
Vì vậy, đó sẽ là một trong những mục tiêu của chúng tôi ở đây.
Hơn nữa, nếu bạn đi một bước lại và nhìn vào bản đồ,
không có tin tức gì.
Ngay cả khi tôi bấm và kéo, không có dấu hiệu thực sự
xuất hiện các tin tức, vì đó Thách thức là để lại cho bạn là tốt.
>> Chúng ta hãy nhìn rồi vào mã phân phối.
Một khi bạn đã tải về pset8.zip và giải nén nó
vào thư mục vhost của bạn trong CS50 gia dụng,
bạn sẽ thấy những thư mục ở đây bên trong.
Bin-- mà nói chung là viết tắt của nhị phân cho programs-- thực thi
bao gồm, như trong pset7, một số PHP file mà file khác bao gồm,
sau đó công chúng, đó là các tập tin mà cần
để có thể truy cập công khai cho người sử dụng với một trình duyệt.
Chúng ta hãy nhìn vào bin thư mục, và chúng tôi sẽ
thấy rằng có một tập tin ở đó đã gọi là nhập khẩu.
Nếu chúng ta mở này với gedit, chúng ta sẽ thấy đó, không may, không có nhiều
có.
Tất cả đó là có, tuy nhiên, là một công việc ở đầu
trong đó quy định cụ thể mà interpreter-- trong trường hợp này PHP--
nên được sử dụng để thực thực thi tập tin này.
Nhưng sau đó, nơi nó nói TODO là nơi bạn
sẽ cần phải viết một số mã mà có lẽ đòi hỏi cấu hình
tập tin đó trong bao gồm các thư mục như chúng ta đã làm trước đó với các file PHP.
Và sau đó bạn sẽ phải bằng cách nào đó mở lên
us.text mà bạn có lẽ đã giải nén rồi.
Sau đó, bạn sẽ phải duyệt qua các dòng trong tập tin đó,
có lẽ sử dụng một số chức năng đề nghị trong các đặc điểm kỹ thuật.
Sau đó chèn mỗi người đường vào cơ sở dữ liệu MySQL
bằng cách sử dụng các chức năng truy vấn, mà chúng tôi đã cung cấp cho bạn một lần nữa with--
hoặc ít nhất là một biến thể đó trong functions.php,
mà chúng ta sẽ thấy chỉ trong một khoảnh khắc.
>> Bây giờ chúng ta hãy đóng cửa nhập khẩu và quay trở lại thư mục của chúng tôi và lần này đi vào
bao gồm.
Và nếu tôi làm ls ở đó, bạn sẽ thấy ba tập tin khá giống như Problem Set 7.
Và chúng ta hãy có một cái nhìn nhanh chóng, Ví dụ, ở config.php.
Trong đó, có ít dòng hơn trước, và nó
dường như tập tin này bao gồm constants.php và functions.php.
Chúng tôi đang sử dụng một chút khác nhau kỹ thuật trong thời gian này để thực sự
xác định rằng những tập tin này là tương đối vào thư mục hiện __ DIR__
đại diện cho bất kỳ thư mục này file, config.php, bản thân nó trong.
Vì vậy, đây là một chi tiết cách rõ ràng các quy định cụ thể
những tập tin khác mà bạn muốn yêu cầu.
>> Bây giờ nếu tôi đóng tập tin này và mở constants.php thay vào đó,
bạn sẽ thấy một tập tin rất gợi nhớ Vấn đề với Set 7 là tốt, mặc dù
với một cơ sở dữ liệu khác nhau được gọi là pset8.
Cuối cùng, trong functions.php, chúng ta sẽ thấy chỉ là một chức năng
thời gian này được gọi là truy vấn.
Điều này là gần như giống nhau, ngoại trừ chúng tôi xử lý lỗi thời gian này xung quanh một chút
khác nhau, nhưng nó sử dụng là giống như trong vấn đề thiết lập bảy.
>> Bây giờ chúng ta hãy quay trở lại vào pset8 của chúng tôi thư mục, đi vào công chúng, và trong đó
nếu tôi làm ls, bạn sẽ thấy this-- articles.php, index.html, search.php,
và update.php-- tất cả các file.
Và sau đó các phông chữ css, img, và js thư mục khá giống như pset7.
>> Chúng ta hãy nhìn vào index.html, đó là
sẽ thực sự điểm mấu chốt để các smashup.
Bây giờ trong index.html, bạn sẽ thấy toàn bộ bó của các yếu tố liên kết trong đầu,
Cụ thể, đối với bootstrap cho riêng chúng tôi CSS theo sau là một bó toàn bộ kịch bản
tags cho những thứ như các bản đồ, API chính nó, một dấu hiệu đặc biệt với nhãn
tiện ích mà chúng tôi đề cập trong đặc điểm kỹ thuật có sẵn cho bạn,
jQuery chính nó, bootstrap chính nó, và các thư viện khác
được gọi là gạch mà chúng ta nói về trong spec.
Underscore.js như jquery.js là một thư viện JavaScript
rằng có một bó toàn bộ các chức năng mà rất nhiều người trong thế giới mong muốn
tồn tại trong bản thân JavaScript.
Vì vậy, tất cả trong số này là thực tế khá phổ biến.
Chúng tôi cũng đã đề cập typeahead đó là thư viện đó
nào đó autocomplete thả xuống và cuối cùng là một liên kết đến JavaScript của riêng của chúng tôi.
>> Trong khi đó, và có lẽ may mắn thay, mashup này
được thúc đẩy bởi tương đối ít HTML xuống đây ở phía dưới.
Thông báo rằng chúng tôi đã chỉ định một div trong cơ thể của chúng ta về dịch class-container.
Điều này, mỗi bootstrap của tài liệu hướng dẫn, chỉ
có nghĩa là div này sẽ lấp đầy Viewport hoặc cửa sổ của trình duyệt đầy đủ.
>> Trong khi đó, dưới đây chúng ta có một div đó là mở ra và ngay lập tức đóng lại
với ID duy nhất của canvas bản đồ.
Điều này bây giờ là từ Google Tài liệu bản đồ
cho API của nó, nhờ đó mà tôi chỉ đơn giản là cần phải có một div trống vào để chích,
cuối cùng, một Google Maps thực tế.
Nhưng thêm vào đó trong chỉ một chút.
>> Cuối cùng, có một hình thức bên đây mà
thực hiện các hộp văn bản lên trên bên trái trong giao diện của chúng tôi để tìm kiếm.
Chú ý rằng chúng ta đã sử dụng một chút bootstrap
đây too-- những thứ như form-inline và hình thức nhóm.
Chúng tôi đã cho các cựu ID duy nhất của hình thức.
Và sau đó, cuối cùng, tôi thực sự có một loại đầu vào, mà là khá quen thuộc,
có ID là q.
Chỉ cần một quy ước.
Q cho query-- có thể có được gọi là bất cứ điều gì.
Và sau đó giữ chỗ, Trong khi đó, là thành phố, tiểu bang,
và mã bưu chính mà bạn có thể gọi lại nhìn thấy trong mashup của chúng tôi giới thiệu trước đó.
Hãy đóng tập tin này.
>> Bây giờ hãy nhìn vào các tập tin PHP chờ đợi và sau đó các tập tin JavaScript.
Trong các tập tin PHP của chúng tôi, chúng tôi đã đã được thực hiện cho bạn,
Ví dụ, thông tin cập nhật.
Update.php-- chúng tôi sẽ không chi tiêu một lớn lượng thời gian trên here-- trong một nutshell
là tập tin mà chúng tôi Mã JavaScript được đi
để liên hệ qua AJAX kỹ thuật không đồng bộ đó
được xây dựng vào JavaScript những ngày đó sẽ cho phép chúng tôi để hỏi update.php
để biết thêm thông tin.
>> Cụ thể, bất cứ lúc nào người dùng kéo bản đồ
hoặc thực hiện một tìm kiếm mà nhảy người sử dụng một vị trí khác,
mã JavaScript, như chúng ta sẽ sớm thấy, là
sẽ gọi update.php và yêu cầu 10 hoặc để đánh dấu
trong khung nhìn dựa trên các tọa độ GPS
các đỉnh và đáy góc của bản đồ đó.
Sau đó chúng tôi có thể phục hồi lại bản đồ bây giờ người dùng đã chuyển màn hình theo thứ tự
để xem 10 có lẽ mới đánh dấu cho các thị trấn khác nhau.
Trong khi đó, tập tin này là cuối cùng sẽ thực hiện một truy vấn SQL
chống lại cơ sở dữ liệu của chúng tôi bảng gọi là những nơi mà
sẽ trả lại những 10 hoặc ít địa điểm.
>> Trong khi đó, trong articles.php, là một nộp chúng tôi đã viết trong toàn bộ.
Nó rất giống với tinh thần Hàm LOOKUP vấn đề Set 7,
mà liên lạc với Yahoo Tài chính cho bạn.
Tập tin này có liên hệ Google News cho bạn, cuối cùng lấy
một máy có thể đọc version-- trong một cái gì đó
gọi là RSS dưới định dạng của tin tức Cambridge hoặc Beverly Hills
hoặc bất cứ thành phố, bạn đã tìm kiếm cho dựa trên geoparameter đó.
Chúng tôi phân tích rằng RSS, mà chỉ là một là loại ngôn ngữ đánh dấu được gọi là XML,
và sau đó chúng tôi thực sự trả lại cho trình duyệt của bạn
và mã JavaScript của bạn, Cụ thể, trong một định dạng được gọi
JSON, JavaScript Object Notation.
Bây giờ bạn sẽ thấy trong specification-- chúng tôi chỉ cho bạn
làm thế nào bạn thực sự có thể nhìn thấy một số các back-- sắp tới JSON
rằng chức năng này cuối cùng cho phép bạn cư những menu popup để
rằng khi bạn bấm vào điểm đánh dấu trên bản đồ
bạn thực sự thấy cả một bó đạn, mỗi trong số đó
liên kết đến một bài viết.
>> Bây giờ chúng ta hãy nhìn vào một cuối cùng File PHP đó, may mắn thay, không
có nhiều đang xảy on-- chỉ một TODO khá lớn.
Ngay bây giờ tập này tuyên bố một mảng gọi nơi.
Và sau đó cuối cùng in rằng mảng trong JSON dưới định dạng
khá-in nó chỉ như vậy mà điều này là dễ dàng hơn để gỡ lỗi.
Thật không may, trong giữa có TODO này,
trong đó kêu gọi bạn để tìm kiếm cơ sở dữ liệu cho những nơi phù hợp với một địa HTTP
tham số.
>> Và, trên thực tế, điều này là có là một trong challenges-- của bạn
để thực hiện chức năng này tại đây để khi bạn liên hệ với tập tin này với
một URL như tìm kiếm. php? geo = cái gì, mã của bạn cuối cùng sẽ trả về một JSON
mảng của tất cả các nơi trong bạn bảng cơ sở dữ liệu phù hợp với đầu vào đó.
Vì vậy, nếu sử dụng các loại ở Cambridge, tập tin của bạn ở đây search.php
cuối cùng phải trả lại một mảng JSON cho tất cả các trận đấu của Cambridge,
mà có thể là ở Massachusetts nhưng có thể còn bất cứ nơi nào khác.
>> Cuối cùng, chúng ta hãy nhìn vào hai tập tin được ultimately-- tĩnh
tập tin CSS và JavaScript tập tin của bạn.
Nếu tôi đi vào thư mục CSS của chúng tôi, có một bó toàn bộ các file đó,
nhưng hầu hết trong số đó là các thư viện.
Tôi sẽ có một cái nhìn, Cụ thể, tại styles.css,
đó là CSS toàn cầu của chúng tôi đó là đi phong cách hóa toàn bộ mashup này.
Tôi sẽ để lại nó cho bạn đọc qua các ý kiến ​​này, nhưng, trong một nutshell,
đây là CSS để đảm bảo rằng chúng tôi mashup, theo mặc định ra khỏi hộp,
trông giống hệt cách chúng ta muốn it-- với bản đồ điền vào các cổng xem
và với các tìm kiếm hộp lên ở phía trên bên trái.
Chúng tôi cũng đã hiểu sự tự do stylizing rằng typeahead dropdown
đơn một chút là tốt.
>> Các tập tin quan trọng nhất có lẽ đối với vấn đề này đặt
là người cuối cùng này, scripts.js.
Bên trong thư mục JS của bạn thậm chí còn nhiều file.
Tất cả trong số họ là các tập tin thư viện trừ trường hợp này, scripts.js.
Nếu chúng ta mở này lên, chúng ta hãy chúng tôi tour du lịch cuối cùng thông qua các chức năng mà
được xây dựng vào tập tin này cho bạn và sự quan tâm cuộc gọi
để các todos phía trước.
>> Ở phía trên cùng của tập tin này, ba biến toàn cầu.
Một cho một bản đồ, mà là có là một tham chiếu đến bản đồ Google của chúng tôi.
Bạn có thể nghĩ về nó loại như một con trỏ.
Trong khi đó, chúng ta có một biến toàn cầu
được gọi là thông tin, mà dường như là lưu trữ các giá trị trở lại của một cuộc gọi
để google.maps.InfoWindow mới.
JavaScript hỗ trợ các đối tượng đó rất tinh thần tương tự Struts.
Và những dòng này cho mục đích của chúng tôi là làm
đang tạo ra một thông tin mới cửa sổ trong bộ nhớ và sau đó
giữ các tài liệu tham khảo sung tại một biến gọi là Info.
Và ở giữa những người, Trong khi đó, là những gì xuất hiện
là một JavaScript trống mảng được gọi là dấu hiệu.
Tất cả những biểu tượng báo, hoặc bạn có thể chọn biểu tượng hoàn toàn khác,
sẽ được lưu trữ cuối cùng trong mảng này
để chúng ta có thể dễ dàng thêm vào bản đồ và loại bỏ chúng khỏi bản đồ.
>> Bây giờ chúng ta hãy di chuyển xuống một chút và whiz
thông qua các mã đó sẽ được thực hiện ngay khi DOM hoặc tài liệu
mô hình đối tượng hoặc trang riêng của mình đã sẵn sàng.
Nhớ lại rằng cú pháp này ở đây chỉ đơn giản là quy định cụ thể
các mã sau đây nên chỉ được thực thi
khi trình duyệt đã hoàn thành tải mọi thứ khác.
>> Đầu tiên chúng ta khai báo một bó toàn bộ các phong cách,
mà kết thúc stylizing bản đồ theo spec.
Sau đó chúng ta khai báo một bó toàn bộ các tùy chọn,
mà hơn nữa tùy chỉnh của Google bản đồ mà chúng tôi đang về để nhúng.
Sau đó chúng tôi sử dụng một chút mã jQuery, được giải thích trong một chi tiết hơn chút
trong spec, để lấy yếu tố đó, bản đồ vải
rằng chúng ta nên xác định duy nhất.
Và sau đó dòng này ở đây là những gì có vẻ kỳ diệu cho chúng tôi
một bản đồ Google bên trong ứng dụng của riêng của chúng tôi,
lưu trữ một tham chiếu quan trong đó biến được gọi là bản đồ.
>> Cuối cùng, xuống đây chúng ta đăng ký những gì được gọi là một người biết lắng nghe.
Hãy nghĩ cách back--, cách back-- tuần zero trong CS50
khi chúng ta nhìn vào và Scratch hỗ trợ thông qua một đi bộ
thông qua cho điều được gọi là các sự kiện và chương trình phát sóng.
Bạn có thể không sử dụng nó cho mình, nhưng nó
một cơ chế theo đó một Trình duyệt trong trường hợp này
có thể nhận được sự chú ý của chúng tôi khi đó là sẵn sàng để thực sự thực hiện một số mã.
Trong trường hợp này, nó sẽ lắng nghe để bản đồ cho một sự kiện được gọi là nhàn rỗi.
Điều này có nghĩa rằng trình duyệt có xong tải bản đồ Google.
Tại thời điểm này, một chức năng gọi là configure nên cuối cùng
được thực thi.
Đó là chức năng, cấu hình, chúng ta sẽ thấy, được viết bởi chúng tôi.
>> Bây giờ xuống đây là một chức năng đó, không may,
chỉ là một TODO add marker.
Mỗi spec. bạn sẽ cần để viết code mà thực sự
thêm một marker-- dù nó trông như một tờ báo, hoặc một chiến thuật ngón tay cái,
hoặc một cái gì đó để else-- bản đồ Google.
Ở đây bây giờ là chức năng mà gọi là cấu hình.
Tôi sẽ để lại nó cho bạn đọc thông qua điều này một cách chi tiết hơn,
nhưng nhận ra rằng chúng ta thêm Thính giả một bó hơn
để chúng tôi có thể thực thi mã khi người dùng nhấp vào và kéo bản đồ.
Chúng tôi cũng có mã ở đây mà khởi tạo mà cắm typeahead
để thả xuống đơn thực sự hoạt động.
>> Nhưng chúng ta hãy tập trung vào chỉ một vài nơi đây.
Cụ thể, điều này làm ở đây.
Tôi sẽ hoãn đến trực tuyến tài liệu và các đặc điểm kỹ thuật
làm thế nào để điền vào TODO này.
Nói tóm lại, thư viện này typeahead phép bạn vượt qua
trong những gì thường được biết đến như một mẫu, trong đó có một số placeholders biến
rất giống với tinh thần của printf%. * s.
Nhưng trong trường hợp này, mẫu mỗi spec
cho phép bạn chỉ định những gì bạn muốn biến
tiêm từ dữ liệu đó đi trở lại từ một cái gì đó giống như PHP
các tập tin mà bạn đã viết được phát ra JSON đầu ra.
>> Bây giờ xuống đây nhận ra rằng chúng ta là nghe cho các lựa chọn typeahead
khi người sử dụng thực sự tiến hành một tìm kiếm và lựa chọn một giá trị.
Đây là cách chúng tôi thực sự sẽ nghe cho rằng
và thực hiện một số mã như một kết quả.
Sau đó chúng tôi tiếp tục cấu hình các mashup chỉ một chút.
Và, cuối cùng, chúng ta gọi cập nhật chức năng này.
Nó cập nhật các dấu hiệu trên màn hình.
Thêm vào đó trong một lúc.
Trong khi đó, có một vài chức năng nhỏ ở đây.
Một trong số đó là hideInfo mà chỉ đơn giản là đóng InfoWindow.
Một chức năng ở đây, mà cuối cùng sẽ không quá dài, loại bỏ các dấu hiệu.
Điều đó sẽ hoàn tác bất cứ điều gì Chức năng đánh dấu add của bạn không.
Và sau đó xuống ở đây là tìm kiếm.
Và điều này rất thú vị bởi chúng tôi đã viết mã JavaScript đó là
sẽ nói chuyện với search.php trên máy chủ và nhận được một số phản ứng lại.
>> Bạn, tất nhiên, sẽ vẫn còn cần phải thực hiện search.php,
nhưng chúng tôi đã thực hiện các Mã JavaScript đó là
sẽ xử lý thực sự thực hiện tìm kiếm từ đó hộp văn bản.
Đặc biệt, thông báo rằng chức năng này ở đây,
tìm kiếm, không gọi search.php bằng một phương pháp gọi là
được JSON, mà chúng ta đã thấy trong bài giảng.
Và cú pháp ở đây là một chút khác nhau
từ bài giảng trong đó chúng ta đang sử dụng jQuery cái gọi là giao diện lời hứa.
Thêm vào đó trong spec.
Điều này đơn giản có nghĩa là cho chúng tôi mục đích bây giờ mà có
hai chức năng đặc biệt chúng tôi cần phải gọi với ký hiệu dấu chấm
đây ngay lập tức sau khi gọi được JSON.
Một được gọi là done.
Một được gọi là thất bại.
Bạn có thể nghĩ về những như là xử lý thành công
và xử lý thất bại chỉ trong trường hợp bị sai.
>> Bây giờ chúng ta hãy nhìn vào các cuối cùng vài chức năng trong tập tin này.
Xuống đây là một chức năng gọi showInfo, mà
hiển thị thông tin theo một trong những ít cửa sổ thông tin mà
bật lên khi người dùng nhấp vào một điểm đánh dấu.
Xuống đây nữa là rằng chức năng cập nhật
mà chúng tôi đã thực hiện cho bạn.
Nó xác định các giới hạn của bản đồ.
Các tọa độ GPS của nó là gì phía đông bắc và tây nam góc ở đây.
Chúng tôi đã chuẩn bị một số thông số HDP ở đây và sau đó vượt qua họ cuối cùng
để update.php, mà chúng tôi đã cũng thực hiện cho bạn.
Mà cuối cùng sẽ trở lại một số JSON từ tập tin gọi là update.php
và sau đó loại bỏ bất kỳ đánh dấu trên màn hình
và sau đó lặp lại trên các dữ liệu đó là quay trở lại
từ update.php, mà lại chỉ là một mảng JSON.
Và rồi cuối cùng nó cho biết thêm một dấu hiệu cho mỗi người trong những địa điểm, giải quyết thất bại
hoặc lỗi mà ta sẽ rất tốt xảy ra.
>> Bây giờ chỉ cần để cung cấp cho bạn một hương vị như thế nào bạn có thể đi về gỡ lỗi dự án này,
nhận ra rằng tôi đã mở trong tiến tab này ở đây để URL này,
pset8 / articles.php? geo = 02138.
Bây giờ, một lần nữa, bài viết về PHP chúng tôi thực hiện cho bạn
vì vậy đây không phải là quá nhiều những gì bạn sẽ được sử
để gỡ lỗi, nhưng đúng hơn là kỹ thuật.
Chú ý rằng tôi đã tìm kiếm Zip code Cambridge ở đây,
và tôi đã nhận được trở lại, thực sự, một JSON mảng các đối tượng JSON bên trong đó
hai link keys-- và tiêu đề.
>> Vì vậy, chức năng này công trình đã cho bạn.
Nhưng kỹ thuật này trong tay đi đến một URL như thế này cho một cái gì đó như
search.php? geo = cambridge hoặc 02138 hoặc bất cứ điều gì người dùng gõ vào nên
chứng minh vô giá như bạn, mình, hãy thử để tìm ra chính xác hay lý do tại sao
search.php làm việc hay không.
>> Cuối cùng sau đó, bạn có một vài todos phía trước của bạn.
Bạn đang đi đến dụng cụ đầu tiên rằng kịch bản nhập khẩu
đọc trong us.text vào cơ sở dữ liệu của bạn.
Sau đó bạn sẽ cần để thực hiện search.php
để nó cư xử chính xác theo quy định.
Sau đó bạn sẽ muốn tập trung vào scripts.js
và cuối cùng là thực hiện những cặp vợ chồng của Todos,
bao gồm cả cấu hình và mẫu mà,
thêm dấu, loại bỏ các dấu hiệu, và sau đó kéo dài, nhưng không kém, một
liên lạc cá nhân.
>> Một khi bạn đã làm việc mashup của bạn khá giống như chúng ta, mục tiêu trong tầm tay
là cho bạn thêm một cá nhân chạm đến mashup của bạn,
cho dù đó là thẩm mỹ hoặc chức năng.
Đi mashup bao giờ nên nhẹ đến cấp độ tiếp theo.
Vì vậy, miễn là bạn tự đẩy mình vượt quen thuộc của bạn với spec chính
và nhặt một kỹ thuật mới, thậm chí nếu nó chỉ là
một cái gì đó mang tính thẩm mỹ như thay đổi bố trí của các bản đồ mà bạn đang sử dụng,
phạm vi mà chúng ta mong đợi sẽ được hài lòng.
Đó là vấn đề sau đó Set 8 Mashup.
Hãy theo dõi để biết thêm trong đặc điểm kỹ thuật và tốt nhất của may mắn
giải quyết này, cuối cùng bạn Vấn đề đặt CS50 bao giờ hết.
>> [MUSIC CHƠI]