Jump Start reacționează nativ cu Expo

Reacționează nativul este o platformă care vă permite să construiți aplicații mobile native utilizând JavaScript. După cum implică numele, acesta utilizează Reacţiona , Compoziția de interfețe mobile este similară utilizării reacției pe web. Mai degrabă decât crearea componentelor utilizând etichete HTML, acesta are propriul set de componente care se leagă la componentele Native UI.

Reactivul nativ poate fi dificil de configurat, mai ales când vine vorba de notificările push. Trebuie să configurați certificate și să vă scufundați în Obiectiv-C pentru iOS și Java pentru Android. In orice caz, Expo. elimină necesitatea acestui lucru.

Construirea unui site mai degrabă decât o aplicație? Ai putea folosi un decent Builder de site-uri web . Și pentru a menține site-ul, obțineți-vă web hosting exact.

• 30 de instrumente de design web pentru a accelera fluxul de lucru

Expo înseamnă că puteți crea aplicații native reacționate și implementează-le în magazinele de aplicații folosind numai JS. În plus, oferă un SDK cu acces la funcționalitatea nativă, cum ar fi notificările, camera, contactele, locația și așa mai departe. De asemenea, oferă acces la unele componente UI care nu sunt incluse în miezul nativ reacționat, dar sunt adesea folosite, cum ar fi icoane, vederi neclară și așa mai departe fără a fi nevoie să scrie o linie de cod nativ.

Expo poate crea, de asemenea, o aplicație pregătită de depunere, fără a fi nevoie să se construiască folosind Xcode sau Android Studio. Dacă nu ați utilizat nici înainte, ele pot fi un loc înfricoșător, mai ales dacă începeți doar cu reacția nativ - sau nu sunteți încrezători în general cu Cum se face o aplicație . Aplicațiile (sau proiectele) pot fi, de asemenea, publicate la Expo, mai degrabă decât să se prezinte la un magazin de aplicații, care permite utilizatorilor să încerce proiectul prin intermediul clientului EXPO MOBILE. Nu vă faceți griji, acest lucru va fi acoperit mai târziu!

Construiești aplicația cu o echipă? Salvați fișierele în accesibil, fiabil Stocare in cloud .

01. Configurați Expo

Instalarea expo este un proces simplu. Se îndreaptă spre Site. Și descărcați cel mai recent XDE, apoi instalați aplicația mobilă pe telefon sau tabletă. Clientul mobil permite executarea aplicațiilor pe un dispozitiv real prin intermediul aplicației lor, fără a avea nevoie de licențe de dezvoltare sau de configurare a certificatelor.

Puteți să publicați aplicații la serviciul Expo, astfel încât utilizatorii să poată rula proiectele dvs. finalizate prin intermediul clientului Mobile Expo, fără a fi nevoie să treceți prin intermediul proceselor App Store și Google Play Review.

Expo sprijină construirea aplicațiilor autonome care pot fi publicate manual la magazinul de aplicații sau magazinul de jocuri, totuși ați fi nevoie de conturile dezvoltatorului pentru platformele pe care le eliberați. Programul de dezvoltator al Apple costă 79 de lire sterline pe an și Consola de joc Google costă o taxă unică de 25 USD.

02. Creați prima dvs. aplicație

Să mergem la afaceri și să creăm prima noastră aplicație cu Expo. Deschideți Expo XDE, selectați Project & GT; Proiect nou și selectați șablonul gol. Instalați toate dependențele și porniți ambalajul nativ reacționat, care îmbină toate activele.

De aici, puteți publica aplicația, puteți partaja aplicația la clientul EXPO Mobile sau rulați aplicația pe un simulator. Această aplicație va implica crearea de notificări push, deci veți împărtăși clientului Mobile Expo, deoarece simulatoarele nu le acceptă. Faceți clic pe butonul Share pentru a obține un cod QR pentru a scana sau opțiunea de a trimite un link prin SMS sau prin e-mail. Scanați codul QR cu clientul Expo. Aceasta rulează aplicația prin intermediul clientului Expo și se deschide până la un ecran cu: "Deschideți App.js pentru a începe să lucrați la aplicația dvs.!"

Cu aplicația care rulează, deschideți proiectul în editorul dvs. de cod preferat și deschideți App.Js. Găsiți textul de mai sus și schimbați-l la "Bună ziua Bună ziua!", Apoi salvați. Ar trebui să vedeți automat reîncărcarea aplicației și să aveți textul "Hello World!" Vizibil acum. Magie!

În timp ce vă dezvoltați, scuturați dispozitivul va dezvălui un meniu dezvoltator, care are opțiuni utile pentru depanare. Din acest meniu puteți, de asemenea, să vă întoarceți la EXPO Home - utile pentru a ieși din aplicație sau pentru a trece la altul.

03. Adăugați notificări

Acum aveți o aplicație de bază creată și rulează, să adăugăm capacitatea de a trimite și de a primi notificări. Acest lucru ar necesita în mod normal obiectiv-C și Java, integrând un serviciu terț pentru a trimite notificările și va trebui, de asemenea, să configurați certificate pentru iOS și să creați cheile pentru Android.

În primul rând, trebuie să importați permisiuni și notificări de la EXPO și să creați o nouă funcție în clasa APP:

 import {permisiuni, notificări} din "Expo";
Export aplicație de clasă implicită extinde react.component {
  Async RegisterForpushnice () {
  }
} 

Aici folosiți cuvântul cheie Async pentru a utiliza funcția Async / AWAIT - reacționează nativul Babel care lucrează sub capotă, astfel încât să puteți folosi toată noua bunătate JavaScript. Acum, să cerem permisiuni de notificare și să recuperăm tokenul Expo Push - pentru a identifica dispozitivul - astfel încât Expo să știe unde să trimită notificări push:

 Async Registerforpushnice () {
  const rezultat = așteaptă permisiuni.askasync (permisiuni.remote_rotifications);
  dacă (rezultat.Status! == "acordat") {
    întoarcere;
  }
  const token = așteaptă notificări.getexpopushtoKenasync ();
  consola.log (jeton);
} 

Aici veți cere permisiunea de notificare utilizând metoda Permisions.askasync (). Alerta va afișa numai pe iOS ca Android permite notificări în mod implicit. În ciuda acestui fapt, de fapt, trebuie să parcurgeți aceeași logică pe Android, deoarece este posibil să dezactivați notificările.

Apoi, verificați răspunsul. Dacă notificările nu sunt acordate, atunci puteți opri și reveni la funcția. Dacă sunt acordate notificări, obțineți jetonul de împingere din serviciul Expo. În cele din urmă, puteți să vă înregistrați tokenul pentru utilizarea ulterioară pentru a testa notificările și acest lucru va fi înregistrat la Expo XDE.

Este demn de remarcat în acest moment că - pe iOS - această alertă poate fi declanșată doar prin design; Deci, dacă un utilizator neagă permisiunea, este posibil să doriți să luați în considerare adăugarea unei notificări sau alerte personalizate înainte de a ieși din funcția. Pentru a permite notificările în acest moment, utilizatorul va trebui să meargă la setările aplicației (în cazul nostru, acest lucru va fi expo) & GT; Notificări și să le permită de acolo. Din acest motiv, va trebui să ștergeți clientul mobil Expo și apoi să reinstalați dacă doriți să testați alerta permisiunii pe iOS de mai multe ori.

În plus, Expo oferă o metodă numită permisiuni.Getsync () și acest lucru funcționează într-un mod similar cu permisiunile.askasync (), doar fără a renunța la Alert IOS. Acest lucru ar putea fi util dacă doriți să verificați mai întâi starea pentru a crea un flux personalizat care vă va cere permisiuni, de exemplu. Dacă Alerta IOS a fost declanșată anterior (amintiți-vă, poate fi trasată o singură dată pe aplicație), permisiunile.askasync () va returna aceleași informații ca și permisiunile.Gestasync (), astfel încât în ​​cazul nostru de utilizare nu avem nevoie Pentru a utiliza permisiunile .Getsync ().

Apoi, trebuie să apelați această funcție în metoda ComponentDidmount LifeClecle, astfel încât să ruleze pe lansarea aplicației:

 ComponentDidmount () {
  Acest lucru.registerforpushificational ();
} 

Apoi, dacă acceptați permisiunea de notificare, aplicația dvs. va putea primi notificări locale și la distanță. Notificările locale sunt apoi configurate și trimise prin intermediul aparatului direct la aplicație și nu necesită o conexiune la Internet. Notificările la distanță provin dintr-un server și trimiteți notificarea prin intermediul serviciilor de notificare Apple Push (APNS) sau Google Cloud Messaging (GCM). Acest proces va necesita, de asemenea, acces la o conexiune la internet pentru a le primi.

Expo are un serviciu pentru a trimite notificări la https://exp.host/-/api/v2/push/send; Tot ce trebuie să faceți este să trimiteți niște date. Acest lucru va arăta puțin ca următoarele:

 {{{{{
  // tokenul de împingere.
  "La": & lt; token de la aplicație & gt;
  // titlul de notificare.
  "Titlu": "Titlul notificării",
  // organismul de notificare.
  "Corp": "organism de notificare",
  // Treceți în date ca obiect, acest lucru poate fi utilizat la manipularea notificării.
  "Datele": {"valoare": "Bună ziua!" }
} 

Înainte de a testa o notificare, vom configura aplicația noastră pentru a gestiona notificările dacă aplicația este deschisă. Prin design, iOS și Android nu prezintă o notificare atunci când o aplicație este deschisă. De asemenea, puteți gestiona toate datele trimise în mesajul push aici, în cazul în care trebuie să acționăm pe ea. Să creăm o nouă funcție pentru a gestiona acest lucru și a alerta proprietatea de valoare a datelor:

 Galerie (Notificare) {
  alertă (notificare.data.value);
} 

Apoi, în metoda noastră de viață componentădidmount trebuie să configurați un ascultător, care apelează manipulatorul de notificare pe care tocmai l-am creat:

 ComponentDidmount () {
  Acest lucru.registerforpushificational ();
  Notificări.Addlistener (this.handlenalizare);
} 

Acum ești setat. Să trimitem o notificare push cu o cerere de curl:

 curl \
  -X POST \
  -H "tip conținut: aplicație / json" \
  -d '{{
    ":" "" "" "", GT; ",
    "Titlu": "Titlul notificării",
    "Corp": "organism de notificare",
    "Datele": {"valoare": "Bună ziua!" }
  } "
  https://exp.host/--/api/v2/push/send

Puteți lua această comandă de curl Aici . Dacă nu sunteți familiarizat cu Curl, puteți trimite cererea folosind ceva de genul Poştaş , care utilizează un GUI pentru trimiterea cererilor.

Odată ce cererea a trimis, trebuie să vedeți acum notificarea. Nu există limitări la utilizarea serviciului de împingere Expo. Într-un scenariu din lumea reală, este încurajat să folosească API-ul lotului prin trimiterea unei game de notificări push, în loturi de 100, care urmează să fie trimise pentru eficiență:

 [
  {// Obiect de notificare ca mai sus},
  {// Un alt obiect de notificare}
] 

04. Publicați cu Expo

Deci, acum că avem o nouă aplicație nativă nouă (chiar dacă nu face prea mult!), Cum lăsăm pe alții să o folosească fără să o ruleze de la Expo XDe? Cea mai simplă modalitate este făcând clic pe publicarea din XDE. Acest lucru va publica proiectul la Expo și va apărea un link pe profilul dvs., pe care îl puteți găsi la https://expo.io/@< ;Username>.

Când vizitați linkul de proiect publicat, va exista un cod QR pentru scanarea (situată între aceleași opțiuni ca XDE) cu clientul Mobile Expo, la fel ca în timpul dezvoltării. Dacă vrem să actualizăm aplicația, tot ce trebuie să facem este republicarea și schimbările vor fi disponibile utilizatorului atunci când rulează din nou aplicația.

Acest articol a fost publicat inițial în numărul 297 de net, cea mai bună revistă din lume pentru designeri de web și dezvoltatori. Abonați-vă la net aici .

Doriți să aflați mai multe modalități pe care le puteți face să reacționeze?

Dacă sunteți interesat să aflați mai multe despre reacție, asigurați-vă că ați luat biletul pentru Generați Londra din 19-21 septembrie 2018 . După înființarea Academiei reacționate pentru a preda reacția în jurul lumii și a lansat Sizzy.co. și ok-google.io. , Kristijan Ristovski va livra atelierul său - Aflați cum să gândiți în reacție - în care va explora cele mai bune practici și vă va învăța soluții la probleme reale pe care le-ați putea întâlni în procesul de construire a unei aplicații.

Generarea Londrei are loc în perioada 19-21 septembrie 2018. Ia-ți biletul acum .

Articole similare:

• Ia-ți capul în jurul valorii de a reacționa cu acești cinci factori
• 10 experți Reactjs sfaturi pe care trebuie să știți astăzi
• Construiți o aplicație mobilă nativă cu reacția nativă