Spring Start Reageer Native met Expo

Reageer native Is een platform waarmee u inheemse mobiele apps kunt bouwen met JavaScript. Zoals de naam inhoudt, gebruikt het gebruik Reageer , dus het opstellen van mobiele interfaces is vergelijkbaar met het gebruik van reageren op het web. In plaats van componenten te maken met behulp van HTML-tags, heeft het zijn eigen set componenten die aan native UI-componenten binden.

Reageer Native kan lastig zijn om op te zetten, vooral als het gaat om push-meldingen. U moet certificaten instellen en duiken in doelstelling-C voor iOS en Java voor Android. Echter, Expo Elimineert de behoefte hieraan.

Een website bouwen in plaats van een app? Je zou een fatsoenlijk kunnen gebruiken website bouwer ​En krijg je je om de site te behouden web hosting Zoek op.

• 30 Webontwerphulpmiddelen om uw workflow te versnellen

Expo betekent dat u reageer native apps kunt maken en deze in te zetten in de app-winkels met alleen JS. Bovendien biedt het een SDK toegang tot de inheemse functionaliteit, zoals meldingen, camera, contacten, locatie enzovoort. Het biedt ook toegang tot sommige UI-componenten die niet zijn opgenomen in de inheemse kern, maar worden vaak gebruikt, zoals pictogrammen, wazig uitzicht enzovoort zonder een lijn van de inheemse code te hoeven schrijven.

Expo kan ook inzending-gereed app builds maken zonder te bouwen met behulp van Xcode of Android Studio. Als je het ook niet eerder hebt gebruikt, kunnen ze een enge plaats zijn, vooral als je net aan de slag bent met reageer inheems - of niet zelfverzekerd Hoe maak je een app ​Apps (of projecten) kunnen ook worden gepubliceerd om te expo in plaats van in te dienen bij een app-winkel, waardoor gebruikers het project kunnen proberen via de Expo Mobile-client. Maak je geen zorgen, dit zal later worden afgedekt!

Bouwt u uw app met een team? Sla uw bestanden op in toegankelijke, betrouwbare cloud opslag ​

01. Stel Expo in

Het installeren van Expo is een eenvoudig proces. Ga naar de site en download de nieuwste XDE en installeer vervolgens de mobiele app op uw telefoon of tablet. Met de mobiele client kan het uitvoeren van apps op een echt apparaat via hun app zonder ontwikkelaarslicenties of -certificaat-instellingen upfront nodig hebben.

U kunt vervolgens apps publiceren naar de Expo-service, zodat gebruikers uw voltooide projecten kunnen uitvoeren via de Expo Mobile-client, zonder door de App Store en Google Play Review-processen te hoeven gaan.

Expo ondersteunt building-stand-alone apps die handmatig kunnen worden gepubliceerd in de App Store of Play Store, maar u zou ontwikkelaars vereisen dat de platforms u loslaat. Apple's Developer-programma kost £ 79 per jaar en Google's Play Console kost een eenmalige vergoeding van $ 25 USD.

02. Maak je eerste app

Laten we naar zaken doen en onze eerste app met Expo maken. Open de Expo XDE, selecteer Project & GT; Nieuw project en selecteer de lege sjabloon. Installeer alle afhankelijkheden en start de Reageer Native Packager, die alle activa bundelt.

Vanaf hier kunt u de app publiceren, de app delen naar de Expo Mobile-client of de app uitvoeren op een simulator. Deze app gaat het maken van pushmeldingen, dus je gaat delen met de Expo Mobile-client, omdat simulators ze niet ondersteunen. Klik op de knop Share om een ​​QR-code te krijgen om te scannen of de optie om een ​​link te verzenden via sms of e-mail. Scan de QR-code met de Expo-client. Dit voert de app via de Expo-client en het wordt geopend naar een scherm met: 'Open App.js openen om aan uw app te werken!'

Open het project in het werk van de app in uw favoriete codeeditor en open App.js. Zoek de bovenstaande tekst en verander het naar de klassieke 'Hallo World!', Dan opslaan. U moet de app opnieuw geladen en de tekst 'Hallo World!' Nu zichtbaar hebben. Magie!

Terwijl u aan het ontwikkelen bent, onthult het apparaat een ontwikkelaarsmenu, met behulp van nuttige opties voor debugging. Vanuit dit menu kunt u ook terugkeren naar het Expo-huis - behulpzaam om uit de app te verlaten of naar het andere te schakelen.

03. Meldingen toevoegen

Nu hebt u een basis-apps-instelling, laten we de mogelijkheid toevoegen om meldingen te verzenden en te ontvangen. Dit vereist normaal gesproken objectief-C en Java, waarbij een service van een derde partij wordt geïntegreerd om de meldingen te verzenden en u moet ook certificaten voor iOS instellen en sleutels maken voor Android.

Ten eerste moet u machtigingen en meldingen van Expo importeren en een nieuwe functie in de App Class maken:

 Importeren {machtigingen, meldingen} van 'Expo';
Exporteer Standaardklasse-app verlengt react.comPonent {
  async registerforpushnotifications () {
  ​
} 

Hier gebruikt u het ASYLC-trefwoord om gebruik te maken van de ES2017 Async / AWIT-functie - Reageer Native heeft Babel werkt onder de kap, zodat u alle nieuwe JavaScript-goedheid kunt gebruiken. Laten we nu vragen om meldingsmachtigingen en het Expo Push-token ophalen - om het apparaat te identificeren - zodat Expo weet waar u Push-meldingen wilt verzenden:

 Async RegisterForpushnotifications () {
  const resultaat = wacht op permissies.ASSYNC (machtigingen.remote_notifications);
  if (result.status! == 'verleend') {
    terugkeer;
  ​
  Const-token = wachten op meldingen.GetExpopOltoKeSync ();
  console.log (token);
} 

Hier vraagt ​​u om meldingstoestemming met behulp van de methode permissies.kasync (). De waarschuwing toont alleen op iOS als Android kan standaardmeldingen mogelijk maken. Desondanks moet je eigenlijk nog steeds dezelfde logica op Android doorlopen, want het is mogelijk om meldingen uit te schakelen.

Controleer vervolgens het antwoord. Als de meldingen niet worden toegekend, kunt u stoppen en terugkeren uit de functie. Als meldingen worden verleend, krijgt u het push-token van de Expo-service. Ten slotte kunt u het token inloggen voor later gebruik om meldingen te testen en dit wordt ingelogd op de Expo Xde.

Het is de moeite waard om op dit moment te vermelden dat - op iOS - deze waarschuwing kan slechts één keer door het ontwerp worden geactiveerd; Als een gebruiker toestemming ontkent, wilt u misschien overwegen om een ​​aangepaste kennisgeving of alert toe te voegen voordat u terugkeert uit de functie. Om meldingen op dit punt in te schakelen, moet de gebruiker naar de app-instellingen gaan (in ons geval, dit zal Expo) & GT zijn; Meldingen en schakel ze daar vandaan. Hierdoor moet u de Expo Mobile-client verwijderen en vervolgens opnieuw installeren als u de toestemming-alert op iOS meer dan eens wilt testen.

Bovendien biedt Expo een methode die Machtigingen wordt genoemd. Getasync () en dit werkt op een vergelijkbare manier aan machtigingen.askasync (), alleen zonder de iOS-alert af te vuren. Dit kan handig zijn als u de status eerst wilt controleren om een ​​aangepaste stroom te maken die u bijvoorbeeld naar machtigingen zal vragen. Als de iOS-waarschuwing eerder is geactiveerd (onthoud, kan het slechts één keer per app-installatie worden afgevuurd), de permissies.askasync () retourneert dezelfde informatie als permissies.getasync (), dus in ons gebruik hebben we niet nodig Om Machtigingen te gebruiken .Getasync ().

U moet deze functie dan bellen in de ComponentDIDMount Lifecycle-methode, zodat deze op app-lancering wordt uitgevoerd:

 ComponentDIDMount () {
  deze.Registerforpushnotifications ();
} 

Vervolgens, als u de meldingstoestemming accepteert, kan uw app lokale en externe meldingen ontvangen. Lokale meldingen worden vervolgens opgezet en via het apparaat rechtstreeks naar de app verzonden en hebben geen internetverbinding nodig. Remote meldingen komen van een server en verzenden de melding via het Apple Push-notificatiesysteem (APN's) of Google Cloud Messaging (GCM) -diensten. Dit proces vereist ook toegang tot een internetverbinding om ze te ontvangen.

Expo heeft een service om meldingen op https://exp.host/--/api/v2/push/send te verzenden; Het enige dat u hoeft te doen, is wat gegevens naar het toesturen. Dit ziet dan een beetje zoals het volgende:

 {
  // het push-token.
  "To": & lt; token uit de app & gt;
  // de meldingstitel.
  "TITEL": "Meldingstitel",
  // het meldingsorgaan.
  "Lichaam": "Meldingsorgaan",
  // Pass in gegevens als een object, dit kan worden gebruikt bij het hanteren van de melding.
  "Gegevens": {"Waarde": "Hallo World!"​
} 

Voordat we een melding testen, zullen we onze app configureren om meldingen aan te pakken als de app open is. Met het ontwerp, iOS en Android tonen geen melding wanneer een app open is. U kunt ook alle gegevens die hier in het push-bericht worden verzonden, voor het geval we erop moeten handelen. Laten we een nieuwe functie maken om dit aan te pakken en waarschuwt de eigenschap Gegevenswaarde:

 Handlenotificatie (melding) {
  alert (notificatie.data.value);
} 

Dan in onze methode ComponentDIDMount Lifecycle moet u een luisteraar instellen, die de melding-handler noemt die we zojuist hebben gemaakt:

 ComponentDIDMount () {
  deze.Registerforpushnotifications ();
  Notifications.ArdListener (this.Handlenotificatie);
} 

Je bent nu ingesteld. Laten we een push-melding verzenden met een Curl-aanvraag:

 Curl \
  -X post \
  -H "Inhoudtype: Toepassing / JSON" \
  -d '{
    "NAAR": "& LT; TOKEN & GT;",
    "TITEL": "Meldingstitel",
    "Lichaam": "Meldingsorgaan",
    "Gegevens": {"Waarde": "Hallo World!"​
  ​
  https://exp.host/--/api/v2/push/send

U kunt deze krulopdracht pakken hier ​Als je niet bekend bent met Curl, kun je het verzoek sturen met iets als Postbode , dat een GUI gebruikt voor het verzenden van verzoeken.

Zodra het verzoek heeft verzonden, moet u nu zien dat de melding doorkomt. Er zijn geen beperkingen bij het gebruik van de Expo Push-service. In een real-world scenario wordt aangemoedigd om de batch-API te gebruiken door een reeks pushmeldingen te verzenden, in batches van 100, om uit te zenden voor efficiëntie:

 [
  {// Meldingsobject zoals hierboven},
  {// Nog een meldingobject}
] 

04. Publiceren met Expo

Dus nu hebben we een glanzende nieuwe reagerende inheemse app (zelfs als het niet veel doet!), Hoe laten we anderen het gebruiken zonder het uit Expo Xde te rennen? De eenvoudigste manier is door op Publiceren uit de XDE te klikken. Dit zal het project publiceren om Expo en een link verschijnt op je profiel, die je kunt vinden op https://expo.io/@<username>.

Wanneer u de gepubliceerde projectlink bezoekt, is er een QR-code om te scannen (gelegen tussen dezelfde opties als de XDE) met de Expo Mobile Client, net als tijdens de ontwikkeling. Als we de app willen bijwerken, is alles wat we moeten doen, opnieuw publiceren en de wijzigingen beschikbaar zijn voor de gebruiker wanneer u de app opnieuw uitvoert.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 297 van netto, 's werelds best verkopende magazine voor webontwerpers en ontwikkelaars. Abonneren op net hier ​

Wil je meer manieren leren die je kunt reageren?

Als je geïnteresseerd bent in het leren van meer over reageren, zorg er dan voor dat je je ticket hebt opgepikt Genereer Londen van 19-21 september 2018 ​Opgelopen reageer Academy om te leren reageren over de hele wereld en gelanceerd sizzy.co en ok-google.io Kristijan Ristovski zal zijn workshop leveren - leer hoe te denken in reageren - waarin hij zal ontdekken, reageert de beste praktijken en leer je oplossingen voor echte problemen die je zou kunnen tegenkomen in het proces van het bouwen van een app.

Genereer London vindt plaats van 19-21 september 2018. KRIJG NU ​

Gerelateerde artikelen:

• Haal je hoofd rond reageren met deze vijf factoren
• 10 expert Reacterstips die je vandaag moet weten
• Bouw een native mobiele app met reageer native