[عزف الموسيقى] 

DAVID J. مالان: مرحبا. دعونا نلقي المشي من خلال مشكلة تعيين 8 المزج، وهو ذاهب الى تحدي لك ل تستمد من عناصر لخرائط جوجل مع عناصر من أخبار Google والهريس منهم معا في بريمج على شبكة الإنترنت أن يسمح للمستخدم للبحث خريطة لأخبار محلية إلى مدن محددة، المدن، ورموز البريدي. للقيام بذلك، ونحن في طريقنا ل دمج بعض HTML، CSS، PHP، SQL، وجافا سكريبت، وتقنية المعروف عموما باسم AJAX من أجل لإنشاء هذا غامرة تجربة المستخدم. 

دعونا أولا لخرائط جوجل نفسها. هذا، بطبيعة الحال، وربما واجهة مألوفة. ولكن تبين أن خرائط جوجل كما يوفر تطبيق API-- برمجة interface-- عبر التي يمكنك أن تأخذ عناصر من خرائط جوجل ودمجها في التطبيقات الخاصة بك. في الواقع، في جميع أنحاء هذا عملية، وأنت تسير العثور على زوجين من عناوين المواقع مفيدة بشكل خاص أن وذكر في مواصفات لمشكلة تعيين 8، على وجه التحديد هذا الابتداء توجيه أو دليل المطور لخرائط جوجل API الإصدار 3 وكذلك كما API خرائط غوغل جافا سكريبت إشارة V3، وهو أكثر قليلا غامضة لقراءة ولكن في الواقع كل من المستوى الأدنى تفاصيل حول ما هي الوظائف أو طرق والأشياء والممتلكات و الأحداث تأتي في الواقع مع API، مشابهة جدا في روح ل(غير مسموع) صفحات. 

الآن إذا كنا نلقي نظرة في أخبار Google، عليك ربما نرى واجهة مألوفة هنا. ولكن اتضح يمكنك أيضا البحث عن أخبار Google لمناطق جغرافية محددة عبر المعلمة HTTP دعا الجغرافية. في الواقع، إذا كنت تكبير هنا، سترى أن أنا في news.google.com/news/section؟geo=02138. و، في الواقع، إذا كنت تكبير خارج، سترى أن أنا تبحث في صفحة مع مجموعة كاملة من وجهات نظر حول كامبريدج، ماساشوستس. 

وفي الوقت نفسه، إذا قمت بتغيير الواقع URL لا يكون الرمز البريدي مثل هذا، ولكن شيئا قليلا ميسييه مثل كامبريدج، ماساتشوستس +، حيث زائد هي الطريقة التي ترميز حرف مسافة في URL وهاهنا، سترى أن أنا فعلا نرى تقريبا نفس الأخبار. ربما الأمر مختلف قليلا لأن كامبريدج الواقع لديها رموز البريدي متعددة. الآن كيف لي أن أعرف أن و، في الواقع، كيف يمكن لي بطريقة أو بأخرى ربط المدن والبلدات إلى رموز البريدي في حالة I تريد أن تسمح للمستخدم للبحث عن أي؟ حسنا، اتضح أن هناك موقع على شبكة الانترنت الى هناك ودعا geonames.org وهو مبادرة لديها قاعدة بيانات متاحة بحرية للجميع أنواع المعلومات الجغرافية، ليس فقط بالنسبة للولايات المتحدة، ولكن أيضا بالنسبة للبلدان الأخرى كذلك. في الواقع، إذا ذهبت إلى هذا URL هنا، والتي وذكر أيضا في مشكلة تحديد مواصفات، سترى ذلك ثلاث قائمة مجموعة كاملة من الملفات المضغوطة أي من التي يمكن تحميلها من قبلك. في الواقع، بالنسبة لهذه المشكلة المحددة وأنت تسير لتحميل us.zip. الآن في هذا الملف، هو كل لا يتجزأ مجموعة من البيانات في شكل النص. الملفات هي مشابهة جدا ل CSV-- المفصولة بفواصل القيم الملف-- ولكنه يستخدم في الواقع علامات التبويب لترسيم المجالات. الآن، وفي الوقت نفسه، إذا نظرتم هنا في ما كنت سلط الضوء، الحقول في هذا الملف تسير أن تكون أشياء مثل رموز البلد، الرموز البريدية، أسماء الأماكن، وبعد ذلك، في شكل من الأشكال أو غيرها، والدول والمقاطعات، المجتمعات، وأكثر من ذلك. في الواقع، لقد قمت بالفعل تحميل هذا الملف مقدما. اسمحوا لي المضي قدما وفتحه here-- us.text--، بل وعليك أرى إن كنت انتقل لأسفل إلى خط 16792 سترى بعض السجلات للكامبريدج، ماساتشوستس ومختلف رموز البريدي به. ما ترى أيضا هناك مقاطعة، بعض الأرقام التي أنا لا حقا نفهم، ولكن أيضا جميع الطريق على اليمين، بعض GPS coordinates-- خطوط الطول والعرض. هذا شيء عظيم لأن أحد ملامح خرائط جوجل API هي القدرة على كشف أين أنت جغرافيا من حيث الإحداثيات GPS. 

الآن دعونا نبدأ في معرفة كيفية بدء ربط هذه الأشياء معا. لقد أعطاك ككل مجموعة من التعليمات البرمجية التوزيع، وكذلك قاعدة بيانات MySQL. في الواقع، إذا كنت سحب بريس وجود المستوردة بالفعل، كما كنت قريبا، pset8.SQL، سترى طاولة الخلية التي يبدو مثل هذا، حقل ID، بلد الرمز، الرمز البريدي، واسم المكان، وأكثر من ذلك. أنواع كل تلك أعمدة I اشتقاق ببساطة من خلال قراءة readme.text ملف هنا المحدد ما إذا كان حقل عدد صحيح، أو VARCHAR أو ما شابه ذلك. 

لذلك قمنا بإنشاء هذا الجدول ل لك ويعطيك الأوامر SQL لتنفيذ لإنشاء هذا الجدول في قاعدة البيانات الخاصة بك، ولكن هناك في الواقع أي بيانات في ذلك حتى الآن. بدلا من ذلك، وأنت تسير لدينا ل تحميل us.zip أو الرمز البريدي أي بلد ملف من هذا URL هناك. ثم كنت تريد الذهاب لديك لكتابة السيناريو سطر الأوامر في هذا PHP الذهاب لفتح هذا النص ملف، تكرار عبر خطوطها، ثم لكل من هذه الخطوط القيام إدراج إلى أن يضع الجدول في قاعدة بيانات MySQL الخاص بك. حتى في نهاية هذه العملية، عليك وقد تشغيل هذا البرنامج النصي في نهاية المطاف مرة واحدة فقط من الناحية النظرية. في الواقع عليك ربما تشغيله حفنة من الأوقات بينما كان يحاول إصلاح الخلل المختلفة. 

في نهاية المطاف، وأنت تسير أن يكون لها قاعدة بيانات كبيرة حقا مع الآلاف والآلاف من الصفوف الجغرافية. ثم كنت تريد الذهاب لوضع تلك الواردات النصي جانبا مرة واحدة انها تعمل وقاعدة البيانات الخاصة بك هو لطيف وصحيحة، ومن ثم وأنت تسير للانتقال إلى الواقع تنفيذ المزج نفسه. المزج هو الذهاب الى نظرة شيئا قليلا من هذا القبيل. في mashup.cs50.net، ونحن يكون حلا الموظفين التي تبدو شيئا قليلا من هذا القبيل. في الواقع، إذا كنت اضغط على هذه الصحيفة رمز كامبريدج، ماساشوستس، سترى الغزل أيقونة لفترة وجيزة ثم وأمر قائمة، وهي قائمة نقطية من المقالات تتعلق كامبريدج، ماساشوستس. إذا كنت اضغط على شارلستون، ماساتشوستس، سوف نرى الشيء نفسه بالنسبة لتلك البلدة. وإذا كنت اضغط على ووترتاون بولاية ماساتشوستس، قد لا يكون هناك أي أخبار من ووترتاون، لذلك عليك أن ترى شيئا مثل بطء اليوم الأخبار. 

الآن، وفي الوقت نفسه، في أعلى اليسار هي بعض الضوابط خرائط جوجل مألوفة لتمكنك من تصغير، وعموم أعلى والأسفل واليسار واليمين، ولكن أيضا مربع البحث أن نضع هناك. حتى لو كنت تبحث عن، وبصراحة، آخر الرمز البريدي الوحيد الذي أعرفه، 90210، وسنرى في الواقع بيفرلي هيلز، كاليفورنيا. عند النقر عليها ذلك يقودني إلى كاليفورنيا، ومجموعة كاملة أنباء عن بيفرلي هيلز. الآن نلاحظ، أيضا، ما حدث هناك. لو كنت هذا البحث مرة عن 02138 أو حتى كامبريدج ماساتشوستس فاصلة أو بعض البديل منه، وتحصل على القليل المنسدلة الإكمال التلقائي. الآن هذا هو استخدام البرنامج المساعد لمكتبة دعا مسج، ويسمى هذا البرنامج المساعد typeahead. نقرأ ببساطة من خلال وثائق، تم تنزيلها ملف شبيبة متكامل إلى رمز التوزيع حتى يتسنى لك في نهاية المطاف يمكن كتابة التعليمات البرمجية التي يملأ تلك القائمة المنسدلة مع السيارات اختيارات أو اقتراحات السيارات. 

الآن رمز التوزيع، على الرغم من أن تلقيت لا تفعل ما يقرب من ذلك بكثير. يمكنك الحصول على خريطة جوجل جزءا لا يتجزأ، و يمكنك الحصول على ضوابط أعلى اليسار، وتحصل على مربع البحث. ولكن إذا كنت اكتب شيء من هذا القبيل 02138، لم يتم العثور على الأماكن حتى الان. بحيث سيكون واحد من أهدافنا هنا. وعلاوة على ذلك، إذا كنت تأخذ خطوة الى الوراء والنظر إلى الخريطة نفسها، لا يوجد أخبار على الإطلاق. حتى لو كنت فوق، و السحب، لا علامات الواقع يبدو للحصول على الأخبار لأن ذلك ويترك التحدي لكنت كذلك. 

دعونا نلقي نظرة ثم في كود التوزيع. بمجرد تحميلها pset8.zip ومحلول ذلك إلى دليل عشقتك الخاص بك في الأجهزة CS50، سترى هذه الدلائل هنا في الداخل. Bin-- التي تقف عادة ل المحوله للprograms-- للتنفيذ يشمل، كما هو الحال في pset7، وبعض PHP الملفات التي تشمل ملفات أخرى، ثم الجمهور، الذي هو الملفات التي تحتاج لتكون متاحة للجمهور إلى مستخدم مع متصفح. دعونا نلقي نظرة في بن دليل، وسنقوم نرى أن هناك ملف هناك بالفعل دعا استيراد. إذا فتحنا هذا مع جي إديت، وسنرى التي، للأسف، ليس هناك الكثير هناك. كل ما هناك، رغم ذلك، هو كوخ في أعلى والذي يحدد أي interpreter-- في هذه الحالة PHP-- وينبغي أن تستخدم في الواقع ل تنفيذ هذا الملف. ولكن بعد ذلك حيث تقول TODO هو المكان الذي كنت بحاجة الى الذهاب الى كتابة بعض الرموز التي ربما يتطلب التكوين الملف الذي هو في ويشمل الدليل كما فعلنا من قبل مع ملفات PHP. ثم كنت تريد الذهاب ل لديك لفتح بطريقة ما يصل us.text الذي يفترض وقد محلول بالفعل. ثم وأنت تسير لدينا ل تكرار عبر خطوط في هذا الملف، ربما باستخدام بعض وظائف واقترح في مواصفات. ثم إدراج كل من تلك خطوط في قاعدة بيانات MySQL باستخدام وظيفة الاستعلام، والتي وفرنا لكم مرة أخرى with-- أو على الأقل البديل منه في functions.php، والتي سنرى في مجرد لحظة. 

الآن دعونا إغلاق الاستيراد والعودة إلى لدينا الدليل وهذه المرة يذهب إلى يشمل. وإذا كنت تفعل ليرة سورية هناك، سترى ثلاثة ملفات تماما مثل مشكلة تعيين 7. ودعونا نلقي نظرة سريعة، على سبيل المثال، في ملف config.php. في هناك، هو أقل خطوط من ذي قبل، وأنه يبدو يتضمن هذا الملف constants.php وfunctions.php. نحن باستخدام مختلف قليلا تقنية هذه المرة إلى الواقع تحديد أن هذه الملفات قريبة إلى الدليل الحالي __ DIR__ يمثل كل ما الدليل هذا الملف، ملف config.php، هو في حد ذاته في. لذلك هذا هو أكثر طريقة صريحة لتحديد ما هي الملفات الأخرى التي تريد أن تطلب. 

الآن إذا أنا إغلاق هذا الملف و فتح constants.php بدلا من ذلك، سترى ملف تذكرنا جدا لمشكلة تعيين 7 وكذلك، وإن كان مع قاعدة بيانات مختلفة تسمى pset8. وأخيرا، في functions.php، سنرى وظيفة واحدة فقط هذا الوقت دعا الاستعلام. هذا هو نفسه تقريبا باستثناء علينا التعامل مع أخطاء هذه المرة قليلا بشكل مختلف، ولكن هذا الاستخدام هو نفس المشكلة في ضبط سبعة. 

الآن دعونا نعود إلى pset8 لدينا دليل، انتقل إلى الجمهور، وهناك إذا كنت تفعل ليرة سورية، سترى this-- articles.php، index.html و، search.php، وupdate.php-- جميع الملفات. ثم الخطوط المغلق، IMG، و شبيبة الدليل تماما مثل pset7. 

دعونا نلقي نظرة على index.html و، وهو ستكون حقا نقطة الدخول إلى التصادم. الآن في index.html و، سترى ككل مجموعة من عناصر الارتباط في الرأس، على وجه التحديد، على التمهيد لوحدنا CSS تليها مجموعة كاملة من البرنامج النصي الكلمات الدلالية لأشياء مثل الخرائط، API نفسه، علامة خاصة مع التسمية الأداة التي ذكرنا في مواصفات متوفرة لديك، مسج نفسه، التمهيد في حد ذاته، ومكتبة أخرى دعا تسطير التي نتحدث عنها في المواصفات. Underscore.js مثل jquery.js هي مكتبة جافا سكريبت التي لديها مجموعة كاملة من وظائف أن الكثير من الناس في رغبة العالم كانت موجودة في جافا سكريبت نفسها. لذلك كل من هؤلاء في الواقع شعبية كبيرة. لقد ذكرنا أيضا typeahead وهي المكتبة التي يفعل ذلك المنسدلة الإكمال التلقائي و أخيرا وصلة إلى تشغيل الجافا الخاصة بنا. 

وفي الوقت نفسه، وربما الحمد لله، وهذا المزج يحركه قليلا نسبيا HTML إلى هنا في الأسفل. لاحظ أننا قد حددت شعبة في لدينا من السوائل الطبقة الحاوية الجسم. هذا، ولكل التمهيد وثائق، فقط يعني أن هذا شعبة تسير لملء منفذ العرض أو نافذة المتصفح بالكامل. 

وفي الوقت نفسه، دون أن يكون لدينا شعبة وهذا ما فتحها وإغلاقها فورا مع معرف فريد من خريطة قماش. هذا الآن هو من جوجل وثائق الخرائط لAPI لها، حيث أنني ببساطة الحاجة الى لديك شعبة فارغة إلى التي لحقن، في نهاية المطاف، وخرائط جوجل الفعلية. ولكن أكثر على ذلك في قليلا فقط. 

وأخيرا، هناك شكل داخل هنا والتي تطبق مربع النص حتى يقم أعلى في واجهة لدينا للبحث. لاحظ أننا قد استخدمت قليلا من التمهيد هنا too-- أشياء مثل شكل مضمنة وشكل المجموعة. لقد أعطيت السابق ID الفريد من النموذج. وبعد ذلك، في نهاية المطاف، أنا فعلا نوع المدخلات، والذي هو مألوف جدا، الذي ID هو ف. مجرد الاتفاقية. س لquery-- يمكن أن يكون تم استدعاء أي شيء. وبعد ذلك نائبا، وفي الوقت نفسه، هو المدينة، الدولة، والرمز البريدي والتي قد تذكرون رؤية في المزج لدينا عرض في وقت سابق. دعونا إغلاق هذا الملف. 

الآن نلقي نظرة على ملفات PHP التي ننتظر ثم الملفات جافا سكريبت. في ملفات PHP لدينا، لدينا نفذت بالفعل بالنسبة لك، على سبيل المثال، التحديثات. Update.php-- نحن لن تنفق ضخمة مقدار الوقت على here-- باختصار هو الملف الذي لدينا شفرة جافا سكريبت يسير في الاتصال عبر AJAX أن تقنية غير متزامن هذا في صلب جافا سكريبت في هذه الأيام وهذا الذهاب للسماح لنا ان نسأل update.php لمزيد من المعلومات. 

على وجه التحديد، في أي وقت المستخدم سحب خريطة أو إجراء بحث أن يقفز المستخدم إلى موقع آخر، لدينا شفرة جافا سكريبت، كما سنرى قريبا، هو الذهاب لدعوة update.php ونسأل لمدة 10 أو نحو ذلك علامات ضمن إطار العرض القائم على إحداثيات GPS من أعلى وأسفل زوايا تلك الخريطة. يمكننا ثم إعادة خارطة الآن أن انتقلت للمستخدم على الشاشة من أجل لرؤية 10 ربما جديدة علامات للمدن مختلفة. وفي الوقت نفسه، هذا الملف هو في نهاية المطاف الذهاب الى تنفيذ استعلام SQL ضد قاعدة بياناتنا جدول يسمى الأماكن التي سوف تعود تلك 10 أو أقل المواقع. 

وفي الوقت نفسه، في articles.php، هو آخر ملف أننا قد كتبت في مجملها. وهو مشابه جدا في روح ل مشكلة تعيين 7 وظيفة البحث، التي اتصلت ياهو المالية بالنسبة لك. هذا ملف جهات الاتصال أخبار Google بالنسبة لك، والاستيلاء على النهاية آلة قابل للقراءة version-- في شيء دعا RSS format-- من الأخبار لكامبريدج أو بيفرلي هيلز أو أيا كان بلدة قمت بالبحث للبناء على ذلك geoparameter. نحن تحليل أن RSS، الذي هو مجرد نوع من لغة الترميز دعا XML، ثم نحن في الواقع إعادته إلى متصفحك وشفرة جافا سكريبت الخاصة بك، على وجه التحديد، في شكل يدعو JSON، وجافا سكريبت تدوين كائن. الآن سترى في specification-- نشير لكم كيف ترون الواقع بعض back-- JSON المجيء أن هذه الوظيفة في نهاية المطاف يتيح لك تجميع تلك القوائم المنبثقة ذلك أنه عند النقر فوق على علامة في خريطة أنت ترى في الواقع مجموعة كاملة من الرصاص، كل واحدة منها وصلات إلى مقال. 

الآن دعونا نلقي نظرة على واحدة الماضي ملف PHP الذي، لحسن الحظ، لا لدينا الكثير مما يحدث on-- مجرد TODO كبيرة جدا. الحق الآن يعلن هذا الملف مجموعة تسمى الأماكن. ثم في نهاية المطاف يطبع أن مجموعة في JSON format-- جميلة-طباعته فقط بحيث الأمور أسهل التصحيح. لسوء الحظ، في منتصف هناك هذا TODO، الذي يدعو لك للبحث في قاعدة بيانات عن أماكن مطابقة الجغرافية HTTP المعلمة. 

و، في الواقع، هذا هو الذهاب الى يكون واحدا من challenges-- الخاص بك لتنفيذ هذه الوظيفة هنا بحيث عند الاتصال مع هذا الملف وURL مثل البحث. فب؟ الجغرافية = شيء، سوف التعليمات البرمجية تعود في نهاية المطاف JSON مجموعة من جميع الأماكن في الخاص جدول قاعدة البيانات التي تطابق هذا الإدخال. حتى إذا قام المستخدم بكتابة في كامبريدج، الملف الخاص بك هنا search.php يجب أن تعود في نهاية المطاف مجموعة JSON لجميع المباريات لكامبريدج، التي قد تكون في ماساتشوستس ولكن يمكن أن يكون حتى في أي مكان آخر. 

وأخيرا، دعونا نلقي نظرة على اثنين الملفات التي ultimately-- ثابت ملف CSS الخاص بك وملف جافا سكريبت الخاصة بك. إذا ذهبت إلى دليل CSS لدينا، هناك مجموعة كاملة من الملفات هناك، ولكن معظمهم من المكتبات. أنا ذاهب لإلقاء نظرة، على وجه التحديد، في styles.css، وليس لدينا CSS العالمي الخاص هذا الذهاب إلى أسلب هذا المزج كله. سأترك لك أن تقرأ من خلال التعليقات هنا، ولكن، في حال قيامها، هذا هو CSS يضمن أن لدينا المزج، افتراضيا من خارج منطقة الجزاء، يبدو بالضبط الطريقة التي نريد it-- مع خريطة ملء الميناء بهدف ومع البحث مربع تصل في أعلى اليسار. لقد اتخذنا أيضا حرية stylizing أن المنسدلة typeahead القائمة قليلا كذلك. 

الملف الأكثر أهمية ربما لهذه المشكلة المحددة هذا هو آخر واحد، scripts.js. داخل الدليل JS الخاص بك هو المزيد من الملفات. كل منهم ملفات المكتبة فيما عدا هذا واحد، scripts.js. إذا فتحنا هذا الأمر، دعونا نلقي دينا جولة النهائية من خلال الوظائف التي هي في صلب هذا الملف بالنسبة لك والاهتمام الدعوة إلى تودوس التي تنتظرنا. 

في الجزء العلوي من هذا الملف، هي ثلاثة متغيرات العالمية. واحد للخريطة، وهو ذاهب الى يكون مرجعا لخريطة جوجل لدينا. يمكنك التفكير في الأمر نوع من كمؤشر. وفي الوقت نفسه، لدينا متغير عالمي آخر ودعا من المعلومات، التي يبدو أن تخزين قيمة الإرجاع مكالمة لgoogle.maps.InfoWindow جديدة. جافا سكريبت تدعم الأشياء التي متشابهة جدا في روح لالدعامات. وما هذا الخط ل تقوم أغراضنا هو خلق معلومات جديدة نافذة في الذاكرة ثم حفظ حول المرجعية بها في متغير يسمى معلومات. وبين هؤلاء، وفي الوقت نفسه، على ما يبدو أن يكون جافا سكريبت فارغة مجموعة تسمى علامات. كل تلك الرموز صحيفة، أو قد تختار رمز آخر تماما، ذاهبون إلى خزنها في نهاية المطاف في هذه المجموعة حتى نتمكن من السهل جدا إضافة إلى الخريطة وإزالتها من على الخريطة. 

الآن دعونا انتقل لأسفل قليلا والازيز من خلال التعليمات البرمجية التي ستكون أعدم بمجرد DOM أو وثيقة نموذج كائن أو الصفحة نفسها مستعدة لذلك. يذكر أن بناء الجملة هذا هنا يحدد ببساطة أن التعليمات البرمجية التالية يجب أن تنفذ فقط عند الانتهاء من المتصفح تحميل كل شيء آخر. 

ونحن أول إعلان مجمله مجموعة من الأساليب، الذي ينتهي stylizing خريطة حسب المواصفات. نحن بعد اعلان مجموعة كاملة من الخيارات، الأمر الذي يزيد من تخصيص جوجل الخريطة التي نحن على وشك أن تضمين. ثم نستخدم قليلا من التعليمات البرمجية مسج، الذي أوضح في مزيد من التفاصيل قليلا في المواصفات، لانتزاع هذا العنصر، خريطة قماش التي حددناها لذلك بشكل فريد. ثم هذا الخط هنا ما يبدو أن تعطينا سحرية خريطة جوجل من الداخل تطبيق الخاصة بنا، تخزين مرجعا بها في هذا المتغير يسمى خريطة. 

وأخيرا، إلى هنا نسجل ما يسمى مستمع. تعتقد الطريق back--، طريقة back-- إلى أسبوع صفر في CS50 عندما نظرنا في خدش و دعمها من خلال المشي من خلال لأشياء تسمى الأحداث والبث. قد لا يكون استخدامها ذلك بنفسك، ولكنها ل على آلية يمكن من خلالها ل المتصفح في هذه الحالة يمكن الحصول على اهتمامنا عندما يكون على استعداد لتنفيذ فعلا بعض التعليمات البرمجية. في هذه الحالة، انها تسير للاستماع إلى خريطة لهذا الحدث يسمى الخمول. وهذا يعني أن المتصفح له الانتهاء من تحميل خريطة جوجل. عند هذه النقطة وظيفة تسمى تكوين ينبغي في نهاية المطاف يتم تنفيذها. تلك الوظيفة، تكوين، سنرى، هو مكتوب من قبلنا. 

الآن أسفل هنا هي وظيفة التي، للأسف، هو مجرد علامة TODO إضافة. لكل المواصفات. وأنت تسير في حاجة إلى لكتابة التعليمات البرمجية التي في الواقع يضيف marker-- سواء كان ذلك يبدو مثل صحيفة أو تك الإبهام، أو شيء من هذا else-- إلى خريطة جوجل. هنا الآن هو أن وظيفة دعا تكوين. سأترك لكم لقراءة من خلال هذا بمزيد من التفصيل، ولكن ندرك أن نضيف حفنة المزيد من المستمعين حتى نتمكن من تنفيذ التعليمات البرمجية عندما ينقر المستخدم على وتستمر الخريطة. لدينا أيضا التعليمات البرمجية في هنا أن تهيئة أن typeahead المساعد بحيث المنسدلة القائمة يعمل فعلا. 

ولكن دعونا نركز على مجرد اثنين من الأماكن في هذه الوثيقة. على وجه التحديد، وهذا القيام به هنا. سوف تؤجل إلى الانترنت وثائق ومواصفات لكيفية تعبئة هذا TODO. ولكن باختصار، هذه المكتبة typeahead يسمح لك بالمرور في ما يعرف عموما كقالب، التي لديها بعض العناصر النائبة متغير مشابهة جدا في روح لprintf ل٪. * ق. ولكن في هذه الحالة، القالب في المواصفات يسمح لك بتحديد ما هي المتغيرات التي تريد لحقن من البيانات التي قد حان العودة من شيء مثل PHP الملفات التي كنت قد كتبت التي تنبعث منها إخراج JSON. 

الآن إلى هنا ندرك أننا الاستماع لتحديدات typeahead عندما يقوم المستخدم بإجراء الواقع للبحث عن ويختار قيمة. هذه هي الطريقة التي نحن فعلا الذهاب للاستماع لهذا وتنفيذ بعض التعليمات البرمجية نتيجة لذلك. ثم نستمر في تكوين المزج قليلا فقط. و، في نهاية المطاف، فإننا ندعو هذه وظيفة التحديث. فإنه يقوم بتحديث علامات على الشاشة. المزيد عن هذا في مجرد لحظة. وفي الوقت نفسه، هناك عدد قليل وظائف صغيرة هنا. واحدة منها هي التي hideInfo ببساطة يغلق InfoWindow. وظيفة أخرى هنا، والتي في نهاية المطاف لن تكون طويلة جدا، وإزالة علامات. ما يجري التراجع عن كل ما يفعل بك وظيفة علامة الإضافة. ثم إلى هنا هو البحث. وهذا هو واحد مثيرة للاهتمام لأننا وقد كتبت رمز JavaScript هذا الذهاب لاجراء محادثات مع search.php على الخادم والعودة بعض الاستجابة. 

كنت، بطبيعة الحال، سوف لا يزال تحتاج إلى تنفيذ search.php، ولكن لدينا نفذت شفرة جافا سكريبت هذا الذهاب الى التعامل مع الواقع المنفذ عمليات البحث من أن مربع النص. وبخاصة، لاحظ أن هذه الوظيفة هنا، البحث، لا ندعو search.php بواسطة طريقة تسمى الحصول على JSON، التي رأينا في المحاضرة. وبناء الجملة هنا يختلف قليلا من محاضرة في الذي نستخدمه مسج ما يسمى واجهة الوعد. أكثر على ذلك في المواصفات. وهذا يعني ببساطة لدينا أغراض الآن أن هناك هما وظائف خاصة نحن تحتاج إلى استدعاء مع تدوين نقطة هنا فورا بعد استدعاء الحصول JSON. واحد يسمى القيام به. فشل ما يسمى واحد. يمكنك التفكير في هذه كمعالج النجاح ومعالج الفشل فقط في حالة حدوث خطأ ما. 

الآن دعونا ننظر في الماضي زوجين من الوظائف في هذا الملف. إلى هنا هي وظيفة دعا showInfo، التي يظهر من المعلومات في واحدة من تلك معلومات النوافذ الصغيرة التي الملوثات العضوية الثابتة حتى عندما يقوم المستخدم بالنقر فوق علامة. إلى هنا هو مزيد أن ظيفة التحديث التي قمنا بتنفيذها بالنسبة لك. أنه يحدد حدود الخريطة. ما هي إحداثيات GPS من لها شمال شرق وجنوب غرب زوايا هنا. لقد أعد بعض المعلمات HDP هنا وبعد ذلك مرت عليهم في نهاية المطاف لupdate.php، والتي قمنا نفذت أيضا بالنسبة لك. الذي يحصل في نهاية المطاف إلى الوراء بعض JSON من ملف يسمى update.php ثم يزيل أي علامات على الشاشة وبالتكرار ثم على البيانات وهذا ما يعود من update.php، التي مرة أخرى هو مجرد مجموعة JSON. ثم يضيف في نهاية المطاف على علامة لل كل واحد من تلك الأماكن، وعدم التعامل مع أو الأخطاء التي قد تحدث بشكل جيد للغاية. 

الآن فقط لتعطيك طعم كيف قد يذهب حول تصحيح هذا المشروع، أدرك أنني قد فتحت في دفع هذا التبويب هنا في هذا URL، pset8 / articles.php؟ الجغرافية = 02138. الآن، مرة أخرى، مقالات حول PHP نفذنا لك لذلك هذا ليس كثيرا ما عليك أن تكون باستخدام لتصحيح، وإنما هذه التقنية. لاحظ أن لقد بحثت عن كود كامبردج البريدي هنا، ولقد حصلت على الظهر، في الواقع، JSON مجموعة من JSON الكائنات داخل منها هما صلة keys-- والعنوان. 

حتى هذه الوظيفة يعمل بالفعل بالنسبة لك. ولكن هذه التقنية من يدويا الذهاب إلى URL مثل هذا لشيء من هذا القبيل search.php؟ الجغرافية = كامبردج أو 02138 أو كل ما قد كتبته المستخدم في أن لا تقدر بثمن كما كنت، نفسك، في محاولة لمعرفة بالضبط ما إذا كان أو لماذا وتعمل search.php أم لا. 

ثم في نهاية المطاف، لديك عدد قليل من تودوس تنتظركم. وأنت تسير في الأدوات الأولى أن السيناريو الاستيراد التي يقرأ في us.text إلى قاعدة البيانات الخاصة بك. كنت ثم تسير في حاجة إلى لتنفيذ search.php بحيث يتصرف بالضبط كما هو محدد. كنت ثم تريد الذهاب الى التركيز على scripts.js وينفذ في نهاية المطاف تلك بضع تودوس، بما في ذلك تكوين وذلك القالب، إضافة علامات، وإزالة العلامات، و ثم أخيرا، وليس آخرا، واحد لمسة شخصية. 

وبمجرد الانتهاء من العمل المزج الخاص بك تماما مثل بلدنا، والهدف في متناول اليد هو بالنسبة لك لإضافة الشخصية المس لالمزج الخاص بك، سواء كان ذلك في الجمالية أو الفنية. خذ المزج أي وقت مضى قليلا إلى المستوى التالي. طالما كنت تدفع نفسك خارج معرفتكم مع المواصفات نفسها والتقاط أسلوب واحد جديد، حتى لو كان مجرد شيء مثل الجمالية تغيير تصميم الخريطة التي كنت تستخدم، نطاق أننا نتوقع سوف يكون راضيا. ثم أن مشكلة تعيين 8 المزج. ترقبوا المزيد في مواصفات وحظا سعيدا التصدي لهذا، الأخير الخاص بك مشكلة CS50 مجموعة من أي وقت مضى. 

[عزف الموسيقى]