Το άλμα έναρξη αντιδράστε με το Expo

Αντιδράστε το Native Είναι μια πλατφόρμα που σας επιτρέπει να δημιουργήσετε εγγενείς εφαρμογές για κινητά χρησιμοποιώντας το JavaScript. Καθώς το όνομα συνεπάγεται, χρησιμοποιεί Αντιδρώ , έτσι συνθέτοντας κινητές διεπαφές είναι παρόμοια με τη χρήση αντιδρά στο ιστό. Αντί να δημιουργήσετε εξαρτήματα χρησιμοποιώντας ετικέτες HTML, έχει το δικό του σύνολο συστατικών που δεσμεύονται με φυσικά συστατικά UI.

Το αντιδράσει το Native μπορεί να είναι δύσκολο να ρυθμιστεί, ειδικά όταν πρόκειται για ειδοποιήσεις ώθησης. Πρέπει να δημιουργήσετε πιστοποιητικά και να βουτήξετε στο Στόχο-Γ για Ίος και Java για το Android. Ωστόσο, Εκθέτω Εξαλείφει την ανάγκη για αυτό.

Οικοδόμηση μιας ιστοσελίδας παρά μια εφαρμογή; Θα μπορούσατε να χρησιμοποιήσετε ένα αξιοπρεπές οικοδόμος ιστότοπου . Και να διατηρήσετε τον ιστότοπο, να πάρετε το δικό σας web hosting spot on.

• 30 εργαλεία σχεδιασμού ιστοσελίδων για να επιταχύνετε τη ροή εργασίας σας

Το Expo σημαίνει ότι μπορείτε να δημιουργήσετε αντιδράσει εγγενείς εφαρμογές και να τις αναπτύξετε στα καταστήματα εφαρμογών χρησιμοποιώντας μόνο JS. Επιπλέον, προσφέρει ένα SDK με πρόσβαση σε εγγενή λειτουργικότητα, όπως ειδοποιήσεις, κάμερα, επαφές, τοποθεσία και ούτω καθεξής. Παρέχει επίσης πρόσβαση σε ορισμένα συστατικά UI που δεν περιλαμβάνονται στον αντιδρυνόμενο φυσικό πυρήνα, αλλά συχνά χρησιμοποιούνται, όπως εικόνες, θολή όψη και ούτω καθεξής χωρίς να χρειάζεται να γράψουν μια γραμμή εγγενούς κώδικα.

Το Expo μπορεί επίσης να δημιουργήσει την App Ready υποβολής, χωρίς να χρειάζεται να χτίσει χρησιμοποιώντας το XCode ή το Android Studio. Εάν δεν έχετε χρησιμοποιήσει ούτε πριν, μπορεί να είναι ένα τρομακτικό μέρος, ειδικά αν ξεκινήσετε μόνο με αντιδράσει εγγενή - ή δεν είστε σίγουροι γενικά με Πώς να κάνετε μια εφαρμογή . Οι εφαρμογές (ή τα έργα) μπορούν επίσης να δημοσιευθούν στην έκθεση αντί να υποβάλλονται σε ένα κατάστημα εφαρμογών, το οποίο επιτρέπει στους χρήστες να δοκιμάσουν το έργο μέσω του προγράμματος-πελάτη Expo Mobile. Μην ανησυχείτε, αυτό θα καλυφθεί αργότερα!

Κατασκευάζετε την εφαρμογή σας με μια ομάδα; Αποθηκεύστε τα αρχεία σας σε προσβάσιμα, αξιόπιστα αποθήκευση σύννεφων .

01. Ρυθμίστε το Expo

Η εγκατάσταση της έκθεσης είναι μια απλή διαδικασία. Κατευθυνθείτε προς το ιστοσελίδα και να κατεβάσετε το τελευταίο XDE και στη συνέχεια να εγκαταστήσετε την εφαρμογή για κινητά στο τηλέφωνό σας ή το tablet. Ο κάτοχος του κινητού υπολογιστή επιτρέπει την εκτέλεση εφαρμογών σε μια πραγματική συσκευή μέσω της εφαρμογής τους χωρίς να χρειάζεται καμία άδειες προγραμματιστή ή προκαταρκτική ρύθμιση πιστοποιητικού.

Στη συνέχεια, μπορείτε να δημοσιεύσετε εφαρμογές στην υπηρεσία Expo, ώστε οι χρήστες να μπορούν να εκτελέσουν τα τελικά έργα σας μέσω του προγράμματος-πελάτη Expo Mobile, χωρίς να χρειάζεται να περάσουν από το App Store και τις διαδικασίες αναθεώρησης του Google Play.

Η EXPO υποστηρίζει την οικοδόμηση αυτόνομων εφαρμογών που μπορούν να δημοσιεύονται με μη αυτόματο τρόπο στο κατάστημα εφαρμογών ή στο κατάστημα αναπαραγωγής, ωστόσο, θα απαιτούσατε λογαριασμούς προγραμματιστή για τις πλατφόρμες που απελευθερώνετε. Πρόγραμμα προγραμματιστών της Apple κοστίζει £ 79 ετησίως και Κονσόλα παιχνιδιού της Google κοστίζει ένα εφάπαξ τέλος των $ 25 USD.

02. Δημιουργήστε την πρώτη σας εφαρμογή

Ας φτάσουμε στην επιχείρηση και να δημιουργήσουμε την πρώτη μας εφαρμογή με την έκθεση. Ανοίξτε το Expo XDE, επιλέξτε Project & GT; Νέο έργο και επιλέξτε το κενό πρότυπο. Εγκαταστήστε όλες τις εξαρτήσεις και ξεκινήστε το αντιδρά με το Native Packager, το οποίο δέσμευσε όλα τα περιουσιακά στοιχεία.

Από εδώ, μπορείτε να δημοσιεύσετε την εφαρμογή, να μοιραστείτε την εφαρμογή στο πρόγραμμα-πελάτη Expo Mobile ή εκτελέστε την εφαρμογή σε έναν προσομοιωτή. Αυτή η εφαρμογή θα περιλαμβάνει τη δημιουργία ειδοποιήσεων Push, οπότε πρόκειται να μοιραστείτε στον πελάτη Mobile Expo, καθώς οι προσομοιωτές δεν τους υποστηρίζουν. Κάντε κλικ στο κουμπί Κοινή χρήση για να πάρετε έναν QR κώδικα για σάρωση ή την επιλογή να στείλετε έναν σύνδεσμο μέσω SMS ή ηλεκτρονικού ταχυδρομείου. Σάρωση του κώδικα QR με τον πελάτη EXPO. Αυτό τρέχει την εφαρμογή μέσω του προγράμματος-πελάτη EXPO και ανοίγει σε μια οθόνη με: 'ανοίξτε το app.js για να αρχίσετε να εργάζεστε στην εφαρμογή σας!'

Με την εφαρμογή Εφαρμογή, ανοίξτε το έργο στον προγραμματισμό του αγαπημένου σας κώδικα και ανοίξτε το App.JS. Βρείτε το παραπάνω κείμενο και αλλάξτε το στο Classic 'Hello World!', Στη συνέχεια, αποθηκεύστε. Θα πρέπει να δείτε την εφαρμογή Επαναφόρτωση αυτόματα και να έχετε το κείμενο "Hello World!" Τώρα ορατό. Μαγεία!

Ενώ αναπτύσσετε, ανακινώντας τη συσκευή θα αποκαλύψει ένα αναπτυσσόμενο μενού ανάπτυξης, το οποίο έχει χρήσιμες επιλογές για σφάλματα. Από αυτό το μενού μπορείτε επίσης να επιστρέψετε στην Expo Home - χρήσιμη για να βγείτε από την εφαρμογή ή να μεταβείτε σε άλλο.

03. Προσθήκη ειδοποιήσεων

Τώρα έχετε μια βασική εφαρμογή Ρύθμιση και λειτουργία, ας προσθέσουμε τη δυνατότητα αποστολής και λήψης ειδοποιήσεων. Αυτό θα απαιτούσε κανονικά αντικειμενικά-C και Java, ενσωματώνοντας μια υπηρεσία τρίτου μέρους για την αποστολή των ειδοποιήσεων και θα χρειαστεί επίσης να δημιουργήσετε πιστοποιητικά για iOS και να δημιουργήσετε κλειδιά για το Android.

Πρώτον, πρέπει να εισαγάγετε δικαιώματα και ειδοποιήσεις από την έκθεση expo και να δημιουργήσετε μια νέα λειτουργία στην κατηγορία εφαρμογών:

 Εισαγωγή {Δικαιώματα, ειδοποιήσεις} από την «έκθεση».
Η εξαγωγή προεπιλεγμένης εφαρμογής κλάσης επεκτείνεται αντιδράστε το {
  Async ResitingForpushnotifications () {
  }
} 

Εδώ χρησιμοποιείτε τη λέξη-κλειδί Async για να χρησιμοποιήσετε το χαρακτηριστικό ES2017 Async / Async - Realt Native έχει Babel που εργάζεται κάτω από την κουκούλα, ώστε να μπορείτε να αξιοποιήσετε όλη τη νέα καλοσύνη JavaScript. Τώρα, ας ζητήσουμε τα δικαιώματα ειδοποίησης και να ανακτήσετε το Token Push Expo - για να προσδιορίσετε τη συσκευή - έτσι ώστε η έκθεση να γνωρίζει πού να στείλει ειδοποιήσεις ώθησης:

 Async ResitingForpushnotifications () {
  Αποτέλεσμα Const = περιμένετε permissions.askasync (permissions.remote_notifications);
  Εάν (αποτέλεσμα.status! == 'χορηγείται') {
    ΕΠΙΣΤΡΟΦΗ;
  }
  const token = περιμένετε ειδοποιήσειςs.getexpopushokenasync ();
  console.log (token);
} 

Εδώ, θα ζητήσετε άδεια ειδοποίησης χρησιμοποιώντας τη μέθοδο Permissions.askasync (). Η ειδοποίηση θα εμφανιστεί μόνο στο iOS καθώς το Android επιτρέπει ειδοποιήσεις από προεπιλογή. Παρά το γεγονός αυτό, πραγματικά πρέπει να τρέχετε μέσα από την ίδια λογική στο Android, καθώς είναι δυνατό να απενεργοποιήσετε τις ειδοποιήσεις.

Στη συνέχεια, ελέγξτε την απάντηση. Εάν οι ειδοποιήσεις δεν έχουν χορηγηθεί, τότε μπορείτε να σταματήσετε και να επιστρέψετε τη λειτουργία. Εάν χορηγηθούν ειδοποιήσεις, μπορείτε να πάρετε το διακριτικό από την υπηρεσία expo. Τέλος, μπορείτε να καταγράψετε το σήμα για μεταγενέστερη χρήση για να δοκιμάσετε ειδοποιήσεις και αυτό θα συνδεθεί στο Expo XDE.

Αξίζει να σημειωθεί σε αυτό το σημείο ότι - στο iOS - αυτή η ειδοποίηση μπορεί να ενεργοποιηθεί μόνο μία φορά με το σχεδιασμό. Έτσι, εάν ένας χρήστης αρνείται την άδεια, ίσως θελήσετε να εξετάσετε την προσθήκη μιας προσαρμοσμένης ειδοποίησης ή ειδοποίησης πριν επιστρέψετε τη λειτουργία. Για να ενεργοποιήσετε τις ειδοποιήσεις σε αυτό το σημείο, ο χρήστης θα χρειαστεί να μεταβεί στις ρυθμίσεις εφαρμογής (στην περίπτωσή μας, αυτό θα είναι expo) & gt; Ειδοποιήσεις και να τους επιτρέψει από εκεί. Εξαιτίας αυτού, θα χρειαστεί να διαγράψετε τον πελάτη Expo Mobile και στη συνέχεια να εγκαταστήσετε ξανά εάν θέλετε να ελέγξετε την ειδοποίηση της άδειας στο iOS περισσότερες από μία φορές.

Επιπλέον, η Expo παρέχει μια μέθοδο που ονομάζεται Permissions.GetAsync () και αυτό λειτουργεί με παρόμοιο τρόπο με την Permissions.askasync (), μόνο χωρίς να βγάζετε την ειδοποίηση iOS. Αυτό θα μπορούσε να είναι χρήσιμο εάν θέλετε να ελέγξετε την κατάσταση πρώτα για να δημιουργήσετε μια προσαρμοσμένη ροή που θα σας ζητήσει από δικαιώματα, για παράδειγμα. Εάν η προειδοποίηση iOS έχει ενεργοποιηθεί προηγουμένως (θυμηθείτε, μπορεί να εκτοξευθεί μόνο μία φορά ανά εφαρμογή), οι άδειες .askasync () θα επιστρέψουν τις ίδιες πληροφορίες με τις permissions.getasync (), έτσι ώστε να μην χρειαζόμαστε να χρησιμοποιήσετε permissions.getasync ().

Στη συνέχεια, πρέπει να καλέσετε αυτή τη λειτουργία στη μέθοδο LifeCycle ComponentDidMount έτσι ώστε να λειτουργεί στην εκκίνηση της εφαρμογής:

 componentdidmount () {
  this.registerforpushnotifications ();
} 

Στη συνέχεια, εάν αποδεχτείτε την άδεια ειδοποίησης, η εφαρμογή σας θα είναι σε θέση να λαμβάνει τοπικές και απομακρυσμένες ειδοποιήσεις. Στη συνέχεια, οι τοπικές ειδοποιήσεις ρυθμίζονται και αποστέλλονται μέσω της συσκευής απευθείας στην εφαρμογή και δεν απαιτούν σύνδεση στο Internet. Οι απομακρυσμένες ειδοποιήσεις προέρχονται από ένα διακομιστή και στείλτε την ειδοποίηση μέσω του συστήματος ειδοποιήσεων της Apple Push (APN) ή των υπηρεσιών Google Cloud Messaging (GCM). Αυτή η διαδικασία θα απαιτήσει επίσης πρόσβαση σε σύνδεση στο Internet για να τα λάβει.

Η Expo έχει μια υπηρεσία για να στείλει ειδοποιήσεις στη διεύθυνση https://exp.host/--/api/v2/push/send; Το μόνο που χρειάζεται να κάνετε είναι να στείλετε ορισμένα δεδομένα σε αυτό. Αυτό θα φανεί λίγο σαν τα εξής:

 {
  // το διακριτικό.
  "Σε": & lt; token από την εφαρμογή & gt;
  // Ο τίτλος ειδοποιήσεων.
  "Τίτλος": "Τίτλος ειδοποίησης",
  // το σώμα ειδοποιήσεων.
  "Σώμα": "Σώμα ειδοποίησης",
  // Περάστε τα δεδομένα ως αντικείμενο, αυτό μπορεί να χρησιμοποιηθεί κατά το χειρισμό της ειδοποίησης.
  "Δεδομένα": {"Αξία": "Γεια σας κόσμο!" }
} 

Πριν δοκιμάσουμε μια ειδοποίηση, θα διαμορφώσουμε την εφαρμογή μας για να χειριστούμε τις ειδοποιήσεις εάν η εφαρμογή είναι ανοιχτή. Με το σχεδιασμό, το iOS και το Android δεν εμφανίζουν ειδοποίηση όταν μια εφαρμογή είναι ανοιχτή. Μπορείτε επίσης να χειριστείτε τα δεδομένα που αποστέλλονται στο μήνυμα ώθησης εδώ, σε περίπτωση που πρέπει να δράσουμε σε αυτό. Ας δημιουργήσουμε μια νέα λειτουργία για να το χειριστούμε και να ειδοποιήσετε την ιδιότητα Αξίας δεδομένων:

 Χειροκίνητη χειρολαβή (ειδοποίηση) {
  Ειδοποίηση (ειδοποίηση.data.Value);
} 

Στη συνέχεια, στη συνέχεια της συνιστώσας κύκλου ζωής μας, πρέπει να ρυθμίσετε έναν ακροατή, το οποίο καλεί τον χειριστή ειδοποιήσεων που μόλις δημιουργήσαμε:

 componentdidmount () {
  this.registerforpushnotifications ();
  Notifications.addlistener (αυτή τη χειροποίηση).
} 

Τώρα έχει οριστεί. Ας στείλουμε μια ειδοποίηση ώθησης με ένα curl αίτημα:

 Curl \
  -X post \
  -H "Τύπος περιεχομένου: Εφαρμογή / JSON" \
  -d '{
    "Σε": "& lt; token & gt;",
    "Τίτλος": "Τίτλος ειδοποίησης",
    "Σώμα": "Σώμα ειδοποίησης",
    "Δεδομένα": {"Αξία": "Γεια σας κόσμο!" }
  } \ \
  https://exp.host/--/api/v2/push/send

Μπορείτε να πάρετε την εντολή Curl εδώ . Εάν δεν είστε εξοικειωμένοι με το Curl, μπορείτε να στείλετε το αίτημα χρησιμοποιώντας κάτι σαν Ταχυδρόμος , που χρησιμοποιεί ένα GUI για την αποστολή αιτημάτων.

Μόλις στείλει το αίτημα, θα πρέπει τώρα να δείτε την ειδοποίηση να έρχεται μέσω. Δεν υπάρχουν περιορισμοί στη χρήση της υπηρεσίας Push Expo. Σε ένα σενάριο πραγματικού κόσμου, ενθαρρύνεται να χρησιμοποιήσει το API παρτίδας στέλνοντας μια σειρά ειδοποιήσεων ώθησης, σε παρτίδες 100, για να αποσταλεί για αποτελεσματικότητα:

 [
  {// αντικείμενο ειδοποίησης όπως παραπάνω},
  {// άλλο αντικείμενο ειδοποίησης}
] 

04. Δημοσιεύστε με Expo

Έτσι, τώρα που έχουμε μια λαμπερή νέα αντιδράσει native app (ακόμα και αν δεν κάνει πολλά ακόμα!), Πώς αφήνουμε τους άλλους να το χρησιμοποιήσουν χωρίς να το τρέξουν από το expo xde; Ο απλούστερος τρόπος είναι κάνοντας κλικ στη δημοσίευση από το XDE. Αυτό θα δημοσιεύσει το έργο σε Expo και θα εμφανιστεί ένας σύνδεσμος στο προφίλ σας, το οποίο μπορείτε να βρείτε στη διεύθυνση https://expo.io/@ &&ltsername>.

Όταν επισκέπτεστε τον δημοσιευμένο σύνδεσμο του έργου, θα υπάρχει ένας QR κώδικας για τη σάρωση (που βρίσκεται μεταξύ των ίδιων επιλογών με το XDE) με τον πελάτη Expo Mobile, όπως και κατά τη διάρκεια της ανάπτυξης. Αν θέλουμε να ενημερώσουμε την εφαρμογή, το μόνο που πρέπει να κάνουμε είναι να αναδημοσιεύσετε και οι αλλαγές θα είναι διαθέσιμες στον χρήστη κατά την εκτέλεση της εφαρμογής ξανά.

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 297 του Net, το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Εγγραφείτε στο καθαρό εδώ .

Θέλετε να μάθετε περισσότερους τρόπους που μπορείτε να αντιδράσετε ξανά;

Εάν ενδιαφέρεστε να μάθετε περισσότερα για να αντιδράσετε, βεβαιωθείτε ότι έχετε πάρει το εισιτήριό σας για Δημιουργία Λονδίνου από τις 19-21 Σεπτεμβρίου 2018 . Έχοντας ιδρύσει την αντιδράσει ακαδημία για να διδάξει να αντιδράσει σε όλο τον κόσμο και ξεκίνησε sizzy.co και ok-google.io , Ο Kristijan Ristovski θα παράγει το εργαστήριό του - να μάθουν πώς να σκέφτονται να αντιδράσουν - στην οποία θα εξερευνήσει να αντιδράσει τις βέλτιστες πρακτικές και να σας διδάξει λύσεις σε πραγματικά προβλήματα που μπορεί να συναντήσετε στη διαδικασία οικοδόμησης μιας εφαρμογής.

Δημιουργία Λονδίνο λαμβάνει χώρα από τις 19-21 Σεπτεμβρίου 2018. Πάρτε το εισιτήριό σας τώρα .

Σχετικά Άρθρα:

• Πάρτε το κεφάλι σας να αντιδράσει με αυτούς τους πέντε παράγοντες
• 10 Συμβουλές εμπειρογνωμόνων που πρέπει να γνωρίζετε σήμερα
• Δημιουργήστε μια εγγενή εφαρμογή κινητής τηλεφωνίας με αντιδράσει ντόπιος