Jump Start reagál az EXPO-val

Reagáljon natív olyan platform, amely lehetővé teszi a natív mobilalkalmazásokat a JavaScript használatával. Ahogy a név azt jelenti, használja Reagál , így a mobil interfészek összeállítása hasonló az interneten való reagáláshoz. Ahelyett, hogy összetevőket hoz létre HTML-címkékkel, saját komponensekkel rendelkezik, amelyek kötődnek a natív UI komponensekhez.

Reagálni a natív lehet bonyolult, hogy felállítsa, különösen akkor, ha a push értesítések. Be kell állítania a tanúsítványokat és merülnie az IOS és a Java számára az Android számára. Azonban, Expo kiküszöböli, hogy szükség van erre.

A weboldal építése helyett egy alkalmazás? Használhatsz egy tisztességes weboldal építője . És fenntartani az oldalt, kapd meg web hosting helyszínen.

• 30 Webes tervezési eszközök a munkafolyamat felgyorsításához

Az Expo azt jelenti, hogy reagálhat natív alkalmazásokat, és csak a JS-t használó app üzletekre telepítheti őket. Ezenkívül SDK-t kínál a natív funkcionalitáshoz, például az értesítésekhez, a kamerához, a névjegyekhez, a helyhez és így tovább. Ezenkívül hozzáférést biztosít néhány olyan UI-összetevőhöz, amelyek nem szerepelnek a reakció natív magjában, de gyakran használják, például ikonok, homályos nézetek és így tovább, anélkül, hogy meg kell írniuk a natív kódot.

Az Expo létrehozhat benyújtási kész alkalmazásokat is, anélkül, hogy az XCode vagy Android Studio használatával kell építeni. Ha még korábban nem használtál, ijesztő hely, különösen akkor, ha csak akkor kezdődik, amikor reagál az őshonos - vagy nem biztosak általában Hogyan készítsünk egy alkalmazást . Alkalmazások (vagy projektek) is közzéteszi az expo-t, nem pedig az App Store-hoz való benyújtását, amely lehetővé teszi a felhasználók számára a projektet az Expo Mobile Client segítségével. Ne aggódj, ezt később lefedik!

Építed az alkalmazást egy csapattal? Mentse a fájlokat elérhető, megbízható módon felhő tároló .

01. Az Expo beállítása

Az Expo telepítése egyszerű folyamat. Menj át a webhely és töltse le a legújabb XDE-t, majd telepítse a mobilalkalmazást a telefonra vagy táblagépre. A mobil kliens lehetővé teszi az alkalmazások futtatását egy igazi eszközön az alkalmazásukon anélkül, hogy bármilyen fejlesztői licencet vagy tanúsítvány-beállítást igényelné.

Ezután az alkalmazásokat az Expo szolgáltatáshoz közzé teheti, hogy a felhasználók az Expo Mobile Clienten keresztül futhassanak a kész projektek, anélkül, hogy átmennénk az App Store-on és a Google Play Review folyamataiban.

Az Expo támogatja az épület önálló alkalmazásokat, amelyek manuálisan közzéteszik az App Store vagy a Play Store számára, de szükség lenne a fejlesztői számlákra, amelyekre kiengedsz. Apple fejlesztői programja évente 79 fontot költ A Google Play Console költségek egy egyszeri díj 25 dollár USD.

02. Hozza létre az első alkalmazást

Menjünk az üzlethez, és hozzon létre első alkalmazásunkat az Expo-val. Nyissa meg az Expo XDE-t, válassza a Project & GT lehetőséget; Új projekt, és válassza ki az üres sablont. Telepítse az összes függőséget, és indítsa el a reagálási natív csomagolót, amely az összes eszközt tartalmazza.

Innen közzéteszi az alkalmazást, megoszthatja az alkalmazást az Expo Mobile Clienthez, vagy futtassa az alkalmazást egy szimulátoron. Ez az alkalmazás magában foglalja a push értesítések létrehozását, így megosztja az Expo Mobile Client-ot, mivel a szimulátorok nem támogatják őket. Kattintson a Megosztás gombra, hogy megkapja a QR-kódot a szkenneléshez vagy az SMS-en vagy e-mailen keresztül történő link küldéséhez. Szkennelje be a QR-kódot az Expo klienssel. Ez az alkalmazáson keresztül fut az EXPO kliensen keresztül, és megnyílik egy képernyőn: "App.js megnyitása az alkalmazás megkezdéséhez!"

Az alkalmazás futásával nyissa meg a projektet a kedvenc kódszerkesztőben és nyissa meg az App.js. Keresse meg a fenti szöveget, és változtassa meg a klasszikus "Hello World!", Majd mentse el. Látnia kell az App újratöltését automatikusan, és a "Hello World!" Szövege látható. Varázslat!

Miközben fejleszti, a készülék rázza fel a fejlesztő menüt, amely hasznos lehet a hibakereséshez. Ebből a menüből is visszatérhet az Expo Home - Hasznos az alkalmazásból való kilépéshez, vagy a másikra vált.

03. Értesítések hozzáadása

Most van egy alapalkalmazás létrehozása és futása, adjuk hozzá az értesítések küldésének és fogadásának képességét. Ez rendszerint célkitűzést igényel, C és Java, integrálva egy harmadik féltől származó szolgáltatást az értesítések küldéséhez, és meg kell hoznia az IOS-ot, és létrehoznia kell az Android kulcsokat.

Először is meg kell importálnia az engedélyeket és az értesítéseket az Expo-ból, és hozzon létre egy új funkciót az alkalmazásosztályban:

 Import {Engedélyek, Értesítések} az "Expo" -tól;
Az alapértelmezett osztályú alkalmazás exportja kiterjeszti a reagálást {
  Async RegisterForpushnotifications () {
  }
} 

Itt használjuk a aszinkron kulcsszó vehetik az ES2017 aszinkron / várnak Önre jellemző - reagál Native van Babel dolgozik a motorháztető alatt, így kihasználhatják az összes új JavaScript jóság. Most kérje meg az értesítési jogosultságokat és lekérje az Expo Push Teken-t - az eszköz azonosításához - hogy az Expo tudja, hol küldje el a push értesítéseket:

 Async RegistrForpushnotifications () {
  const resedge = Aways.askasync (Permissions.Remote_notifications) várható;
  Ha (eredmény.Status! == "megadott") {
    Visszatérés;
  }
  const token = várakozások.Getexpopushtokensync ();
  konzol.log (token);
} 

Itt kérheti az értesítési engedélyt a jogosultságok.askasync () módszer segítségével. A riasztás csak az iOS-ban jelenik meg, mivel az Android alapértelmezés szerint engedélyezi az értesítéseket. Ennek ellenére valójában még mindig ugyanazt a logikát kell futtatnia az Androidon, mivel lehetséges az értesítések kikapcsolása.

Ezután ellenőrizze a választ. Ha az értesítéseket nem adják meg, akkor leállíthatja és visszatérhet a funkcióból. Ha értesítések vannak megadva, megkapja a nyomógombot az Expo szolgáltatásból. Végül naplózhat a token későbbi használatra az értesítések teszteléséhez, és ez naplózni fog az Expo XDE-hez.

Érdemes megemlíteni ezt a pontot, hogy - az iOS-on - Ez a riasztás csak a tervezés által kiváltható; Tehát, ha egy felhasználó megtagadja az engedélyt, érdemes megfontolni egy egyedi értesítés vagy figyelmeztetés hozzáadása előtt a funkcióból. Annak érdekében, hogy engedélyezze az értesítéseket ezen a ponton, a felhasználónak meg kell mennie az App beállításaiba (a mi esetünkben ez lesz az Expo) & GT; Értesítések és engedélyezhetik őket. Emiatt törölnie kell az Expo Mobile Client programot, majd újratelepítenie kell, ha többet szeretne tesztelni az iOS-on többször.

Továbbá, Expo eljárást biztosít az úgynevezett Permissions.getAsync (), és ez működik hasonló módon, hogy Permissions.askAsync (), csak nem tüzelési le az iOS riasztást. Ez hasznos lehet, ha először szeretné ellenőrizni az állapotot, hogy hozzon létre egy egyedi áramlást, amely lehetővé teszi a jogosultságokat, például. Ha az iOS-riasztás korábban már kiváltott (ne feledje, akkor csak alkalmazásonként egyszerre lehet lőni), a Permissions.askasync () ugyanazokat az információkat adja vissza, mint a permissions.getasync (), így a Használati esetünkben nem kell A PLENTIONS.GETASYNC () használatához.

Ezután meg kell hívnia ezt a funkciót a ComponentDIdMount Lifecycle módszerben, hogy az alkalmazás indításakor futjon:

 ComponentDIdMount () {
  ez.Registerforpushnotifications ();
} 

Ezután, ha elfogadja az értesítési engedélyt, az alkalmazás képes lesz helyi és távoli értesítéseket kapni. A helyi értesítéseket ezután a készülék közvetlenül az alkalmazáshoz hozza, és nem igényel internetkapcsolatot. Távoli bejelentések érkeznek a szerver és küld értesítést keresztül Apple Push Notification System (APNS) vagy a Google Cloud Messaging (GCM) szolgáltatások. Ez a folyamat az internetkapcsolathoz való hozzáférést is igényli, hogy megkapja őket.

Az Expo szolgáltatás van az értesítések küldésére a https://exp.host/--/api/v2/push/send-en; Mindössze annyit kell tennie, hogy küldjön néhány adatot. Ezután kicsit úgy néz ki, mint a következők:

 {
  // a push token.
  "A": & lt; token az alkalmazásból & gt;
  // az értesítési cím.
  "Cím": "Értesítési cím",
  // az értesítési szerv.
  "Test": "Értesítési testület",
  // Adatok objektumként történő átadása, ez az értesítés kezelése során használható.
  "Adatok": {"érték": "Hello World!" }
} 

Mielőtt megvizsgálnánk egy értesítést, beállítjuk az alkalmazásunkat az értesítések kezelésére, ha az alkalmazás nyitva van. A tervezéssel az iOS és az Android nem jelenít meg értesítést, ha egy alkalmazás nyitva van. Itt is kezelheti a push üzenetben küldött adatokat, ha meg kell cselekednünk rajta. Hozzunk létre egy új funkciót, hogy kezeljük ezt és figyelmeztessük az adatérték tulajdonságát:

 Handlenotification (Értesítés) {
  riasztás (értesítés.data.value);
} 

Akkor mi componentDidMount életciklus módszert kell állítania a hallgató, amely felszólítja a bejelentés felvezető most létrehozott:

 ComponentDIdMount () {
  ez.Registerforpushnotifications ();
  Értesítések.addlistener (ez.handlenotification);
} 

Most be van állítva. Küldjünk egy push értesítést Curl kéréssel:

 CURL \
  -X Post \
  -H "tartalom típus: alkalmazás / JSON"
  -d '{
    "A": "& lt; token & gt;",
    "Cím": "Értesítési cím",
    "Test": "Értesítési testület",
    "Adatok": {"érték": "Hello World!" }
  } '
  https://exp.host/--/api/v2/push/send

Megragadhatja ezt a curl parancsot itt . Ha nem ismeri a curl-t, elküldheti a kérést valami használatával Postás , amely GUI-t használ a kérések küldéséhez.

Miután a kérés elküldte, most már látja az értesítést. Nincs korlátozás az Expo Push szolgáltatás használatával. Egy valós forgatókönyvben arra ösztönzik, hogy a kötegelt API-t használják, ha a 100-as tételeket a 100-as tételekbe küldjük, a hatékonyságért kell elküldeni:

 [
  {// Értesítési objektum, mint fent},
  {// Egy másik értesítő objektum}
] 

04. Az Expo közzététele

Tehát most, hogy van egy fényes új reakció natív alkalmazásunk (még akkor is, ha még nem sokat csinál!), Hogyan hagyjuk, hogy mások használják anélkül, hogy az Expo XDE-től futtatnák? A legegyszerűbb út az XDE-ből való közzétételre kattintva van. Ez közzéteszi a projektet az Expo-ra, és egy link jelenik meg a profilján, amelyet megtalálhat a https://expo.io/@<username>

Ha meglátogatja a közzétett projektkapcsolatot, akkor lesz egy QR-kód a szkenneléshez (az azonos lehetőségek között, mint az XDE) az Expo Mobile Client segítségével, mint a fejlesztés során. Ha szeretnénk frissíteni az alkalmazást, mindössze annyit kell tennie, hogy közzéteszi, és a változások elérhetők lesznek a felhasználó számára, amikor az alkalmazást újra futtatják.

Ezt a cikket eredetileg a Net, a világ legjobban értékesített magazinja a webes tervezők és a fejlesztők számára tett közzé. Iratkozzon fel itt Netre .

Szeretné megtudni, hogy több módja lehet, hogy elsajátíthatja a reagálást?

Ha érdekel többet a reagálásról, győződjön meg róla, hogy felvette a jegyét London létrehozása 2018. szeptember 19-21-től . A React Akadémia megalapítása, hogy tanítsa a világ minden tájáról és elindította sizzy.co és ok-google.io , Kristijan Ristovski lesz nyilvánított a workshop - Megtanulják, hogyan Gondolj reagál -, amelyben feltárja reagálnak a legjobb gyakorlatokat, és megtanít megoldásokat a valós problémákat, hogy lehet, hogy találkozik a folyamat az épület egy kb.

London létrehozása 2018. szeptember 19-21. Most kapd meg jegyét .

Kapcsolódó cikkek:

• Szerezd meg a fejét az öt tényezővel
• 10 szakértői reaktív tippeket, amelyeket ma kell tudnia
• Építsen egy natív mobilalkalmazást reagáljon