השקעתם את העבודה ועכשיו יש לכם הבנה מוצקה של ספריית React.
נוסף על כך, יש לך מושג טוב על JavaScript ואתה משתמש בתכונות המועילות ביותר לשימוש בקוד התגובה שלך.
התקדמת מאוד ... אבל עכשיו מה אתה עושה?
איך מגשרים על הפער בין הכרת היסודות של ריאקט לבין הפיכתו למפתח מקצועי?
מפתחים רבים נתקלים בבעיה זו כאשר הם מגיעים לשלב ביניים זה של למידת תגובה או כל ספריית JavaScript אחרת. הם מכירים את מרבית הספרייה עצמה כמו גם את JavaScript בכדי להשתמש בה בצורה יעילה, אך אינם יודעים מה הצעד הבא לנקוט.
למה אתה צריך לבנות אפליקציות
לאחר שלמדת את יסודות ה- React, עליך להשיג אפליקציות נוחות עם הכישורים שצברת. נוהג זה טמון בבסיס היותו מפתח ריאקט יעיל - לדעת לבנות אפליקציות לבד ולהשתמש בכלים הנכונים במערכת האקולוגית React לשם כך.
אבל אילו אפליקציות אתה צריך לבנות עם React כדי להגביר את יכולתך כמפתח?
במאמר זה נעבור על 5 סוגים שונים של אפליקציות שכדאי לשקול לבנות אחרי אפליקציית ה- todo הבסיסית. היתרון הגדול של בניית אפליקציות הוא שעם פריסתן ניתן לקשר אותן לתיק העבודות שלך כדרך חזקה ומיידית להראות למעסיקים את המומחיות שלך.
עבור כל סוג של אפליקציה, אסקור דוגמאות פופולריות שתוכלו להשתמש בהן כהשראה, את הכלים עליהם הייתי ממליץ לבנות כל תכונה, יחד עם הדגמה קצרה של אפליקציה כזו שיצרתי באופן אישי באמצעות React.
כיצד להתחיל לבנות אפליקציות עם תגובה
בשונה מלימוד ה- React עצמו, שם תוכלו למצוא עשרות מאמרים לצלול עמוק יותר לכל מושג קשור, תהליך בניית האפליקציה הוא במידה רבה פעילות מכוונת עצמית ללא הכוונה רבה.
אם אתה מתחיל לבנות אפליקציות בעצמך, אמליץ לחפש מאמרים המלמדים אותך את יסודות בניית האפליקציה ולצלול לקוד המקור של האפליקציה שהם מספקים. אפילו תהליך קריאת הקוד עצמו יהפוך אותך למפתח טוב יותר.
אם דוגמאות אלה נראות מרתיעות מדי לבנות את עצמך, זכור את מה שאתה מכיר כמפתח של React - כדי לפרק יישומים לרכיבים שניתן לחבר. יש לבנות כל יישום חלק אחר חלק, רכיב אחר רכיב. התמקדו בבניית תכונה אחת בכל פעם. בעזרת תרגול, תוכלו לקבל תחושה טובה יותר של אילו כלים תצטרכו עבור כל תכונה, כמו גם את הדפוסים הנפוצים מאחורי בניית אפליקציות באופן כללי.
הערה: תפיסה מוטעית אחת שהייתה לי כשהתחלתי לבנות יישומים אמיתיים כמו אלה הייתה שעלי לבנות backend / API שלם עם Node או Python כדי לקבל את הפונקציונליות הנחוצה לי. אתה לא צריך לעשות זאת. בדוק טכנולוגיות חזקות ללא שרתים כמו Firebase, AWS Amplify או Hasura המעניקות לך backend מלא מהקופסה ללא צורך ליצור ולפרוס בעצמך. השקיע בכלים שהופכים אותך לפוריות יותר וחוסכים זמן.בנה אפליקציה למדיה חברתית
אם הייתי צריך להמליץ לך רק על אפליקציה אחת להוסיף לתיק העבודות שלך, זו תהיה אפליקציה למדיה חברתית. טוויטר, פייסבוק ואינסטגרם הם די מתוחכמים, וכוללים מספר הולך וגדל של תכונות כדי לשמור על מעורבות המשתמשים. נוסף על כך, זה סוג האפליקציה שאתה כנראה מכיר הכי טוב לגבי האופן שבו היא צריכה לתפקד.
ישנן מספר תכונות נפוצות כמעט כמעט בכל אפליקציות המדיה החברתית:
- היכולת של המשתמשים ליצור פוסטים עם קבצי טקסט ו / או מדיה,
- פיד חי של הפוסטים האלה,
- המאפשר למשתמשים אחרים לעשות לייק ולהגיב על פוסטים,
- כמו גם אימות משתמשים.
וברגע שיש לך את זה, אתה יכול להוסיף פרופילים לכל אחד מהמשתמשים שלך, שם הם יכולים להתאים אישית את החשבון שלהם ולנהל את המשתמשים שהם עוקבים אחריהם.
דוגמאות לאפליקציות: Instagram, Twitter, Snapchat, Reddit
טכנולוגיות לשימוש:
- צור React App או Next.js כדי ליצור ממשק משתמש דינמי של פוסטים, לייקים והודעות
- Firebase, AWS Amplify או Hasura (באמצעות GraphQL עם מנויים) לנתונים בזמן אמת
- פונקציות ללא שרת כמו AWS Lambda או Firebase פונקציות להודעות
- אחסון בענן או ב- Firebase להעלאת תמונות או וידאו
בנה אפליקציית מסחר אלקטרוני
בחר כמה מהאתרים המועדפים עליך ואני מתחייב שלפחות באחד מהם מוטמעת אפליקציית מסחר אלקטרוני, גם אם זו רק חלון ראווה קטן. אפליקציות מסחר אלקטרוני נמצאות בכל מקום, ואני מהמר שתתבקש לבנות יישום כזה או אחר בקריירה שלך כמפתח.
מפתה לבנות פלטפורמת סחר אלקטרוני מרשימה בקנה מידה גדול כמו אמזון, אך הייתי ממליץ לעבוד על משהו קטן וממוקד יותר.
במקום שוק המספק את כל הדברים לכל האנשים, עבור עם ענף שמעניין אותך. לדוגמה, אם אתה אוהב מוצרים ביתיים, אתה יכול להסתכל על מה ארגז & חבית או וויליאמס-סונומה בנו עבור האתרים שלהם.
מלבד מוצרים, אפליקציות מסחר אלקטרוני עשויות לספק שירות לצרכנים. אם מדובר בשירות המסופק באופן מקומי, ניתן להוסיף לאפליקציה מפה אינטראקטיבית כדי לספק לספק השירות ולקוח לדעת את מיקומם של זה. אפליקציות למשלוח אוכל כמו UberEats ו- Doordash, המחייבות את מיקום המזמין את המזון, עולות בראשך.
לא משנה מה נמכר, בין אם זה פיזי או וירטואלי, כל אפליקציית מסחר אלקטרוני תורכב מחלון ראווה כלשהו עם פרטי המוצר או השירות. אם משתמשים יכולים לרכוש מספר מוצרים בו זמנית, אמורה להיות לה עגלת קניות שבה המשתמשים יכולים לנהל את המוצרים שהם רוצים לקנות.
לבסוף, כל אפליקציית מסחר אלקטרוני זקוקה לתהליך קופה בו משתמשים יכולים לרכוש את מוצריהם באופן אנונימי או לאחר אימותם.
דוגמאות פופולריות: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy
טכנולוגיות לשימוש:
- צור React App או Gatsby לחלון הראווה ולהציג מוצרים
- פס עם החבילה מגיבים פס-אלמנטים לטיפול בעיבוד תשלומים
- פונקציה ללא שרת כמו Netlify / AWS Lambda לטיפול בתהליך הקופה
- אלגוליה לחיפוש מוצרים מהיר ברק
- עגלת צלפים ליצירה קלה של עגלה וניהול מוצרי עגלה
בנה אפליקציית בידור
זהו הרחב ביותר מבין הקטגוריות. למה אני מתכוון בבידור? אפליקציה הממוקדת סביב סוג מסוים של מדיה. זה יכול להיות סרטים, פודקאסטים או מוזיקה עד כמה שם.
כמה דוגמאות נהדרות לכך, בהתאמה, יהיו Netflix, Audible ו- Soundcloud או Spotify. אם תכלול אמנות או עיצוב בקטגוריה זו, נוכל להוסיף לרשימה אתרים כמו Behance או Dribbble.
מה שמעניין בקטגוריה זו הוא שאפליקציות בידור רבות גובלות באפליקציות מדיה חברתית. לדוגמא, אפליקציה כמו Tiktok, הכוללת סרטונים קצרים ומלאי דמיון, מונעת על ידי מעורבות גבוהה של משתמשים. אפליקציה אחרת כמו YouTube מתרכזת באינטראקציות של משתמשים באמצעות לייקים, תגובות ומנויים.
חשבו איזה סוג מדיה או בידור הכי מעניין אתכם ובדקו אם תוכלו לבנות פלטפורמה פשוטה סביבו, בה משתמשים יכולים להתחבר ולשמור את התוכן שהם אוהבים. לאחר מכן, בדוק הוספת אלמנטים חברתיים המאפשרים להוסיף הערות, לייק ולשתף תוכן עם משתמשים אחרים בפלטפורמה.
דוגמאות פופולריות: YouTube, Netflix, Audible, Spotify, Tiktok
טכנולוגיות לשימוש:
- צור יישום React, Next.js או Gatsby כדי ליצור את ממשק המשתמש של האפליקציה
- נגן תגובת החבילה npm להפעלת מדיה
- אחסון ענן או Firebase להעלאת מדיה
- אלגוליה לחיפוש מדיה לפי שם (כלומר רצועת שמע, וידאו, סרט וכו ')
בנה אפליקציית מסרים
אפליקציות להעברת הודעות ענקיות. סביר להניח שיש לך שירות העברת הודעות בחינם כמו WhatsApp או Viber בטלפון שלך, או כזה המובנה בפלטפורמת המדיה החברתית שלך כמו Facebook Messenger. שירותים כמו אינטרקום עם מסרים מיידיים זמינים גם כאפליקציות אינטרנט, כך שחברות יכולות לספק תמיכת לקוחות מיידית למשתמשים שלהן.
כל אפליקציית מסרים הולכת להיות מורכבת משיחה עם שניים או יותר שאליה ההודעות נשלחות בזמן אמת. בדומה לאפליקציית המדיה החברתית, הייתי ממליץ על שירות כמו Firebase או Hasura שמעביר נתונים דרך WebSockets לצורך הצגת הודעות מיד בשיחה.
רוב יישומי העברת ההודעות נמצאים במכשירים ניידים או בטאבלטים. אם זה לא שיבוט האפליקציה הראשון שלך, זוהי הזדמנות מצוינת לעבור מעבר לאינטרנט ולבנות אפליקציה לנייד עם React Native. יתרה מכך, תוכל לבנות אפליקציית העברת הודעות אינטרנט ונייד בו זמנית עם חבילה כמו React Native Web.
דוגמאות פופולריות: WhatsApp, Viber, Discord, Messenger, Slack
טכנולוגיות לשימוש:
- React Native או React Native Web לבנות כאפליקציה לנייד או אפליקציה היברידית (אינטרנט + מובייל)
- Firebase, AWS Amplify או Hasura (באמצעות מנויי GraphQL) לשליחת הודעות בזמן אמת
- אחסון ענן או Firebase לשליחת הודעות עם תוכן תמונה או וידאו
- חבילת npm emoji-mart לבורר אמוג'י חלק כמו Slack שמשתמשים יכללו בהודעות שלהם
בנה אפליקציית פריון
זה כנראה הסוג הקל ביותר של אפליקציות להתחיל איתו, בהתחשב בכך שיש כל כך הרבה מדריכים של יישומי פריון בסיסיים. כשאני מדבר על אפליקציות פרודוקטיביות, אני מתייחס לאפליקציות לרישום הערות, אפליקציות לניהול צוותים ורשימות משימות. באופן כללי, כל דבר שעוזר לך לבצע משימה מסוימת או להיות פרודוקטיבי יותר.
מה שעדיף לבנות אפליקציית פרודוקטיביות היא שהיא מספקת מבוא טוב לבניית אפליקציות בגלל הפשטות היחסית של רבים מהתכונות שלה.
אתה יכול להתחיל במשהו פשוט, כגון עורך טקסט כדי לכתוב טקסט מעוצב עם סימון בקלות ואז להרחיב אותו. לאחר מכן הוסף את היכולת לשמור טקסט כקבצים בודדים במחשב שלך. לאחר מכן, תכונה לייצוא הסימון הזה כ- HTML לכתיבת מיילים מעוצבים.
כדי להתחיל בבניית אפליקציית פרודוקטיביות, שאל אילו תכונות יכולה להיות לאפליקציה כדי להקל על לוח הזמנים היומי שלך וללכת משם.
דוגמאות פופולריות: טודואיסט, מושג, דברים וכו '.
טכנולוגיות לשימוש:
- צור React App לאינטרנט או React Native לנייד
- חבילת npm להגיב לסימון התצוגה כדי להציג את הסימון בממשק המשתמש של האפליקציה שלך
- חבילת npm react-codemirror2 לכתיבת קוד בהערות שלך
- החבילה npm יכולה להיגרר להזמנה מחדש של תוכן הרשימה על ידי לחיצה וגרירה
בהצלחה במסע בניית האפליקציות שלך ואני נתראה במאמר הבא.
רוצה להיות מאסטר JS? הצטרף ל- JS Bootcamp 2020
עקוב + תגיד היי! ? טוויטר • codeartistry.io