תוֹכֶן
- 01. הגדר אקספו
- 02. צור את האפליקציה הראשונה שלך
- 03. הוסף התראות
- 04. פרסם עם אקספו
- רוצה ללמוד דרכים נוספות בהן אתה יכול לשלוט ב- React?
React Native היא פלטפורמה המאפשרת לך לבנות אפליקציות מובייל לנייד באמצעות JavaScript. כפי שהשם מרמז, הוא משתמש ב- React, ולכן הרכבת ממשקים ניידים דומה לשימוש ב- React באינטרנט. במקום ליצור רכיבים באמצעות תגי HTML, יש לה קבוצה משלה של רכיבים הנקשרים לרכיבי ממשק משתמש מקורי.
הגדרת Native יכולה להיות מסובכת להגדרה, במיוחד כשמדובר בהתראות דחיפה. עליך להגדיר אישורים ולצלול אל Objective-C עבור iOS ו- Java עבור Android. עם זאת, אקספו מבטלת את הצורך בכך.
בונים אתר ולא אפליקציה? אתה יכול להשתמש בבונה אתרים הגון. וכדי לתחזק את האתר, קבל את המקום שלך לאירוח אתרים.
- 30 כלים לעיצוב אתרים כדי להאיץ את זרימת העבודה שלך
אקספו פירושו שתוכלו ליצור אפליקציות React Native ולפרוס אותן בחנויות האפליקציות באמצעות JS בלבד. בנוסף, הוא מציע SDK עם גישה לפונקציונליות מקורית כגון התראות, מצלמה, אנשי קשר, מיקום וכן הלאה. הוא גם מספק גישה לכמה רכיבי ממשק משתמש שאינם כלולים בליבת ה- React Native, אך משמשים לעיתים קרובות, כגון סמלים, תצוגות מטושטשות וכן הלאה מבלי להזדקק לכתיבת שורת קוד מקורי.
אקספו יכולה גם ליצור בניית אפליקציות מוכנות להגשה ללא צורך לבנות באמצעות Xcode או Android Studio. אם לא השתמשת בעבר, הם יכולים להיות מקום מפחיד, במיוחד אם אתה רק מתחיל לעבוד עם React Native - או שאינך בטוח בכלל כיצד ליצור אפליקציה. ניתן לפרסם אפליקציות (או פרויקטים) ב- Expo במקום להגיש לחנות אפליקציות, המאפשרת למשתמשים לנסות את הפרויקט באמצעות הלקוח הנייד Expo. אל דאגה, זה יכוסה אחר כך!
האם אתה בונה את האפליקציה שלך עם צוות? שמור את הקבצים שלך באחסון ענן נגיש ואמין.
01. הגדר אקספו
התקנת אקספו היא תהליך פשוט. עבור אל האתר והורד את ה- XDE העדכני ביותר ואז התקן את האפליקציה לנייד בטלפון או בטאבלט שלך. הלקוח הסלולרי מאפשר הפעלת אפליקציות במכשיר אמיתי דרך האפליקציה שלהם ללא צורך ברישיונות מפתח או בהגדרת אישורים מראש.
לאחר מכן תוכל לפרסם אפליקציות לשירות אקספו, כך שמשתמשים יוכלו להריץ את הפרויקטים שלך שסיימו באמצעות הלקוח הנייד של אקספו, מבלי שתצטרך לעבור את תהליכי הבדיקה של אפל סטור ו- Google Play.
אקספו תומכת בבניית אפליקציות עצמאיות שניתן לפרסם באופן ידני בחנות האפליקציות או בחנות Play, אולם תדרוש חשבונות מפתחים עבור הפלטפורמות בהן אתה משחרר. תוכנית המפתחים של אפל עולה 79 ליש"ט לשנה ו- Play Console של גוגל עולה תשלום חד פעמי של 25 דולר ארה"ב.
02. צור את האפליקציה הראשונה שלך
בואו ניגש לעסקים וניצור את האפליקציה הראשונה שלנו עם אקספו. פתח את ה- Expo XDE, בחר פרויקט> פרויקט חדש ובחר את התבנית הריקה. התקן את כל התלות והפעל את חבילת ה- React Native, שמאגדת את כל הנכסים.
מכאן תוכלו לפרסם את האפליקציה, לשתף את האפליקציה ללקוח הנייד של אקספו או להריץ את האפליקציה בסימולטור. יישום זה יכלול יצירת התראות דחיפה, כך שתשתף עם הלקוח הנייד של אקספו, מכיוון שסימולטורים אינם תומכים בהם. לחץ על כפתור השיתוף כדי לקבל קוד QR לסריקה או אפשרות לשלוח קישור באמצעות SMS או דוא"ל. סרוק את קוד ה- QR עם לקוח Expo. זה מריץ את האפליקציה דרך לקוח Expo והיא נפתחת למסך עם: 'פתח את App.js כדי להתחיל לעבוד על האפליקציה שלך!'
כשהאפליקציה פועלת, פתח את הפרויקט בעורך הקוד המועדף עליך ופתח את App.js. מצא את הטקסט למעלה ושנה אותו לקלאסיקה 'שלום עולם!' ואז שמור. אתה אמור לראות את היישום לטעון מחדש באופן אוטומטי ולקבל את הטקסט 'שלום עולם!' עכשיו גלוי. קֶסֶם!
בזמן שאתה מתפתח, ניעור המכשיר יגלה תפריט מפתח, שיש בו אפשרויות מועילות לניפוי באגים. מתפריט זה תוכלו גם לחזור לבית Expo - מועיל ליציאה מהאפליקציה או לעבור לאחר.
03. הוסף התראות
עכשיו יש לך אפליקציה בסיסית שהוגדרה ופועלת, בואו נוסיף את היכולת לשלוח ולקבל התראות. זה בדרך כלל דורש Objective-C ו- Java, שילוב של שירות צד שלישי כדי לשלוח את ההודעות ותצטרך גם להגדיר אישורים עבור iOS וליצור מפתחות עבור Android.
ראשית, עליך לייבא הרשאות והתראות מ- Expo וליצור פונקציה חדשה במחלקת האפליקציות:
ייבא {הרשאות, התראות} מ- 'expo'; ייצוא מחלקת ברירת מחדל של אפליקציה מרחיב את React.Component {async registerForPushNotifications () {}}
כאן אתה משתמש במילת המפתח async כדי להשתמש בתכונת ה- async / wait to ES2017 - ל- React Native יש בבל שעובד מתחת למכסה המנוע, כך שתוכל למנף את כל הטוב החדש של JavaScript. עכשיו, בואו נבקש הרשאות הודעה ונאחזר את אסימון הדחיפה של אקספו - כדי לזהות את המכשיר - כך שאקספו יידע לאן לשלוח התראות דחיפה:
async registerForPushNotifications () {const result = ממתינים Permissions.askAsync (Permissions.REMOTE_NOTIFICATIONS); אם (result.status! == 'הוענק') {return; } const token = ממתינים Notifications.getExpoPushTokenAsync (); console.log (אסימון); }
כאן תבקש אישור הודעה בשיטת Permissions.askAsync (). ההתראה תוצג רק ב- iOS מכיוון שאנדרואיד מאפשרת התראות כברירת מחדל. למרות זאת, למעשה אתה עדיין צריך לעבור את אותו ההיגיון באנדרואיד, מכיוון שאפשר לכבות את ההודעות.
לאחר מכן, בדוק את התגובה. אם ההודעות לא ניתנות, תוכל לעצור ולחזור מהפונקציה. אם ניתנות התראות, אתה מקבל את אסימון הפוש משירות Expo. לבסוף, אתה יכול להיכנס לאסימון לשימוש מאוחר יותר כדי לבדוק התראות וזה ייכנס ל- XDE של אקספו.
ראוי לציין בשלב זה כי - ב- iOS - ניתן להפעיל התראה זו פעם אחת בלבד על ידי עיצוב; לכן, אם משתמש מכחיש הרשאה, כדאי לך לשקול להוסיף הודעה או התראה מותאמים אישית לפני שיחזור מהפונקציה. על מנת לאפשר התראות בשלב זה, המשתמש יצטרך לעבור להגדרות האפליקציה (במקרה שלנו זו תהיה אקספו)> התראות ולאפשר אותן משם. מסיבה זו תצטרך למחוק את לקוח הסלולרי של אקספו ואז להתקין אותו מחדש אם ברצונך לבדוק את התראת ההרשאה ב- iOS יותר מפעם אחת.
בנוסף, אקספו מספקת שיטה הנקראת Permissions.getAsync () וזו פועלת באופן דומה ל- Permissions.askAsync (), רק מבלי להפעיל את התראת iOS. זה יכול להיות שימושי אם ברצונך לבדוק קודם את הסטטוס כדי ליצור זרימה מותאמת אישית שתבקש ממך הרשאות, למשל. אם התראת iOS הופעלה בעבר (כזכור, ניתן לפטר אותה פעם אחת בלבד להתקנת אפליקציה), Permissions.askAsync () יחזיר את אותו המידע כמו Permissions.getAsync (), כך שבמקרה השימוש שלנו איננו זקוקים כדי להשתמש ב- Permissions.getAsync ().
לאחר מכן עליך להתקשר לפונקציה זו בשיטת מחזור החיים של componentDidMount כך שהיא תפעל בהשקת האפליקציה:
componentDidMount () {this.registerForPushNotifications (); }
בשלב הבא, אם תקבל את אישור ההודעה, האפליקציה שלך תוכל לקבל התראות מקומיות ומרוחקות. הודעות מקומיות מוגדרות ואז נשלחות דרך המכשיר ישירות לאפליקציה ואינן דורשות חיבור לאינטרנט. התראות מרחוק מגיעות משרת ושולחות את ההודעה דרך שירותי ה- Apple Push Notification System (APNS) או שירותי העברת המסרים של Google Cloud (GCM). תהליך זה ידרוש גם גישה לחיבור לאינטרנט כדי לקבל אותם.
לאקספו שירות לשליחת התראות בכתובת https://exp.host/--/api/v2/push/send; כל שעליך לעשות הוא לשלוח אליו כמה נתונים. זה ייראה קצת כמו הבא:
{// אסימון הדחיפה. "אל": אסימון מהאפליקציה> // כותרת ההודעה. "כותרת": "כותרת הודעה", // גוף ההודעות. "גוף": "גוף הודעה", // העברת נתונים כאובייקט, ניתן להשתמש בזה בעת הטיפול בהודעה. "Data": {"value": "שלום עולם!" }}
לפני שנבדוק התראה, נגדיר את האפליקציה שלנו לטיפול בהתראות אם האפליקציה פתוחה. לפי תכנון, iOS ו- Android לא מראים התראה כאשר אפליקציה פתוחה. אתה יכול גם לטפל בכל הנתונים שנשלחים בהודעת הדחיפה כאן, למקרה שנצטרך לפעול על פיהם. בואו ניצור פונקציה חדשה לטיפול בזה ולהתריע על מאפיין ערך הנתונים:
handleNotification (הודעה) {alert (notification.data.value); }
ואז בשיטת מחזור החיים של componentDidMount עליכם להגדיר מאזין, שמתקשר למטפל ההתראות שיצרנו זה עתה:
componentDidMount () {this.registerForPushNotifications (); Notifications.addListener (this.handleNotification); }
אתה מסודר עכשיו. בואו נשלח הודעת דחיפה עם בקשת cURL:
תלתל -X POST -H "סוג תוכן: יישום / json" -d '{"to": "TOKEN>", "title": "כותרת ההודעה", "body": "גוף ההודעות", " data ": {" value ":" שלום עולם! " }} ' https://exp.host/--/api/v2/push/send
אתה יכול לתפוס את הפקודה cURL כאן. אם אינך מכיר את cURL, תוכל לשלוח את הבקשה באמצעות משהו כמו דואר הדואר, שמשתמש בממשק משתמש לשליחת בקשות.
לאחר שנשלחה הבקשה, כעת אתה אמור לראות את ההודעה מתבצעת. אין מגבלות על השימוש בשירות הדחיפה של אקספו. בתרחיש של עולם אמיתי, מומלץ להשתמש בממשק ה- API של אצווה על ידי שליחת מערך התראות דחיפה, בקבוצות של 100, שיישלחו לצורך יעילות:
[{// אובייקט התראה כנ"ל}, {// אובייקט התראה אחר}]
04. פרסם עם אקספו
אז, עכשיו שיש לנו אפליקציית React Native חדשה ונוצצת (גם אם היא עדיין לא עושה הרבה!), איך נניח לאחרים להשתמש בה מבלי להריץ אותה מ- Expo XDE? הדרך הפשוטה ביותר היא על ידי לחיצה על פרסם מ- XDE. פעולה זו תפרסם את הפרויקט ב- Expo וקישור יופיע בפרופיל שלך, אותו תוכל למצוא בכתובת https://expo.io/@username>.
כאשר אתה מבקר בקישור הפרויקט שפורסם, יהיה קוד QR לסריקה (הממוקם בין אותן אפשרויות כמו ה- XDE) עם הלקוח הנייד Expo, בדיוק כמו במהלך הפיתוח. אם אנו רוצים לעדכן את האפליקציה, כל שעלינו לעשות הוא לפרסם מחדש והשינויים יהיו זמינים למשתמש בעת הפעלת האפליקציה שוב.
מאמר זה פורסם במקור בגיליון 297 של נט, המגזין הנמכר ביותר בעולם עבור מעצבי אתרים ומפתחי אינטרנט. הירשם לרשת כאן.
רוצה ללמוד דרכים נוספות בהן אתה יכול לשלוט ב- React?
אם אתה מעוניין ללמוד עוד על React, ודא שאספת את הכרטיס שלך עבור צרו את לונדון בין התאריכים 19-21 בספטמבר 2018. לאחר שהקים את React Academy כדי ללמד את React ברחבי העולם והושק sizzy.co ו ok-google.io, קריסטיאן ריסטובסקי יעביר את הסדנה שלו - למד כיצד לחשוב בתגובה - בה הוא יגלה שיטות עבודה מומלצות של React וילמד אותך פתרונות לבעיות אמיתיות שאתה עלול להיתקל בהם בתהליך בניית אפליקציה.
Generate London מתקיים בין התאריכים 19-21 בספטמבר 2018. השג את הכרטיס שלך עכשיו.
