בניית אפליקצית צ'אט - Chat
var).save שומרת את המילון תחת ה-id של ההודעה. upload מייצרת שם קובץ מ-UUID עם סיומת jpeg, מעלה ל-Storage תחת message images, וקוראת ל-callback עם שגיאה אופציונלית.isEmoji של סוויפט מחזיר true גם על ספרה, ולכן הקוד בודק גם אמוג'י סטנדלון וגם אמוג'י מורכב. את containsOnlyEmoji משתמשים בצ'אט.indexPath.section הוא אינדקס ההודעה.queryOrdered לפי send date ו-observe לאירוע child added. כל הודעה נוספת למערך ואז reloadData. ב-deinit מסירים את המאזינים.didPressSendButtonWith מנקים את שדה הטקסט, משחררים את המקלדת, יוצרים הודעה ושומרים אותה בחדר.cellForItemAt. אם התא הוא מדיה והקטגוריה היא תמונה, טוענים ל-image view עם SD Web Image מה-storage reference של ההודעה.configureAvatarView נותן תמונה אחרת למשתמש הנוכחי ולאחרים. תווית עליונה עם שם השולח, בצבע אפור, עם יישור שמאלה להודעות נכנסות וימינה ליוצאות.פרקי ההרצאה: בניית אפליקצית צ'אט - Chat
תמלול ההרצאה: בניית אפליקצית צ'אט - Chat
הטקסט המלא של הדקות הראשונות בהרצאה «בניית אפליקצית צ'אט - Chat» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום וברוכים הבאים אנחנו רוצים בסרטון הזה לבצע את ה-Chat UI בעצם לממש View Controller שייתן לנו UI לצ'אט אנחנו משתמשים בחלק הזה של הפרויקט בספרייה מ-E-Tab שנקראת MessageKit אז אתם מוזמנים כמובן לגלגל MessageKit בגוגל ולהגיע לדף שאני נמצא בו כדי לקבל רפלנס לדוקומנטציה עכשיו MessageKit בעצם מאפשרת לנו את כל ה-UI
הנחמד הזה שראינו והיא ספרייה אז השתמשנו בקוקופודס כדי להגיע לספרייה הזאת ושמנו אותה בקוקופודס. עכשיו למסג' קיד יש את הגטינג סטארטד גייד שלהם שאני ממליץ גם להיכנס אליו כדי לתפוס קצת ככה אינפורמציה לגבי איך זה בנוי איך זה עובד אבל כמובן שאני אעביר אתכם על הכל בסרטון.
אז כדי להתחיל אנחנו בעצם רוצים לחשוב מה זה בעצם מסג'ס למסג'ס יש הודעות יש מסג' איי די יש תאריך ויש את סוג ההודעה. איזה סוגי הודעות למשל יכולים להיות לנו אז הודעות יכולות להיות הודעות תמונה הודעות וידאו הודעות מיקום הודעות ארדיו הודעות של איש קשר הודעות טקסט וגם הן יכולות להיות הודעות של אמוג'יס
נסתכל אצלנו בפרויקט אז כאן יש לי הודעת טקסט רגילה כאן יש לי הודעת תמונה וכאן אתם יכולים לראות הודעת אמוג'י אלה סוגי ההודעות שאנחנו רוצים לממש בפרויקט אז אנחנו נתחיל את הכל בלייצר מודל עבור צ'אט וסאג'
ובואו נקפוץ ל-Xcode ונעשה את זה שם. אז ב-Xcode, תחת מודלס אנחנו רוצים לעשות New File, CocoTouch Class או Swift File יותר טוב, וכאן אנחנו פשוט רוצים לייצר לנו קלאס למודל, אני אקרא לזה Chat Message, אנחנו רוצים Class Chat Message, ואנחנו נרצה לממש את הפרוטוקול של FirebaseModel
שיעזור לנו להוסיף לנו עינית וכל מיני דברים הכרחיים מבחינת Firebase. כאן, השדות, לפני שאני אלך לממש את הפרוטוקול השדות שיכולים להיות לנו קודם כל יהיה לי אינאם שיגיד לי איזה סוג הודעה הזאת נקרא לה אינאם קטגורי ויהיה לו raw value של סטרינג אנחנו הולכים לממש הודעות טקסט
והודעות של אימג' גם אמוג'י ייכנס תחת ההגדרה של טקסט אבל אנחנו נדע להפריד ביניהם אז איזה פרופרטיס יהיה לנו בהודעה נרצה קודם כל את הקטגוריה של ההודעה כדי שנדע אם זו הודעת תמונה או הודעת טקסט מעבר לקטגוריה יהיה לנו מסג' איי-די שזה סטרינג אנחנו נרצה יוזר איי-די
כדי שנוכל לזהות ממי נשלחה ההודעה וגם יוזר נייט עכשיו אנחנו נרצה טקסט אבל הוא יהיה אופציונל סטרינג בגלל שלא כל ההודעות הן הודעות טקסט ואנחנו נרצה תאריך שליחה סנט דייט ותכפוס שהדבר הזה יהיה דייט לא דאטה אלא דייט אוקיי אז אלה בעצם הדברים שאנחנו רוצים לשמור כאן עכשיו אין לנו בנאי
אז אנחנו רוצים לייצר בנאי נכון אנחנו רוצים קודם כל לממש את הפרוטוקול בכלל אז בואו נתחיל לממש את הפרוטוקול. אני אעשה פה פיקס וזה קצת עוזר לי הוא הוסיף לי פה את ה-required init והוא הוסיף לי פה איזשהו var של dictionary עכשיו מבחינת ה-init אז אנחנו נרצה לעשות איזשהו guardlet גדול כזה אתם יודעים כמו שעשינו קודם אז זה אותו
תהליך של סריאליזציה ודה סריאליזציה שכבר עשינו שווה ל-dictionary במקום ה-message ID, let userID, נקרא לזה UID לא נורא, שווה את הדיקשנרי במקום ה-userID, seek let userName שווה את הדיקשנרי במקום ה-userName.
עכשיו לגבי התאריך אנחנו נרצה קודם כל להוציא אותו כסטרינג והאמת היא שבכלל כל אלה אנחנו גם צריכים להוציא אותם כסטרינגים, שם אחרי שהוצאנו את התאריך כסטרינג אנחנו נרצה לבנות ממנו תאריך בעזרת הפורמטר אז let date שווה ל-self עם אס גדולה, נקודה פורמטר, נקודה דייט פרום סטרינג וכאן אני נותן לו
את דייט ראו ואחרי כל הדבר הזה זה הגארד לד שלנו ואחריו אנחנו רוצים אלס ריטרן ניל כי אם לא הצלחנו עם הדה סיריליזציה אז אנחנו רוצים להחזיר ניל באינית עכשיו אם הצלחנו והכל טוב אז אנחנו רוצים לפרסר את ה.. לשמור את המידע אז self.messageid שווה ל-messageid self.uid שווה userid self.username וכן הלאה self.sendDate
שווה לדייט הזה שמצאנו אוקיי עכשיו מה עוד נשאר לנו בעצם יש לנו את הקטגוריה נכון אז הקטגוריה בגלל שהיא אינה אנחנו נצטרך קצת לחשוב איתה ובוא נבדוק את הטקסט גם כן אז self.text שווה לדיקשנרי במקום הטקסט as string בגלל שהוא אופציונל לא שמנו אותו בגרדלה עכשיו לגבי הקטגוריה אז if let rowValue שווה לדיקשנרי במקום הקטגורי.
אז string sick let קטגורי שווה לקטגוריה חדשה מ-rowValue של הערך שהוצאנו. אזי נשמור את הקטגוריה גם כן ברמת המחלקה self.category שווה לקטגורי שזה עתה נחזרנו.
אחרת אנחנו יכולים להגיד שהקטגוריה שלנו היא טקסט. אז התחלנו גם את השדה של הקטגוריה. בעצם שוב פעם חזרנו על התהליך של סריאליזציה ודה סריאליזציה לדיקשנרי שעשינו קודם.
לגבי הדיקשנרי עצמו אז בואו נממש גם אותו. כאן אנחנו רוצים להוסיף תמונה מחושבת כרגיל. אנחנו נגדיר var dictionary שווה למילון חדש ואיירנו את המפתחות של בדיוק מה שכתוב כאן אז כדאי להעתיק אותם כדי לא לטעות.
messageid וכאן אנחנו נשים את המסג'איד סלף נקודה מסג'איד ואנחנו עושים בפסיק ומחזיר ממשיכים את כל השדות האחרים אז userid ואנחנו מכניס פנימה את הuserid שזה ה-uid במקרה של המחלקה שלנו אותו דבר לגבי ה-user name ולגבי ה-send date אז אנחנו נצטרך להמיר אותו לסטרינג קודם כל אבל נשמור אותו ככה send date הוא יהיה שווה ל-send אמץ גדולה נקודה פורמטר נקודה סטרינג
פרום דייט ואנחנו ניתן לו את ה-send date שלנו אז זה המילון כמובן שאנחנו רוצים להחזיר אותו בסופו של דבר אז return dictionary ואנחנו רוצים לשבור את השורה הזאת כי היא נורא ארוכה ועוד קצת לסדר וגם להוסיף את הקטגוריה פנימה.
אז אני אעשה פה פסיק ונוסיף גם את הקטגוריה כמו ששמרנו אותה כאן אז category נקודותיים הקטגורי זה פשוט self.category.rawvalue ויש לנו גם את הטקסט שאנחנו רוצים לשמור נכון אם יש טקסט אז בוא נשמור אותו אם flat text שווה לטקסט אז dictionary במקום הטקסט שווה לטקסט שלנו, אוקיי?
אז הנה כל הדרישות מהfirebase מודל וכעת אנחנו בעצם נמצאים במצב שיש לנו את כל העומדים בכל הדרישות ובואו נסדר קצת את המחלקה שלנו כי היא התבלגנה מעט אז את הפרופרטיס של מחלקה בדרך כלל שמים למעלה אז אנחנו נשים את כל השדות שלנו למעלה.
החלטנו ש-chat message מורכבת מהדברים הבאים: א', אנחנו נצטרך לדעת אם זה הודעת טקסט או תמונה אז יש לנו אינם בשביל זה מעבר לזה יש לנו את המסג' איי-די האיי-די של השולח שם של השולח טקסט של ההודעה ותאריך שליחה עכשיו אני רק רוצה להגיד לכם שטקסט של ההודעה יכול להכיל או את הטקסט עצמו מי קונטיין טקסט של ההודעה
אתם יודעים ברגיל או את התמונה עצמה אוקיי אימג' ניין אוקיי אם הוא יכיל את האימג' ניין אנחנו ניתן את התמונה מהאימג' אחרת אנחנו נכיל את ה.. נציג את הטקסט אוקיי עכשיו ה-image name יאפשר לנו לתת את התמונה מפיירבייס סטורג' מהרפרנס של הפיירבייס סטורג' כמו שעשינו קודם אז עוד פעם חברים מודרן רגיל של פיירבייס
זה אומר שחוץ מהתכונות הרגילות שאתם מגדירים אז אתם רוצים שיהיה לכם dictionary כדי לעשות סריאליזציה וinit כדי לעשות דה סריאליזציה וזה מה שעשינו כאן יפה אני רק מסדרים פה טיפה את הכל תסדרו גם אצלכם ובואו נמשיך טוב אז כדי שנוכל להתקדם הלאה אנחנו נרצה בצ'טרום עצמו לעשות
איזשהו קשרי גומלין אנחנו נרצה שעל חדר יהיה לנו חוץ מהאימג' רף והדאטה בייס רפרנס של עצמו אנחנו נרצה להוסיף פה עוד רפרנס אחד להודעות של אותו צ'טרום אוקיי אז נוסיף פה רף נוסף var messages רף טיפוס הוא דאטה בייס רפרנס כמו התכונה המחושבת שלמטה וגם פה פה אנחנו מחזירים דאטאבייס נקודת דאטאבייס וכן הלאה, רק שאנחנו נתחשב הפעם בנתיב של איפה אנחנו
רוצים לשמור את ההודעות. אז הנתיב, אנחנו נחליט לשמור את ההודעות שלנו תחת מסג'ס, ולא רק מסג'ס אלא מסג'ס תחת ה-ID של החדר, אוקיי?
אז יש לנו דאטאבייס רפרנס להודעות בחדר, מצוין. עכשיו אנחנו יכולים בקלאס של ה-chat מסג' שלנו להוסיף אימפורט גם כן ל-firebase, כל מה שאנחנו צריכים פה אפשר לעשות אימפורט לפיירבייס אוף אימפורט לפיירבייס דאטאבייס וכן הלאה כי באיזשהו שלב אנחנו נצטרך את כולם אז גם לפיירבייס סטורג' דרך אגב ברגע שעושים
אימפורט לכל אלה אז אפשר כבר לעשות אימפורט לפיירבייס אבל האמת היא שבפיירבייס יש יותר דברים ולכן אני מעדיף לעשות את האימפורטים בעצמי טוב אז בואו נעשה רגע extension לchat message ונתחיל לחשוב פה על איך אנחנו עושים פעולות של שמירה ו-upload של תמונה ואנחנו נרצה שיהיה לנו גם איזשהו אימג' רף.
האימג' רף הוא עבור הורדות תמונה. בואו נגדיר את האימג' רף קודם כל, זה Storage רף, אז var storage-rf מסוג storage-reference זאת תכונה מחושבת אז אנחנו מחזירים storage.storage כאן אנחנו רוצים רפרנס כמובן וב-child אנחנו נרצה לבחור שם ל-message-images שלנו אז בוא נקרא לזה message-images ואנחנו רוצים לשמור את
זה תחת השם של התמונה. אמרנו שבטקסט שלנו אנחנו נשמור את השם של התמונה, אחרת שיהיה פה סטרינג רייק, נכון? אמרנו אם זו הודעת תמונה, תשימו לב מה אמרתי קודם, ואני רוצה שתנסו להבין את זה ולחזור לזה כשתצטרכו.
הטקסט של המסאג' הוא יכול להיות או טקסט רגיל, או במקרה שזאת הודעת תמונה, זה יכיל את ה-image name. אז ככה בעצם יש לי רפרנס למסאג' עם הג'אסט, נקודה שם הקובץ.
אוקיי וזה בעצם יהיה רפרנס לתמונות שלנו של הודעות תמונה, יפה. אז עכשיו אנחנו רוצים להוסיף פעולות של שמירת מידע ופעולות של להעלות תמונה אז בוא נעשה סייב, סייב הוא שמירת הודעה בחדר אז סייב in room מסוג של צ'אט room והבאתי שהפעולה היא נורא נורא פשוטה לדאטה בייס רייפ קודם כל שווה לרום
נקודה מסג'רס רייפ נקודת צ'יילד עם המסג' איי די שאנחנו נמצאים בו אוקיי אז אנחנו בעצם אומרים לכל חדר יש את המסג' רף שלו וההודעה שלנו היא תחת המסג' איי-די שלנו בשביל זה היינו צריכים פה איי-די ווואנס יש לנו את הדאטה בייס