הסבר על Firebase Auth - יצירת משתמשים והתחברות לאפלקציה
Login.storyboard, Empty.storyboard ו-Main. ב-Login יש Navigation Controller עם שני כפתורים, הרשמה והתחברות, ועם Show Segue לשני מסכים. מסך ההרשמה כולל אימייל, סיסמה (Secure Text Entry) וכינוי, ומסך ההתחברות רק אימייל וסיסמה.Empty. ככה מי שלא עבר דרך המסלול הרגיל רואה רק מסך ריק.Main, ואחרת Login. הוא נקרא מתוך willConnectTo ב-SceneDelegate, ובודק לפני כן שהקוד רץ על ה-main thread.GoogleService-Info.plist ומוסיפים לפרויקט. ב-Authentication מפעילים אימייל וסיסמה, ב-Database בוחרים Realtime Database במצב בדיקה, ויוצרים Storage Bucket.pod install ופותחים את ה-xcworkspace. ב-AppDelegate מוסיפים import Firebase ו-FirebaseApp.configure().UIViewController באפליקציה. פרוטוקול נוסף, UserValidation, מוסיף בדיקות לאימייל ולסיסמה. הוא מצורף רק למסכי ההרשמה וההתחברות.signOut בתוך do/try/catch וה-Router מחזיר למסך ההתחברות.Auth.auth().createUser(withEmail:password:completion:)Auth.auth().signIn(withEmail:password:completion:)Auth.auth().currentUseruser.createProfileChangeRequest() עם displayName ואחריו commitChangestry Auth.auth().signOut()pod init, open -a xcode Podfile, pod installפרקי ההרצאה: הסבר על Firebase Auth - יצירת משתמשים והתחברות לאפלקציה
תמלול ההרצאה: הסבר על Firebase Auth - יצירת משתמשים והתחברות לאפלקציה
הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Firebase Auth - יצירת משתמשים והתחברות לאפלקציה» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום וברוכים הבאים הפרויקט הבא שלנו עוסק בשירותי עניין של גוגל שנקראים Firebase ובעצם הם נותנים לנו מגוון רחב של אפשרויות להוסיף לאפליקציה זה פרויקט גדול והוא יהיה מחולק למספר חלקים.
החלק הראשון שאנחנו נרצה לעסוק בו הוא חלק של הרשמה וחיבור שמשתמשים לאפליקציה וגם הפרדה שמשתמשים לא רשומים מן האפליקציה שלנו. אנחנו בעצם נרצה בהתחלה לייצר איזשהו מסך התחברות והרשמה אם אנחנו נריץ לראשונה את האפליקציה במכשיר חדש, אז האפליקציה תביא אותנו למסך של התחברות והרשמה.
לעומת זאת, אם אנחנו נריץ את האפליקציה במכשיר שהמשתמש שלנו כבר התחבר, אז אנחנו נראה את המסך הראשי של האפליקציה. אז החלק הזה עוסק בהתחברות והרשמה, והוא משתמש פה בשירותי הנעד של Firebase, שבמקרה הזה Authentication.
כמו שאתם יכולים לראות, Firebase מעניקים לנו המון המון שירותי הנעד, בין אם זה שמירת מידע, בין אם זה אחסון קבצים בין אם זה שירותי אותנטיקיישן כלומר וידעו שהמשתמשים מחוברים ולעזור לנו לחבר אותם לאפליקציה ועוד המון המון שירותים נוספים שגוגל יכולה להציע לכם אם אתם תבחרו להשתמש בשירותים של פיירבייס והיום אנחנו נרצה ללמוד להתחיל להשתמש בפיירבייס
בפרויקטים. אז לגבי מסך הרשמה בוא נעשה לכם איזשהו סיור באפליקציה בגלל ששוב פעם זאת אפליקציה מורכבת ואנחנו נבנה אותה בשלבים.
לגבי המסך הראשי של ההרשמה אז כאן אנחנו נתקלים באיזשהו מסך שאומר ברוכים הבאים מה אתה רוצה לעשות להתחבר או להירשם בוא נגיד שאנחנו רוצים להירשם כמשתמשים חדשים במצב כזה אנחנו נרצה לבחור אימייל למשתמש שלנו אז בוא נגיד נמציא פה איזשהו אימייל באנגלית אבל [email protected] עבור הפסוורד
אני אבחר תמיד ב-1-6 כדי שאני אזכור את הסיסמאות ועבור איזשהו שם חיבה אז בוא נגיד אבוש אוקיי עכשיו אנחנו נרצה להירשם ובגלל שאין משתמש קיים אז האפליקציה בסופו של דבר תרשום אותי וכרגע אני מחובר לאפליקציה במידה והייתי בוחר לצאת מהאפליקציה לעשות התנתקות אז שוב פעם הייתי מגיע למסך הזה ואז הייתי יכול לנסות להתחבר
אוקיי נגיד אם אני רוצה עם אבי אז אבי@gmail.com ובוא ננסה להתחבר באיזושהי סיסמה 1 עד 5 אני אנסה אני אנסה sign in אז sign in failed הסיסמה היא כנראה לא נכונה אולי ננסה שוב ובוא ננסה שוב הפעם עם הסיסמה הנכונה ועכשיו אני מצליח להתחבר עוד נקודה קטנה אם אנחנו מנסים להירשם עוד פעם כאבי וזה לא משנה באיזה סיסמה נבחר או באיזה ניק ניים
גם אז האימייל הזה הוא רדי טייקן נכון מגניב אז אנחנו לא נרצה במצב כזה להתחבר שוב להירשם שוב אלא במצב כזה אנחנו נרצה לעשות התחברות ונזכור את הפרטים שלנו ואני זוכר שסיסמה היא 1-6. אוקיי אז זה בעצם לגבי מסך ההרשמה מה עוד יהיה באפליקציה למעט הרשמה התחברות והתנתקות שזה גם כן חלק לא מבוטל בנוסף יהיה לנו פה אפשרות בעצם לבנות חדרי צ'אט חדרי שיחה בלחיצה על פלוס אנחנו
בונים צ'אט רום חדש ואנחנו נרצה נגיד לתת שם לחדר אז בוא נאמר חדר שלי ואנחנו נרצה לתת איזושהי תמונה אנחנו נוכל לבחור תמונה בין אם זה מה מצלמה בין אם זה מהגלריה דרך אגב בסימולטור יש רק גלריה אז אני לא יכול לבחור בסימולטור מצלמה אלא אם כן אני בטלפון אמיתי אז אני אבחר תמונה מהגלריה וייפתח לנו נוסח לבחירת תמונה מהגלריה נבחר איזושהי תמונה אפשר דרך אגב להקטין ולהגדיל את התמונה
ולהזיז מה שאתם רוצים ולעשות שוז ונגיד שאנחנו מרוצים אז אנחנו ניצור את החדר החדר נוצר בענן בדאטאבייס ואנחנו נסתכל על זה גם כן וברגע שהחדר נוצר הוא נטען, וכמו שאתם יכולים לראות הוא לא נטען רק אצלי, הוא נטען אצל עוד משתמשים אחרים באפליקציה.
החדר הזה נוצר על ידי אבי, ואני בטלפון השני מחובר על ידי משתמש אחר. אוקיי? עכשיו, מה אנחנו נעשה עם החדרים האלה, נכון? אנחנו רואים פה בעצם מידע ששמרנו בדאטאבייס בענן, ואתם תוכלו לראות את המידע הזה שמור בענן, אני עוד מעט אראה לכם אותו, אבל חוץ מזה שאנחנו רוצים לשמור מידע בענן ולאכזב אותו כאן,
מידע ששמור בענן וכאן אנחנו מציגים אותו בוא נראה רגע איך הוא שמור בענן אנחנו כמובן נסתכל על זה יותר בפרטי יותר מאוחר אני רק נותן לכם איזשהו walkthrough לאפליקציה אז המידע נשמר בדאטאבייס של גוגל בפיירבייס וכאן אם אנחנו נסתכל בדאטאבייס אנחנו יכולים לראות את
ההודעות ואת החדרים בחדרים יש לי את החדר האחרון הזה שנוצר על ידי חדר אחד החדרים פה נוצר על ידי אבי זה החדר של אבי ויתר החדרים זה החדרים האחרים שאנחנו רואים אז הכל פה שמור בדאטאבייס בפורמט הזה ובנוסף יש לנו storage שב storage שמורות כל התמונות קבצים שאנחנו מעלים יהיו שמורים בתמונות שלנו בקבצים ומשתמשים שהתחברו לאפליקציה יהיו שמורים
תחת משתמשים אוקיי אז אנחנו בעצם שומרים פה מידע בדאטאבייס הזה ואנחנו מציגים אותו ב-Table View. בנוסף לזה אנחנו נרצה הרי לא רק לשמור מידע ולאחזר מידע, אנחנו נרצה אפילו לעשות יותר מזה בפרויקט ולהראות לכם איך אפשר לעשות פרויקט צ'אט ברמה די טובה של עיצוב.
בואו נסתכל אם אני אלחץ פה מה אנחנו רואים. אנחנו יכולים לראות בעצם איזושהי שיחה בין משתמשים. עכשיו תזכרו שאנחנו אבי ויש כל מיני משתמשים באפליקציה נגיד תומר, ודיו אז עכשיו אבי יוציא הודעה חדשה היי חברים ואני אעשה פה send אוקיי עכשיו הדבר הזה נמצא בחדר של let's talk אז אם אני אכנס לחדר של
let's talk אני אראה שאבי כתב את זה ודיו זה המשתמש שמחובר בגלל שההודעות שלו בירוק בירוק ההודעות של אבי הן בירוק בגלל שזה אבי אוקיי אבי גם יכול להעלות הודעות תמונה ואנחנו נראה אותה בכל הטלפונים כל המשתמשים של האפליקציה יראו אותן בעצם בreal time ואם זה לא מספיק אז יש לנו אפילו אפשרות לזהות אמוג'יס באפליקציה
ולתת להם התייחסות לא כטקסט רגיל אלא אתם מכירים את זה שאתם שמים נגיד איזשהו אמוג'י בצ'אט והוא קצת מוגדל ונראה נחמד אז גם אצלנו באפליקציה זה יהיה אפשרי ואתם יכולים לראות שהאמוג'יס לא עטופים בבועות כאלה של טקסט אלא מוצגים כאמוג'יס במלוא הדרם אז זה בעצם הפרויקט שלנו
יש פה המון המון דברים לכסות בין אם זה התחברות של משתמשים בין אם זה עבודה עם דאטאבייס פשוטו כמשמעו ובין אם זה ה-Chat UI הזה שהראתי לכם כאן, אוקיי?
בואו נרד רגע לקצת פרטים טכניים, אז מבחינת פרטים טכניים אנחנו נרצה להשתמש בשירותי העניין של Firebase, והדבר הראשון שאנחנו נתחיל איתו היא לבחור קובץ Storyboard דינמי כדי להפריד משתמשים לא מחוברים לגמרי מהאפליקציה, שלא יוכלו להיכנס לאף מקום למעט המסכים של הלוגין.
בנוסף, אחר כך אנחנו נאפשר את הלוגין ואת ה-Registration בעזרת שימוש בfirebase off וכשנסיים את זה אז אנחנו נתחיל ללמוד איך לשמור מידע בדאטאבייס ולאחזר אותו לא רק מידע כי אם גם לשמור קבצים בדאטאבייס ולהוריד אותם ולא רק זה אלא גם הצ'אט UI שהראתי לכם
ובונוס קטן הזיהוי של האמוג'יסט בטקסט כדי לאפשר לאמוג'יסט להיות מוצגים בצורה יפה כמו שהם באמת מוצגים בצ'אטי אוקיי אתם שמים לב שבמקום אחד זה בצד ימין ובמקום אחר זה בצד שמאל ככה זה בצ'אט בטלפון נכון כשאני מוציא הודעה זה משהו אחד וכשמישהו שולח לי הודעה זה נראה במקום אחר אוקיי אם דייב ישלח פה הודעה אז ההודעה שלו תהיה בירוק
היי אבי אוקיי אז זה בעצם כל הפרויקט שלנו דרך אגב הכל נשמר פה בדאטאבייס כל ההודעות שאתם רואים נשמרים פה בדאטאבייס אז ברגע שאני מוציא פה איזושהי הודעה אז אוטומטית היא נשמרת לנו גם בדאטאבייס עצמו אוקיי אתם יכולים לראות עדכונים מיד ככה באיזשהו chat room שההודעה הזאת נכנסה פנימה והדאטאבייס הזה נקרא real time database אז
אני מקווה שאתם מתרגשים גם אני ובואו נתחיל הנה הודעה חדשה שנכנסה היא נמצאת פה בדאטאבייס יפה אז בואו ניגש רגע לאקסקוד ונתחיל לאט לאט לאט לממש את כל הפרויקט הנהדר הזה באקסקוד אנחנו רוצים לייצר פרויקט חדש פייל ניו פרויקט הפרויקט יהיה single view application אנחנו נקרא לפרויקט שלנו fire chat
ואנחנו נרצה הפעם לשים לב שיש לנו פה את כל המזהים האלה בסדר אורגניזיישן אידנטיפייר ואנדל אידנטיפייר אנחנו נצטרך אותם בהמשך האפליקציה היא אפליקציה רגילה אנחנו לא צריכים פה פרויקט על זה core data בוא נעשה next ונשמור את זה בתגיעה של הפרויקט יפה אז כאמור אנחנו רוצים
לבודד את המשתמש שלנו אם הוא לא מחובב לבודד אותו מיתר האפליקציה ואמרנו שאנחנו נעשה את זה על ידי שימוש בקבצי סטורי בורד נפרדים אוקיי אנחנו נרצה לבחור בעצם סטורי בורד דינמי כדי להפריד משתמשים לא מחוברים מהאפליקציה ולשם כך אנחנו נייצר מספר סטורי בורדים וגם טוב לוגיקה מתאימה.
בגרופ של הפרויקט שלנו של פייר צ'אט אנחנו רוצים לעשות קליק ימני פה ולייצר גרופ חדש שבתוכו נכניס פשוט את כל הסטורי בורדים כדי לעבוד בצורה מסודרת, סטורי בורדס ולתוך הגרופ הזה אני אכניס כרגע את המיין סטורי בורד, את הלאנד סקרין שאנחנו נראה מה התפקיד שלו בכלל בכוח ואנחנו רוצים לייצר פה עוד קבצי סטורי בורד נוספים,
ללוגין אז בוא נעשה new file הקובץ הזה יהיה קובץ storyboard ובוא נקרא לזה login.storyboard וחוץ מהלוגין storyboard אנחנו רוצים לייצר עוד storyboard נוסף שאליו בעצם נשים את כל האנשים שלא אמורים בכלל להשתמש באפליקציה נקרא לזה empty.storyboard אז זהו אז יש לנו פה מספר קבצי storyboard נכון עכשיו ה-storyboardים החדשים שיצרנו הם בכלל view controllers אז בואו נעמוד פה רגע על
אמפתי ונתקן את העניין אנחנו נלחץ פלוס נוסיף view-controller ואנחנו נרצה גם שה-view-controller הזה יהיה נקודת הכניסה אתם רואים לסטורי בורד הזה נקודת כניסה כי הוא חדש אז אנחנו נוסיף לו נקודת כניסה לתוכנית איך עושים את זה עומדים על ה-view-controller ובתכונות שלו בצד ימין
לוחצים פה על ה-checkbox של easy niche של view-controller אותו דבר אנחנו נרצה גם לעשות בלוגין אבל לפני כן שנייה נדבוא נשים פה label כדי לזהות את זה שפשוט נדע שלכאן הגענו נכתוב לתוך הלייבל את הטקסט Empty כדי שנדע שזה ה-Storyboard Direct.
אני לא אטרח לשים פה אילוצים כי המשתמש שלנו לא יוכל להגיע לפה למעשה אף פעם אלא אם כן הוא נכנס בדרך לא חכמה לאפליקציה או בוא נאמר בדרך לא דרך כאילו איזשהו האקינג.
כאן אנחנו שוב פעם בלוגינג Storyboard רוצים להוסיף View Controller זה כבר יהיה Storyboard שאנחנו צריכים אותו. אז את ה-Storyboard, את ה-View Controller הזה נרצה להכניס לתוך navigation controller כדי לעשות את זה אנחנו ניקח את העכבר לצד ימין עד למטה לחץ ונעשה פה embed in navigation controller ואנחנו נרצה שהnavigation controller יהיה
נקודת כניסה לתוכנית אז אני עומד על הnavigation controller ואנחנו נלחץ פה על ה-checkbox בצד ימין של easy initial view controller יפה אז זה בעצם יהיה כבר המסך שאנחנו צריכים אותו כאן יהיו לנו שני כפתורים אז בוא נשים פאטונים כבר בטון ראשון ובטון שני אחד בשביל התחברות והשני בשביל הרשמה אז פשוט העתקתי ועכשיו
יש לי שני כפתורים בוא נגיד שהכפתור הראשון יהיה רג'יסטר והכפתור השני יהיה כפתור של התחברות אנחנו כמובן נרצה להוסיף פה קצת אילוצים וכאלה אז אני אתפוס את שני הכפתורים אנחנו יכולים בעצם להכניס אותם לאיזשהו סטאק כדי לחסוך מעט באילוצים אז אנחנו מכניסים אותם לסטאק ויו ואנחנו רוצים לאלץ את הסטאק ויו
אז נוסיף אילוצים add new constraints 16 16 16 ככה שהסטאק ויו יהיה רחב ולגבי שני הילדים של הסטאג ויוזר אנחנו רוצים שהם יהיו ככה עם איזשהו ספייסינג ריווח ביניהם אנחנו נרצה לתפוס את שני הכפתורים פה הראשון והשני ולשחק מעט עם העיצוב שלהם כדי שהם ייראו יותר נחמד אני אשנה את הטקסט מסיסטם פונט
לקאסטום פונט ואנחנו נבחר פה באיזשהו פונט יותר נחמד אז בוא נגיד שנלך על אבניר ואנחנו נרצה להגדיל את הטקסט בצורה קצת משמעותית יותר ואנחנו גם נרצה קצת לשחק טיפה עם הפיצוב של הפונט כדי שהוא ייראה נחמד, אז אני אקח פה heavy, אוקיי?
יפה. אפשר גם לתת איזשהו רקע לכפתורים, אבל אני חושב שהם מספיק ברורים. בוא נעצור פה עם הכפתורים. עכשיו, הכפתורים שלנו ירצו בעצם להוביל אותנו לשני מסכים נוספים.
המסכים הנוספים, בואו אני אעצר אותם כבר כדי שיהיה לנו איזושהי בנייה של הסדר באפליקציה. אז יש לי view controller ראשון, אני אשים אותו כאן. אני אקטין מעט את הזום כדי שתוכלו לראות יותר טוב ואני אעתיק ואדביק את ה-view controller הזה ועכשיו יש לי שניים רג'יסטר יוביל אותנו לפה אז אנחנו נעשה פה show segue ולוגין יוביל אותנו לכאן וגם פה