[השמעת מוסיקה] רוג'ר ZURAWICKI: היי, שלי שם הוא רוג'ר Zurawicki, ואני יהיה כיסוי סמינר CS50 המטאור. מטאור הוא מסגרת חדשה מוקדש לסוג החדש של אינטרנט, לא PHP עושה בקשות הלוך ושוב סוג של אינטרנט שראינו בסט PHPP, אבל JavaScript הדינמי יותר חלקיו של האינטרנט. דברים מטאור יכול לעשות כולל עדכון חי ובתקשורת באופן מיידי בין המשתמשים של אותו האתר. לסמינר זה, יש לנו הקוד התארח בGitHub שלי. אתה יכול ללכת לכתובת אתר זו ולהוריד אותו. אם אתה יודע איך להשתמש Git, אתה יכול לשכפל את המאגר. אם אתה לא יודע איך להשתמש Git או לא השתמש GitHub, זה בסדר לגמרי. אני אראה לך ממש מהר איך אנחנו יכולים ללכת לGitHub, ויש אפשרות ל להוריד zip ממש שם. ברגע שאתה מוריד בספרייה זו, אתה יכול להתחיל לשחק עם הקוד שלנו. 

מידע נוסף על מטאור ניתן למצוא בmeteor.com. בתיקיית הסמינר, אני ממש יש לי כמה פרויקטי מטאור אנו יכולים להשתמש. אחת מהתיקיות שיש לנו בנו פרויקט סמינר הוא האפליקציה todos. אז אם אני נכנסתי לזה אני, מותקן מטאור. אז כדי להפעיל אותו, אני רק צריך להקליד מטאור, והמטאור יתקינו. כפי שניתן לראות, יש לנו ל לוודא שמותקנים מטאור. אז אני פשוט הולך ל להפעיל אותו עוד פעם אחת לוודא כי מטאור מותקן כראוי. 

אמנם יש לי מטאור התקנה, אני יכול להראות לך כמה הדגמות חיות של אתרי מטאור הולך לחיות עכשיו באינטרנט. יש לי הדגמה של האפליקציה שלנו. אתה יכול לגשת אליו בכתובת הבאה. זוהי האפליקציה לעשות את זה אנחנו יש בספריית הסמינר שלנו. כתובת האתר לכך היא rozu-rabbit.meteor.com. אתה תראה שמטאור יהיה ממש לארח פרויקטי המטאור שלך בחינם. ובסופו של הסמינר, תוכל גם לעשות את זה. 

זוהי אפליקציה לעשות רשימה. ואתה יכול להיכנס, ליצור חשבונות, ולהוסיף משימות. אתה יכול ליצור חשבון כמו כל כך. ועכשיו, ברגע שיש לך חשבון, אתה יכול להוסיף משימות. לדוגמא, אני אחת מהמשימות אולי צריך ללכת לאסוף את הכביסה שלי. ואם אתה על זה באינטרנט אתר, עליך ממש לראות משימה זו על המחשב שלך בזמן אמת. 

אני יכול להראות לך הדגמה מהירה של זה על ידי rozu ארנב פתיחה בכרטיסייה אחרת עם אותה כתובת האתר. ואנחנו רואים שאותם נתונים עולה. כמו כן, אנו יכולים להפעיל אותו ב בדפדפן אחר. אומר שאני מפעיל אותו בספארי. בדרך זו אנחנו לא מחובר. אז יש לנו את אותו המטאור אפליקציה, וברגע שהוא טוען, אנחנו תראו את אותם נתונים שעשינו בראשון. כפי שניתן לראות, אני לא מחובר כאן. וכאשר נתוני בדיקות קהל, הוא מעדכן על כל הדפדפנים בו-זמנית. זהו אחד באמת תכונות מגניבים על מטאור. כמעט ללא עבודה, אתה יש אפליקציה עדכון חי כי שינויים בכל המכשירים שלך בבת אחת. 

אם אני בודק את תיבת הסימון כאן בלעשות רשימה שלי, תהיה לנו, בדפדפן Chrome האחר שלי, הפריט בדק את. וזה קורה באופן מיידי. בְּסֵדֶר. אז זה נראה כמו מטאור ההתקנה מוכנה עכשיו. אז עכשיו בואו נחזור ל האפליקציה todos ולהפעיל באופן מקומי זה. 

אם יש לך פרויקט מטאור, שאתה יכול רק להפעיל אותו עם מטאור הפקודה. ברגע שאתה עושה את זה, מטאור יעשה קצת הכנה כדי לוודא שכל של הקוד שלך הוא בבדיקה. ואז זה יגיד לך ש פרויקט מוכן להגשה. ייתכן שאצטרך לאפשרך חומת אש, אם המחשב שלך חוסמת אותך. 

אז מה המטאור אומר לי עכשיו הוא שבאתר זה מקומי למחשב שלי, אני יכול לראות מה הוא פרויקט המטאור הזה. שימו לב שעכשיו, האפליקציה שלי היא אינו נגיש לאינטרנט. נלמדים כיצד להביא המטאור שלך אפליקציה לאתר בשידור חי קצת יותר מאוחר. אז אני פשוט הולך להעתיק את זה כתובת אתר החברה ותיכנס לGoogle Chrome. 

ואת זה הוא לעשות רשימה מהדוגמא. אתה יכול לראות שהם מיושמים עוד כמה תכונות כאן. יש לנו כרטיסיות שונות, אנחנו יש את אותן תכונות חשבון, ואנחנו יכולים להוסיף רשימות חדשות. עכשיו, אחד באמת תכונה מגניב על מטאור הוא שלא רק יכול זה לעבוד על דפדפן האינטרנט שלך, אבל אתה יכול גם ליצור האם iPhone ו- Android יישומים באמצעות כלי שנקרא PhoneGap. 

אז כמה פרויקטים יבואו מראש הגדיר להפעלה על iOS, כמו אפליקציה todos זה. אז כל מה שאני צריך לעשות כדי להפעיל אותו בiOS הוא סוג מטאור, לרוץ, ולאחר מכן iOS. וכשאני עושה את זה, מטאור יכין את החבילה שוב. ואז, ברגע שהוא מוכן, זה יהיה לטעון סימולטור iOS על הפקודה שלי. הערה אתה יכול רק להריץ יישומי iOS אם יש לך מחשב מק. אתה יכול להריץ היישומים שלך ב אנדרואיד על כל הפלטפורמות. 

אז עכשיו אתה יכול לראות שה- iPhone שלי סימולטור עלה על המסך שלי. וברגע, זה יהיה לטעון באפליקציה. אם אנחנו עושים את זה רק קצת קטן יותר כך שיתאימו למסך, אנו רואים שיש לנו האפליקציה באייפון שלנו. ורק כדי שלא מתבלבל, בואו נעשה בטוח שאנחנו משדרים על אותו אתר, המארח המקומי 3000. 

אז כאן היא דוגמא של האפליקציה המטאור יש לי, האפליקציה todos, פועלת הן ב טלפון ובדפדפן אינטרנט. וכאשר אני משנה דברים בדפדפן האינטרנט, זה עובר מייד לטלפון. ואני יכול למחוק משהו בטלפון, והוא משתנה בדפדפן האינטרנט. 

עכשיו, בדרך כלל כדי ליצור יליד אפליקציה לטלפון עבור iOS או אנדרואיד, אתה צריך לדעת גם Java או שימושים מטאור אובייקטיביים ג הטכנולוגיה כדי לאפשר JavaScript כדי לפעול כ האפליקציה שלך נקראת PhoneGap. מה האפליקציה שלך במהות הוא הוא דפדפן אינטרנט. ומטאור מטפל בכל החלקים מסובכים המעורבים להבאת שדפדפן האינטרנט ל iPhone או מכשיר אנדרואיד. ניתן לראות כי ממשק משתמש הוא חלק, וזה נראה ומרגיש מאוד בדומה לאפליקציה מקורית. שים לב שאם אני הולך לבית מסך עכשיו, אני גם מקבל סמל. זה לא אתר כמו שתמצא בספארי. זוהי אפליקציה משלה. אתה יכול להתקין ו למחוק אותו, אם תרצה. 

אנחנו יכולים להראות לך בקצרה מה הקוד לשל todos סוג זה אפליקציה נראית. אם אתה מסתכל בתיקיית todos, אתה תראה שיש תיקיות רבות. אבל במהלך הסמינר, אנחנו להבין מה כל תיקייה משמשת ל. בואו נלך למסוף כדי ש ניתן לראות את הקבצים קצת יותר טוב. 

אני הולך ללחוץ בקרה C כדי לעצור את השרת, ועכשיו אני שוב באפליקצית todos. יש לי תיקיות שונות כאן, כמו תיקיית הלקוח, תיקיית השרת. ותיקיות אלה פשוט אומר ש הכל בתיקיית הלקוח מקבל להורג בדפדפן האינטרנט שלך. כל מה שבתיקיית שרת מקבל להורג בשרת. 

מה שאני רוצה להצביע מתוך זה מה שהיה לנו כאשר היו לנו ריצת הטלפון שלנו ו דפדפן האינטרנט שלנו, אלה היו לקוחות. אבל מה שפועל ב מסוף, זה השרת. יש לנו תיקיות אחרות, כמו lib, שהוא קוד ספרייה, כמו העוזר שלך פונקציות, שבו אתה יכול להשתמש הן בלקוח והשרת. ואז יש לך ציבורי תיקייה ומשאבים תיקייה דרושה להשגת התמונות שלך וCSS האחר נטענים. 

אם התקין את המטאור, אנו תמשיך עם ההדרכה למטאור. אתה יכול ללכת לכתובת אתר זו, meteor.com/install, כדי לקבל את שורת הפקודה שאני הראיתי לך שמתקין מטאור. אנו נעבור הראשונים כמה צעדים כדי לקבל טוב יותר מרגיש לגבי אופן התקנת מטאור. 

אבל קודם, אני חושב שזה חשוב ש אנו בודקים קצת JavaScript. כדי להראות לך כמה דוגמאות לאופן ש ידע C שלנו יכול להיות מתורגם לJavaScript, יש לי יצר כמה דוגמאות. הם נמצאים בספריית js. אז אם בסמינרי תיקייה שב תראה, יש תיקייה בשם js. וכאן, יש לנו כמה דוגמאות. 

בואו לפתוח את הראשון דוגמא ותראה מהר מאוד. מה שאנו רואים הוא סטנדרטי שלך שלום פקודת העולם. אתה מבחין בC ש יש לא מעט קווים. וכפי שתלמידי CS50 יודעים, אנחנו צריכים פונקציה העיקרית, ואנחנו צריכים לכלול את התקן I / O ספרייה כדי לקרוא printf. 

בואו נסתכל על איך JavaScript משווה. אני הולך לפתוח ex1.js. תגובות החוצה היא מה ש C קוד ייראה, והקו למטה הוא כל אתה צריך להפעיל בצומת. אתה לא צריך פונקציה העיקרית, אתה לא צריך לכלול את כל קבצים, ואתה לא צריך לחזור. אתה פשוט קורא console.log. זו מקבילה של printf שלך. 

וזה לוקח אותו טיעוני printf היית. וכדי להפעיל אותו, במקום פועל להפוך את EX1, היית קורא רק ex1.js. צומת אתה כותב צומת ולאחר מכן קובץ, והוא מקבל לרוץ. זה לא מגיע הידור. JavaScript היא שפה פירשה. כך שזה לא צריך להיות הידור לפני זה לרוץ. אם אני רוצה לרוץ ex1.c, אני צריך לעשות את זה קודם, ואז אני יכול להפעיל את קובץ ההפעלה כדי לקבל את אותו הפלט. 

בואו לכסות במהירות כמה מושגי JavaScript אחרים. בואו נסתכל על דוגמא שתי. בex2.js, בex2.c, אנחנו יכולים רואה שיש לנו כמה קוד. תן לי ללכת במהירות ל עורך טקסט טוב יותר זה ייראה אלה קווים חדשים קצת יותר טובים. בְּסֵדֶר. כאן יש לנו דוגמא 2.c. כאן יש לנו סוגים שונים שאנחנו מדפיסים את. וכמו שאנחנו יודעים, printf לוקח טיעוני אחוזים שונים כדי לגשת לחלקים שונים של נתונים. אם אנחנו רוצים להדפיס מחרוזת, אנחנו קוראים% s. אם אנחנו רוצים לקרוא לצפים מספר נקודה, אנחנו נקראים f%. ואין דרך קלה לקרוא בוליאני על ידי ערך האמת או שקר שלה. אבל אם אתה משתמש ב% d, אתה יכול לקבל 0 או 1 לכוזב ואמיתי. 

JavaScript הוא קצת יותר נחמד לנו. ב- JavaScript, בואו נסתכל על כמה הבדלים יש לנו בקובץ זה. ראשית, אתה שם לב שיש לנו ב- C ל לאתחל כל משתנה עם סוג. S הוא כוכב char. זה מחרוזת, וזה לא יכול להיות בכל סוג אחר. N הוא לצוף. B הוא בול. 

אבל בJavaScript, ישנם סוגים דינמיים. זה אומר שאתה לא צריך להגיד JavaScript מה סוגי המשתנים שלך יהיו. אתה פשוט אומר לvar משתנה, שם של משתנה, ולאחר מכן הערך שלה. אז var יכול להיות כל דבר באמת. זה יכול להיות מחרוזת. זה יכול להיות מספר נקודה צפה. זה יכול להיות אופי. זה יכול להיות בוליאנית. ויומן קונסולה עובד קצת אחר. אם ברצונך להדפיס מספר, אתה קורא% d. אבל רוב הערכים יכולים להיות מודפס כמחרוזות בסדר גמור. 

בואו נריץ את זה בצומת כדי לראות מה יקרה. אני יכול לקרוא ex2.js צומת, ואנחנו מקבלים printf עם CS50 הערכים, N כ מספר הנקודה צפה, ואז B כבוליאנית מומר למחרוזת אמיתית. מה לגבי אם עשינו דוגמא 2.ג? ובכן, עדיין יש לנו כמה יותר הטרדות עם printf. שימו לב שהנקודה צפה מספר צריך להיות מעוצב בצורה נכונה, וכי בוליאנית לא יכולה פשוט יוצג כאמת או שקר. בְּסֵדֶר. עכשיו בואו נסתכל על דוגמא שלוש. בדוגמא שלוש, אנחנו מראים איך היית להשתמש ללולאה. למעשה, זה מאוד פשוט. אחד הדברים נחמדים על JavaScript הוא שהיא מבוססת C. זה אומר שהרבה קוד ייראה דומה מאוד ומרגיש מאוד דומה. ללולאה, דבר היחיד ש שבאמת השתנה כאן הוא במקום i int, יש לנו var i. אנחנו עדיין יכולים להקצות אותו למעריכים אפס, לבדוק שזה פחות מחמישה, ולהגדיל אותו על ידי אחד עם מפעיל ++. אנו קוראים console.log על i, וש ידפיס לנו מספר עם כל שורה. בואו להפעיל אותו ממש מהר כדי לראות מה זה פלטי. אנחנו מקבלים מספר חדש בכל שורה. עוד דבר שאני רוצה אותך לשים לב עם console.log הוא שאתה לא צריך לכתוב n הלוכסן האחורי לקו החדש. Console.log ידפיס הכל בשורה הנפרדת. זה תכונה נחמדה כי JavaScript נותן לנו. 

עכשיו בואו לפתוח את דוגמא ארבע. בדוגמא ארבע, ראשון בC, אנו קוראים כמה פונקציות. שימו לב שיש לנו להכריז על פונקציות לפני שנשתמש בם בעיקריות. אם היו לנו וראשון עיקריים לאחר מכן להוסיף ולאחר מכן גבוה, לעשות, צלצול, או GCC היה תן לנו שגיאה אומרת שזה לא יודע מה גבוה הוא. הוא לא יודע מה הוא תוספת. אז בC, אתה צריך להיות בררן לגבי הסדר שבו אתה קורא פונקציות שלך. 

בואו נסתכל על איך אתה יכול לעשות את זה ב- JavaScript. יש לנו קבצים שונים כי יש כמה דרכים שונות לעשות זאת. דרך אחת היא פחות או יותר תרגום ישיר. בגלל הפונקציות בC לחזור סוגים, וJavaScript לא ממש יודע או טיפול על איזה סוג אתה חוזר, אתה לא כותב סוג. במקום זאת, אתה רק צריך לכתוב פונקציה, וכל מה שהוא די כמעט כמו לפני. 

כאשר יש לך משתנה, כמו ב להוסיף, אנחנו רק צריכים לכתוב x ו- y. אנחנו לא צריכים לומר x הוא int. אנחנו לא צריכים לומר y הוא int. אנחנו חוזרים עם אותו התחביר. לגבוה, אנו מצהירים את זה עם לתפקד במקום חלל. שים לב שאם זה חלל או שאינו מבוטל, זה עדיין כל את אותו התפקיד. ואנחנו פשוט לא לשים שום דבר בסוגריים, וזה נראה דומה מאוד לקוד C. ולהלן, אנו יכולים לקרוא לזה בהמשך. 

אם נתבונן בדוגמא 4 ב, אנו מבחינים כי אני כבר השתנה כמה דברים. הדבר היחיד שאני כבר השתנה באמת אף הוא הצו. יש לנו את אותו פונקציות, אבל עכשיו הם הוכרז לאחר שהם רגילים ב console.log וגבוה על קווים 18, 19. אם עשה את זה ב- C, לעשות היה זורק שגיאה. הנה, זה עובד בסדר גמור. ואני יכול להראות לך את זה על ידי קורא צומת בדוגמה 4 ב. 

דרך נוספת שאנחנו יכולים לקרוא לפונקציות הוא על ידי שמירה מתפקד כמשתנים. כמו שאמרתי, משתנה יכול להיות כל סוג. אחד מהסוגים משתנים יכול להיות הוא פונקציה. אז אם אתה מסתכל על דוגמא ג 4, מה שהשתניתי כאן הוא var להוסיף במקום תוספת פונקציה. ועכשיו תוסיף שווה פונקציה. פונקציה זו כאן היא אנונימי. אין לה שם, כך שזה רק פונקציה ולאחר מכן הסוגריים. התחביר לאחר ש לא משנה, אבל אתה צריך לזכור ש יש לך משתנה שאתה אחסון הפונקציה לתוספת, ו משתנה שאתה אחסון לגבוה. 

בגלל להוסיף ועכשיו גבוהים משתנה ולא פונקציות, משהו משתנה. מדובר בבאג נפוץ שאני רואה ב הרבה JavaScripts של אנשים, ומשהו שכדאי לזכור. כאשר אני מפעיל את זה, בואו לראות מה קורה. אני מקבל הודעת שגיאה. זה אומר שלא הוגדר בשלב זה. אז זה אומר שזה לא יודע מה להוסיף הוא. 

כי עכשיו להוסיף לא פונקציה, להוסיף הוא משתנה. ואתה לא ממש נתת להוסיף ערך אך כאשר אתה השתמשת בו. זה מביא אותנו לדוגמא 4d, שבו אם אתה רוצה להשתמש במשתנים כמו פונקציות, אתה רק צריך לוודא שהם לקבל את הערך לפני שהם רגילים. 

בואו נעבור לדוגמה חמש לאחר מכן. הנה, אנחנו מדברים על structs ב.ג בC, structs יש מבנה קבוע להם את זה כי אתה צריך להכריז עליהם לפני שאתה משתמש בו, ו אתה אומר שיש לי תלמיד, ויש כל תלמיד בדיוק שם אחד, שנה אחת, מין אחד. זה חייב לקבל את כולם. זה לא יכול להיות כל ערכים אחרים, והם צריכים להיות סוגים ספציפיים. 

אז אנחנו יכולים לאתחל struct בתחביר זה נחמד כי הוא יודע את הסדר. אז הוא יודע שרוג'ר הוא שם. הוא יודע ש2016 הוא שנה וM הוא מין בגלל שאמרנו לו את זה רשימה היא סטודנט struct. ואז אתה יכול להדפיס זה, הגישה s.name. בואו לראות איך הייתי להמיר את זה לJavaScript. שים לב שזה הוא עכשיו משתנה, ואין שום סוג. זה פשוט var שוב. כי זה לא משנה אם הסוג של משתנה זה הוא מצביע, זה struct, או כל דבר אחר. יש לנו תחביר מעט שונה. תחביר זה הוא תחביר האובייקט. 

אולי ראה אותו בJSON. JSON עומד למעשה ל סימון אובייקט JavaScript. זה איך אתה מגדיר אובייקטים ב- JavaScript. יש לנו מפתח, שהוא הערך, כמו שם. ואנחנו נותנים לו ערכים ב הצד האחר של המעי הגס. ועוד דבר אחד שכדאי לזכור הוא שאתה לא צריך להיות שם, ושנה ומין לאובייקט. אובייקט לא יכול להיות ערכים. זה יכול להיות רב ככל שאתה רוצה. 

אנחנו יכולים להשתמש בחפצים אלה רק אותו אופן בו היינו להשתמש struct, s.name. אנחנו יכולים להפעיל אותו ממש מהר על ידי ביצוע דוגמא 5.c. צומת אנחנו לא באמת יכולים להפעיל קובץ C בצומת. הוא לא יודע מה הוא C. הוא יודע רק JavaScript. כאשר אנו מפעילים ex5.js, אנחנו מקבלים הערך, שבו אנו צפויים. 

בואו נעבור לדוגמה שש. כאן אני רק רוצה לדבר קצת קצת יותר על מערכי JavaScript בגלל שהם קצת שונה ממה שאתה נהגתי בג מערכים המסומנים, לא עם סוגריים כמו ב- C, עם סוגריים המסולסלים, אבל סוגריים. אתה יכול להיות מערך ריק, כמו עיבוד בקו ארבעה. אתה יכול לקבל מערכים עם ערכים מרובים. ואתה ניגש אליהם בדיוק באותה הצורה בג 

עד קו שבעה, הכל נראה די פשוט. הבדל קטין אחד הוא כאן בקו 10. הדרך שאתה מקבל באורך של מערך הוא רק על ידי קורא .length. מערך באמת יכול להיות יתייחס אליה כמו אובייקט, ויש לו אובייקט זה רכוש אורך שאתה קורא כדי לקבל את אורכו. שימו לב שזה שונה בC כי בC צריך לדעת את האורך של האובייקט שלך לפני זמן. 

אז עוד דבר נחמד על מערכים הוא שאתה יכול להיות מסוגים שונים. אם יש לך מערך בC, שם הם מערכים של ערך מסוים, או מצביע struct או [לא ברור] צף או. הנה, אתה יכול לקבל ערכים שונים. היה לי מספר נקודה צפה ראשון, אז בוליאנית, אז מספר שלם אחר. ולמעשה, הם יכולים לשנות את הסוגים מדי. תסתכל על קו 16. מערך דו משתנה מלהיות מספר, מספר שלם, למחרוזת. 

עוד דבר נחמד על מערכים הוא כאן בקו 19, שיש להם גודל אינסופי. אתה פשוט יכול להגיד שאני רוצה מאית אלמנט להיות המחרוזת חוקית. וזה לא נראה לעשות תחושה כי המערך רק יש מקום לשלושה אלמנטים, כך הסוף צריך להיות שתיים. אבל כאשר אתה עושה את זה, בוא לראות מה מערך שלושה הופכים. היינו רץ במהירות זו עם six.js. דוגמא צומת אנחנו מקבלים את זה באמת ארוך מערך, ומה שקורה הוא יש לנו כמה האלמנטים הראשונים ולאחר מכן חבורה של חסר עד שנגיע המחרוזת שלנו. JavaScript ממלא ב כפי שנדרש מערך. 

בואו לבסוף ללכת לדוגמא האחרונה שלנו. כאן יש לנו רשימה תלמידים שונים. אני רוצה לדבר קצת קצת על כמה היבטים נחמדים של לולאות ב- JavaScript. בC, ללולאות מוגבלות סוג של. יש להם מבנה קבוע, שבו אתה יש לי משתנה, יש לך מצב, ואז אתה עושה משהו בסוף הלולאה. וכמובן שזה עובד בJavaScript, כפי שראינו בדוגמאות הקודמות. אבל יש לנו גם דרכים יותר נחמדות לעשות את זה ב- JavaScript. זה נקרא לולאת foreach. 

מצטער, בואו נחזור לדוגמא שבע כאן. כמו כן, אנו יכולים לומר בסעיף הוא רשימה. אז תן לי כל i או כל מדד ברשימה ש. אז אנחנו יכולים לקבל את התלמיד רק על ידי קורא קטע של i. אז את כל הקוד של i הגדרה שווה לאפס ועושה אני בטוח ש הוא פחות מהאורך ו הוספה לאחד אני כל זמן, זה דואג לך ולא יפה עם foreach לולאה זה. 

לא רק לעשות לולאות foreach לעבוד ברשימות או מערכים, הם גם עובדים באובייקטים, שהוא גם נחמד. אתה יכול לקבל את שמו של כל רכוש רק על ידי לקיחה מילון או אובייקט, כמו סטודנט, ולאחר מכן רק אומר לי כל מקש. מפתח יהיה אלה תכונות, שם או בבית. אז מה הולך לקרות כאן הוא ש אנחנו להדפיס תחילה את השם ולאחר מכן ביתו של כל תלמיד. 

אני יכול להפעיל את זה בצומת מהר מאוד להראות לך. אנחנו מקבלים ראשון בסגנון C ללולאה, שבו אנחנו מקבלים כל אובייקט מודפס החוצה. ולאחר מכן יש לנו את JavaScript סגנון, שבו רק אתה יכול להדפיס את כל מפתח ומעריך בנפרד. 

בְּסֵדֶר. עכשיו שאנחנו כבר כיסינו Node.js, אני חושב ש אנחנו מוכנים להתחיל עם מטאור. כמו שאמרתי, המטאור עשה עבודה נהדרת כתיבה כמה דוגמאות מוכנות מראש בשבילך, כי אתה יכול לחקור דרך מדריך זה או בתיקיית הסמינר. אבל כאן אני רוצה תתחיל יותר מאפס. 

בואו ליצור פשוט לעשות יישום. זהו סוג של הבסיס של מה של לעשות יישום הראיתי לך קודם לכן הוא. במדריך זה, אתה יראה שיש מטאור הפקודה ליצור ל ליצור פרויקט מטאור חדש. אתה צריך לקרוא לזה במטרה כדי להפעיל פרויקטי מטאור כי זה יהיה להפעיל את הפקודות כדי ליצור את המטאור קבצים דרושים לפרויקט שלך. 

אם אתה נכנסת למסוף, אנחנו יכולים להיכנס לתיקייה בשם צעד אחד. צעד אחד לא מתאים עם הצעד הראשון בהדרכה. הודעה יש תיקיות, צעד אחד, צעד שני, כל הדרך עד לחמש. וכל אחד מהם מתאים לצעד זה של מורה. אני הולך לפתוח אותו בעורך הטקסט שלי כאן כדי שנוכל לראות קצת ממה שיצר. אנו שמים לב שיש ארבעה חלקים עיקריים. יש ספריית מטאור, .meteor. וכי אתה בדרך כלל לא צריך לגעת. המטאור דואג ל תיקייה ש, וזה פשוט מוודא כי פרויקט יפעל בצורה נכונה. 

יש לנו גם שלושה קבצים, קובץ HTML, קובץ JavaScript, וקובץ CSS. בואו נתחיל ראשון עם קובץ HTML. במבט הראשון, זה נראה כמו מסמך HTML רגיל. אבל שים לב שיש כמה הבדלים. אחת, זה לא ממש מסמך HTML מלא. אנחנו חסרים תגי HTML. זה נורמלי. במטאור, אתה לא צפוי כדי ליצור אלה תגי HTML. שזה נעשה בשבילך. אתה רוצה begin-- אם אתה רוצה ליצור אתר אינטרנט, אתה פשוט צריך להתחיל עם תג הראש, להגדיר את זה, ולאחר מכן להגדיר את תג הגוף. 

אבל אם תשימו לב בזה קובץ HTML, יש לנו תג חדש. יש לנו את תג התבנית. זה לא HTML רגיל. זוהי גרסה מיוחדת של HTML שהמטאור מעמיד לרשותך. זה נקרא ברים חלל. אתה יכול להגדיר תבניות קטנים מודולים, כמו סוג של פונקציות עזר, בC שלך או קוד JavaScript. תבנית היית זה יש שם נקרא משימה. ואתה יכול לראות ממש כאן, על קו 13 שאתה יכול לקרוא בתבניות אלה. ומה המטאור יהיה לעשות הוא פשוט למלא משימות אלה עבורך. 

דבר נוסף שאתה עשוי להבחין הוא קצת שונה הוא זה כל פונקציה. כל ייקחו משתנה משימות וסוג של לעבור את זה בכך שאנו foreach הלולאה ראה בדוגמא שבע. כל זה יכול לקחת מילון או רשימה, אובייקט או רשימה, וזה יהיה רק ​​לעבור את כל ערכים כמו לולאת foreach הייתם. אז אם יש לנו חבורה של משימות, זה יקרא את התבנית על כל משימה. 

בואו להפעיל את פרויקט המטאור רק כדי לראות שזה קורה. אני מנהל את פרויקט המטאור עם רק מטאור או מטאור לרוץ. ועכשיו מטאור פשוט יצטרך להכין במהירות את הפרויקט, להתחיל את מסד הנתונים כנדרש, ולאחר מכן לפרסם את האפליקציה באופן מקומי. אנחנו יכולים ללכת לדפדפן האינטרנט שלנו עכשיו. ואנו רואים אנו ש יש אפליקציה פשוטה מאוד. אז מה שראינו הופיע היה למעשה הצעד אחד, קובץ צעד אחד. 

בואו נעבור לשלב שתי רק בגלל אני חושב שזה משרת את אותה המטרה. אני רק הולך לשנות לצעד שתי הספרייה ולהפעיל מטאור שוב כדי שנוכל לראות התבנית אנחנו רק עבדנו עם. כן, שאלה? 

קהל: רשות אם אנחנו מקבלים הכחיש, הוא that-- מה זה קראת לזה? רוג'ר ZURAWICKI: אם אתה מפעיל ריצת מטאור, ויש לך הרשאה הכחיש, חלק מהקבצים שלך ייתכן שאין לי סט הרשות תקין. אז אתה צריך לבדוק בי ההרשאות כבויות. הם יכולים להיות כבויים ב פרויקט המטאור שלך, או שהם יכולים להיות כבויים ב מטאור קבצים עצמם. 

קהל: אם אני הורדתי את זה רק עכשיו מGitHub שלך, אז מה אני צריך לעשות [לא ברור]? 

רוג'ר ZURAWICKI: אם אתה רוצה כדי לוודא שאתה יכול לגשת אליו, יש פקודה שאתה יכול לרוץ. תן לי לכתוב את זה במהירות כדי שאנשים אחרים יכולים לראות את זה. אני הולך לפתוח כרטיסייה חדשה כאן ולהיכנס לתיקיית הסמינר שלי. Chmod הוא פקודה כדי לשנות הרשאות, ואתה יכול לומר לr לעשות את זה באופן רקורסיבי עבור כל קובץ. והרשאות, אתה יכול לנסות את 0755 לוודא שיש לך גישה מלאה, וכולם יכולים לקרוא. ואם אתה רק לרוץ פקודה זו, זה יעשה בטוח הרשאות ב לבדוק את כל הספרייה. פועל ls-l יכול להראות לך הרשאות בפירוט רב יותר. זה נראה בסדר. 

מה שחשוב ביותר הוא שיש לך את כל שלוש rwx לכל הקבצים ב ספריית הסמינר. האם זה יפתור את הבעיה? 

קהל: זה אומר חסר אופרנטית [לא ברור]. [לא ברור] רוג'ר ZURAWICKI: אתה צריך לוודא שאתה יש נקודה בסוף הפקודה שלך. קהל: [לא ברור]. רוג'ר ZURAWICKI: בסדר. תן לנו לחזור במהירות ל מארח מקומי, האפליקציה שיש לנו. ואתה תראה שיש לנו כמה משימות כאן, כצפוי. יש לנו חבורה של CSS, ש אתה לא צריך לדאוג. ההדרכה המטאור רק נותן לך את זה כדי להפוך אותך לעשות מבט הרשימה קצת יותר נחמד מ- HTML רגיל. ויש לנו את קובץ JavaScript, ש אני אלך לפרטים נוספים קצת מאוחר יותר, אבל זה פשוט מספק את המשימות הללו. זוהי משימה אחת. זוהי משימה שתיים. זוהי משימה שלוש. אז זה נתונים המטאור של מקבלים. 

אחד הדברים מגניבים על המטאור הוא כי שינויים יכולים לקרות באופן אוטומטי. אם אני רוצה לשנות את שם המשימה הראשונה, אז זה הייתי אומר שזו לא משימה אחת, ואני שומרים אותו, אז כשאני הולך לאינטרנט דפדפן, אתה יכול לרענן אותו, וזה באופן אוטומטי אומר זה לא משימה אחת. אתה יכול לעשות את אותו דבר בכל אחד מהקבצים הללו. לעשות שינוי, במקום לעשות רשימה, תהיה לי את זה שלי כדי לעשות את הרשימה. 

ועוד דבר אחד שאתה פשוט שם לב, שאני אפילו לא צריך לרענן. הרעיון של מרענן הוא סוג של פתר לך עם מטאור. בכל פעם שהוא מזהה את השינויים בקובץ, זה יהיה לטעון את השינויים עבורכם. זה עובד על כל הקבצים, אם זה HTML, CSS, או JavaScript. כדי להראות לך מה יישום זה ייראה כמו בלי CSS, אני יכול להסיר את כל זה. וכאשר זה מחדש, עכשיו יש לך לא יפה-מחפש לעשות רשימה כ. בואו נשים את התוכן שיחזור. ובוודאי מספיק, זה מרענן, וCSS שלנו הוא חזרה. גדול. 

כעת אנו יכולים לעבור עם ההדרכה. בואו נדבר על צעד שני, תבניות. זה מה שאנחנו פשוט ראינו עם המשימות השונות. המטאור יסביר לכם מה תבניות וכיצד ההיגיון הזה עובד. אבל בואו רק להסתכל על הקוד ל לראות אם אנחנו יכולים הגיוניים לצאת מזה. 

ביישומים פשוטים מאוד, כמו מה שיש לנו בפשוט לעשות, צעד אחד, צעד שני, צעד שלוש, ארבעה צעד, צעד חמש, אין לנו כל תיקיות. אין לנו השרת תיקייה שציינתי. אין לנו לקוח תיקייה שהוזכרה. אז המטאור יפעל את כל הקבצים. זה יהיה להפעיל אותו גם ב הלקוח, שניהם בשרת. 

ואם אתה רוצה חלקים של JavaScript שלך קוד לרוץ רק על הלקוח, הם צריכים לוודא שיש לך אם הצהרה, כמו סוג של מה ש יש לנו בקובץ JavaScript שלנו כאן. אז מטאור, רק אם זה לקוח, אז אני רוצה להגדיר תבנית משימות נקראות עוזר. מה הקוד הזה באמת עושים זה אומר שיש תבנית אובייקט נקרא המטאור שמספק. ואנחנו הולכים להוסיף עוזר. עוזרים הם משימות אלה, את הדברים האלה כמו המשימות. 

אתה תראה שאם אחזור ל קובץ HTML, שקראנו כל משימות. משימות אינה מוגדרות בHTML. הוא מוגדר ב- JavaScript. ומטאור צריך לדעת מה הוא משימות כאשר אנו נכנסים לJavaScript כאן. משימות היא עוזר זה. עוזר, אתה יכול לחשוב על זה כמשתנה תבנית. ומה משימות עושה? ובכן, זה מחזיר את רשימת הערכים. כי זה רשימה, אנחנו יכולים לקרוא כל אחד בזה. אז זאת הסיבה שאנחנו קוראים כל במשימות. ועכשיו יש לנו משימה. 

מה משימה עושה? ובכן, יש לו חץ זה כאן אחרי הסוגריים המסולסלים. זה אומר שמשימתה תבנית. זה לא עוזר, כמו מה שראינו. זה תבנית שהגדרנו. ושבו הגדרנו אותו? אנחנו כבר הגדרנו אותו מתחת לכאן. 

כל תבנית זו עושה היא לדקלם פריט רשימה, והוא קורא טקסט. עכשיו, טקסט שנראה כ עוזר, אבל אני אראה לך שזה בעצם עדיין חבר נתונים של משימות. כשאתה מתקשר כל, זה הולך ל מבנה נתונים קצת. כמו foreach הלולאה, זה עכשיו פשוט נראה באלמנט הראשון באובייקט שלנו. אנו רואים טקסט שהוא מוגדר כאן באובייקט שלנו. אז המטאור הוא חכם כדי לדעת ש על הטקסט הזה שאנחנו מדברים, לא עוזר שנקרא טקסט. זה פשוט מקבל את הערך של זה טקסט כאן ומציג אותו כHTML, וזה נתונים איך הולך מJavaScript כדי HTML. 

נע על אף, בדוגמא זו אנחנו מקודדים קשים ערכים אלה. המטאור עושה שני באמת דברים נחמדים עבורנו. מלבד הרענון החי ש הראתה, גם היא המנהלת בבסיס הנתונים שלנו. אם היית צריך לעבוד עם PHP, אתה צריך להגדיר את phpMyAdmin. אתה צריך לוודא שלך שולחנות היו כל סימון. אתה צריך לעשות הרבה עבודה לעשות הנתונים שלך בטוח היה מעוצבים בצורה נכונה, ו- PHP יכול לתקשר איתו. 

עכשיו, מטאור משתמש פרדיגמה חדשה. זוהי דרך מודרנית יותר טיפול במסד נתונים. זה טכנולוגיה המכונה MongoDB. בדיוק כמו ב- JavaScript, ראה שזה לא משנה מה היו סוגי נתונים. הכל היה var. זה לא היה charstar. זה לא היה int. זה לא היה struct. זה היה רק ​​var זה, var ש. 

MongoDB עובד סוג של אותה הדרך. אתה לא צריך להגדיר השולחנות שלך. אתה לא צריך להגיד שולחן יש לו שם, שבו יש int. יש לו, אני לא יודע, דולר, אשר הוא עשרוני. זה פשוט JavaScript אובייקטים אלה, כל VARs אלה, במהות. וזה באמת חזק דרך לאב טיפוס האפליקציה שלך. וזו הסיבה שמטאור מנצל זאת. 

אם אנחנו הולכים לשלב שלישי, בואו לראות מה השתנה. אם אנחנו מסתכלים על HTML todos, לא הרבה. CSS לא השתנה בכלל. אבל השינוי הקטן שאנו רואים ב- HTML הוא שינינו כמה משימות מוגדרת. משימות היא כעת פונקציה. זה אומר שכל זמן אנחנו רוצים להגיע משימות, אנחנו הולכים לרוץ בפונקציה זו. זה לא יחזור פונקציה כערך. 

המטאור הוא חכם לרוץ למעשה פונקציה כדי לראות מה אנחנו יוצאים. וזה מחזיר את הדבר הזה שנקרא משימות. אנחנו הגדרנו משימות בשורה אחת, וזה אוסף Mongo. Mongo מתייחס ל מסד נתוני המטאור משתמש, וזה חדש רק אומר בואו נעשה אוסף חדש, קורא לזה משימות. בMySQL, זה יהיה שווה ערך ל מחפש משימות הטבלה בשם. יש Mongo אוספים, לא שולחנות. אז זה פשוט נראה למשימות. 

עכשיו, תבנית בנו עוזר בתבנית, כל אנחנו צריכים לעשות כדי לקבל את כל משימות היא פונקציה זו, מוצאת וסד ריק. זה יותר מיוחד לתחביר Mongo. יש הרבה תיעוד מקוון לאיך אתה יכול לייעל ו באמת שימושי שאילתות Mongo. אבל משהו כזה הוא טוב מספיק רק למצוא את כל הנתונים. 

עכשיו, אחד הנושאים שאתה עשוי לראות הוא שאנחנו אף פעם לא באמת להוסיף נתונים. אז מה קורה כאשר אנחנו למעשה לרוץ צעד שלושה? בואו נלך במהירות ל השלב שלישי ולהפעיל מטאור. שים לב שיש לי עוד מטאור פרויקט פועל במקום אחר, כך המטאור לא אוהב את זה. אני רק הולך להיסגר במהירות ל המטאור האחר עם הבקרה C, ללכת לצעד שלושה, ולהפעיל מטאור שוב. שים לב, זה מתחיל MongoDB כי MongoDB הוא חלק מכל פרויקט מטאור. 

אז זה אומר שיש לי שגיאות יישום. זה תכונה נחמדה יש ​​מטאור. זה גורם לך בטוח HTML אומת גם. בואו נסתכל במהירות במה זה יכול להיות. נראה שיש לי בטעות העתיק את קוד HTML לא בסדר. אם אני שומר אותו עכשיו, מטאור באופן אוטומטי מחדש את השרת, ועכשיו את האפליקציה פועלת כצפוי. שים לב כדי לתקן את זה, אתה יכול פשוט להפעיל את אותו קובץ HTML מצעד שני, להעתיק אותו לצעד שלוש. 

אנחנו יכולים לחזור למארח המקומי שלנו. ועכשיו אנו רואים שיש לנו שלנו כדי לעשות את הרשימה. גדול, אבל זה ריק. למעשה אין לנו שום משימות בבסיס הנתונים שלנו Mongo. אז בואו נדבר על כמה דרכים שאנחנו יכולים לעשות את זה. אם נחזור למסוף, אנחנו יכול לסגור אותו ולהפעיל את המטאור Mongo. 

אם אתה מכיר עם איך מטאור עובד, זה בעצם נותן לך גישה לMongoDB המלא למטאור. שים לב שיש לך להיות מפעיל המטאור ראשון שזה יעבוד. אז אם אני מפעיל את זה בלשונית חדשה, אני יכול לחזור לאותה הספרייה. ועכשיו המטאור עובד בסדר גמור. זוהי הפקודה. תנו לי לעשות את זה קצת גדול יותר כדי שנוכל לראות. זה נראה קצת שונה מ מה שאתה יכול להשתמש בהם כדי לך באמת לא צריך להשתמש Mongo. הנקודה שלי כאן היא כל כך שאתה יכול להשתמש ב- JavaScript. אבל אם אתם סקרנים, API Mongo לא להשתמש ב- SQL, שפת שאילתות מובנית. היא משתמשת בשפה משלו ש נראה הרבה כמו JavaScript. מהר מאוד, אנחנו יכולים למצוא את השולחן באמצעות db.tasks. וזה אומר לי מתברר אם אנחנו רצים למצוא, סוג של דומה למה שהיו לנו עם מטאור, אנחנו יכולים לטעון את כל האלמנטים. הבעיה היא, שאנחנו לא למעשה יש כל משימות מוגדרות. כך שזה לא יכול לקבל אותם. 

אנחנו יכולים להכניס, אם כי. אז אנחנו יכולים לרוץ הוספה עם הוספת פקודה. ואנחנו רק נותנים לי אובייקט, ואנחנו רק לוודא את הפורמט הוא מה שאנחנו מצפים. אם נראו בשלב שני, ראינו שכל משימה היה אובייקט עם טקסט כמפתח וכל מה ש לעשות הפריט שלך היה כמשתנה. אז אנחנו יכולים לעשות כאן משהו. 

אנחנו יכולים לקבל את זה להכניס משימה בשמי מMongo לבוא. ואנחנו לחצו על Enter, והיא פועלת. אנחנו יכולים לרוץ למצוא שוב, ואנחנו רואה שיש כאן אובייקט. Mongo מקצה לו תעודת זהות, שבו אתה לא באמת צריך לדאוג. מה שחשוב לך הוא נתונים אתה מכניס, הוא נתונים שאתה יוצא. 

בואו נחזור לאתר שלנו, והיי, המשימה שלנו עמוסה. ואתה יכול לראות ש כי המטאור הוא מאוד חכם ותמיד מרענן בשבילך, אני לא צריך לגעת בדף. זה באופן אוטומטי טעון. 

בואו נרוץ קצת קוד ב JavaScript אף לעשות את זה. כמו שיש לנו צומת בגב בסופו של לבצע את JavaScript, אנחנו יכולים גם להפעיל JavaScript ישירות בדפדפנים שלנו. אתה יכול לעשות זאת על ידי תכונה נקרא בדיקת רכיב. אם אני לחץ לחיצה ימנית על סעיף של הדף, יש אפשרות נקרא בדיקת רכיב. אם אתה מפעיל דפדפן כמו ספארי, אתה ייתכן שיצטרך להפעיל המפתח שלך כלים לפני שאתה מקבל בתכונה זו. 

מה אכפת לנו הוא הקונסולה. אז אנחנו פשוט נלך ל קונסולה בתחתית. עכשיו אנחנו יכולים להפעיל את כל JavaScript כאן, כמו JavaScript קבצים שהראיתי בדוגמא js. אבל עכשיו בואו נסתכל על משימות. אנחנו יכולים להריץ את הפקודה שלנו. ואני מקווה שאני אהיה מסוגל לעשות זה קצת יותר גדול כדי שנוכל לראות את כל. 

אם נריץ tasks.find, ואתה תראה שזה בדיוק את אותו הקוד ששימושי קובץ JavaScript בשלב שלושה, task.find זה. אנחנו יכולים לרוץ את אותו הדבר, ו עכשיו אנחנו מקבלים כמה דברים מוזרים. איך אנחנו בעצם מקבלים את הנתונים? ובכן, יש לנו כדי להפעיל את זה הפקודה נקראת להביא. 

זה מאוד שימושי לאיתור באגים. מה שאתה מקבל כאן הוא סמן, ואת זה הוא דרך נחמדה יש ​​מטאור הנתונים מקסימים מותאמים. יש סמן מכיל את כל התכונות ל עדכון חי ולרענן את הדף כאשר משהו השתנה. אבל זה לא יקבל אותנו נתונים. אנחנו יכולים לקבל את הנתונים באמצעות להביא. ואתה רואה שיש לנו אובייקט, ו זה בדיוק כמו מה שהיה לנו בMongo, עם תעודת זהות ואת הטקסט שאנחנו מכניסים. 

אז איך אנחנו להכניס את הפריט במטאור? ובכן, רק שיש לנו משימות. ואז אנחנו יכולים לרוץ אותו פקודת Insert, נותן מילון או אובייקט עם אותו הפורמט, הטקסט ואז אני מהמסוף לבוא. תסתכל מעל כי כש לעשות את זה, זה מראה על האתר באופן אוטומטי. 

שימו לב שאתה יכול לשים כל דבר אתה רוצה בסעיפים אלו. זה לא חייב יש מבנה קבוע. יש לי יכולים שווה ל מספר שלוש וb שווה ל- false. וזה עובד. אני אפילו יכול לבחור שלא כולל טקסט בכל. זה פשוט לא מומלץ אף כי אז מטאור לא יודע מה להציג. אבל בכל מקרה, אנחנו לקבל תעודת זהות, וזה זיהוי של האובייקט שאתה יכול להשתמש. 

ככל שאנו ממשיכים עם צעד ארבעה וצעד חמש, ההדרכה תיראה לכם דרכים ש אתה יכול ליצור רכיבי ממשק משתמש באמצעות HTML אתה יודע ל ליצור משימות שונות. בואו נסתכל על צעד ארבעה ממש מהר. אנחנו אראה שהוספנו סעיף על אירועים. תבניות יכולות להיות עוזרים, שיקבלו אותנו נתונים. אבל זה גם יכול לקרוא לאירועים. וזה מקום שבי דברים הופך להיות שימושי, משום שאירועים הם מה שקורה כאשר אתה לוחץ על דברים שונים באתר שלך. 

כאן, הקוד שלנו הוא לספר לנו להוסיף את האירוע הזה. הוסף אותו בעת ששלחת משהו עם המשימה החדשה בכיתה. מה יש לכם כאן הוא בורר CSS. אז זה פשוט נראה לHTML אלמנטים שיש משימה החדשה בכיתה. וזה נראה לאירוע, כמו שליחה. אירועים אחרים כוללים לחץ, לרחף, לחץ לחיצה כפולה, דומה למה שאתה מקבל ב- HTML הרגיל. 

מה אתה נותן לו כאן הוא כעת פונקציה. ואתה יכול להיות שלך קוד בפונקציה ש. פונקציה זו היא מה שסופו של דבר מקבל נקרא כאשר אתה שולח משימה חדשה זו. בואו נסתכל על HTML רק כדי ש להבין מה היא משימה חדשה זו. הוספנו טופס כאן עם משימה חדשה בכיתה. ויש לה קלט שלוקח טקסט. וזה מקום שבנו יוסיף המשימות החדשות שלנו. 

בואו לרוץ צעד ארבעה ב אתר אינטרנט כדי לראות איך זה נראה. אנחנו יכולים להפסיק את הראשון של MongoDB היו לנו מהקודם שלנו דוגמא עם הבקרה ג ובואו לשנות אותו ל הצעד ארבע ספרייה. אנו נפעיל מטאור שוב כדי להפעיל את השרת. ולמרבה הצער, לא היה לי מטאור פועל במסוף אחר. אז אני פשוט הולך ל לוודא שזה סגור. בואו להפסיק את זה ושינוי לחלק ארבעה, צעד ארבעה. OK. 

עכשיו קוד המטאור שלנו פועל. ואתה יכול לראות שזה מעודכן, ללא שלנו אפילו שיש לרענן את הדף. מה השתנה כאן הוא עכשיו כי אין לנו כל משימות, אבל יש לנו טופס כאן, זה תיבת טקסט, להוסיף המשימות החדשות שלנו. ואנחנו יכולים להקליד המשימה שלנו כאן. אני מהעמוד HTML לבוא. כאשר אני לוחץ על Enter, זה יש להגיש. 

אנחנו יכולים לראות את מה שקורה כ שהוגדר על ידי קוד JavaScript. מה פונקציה זו עשתה היה לקחת את הטקסט מהטופס, ואז פשוט נקרא tasks.insert, כמו שעשינו בקונסולה. הם גם בחרו להוסיף תאריך createdAt. כך שהיית ציין את השעה הנוכחית. אחרי זה, זה מנקה את הטופס על ידי ביצוע בטוח הערך הוא המחרוזת הריקה. 

ולאחר מכן הוא קורא לחזור שווא ל לוודא ששום דבר אחר לא קורה. כשאתה חוזר משווא אירוע טופס, שעוצר את הביצוע. אומר שיש צורת פעולה, כמו להגיש לדף PHP. אם אתה לא חזר שקר, שהיית חוזר אמיתי. זה היה בסופו של דבר עושה את הבקשה. מיירט שווא זה ו מפסיק את זה ממש שם. 

אז זה היה קצת הדגמה על איך מטאור עובד, ויש לנו היה הבא ההדרכה לזמן מה. ואתה יכול בבקשה מרגיש חופשי להמשיך לעשות את זה. יש שפע של משאבים, וההדרכה היא למעשה רק טוב מאוד על הסברה מה קורה. אני רוצה להראות לך עכשיו, ב כמה דקות שנשארנו לנו, מה הם כמה מ תכונות קרירה של מטאור, ומה הם חלק מ חבילות שימושיות יותר. אחד הדברים הגדולים על מטאור הוא שיש לך מערכת חבילה. אתה יכול בקלות לשלב קוד כי אלפי רבים של מפתחים כתבתי ברחבי העולם לפרויקט המטאור שלך. אחת דוגמאות לכך היא מה שאפשר לעשות בשלב תשעה של ההדרכה, שבו אתה מנסה להוסיף חשבונות לפרויקט המטאור שלך. אם יש לנו PHP CS50 פרויקט, שהיינו לי להסתמך על המסגרת או הקוד שלנו כדי להפוך את בטוח שאנחנו באופן מאובטח להתמודד סיסמאות ושמות משתמש ואחסון בבסיס הנתונים ואת כל זה. 

מתברר שיש כמה מטאור חבילות לעשות את זה בשבילך, וכדי לעשות את זה מאוד בקלות. מה אנחנו יכולים לעשות הוא להוסיף כמה חבילות. אז בואו לעשות את הדבר נכון ש עכשיו בקונסולה שלנו. אני הולך לעזוב את הפרויקט ו עכשיו נכנס לפשוט-todos. עכשיו, פשוט-todos הוא הפרויקט ש יהיה לאחר שנעשה עם צעד 11 או 12 צעד, בסופו של מדריך זה. ובואו נסתכל על זה במהירות כדי לראות מה הן התכונות השונות שיש לנו. בואו רק לוודא שהוא פועל. לפעמים זה לוקח זמן כדי לרענן, אבל הנה זה. 

יש לנו אפשרותנו להסתיר משימות מלאים, ואנחנו יכולים להיכנס. וזה נעשה ב חבילת המטאור. זה נהדר. עכשיו יש לנו שם משתמש וסימן סיסמא ב. אבל מה אם אנחנו רוצים להוסיף סוג אחר של מנגנון התחברות? בואו נגיד שאני רציתי להיכנס עם חשבון המטאור שלי. אני הולך לרוץ תוספת מטאור, וזה הוא התחביר להוספת חבילות. אני יכול לומר חשבונות, וaccounts.meteor. זה הולך למצוא עכשיו החבילה ולטעון אותו. אתה יכול לראות שיש לי לא מצאתי שם החבילה הנכונה. 

אז איך אתה לברר על חבילות? ובכן יש אתר אינטרנט גדול, שנעשה זמין על ידי אנשי המטאור, נקרא atmospherejs.com. Atmospherejs, מילה אחת, נקודה com, הוא מאגר גדול למציאת כל המטאור חבילות במאגר. אני יכול לחפש חשבונות, ולאחר מכן זה יראו לי את כל הדברים הרלוונטיים, כל החבילות עם שמו של החשבון. 

בעוד שנטען, אנחנו יכולים לנסות הוספה כמה חבילות אחרות. אולי חבילת המטאור לא עובדת עכשיו, אבל אני יכול להוסיף פייסבוק. אני יכול להוסיף את החשבון ולאחר מכן להפעיל את פרויקט המטאור שוב. ברגע שזה מתחיל, בואו לראות מה השתנה באתר. אתה יכול see-- אני עלול צריך לרענן אותו כאן. 

יש לי לחצן ל להגדיר התחברות פייסבוק. והנה, יש לי כל הוראות המטאור הכין עבורך ל הגדרת יישום Facebook. ואתה יכול להשתמש בזה מידע להוסיף זיהוי שלך. ברגע שזה נעשה, יהיה לך התחברות פייסבוק עובדת באפליקציה שלך. 

אני רק הולך לקבל מזהה יישום וסוד, רק כדי להראות לך איך זה יכול לעבוד. אתה צריך חשבון בפייסבוק כדי להשתמש באפשרויות מפתחי פייסבוק. תן לי רק למצוא במהירות מפתחות מטאור שנחוצים. יש לי פרויקט מטאור אחר כי אני הולך להשתמש, ואני רק הולך לקחת המפתחות מקובץ ש. 

וברגע שאני מוצא את זה, אני רק נוכל כדי להעתיק את המפתחות האלה לפייסבוק שלי. אז הנה הוא מפתח. וזה סוד. אתה לא צריך להיות שיתוף זה עם אנשים. ואז אתה נותן את זה בסוד את האפליקציה שלך. וזה כל כך פייסבוק מכיר אותך אתה. ולך לשמור את התצורה. 

אני חושב שבתהליך הפסיק האפליקציה המטאור שלי. אז אני רק רוצה לעשות בטוח שזה עדיין שם. OK, בואו נוודא שרת המטאור שלנו פועל כך בדף האינטרנט בו פועל. שים לב אם אנחנו עוצרים המטאור שרת, הדף הוא עדיין שם. זה פשוט לא יעדכן יותר. שרת המטאור הוא הכרחי לוודא הדף הוא חי. 

OK, אני כבר הגשתי אותו, ועכשיו אני יכול להיכנס עם פייסבוק. עכשיו זה רק עניין של נתקל עד פופ פייסבוק ולשים בחשבון שלך מידע ורישום ב. ברגע שאתה עושה את זה, אולי פייסבוק לנדנד לך על כמה ביטחון יותר. אז אנחנו פשוט נפסיק שם. הנקודה היא שכשתסיים עם זה, יהיה לך התחברות פייסבוק. 

יש מטאור חבורה של חבילות אחרות גם כן. אתה יכול להיכנס ל- Google+. אתה יכול להתחבר עם GitHub. אתה יכול להתחבר עם טוויטר. או אם אתה חיפוש, למצוא שפע של דברים אחרים כמו Meetup, LinkedIn, ומפתחי מטאור. אז מפתחי מטאור היו חבילה שחיפשתי. מטאור להוסיף חשבונות-מטאור-מפתח. בינתיים, אני גם רוצה להמליץ כמה חבילות אחרות לפרויקטים שלך. זה יכול להיות שימושי ל כולל חבילת jQuery. זה מאפשר לך להשתמש ב jQuery בלקוחות שלך. אתה פשוט יכול לעשות את זה עם שורה אחת, ו מטאור יהיה לוודא שאתה מעודכן על jQuery. אני גם ממליץ יוסטון: admin. 

זה כמו סוג של phpMyAdmin סוג של כלי לMongoDB שלך. זה מאפשר לך לערוך הנתונים שלך די בקלות מבלי ללכת לפגז Mongo, כמו שעשיתי לפני כן בסמינר. אז עכשיו שזה פועל, בואו נרוץ מטאור שוב ולראות מה אנחנו יכולים לעשות. 

אתה שם לב שהוספת כמה חבילות אולי יש להם להציג כמה אזהרות. אתה לא צריך לדאוג על זה עם יוסטון. אז עכשיו אנחנו יכולים להיות האופציה כדי להגדיר את תצורת מנהל מטאור. והם נותנים לך כיוונים אם אתה רוצה להגדיר את זה. 

כמו כן, אנו יכולים כעת ללכת ל/ admin. זה הוא הביא לך על ידי חבילת יוסטון. ואת זה הוא ממשק ניהול מטאור. אתה פשוט ליצור חשבון מנהל, כמו כל כך. ואם אתה לרענן את הדף, אתה עלול יש לי כמה אוספים להופיע. 

זה כלי מאוד שימושי, ואני מאוד ממליץ עליו. אתה יכול לראות את זה כי יוסטון הייתה נותנת כמה טעויות, אין לנו כל אוספים להופיע עכשיו. הדרך היית להשתמש יוסטון היא כדי לוודא שפונקציה זו מקבלת נקרא בפשוט-todos שלך. אז יוסטון אינה יודע מה הן המשימות שלי. 

הקמנו Mongo משימות נקראות אוסף. בואו נלך לפשוט-todos ורק לוודא כי בJavaScript, יש לנו משימות הוסיפו לאוספים שלנו. עכשיו אנחנו כבר הצילו, וזה בונה היישום, מרענן. ובואו נראה. עכשיו יש לנו כמה משימות. ואנחנו יכולים להוסיף כמה משימות חדשות. אבל אם אנחנו רוצים להוסיף משימות, בואו נעשה את זה עם האפליקציה עצמה. 

עכשיו אנחנו יכולים להוסיף קצת נתונים. היי, זו משימה. זה נראה קצת מוזר ש אנחנו לא רואים את כל משימות. אנחנו אולי נרצה לבדוק אם יש לנו כל טעויות פה, או אולי במקום אחר. אם נלך למנהל, שנראה לי מוזר. אם אתה מושך את המאגר אחרי הסמינר, אני אדאג ש פשוט-todos עובד עם יוסטון. למרבה הצער, זה לא נראה ל להיות עובד ברגע זה ממש. 

האם יש שאלות? יוסטון בדרך כלל היא כלי שעובד טוב מאוד. יוסטון במיוחד היא קצת buggier מהאחרים, אבל אני ממליץ עליו כאשר הוא עובד. כן. 

קהל: מה אתה יכול לעשות עם חבילת פייסבוק פעם במשתמש מחובר עם הפייסבוק שלהם? 

רוג'ר ZURAWICKI: ברגע ש המשתמש של מחובר, ניתן לבצע שיחות לAPI פייסבוק. הרבה שנמצאת יותר ב איך פייסבוק פותח API שלהם. מטאור, לוודא שאתה יש קשר. אבל כל מה שאחרי זה הוא עניין ללמוד כיצד להשתמש ב- API פייסבוק. קהל: [לא ברור]. רוג'ר ZURAWICKI: בסדר. תודה רבה לך על סמינר CS50 זה במטאור. אם יש לך שאלות, אתה יכול לשלוח לי בכתובת הדוא"ל שלי המפורטים להלן הסמינר. ואני אהיה שמח לענות על השאלות שלך. גם אני אהיה ב CS50 האקאתון צריך אתה צריך עזרה עם פרויקטי המטאור שלך. תודה על צפייה.