[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]