Przejdź do treści głównej

Korzystanie z AWS w React Native

· 10 minut czytania
Richard Threlkeld
Richard Threlkeld
Starszy Kierownik Produktu Technicznego w AWS Mobile
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

AWS jest powszechnie znanym w branży technologicznej dostawcą usług chmurowych. Obejmują one technologie obliczeniowe, magazynowe i bazodanowe, a także w pełni zarządzane rozwiązania serwerless. Zespół AWS Mobile ściśle współpracuje z klientami i członkami ekosystemu JavaScript, aby aplikacje mobilne i webowe połączone z chmurą były bezpieczniejsze, skalowalne oraz łatwiejsze w tworzeniu i wdrażaniu. Rozpoczęliśmy od kompletu startowego, ale mamy też nowsze rozwiązania.

W tym wpisie omówimy kilka ciekawych rozwiązań dla developerów React i React Native:

  • AWS Amplify, deklaratywna biblioteka dla aplikacji JavaScript korzystających z usług chmurowych

  • AWS AppSync, w pełni zarządzana usługa GraphQL z funkcjami offline i czasu rzeczywistego

AWS Amplify​

Aplikacje React Native są bardzo łatwe do uruchomienia przy użyciu narzędzi takich jak Create React Native App czy Expo. Jednak połączenie ich z chmurą może stanowić wyzwanie, gdy próbujesz dopasować przypadki użycia do usług infrastrukturalnych. Na przykład Twoja aplikacja React Native może wymagać przesyłania zdjęć. Czy powinny być one chronione per użytkownik? To prawdopodobnie oznacza potrzebę rejestracji lub logowania. Chcesz mieć własny katalog użytkowników czy korzystasz z dostawcy mediów społecznościowych? Być może aplikacja potrzebuje też wywoływać API z własną logiką biznesową po zalogowaniu użytkowników.

Aby pomóc developerom JavaScript w tych problemach, wydaliśmy bibliotekę o nazwie AWS Amplify. Jej projekt podzielono na "kategorie" zadań, zamiast implementacji specyficznych dla AWS. Na przykład, jeśli chcesz, aby użytkownicy rejestrowali się, logowali, a następnie przesyłali prywatne zdjęcia, wystarczy dodać do aplikacji kategorie Auth i Storage:

import { Auth } from 'aws-amplify';

Auth.signIn(username, password)
    .then(user => console.log(user))
    .catch(err => console.log(err));

Auth.confirmSignIn(user, code)
    .then(data => console.log(data))
    .catch(err => console.log(err));

W powyższym kodzie widać przykłady typowych zadań, w których Amplify może pomóc, jak używanie kodów uwierzytelniania wieloskładnikowego (MFA) przez e-mail lub SMS. Obecnie obsługiwane kategorie to:

  • Auth: Zapewnia automatyzację poświadczeń. Gotowa implementacja wykorzystuje dane uwierzytelniające AWS do podpisywania oraz tokeny JWT OIDC z Amazon Cognito. Obsługiwane są typowe funkcje, takie jak MFA.

  • Analytics: Jedną linijką kodu uzyskaj śledzenie uwierzytelnionych i nieuwierzytelnionych użytkowników w Amazon Pinpoint. Możesz rozszerzyć to o własne metryki lub atrybuty.

  • API: Zapewnia bezpieczną interakcję z interfejsami RESTful API, wykorzystując AWS Signature Version 4. Moduł API doskonale sprawdza się w infrastrukturach serwerless z Amazon API Gateway.

  • Storage: Uproszczone polecenia do przesyłania, pobierania i listowania treści w Amazon S3. Możesz też łatwo grupować dane jako publiczne lub prywatne per użytkownik.

  • Caching: Interfejs pamięci podręcznej LRU działający zarówno w aplikacjach webowych, jak i React Native, wykorzystujący specyficzną dla implementacji trwałość.

  • i18n and Logging: Zapewnia możliwości internacjonalizacji i lokalizacji oraz debugowania i logowania.

Jedną z zalet Amplify jest wbudowanie "najlepszych praktyk" w projekt dostosowany do Twojego środowiska programistycznego. Przykładowo, zauważyliśmy współpracując z klientami i developerami React Native, że skróty stosowane podczas rozwoju aplikacji dla szybkiego efektu często trafiały do środowisk produkcyjnych. To może naruszać skalowalność lub bezpieczeństwo, wymuszając przebudowę infrastruktury i refaktoryzację kodu.

Jednym z przykładów, jak pomagamy programistom uniknąć tego problemu, są Referencyjne architektury bezserwerowe z AWS Lambda. Pokazują one najlepsze praktyki współpracy Amazon API Gateway i AWS Lambda przy budowaniu zaplecza. Ten wzorzec został wbudowany w kategorię API Amplify. Możesz użyć tego wzorca do interakcji z wieloma różnymi punktami końcowymi REST i przekazywania nagłówków bezpośrednio do funkcji Lambda dla niestandardowej logiki biznesowej. Udostępniliśmy również AWS Mobile CLI do inicjowania nowych lub istniejących projektów React Native z tymi funkcjami. Aby rozpocząć, zainstaluj poprzez npm i postępuj zgodnie z monitami konfiguracyjnymi:

npm install --global awsmobile-cli
awsmobile configure

Kolejnym przykładem wbudowanych najlepszych praktyk specyficznych dla ekosystemu mobilnego jest bezpieczeństwo haseł. Domyślna implementacja kategorii Auth wykorzystuje pule użytkowników Amazon Cognito do rejestracji i logowania. Ta usługa implementuje protokół Secure Remote Password jako sposób ochrony użytkowników podczas prób uwierzytelniania. Jeśli chcesz zgłębić matematyczne podstawy protokołu, zauważysz, że musisz użyć dużej liczby pierwszej przy obliczaniu weryfikatora hasła nad pierwiastkiem pierwotnym do generowania grupy. W środowiskach React Native JIT jest wyłączony. To sprawia, że obliczenia BigInteger dla operacji bezpieczeństwa takich jak ta są mniej wydajne. Aby to zrekompensować, udostępniliśmy natywne mosty w Androidzie i iOS, które możesz podlinkować w swoim projekcie:

npm install --save aws-amplify-react-native
react-native link amazon-cognito-identity-js

Cieszymy się również, widząc że zespół Expo uwzględnił to w swoim najnowszym SDK, dzięki czemu możesz używać Amplify bez konieczności ejectowania.

Wreszcie, specjalnie dla rozwoju React Native (i React), Amplify zawiera komponenty wyższego rzędu (HOCs) do łatwego opakowywania funkcjonalności, takich jak rejestracja i logowanie w twojej aplikacji:

import Amplify, { withAuthenticator } from 'aws-amplify-react-native';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

class App extends React.Component {
...
}

export default withAuthenticator(App);

Podstawowy komponent jest również dostarczany jako <Authenticator />, co daje pełną kontrolę nad dostosowywaniem interfejsu użytkownika. Dostarcza także właściwości do zarządzania stanem użytkownika, np. czy zalogował się czy czeka na potwierdzenie MFA, oraz callbacki, które możesz wywołać przy zmianie stanu.

Podobnie znajdziesz ogólne komponenty React do różnych przypadków użycia. Możesz je dostosować do swoich potrzeb, np. aby pokazać wszystkie prywatne obrazy z Amazon S3 w module Storage:

<S3Album
  level="private"
  path={path}
  filter={(item) => /jpg/i.test(item.path)}/>

Możesz kontrolować wiele funkcji komponentów poprzez props, jak pokazano wcześniej, z opcjami publicznego lub prywatnego przechowywania. Istnieją nawet możliwości automatycznego zbierania analiz, gdy użytkownicy wchodzą w interakcję z określonymi komponentami UI:

return <S3Album track/>

AWS Amplify preferuje konwencję nad konfiguracją w stylu rozwoju, z globalną procedurą inicjalizacji lub inicjalizacją na poziomie kategorii. Najszybszym sposobem na rozpoczęcie jest użycie pliku aws-exports. Jednak programiści mogą również używać biblioteki niezależnie z istniejącymi zasobami.

Aby zgłębić filozofię i zobaczyć pełne demo, obejrzyj film z AWS re:Invent.

AWS AppSync​

Krótko po premierze AWS Amplify, udostępniliśmy również AWS AppSync. To w pełni zarządzana usługa GraphQL z funkcjami offline i działania w czasie rzeczywistym. Chociaż możesz używać GraphQL w różnych językach programowania klienckiego (w tym natywnych Android i iOS), jest ona szczególnie popularna wśród programistów React Native. Dzieje się tak, ponieważ model danych doskonale wpasowuje się w jednokierunkowy przepływ danych i hierarchię komponentów.

AWS AppSync umożliwia łączenie się z zasobami w twoim własnym koncie AWS, co oznacza, że posiadasz i kontrolujesz swoje dane. Odbywa się to poprzez użycie źródeł danych, a usługa obsługuje Amazon DynamoDB, Amazon Elasticsearch oraz AWS Lambda. Dzięki temu możesz łączyć funkcjonalności (takie jak NoSQL i wyszukiwanie pełnotekstowe) w pojedynczym interfejsie API GraphQL jako schemat. Pozwala to na mieszanie i dopasowywanie źródeł danych. Usługa AppSync może również tworzyć zasoby na podstawie schematu, więc jeśli nie znasz usług AWS, możesz napisać schemat GraphQL w SDL, kliknąć przycisk i automatycznie rozpocząć pracę.

Funkcjonalność czasu rzeczywistego w AWS AppSync jest kontrolowana poprzez subskrypcje GraphQL z dobrze znanym wzorcem opartym na zdarzeniach. Ponieważ subskrypcje w AWS AppSync są kontrolowane na poziomie schematu za pomocą dyrektywy GraphQL, a schemat może używać dowolnego źródła danych, oznacza to, że możesz wyzwalać powiadomienia z operacji bazodanowych przy użyciu Amazon DynamoDB i Amazon Elasticsearch Service, lub z innych części twojej infrastruktury za pomocą AWS Lambda.

Podobnie jak w AWS Amplify, możesz używać funkcji bezpieczeństwa klasy enterprise w swoim interfejsie API GraphQL z AWS AppSync. Usługa pozwala szybko rozpocząć pracę z kluczami API. Jednak gdy przechodzisz do produkcji, możesz przejść na użycie AWS Identity and Access Management (IAM) lub tokenów OIDC z pul użytkowników Amazon Cognito. Możesz kontrolować dostęp na poziomie resolvera za pomocą polityk na typach. Możesz nawet używać sprawdzeń logicznych dla szczegółowej kontroli dostępu w czasie wykonywania, takich jak wykrywanie, czy użytkownik jest właścicielem określonego zasobu bazy danych. Istnieją również możliwości sprawdzania przynależności do grup w celu wykonywania resolverów lub dostępu do poszczególnych rekordów bazy danych.

Aby pomóc programistom React Native w poznaniu tych technologii, dostępny jest wbudowany przykładowy schemat GraphQL, który możesz uruchomić na stronie głównej konsoli AWS AppSync. Ten przykład wdraża schemat GraphQL, tworzy tabele bazy danych i automatycznie łączy zapytania, mutacje oraz subskrypcje. Dostępny jest również działający przykład dla React Native dla AWS AppSync, który wykorzystuje ten wbudowany schemat (oraz przykład dla React), co pozwala uruchomić zarówno komponenty klienckie, jak i chmurowe w ciągu kilku minut.

Rozpoczęcie pracy jest proste, gdy używasz AWSAppSyncClient, który podłącza się do Apollo Client. AWSAppSyncClient obsługuje bezpieczeństwo i podpisywanie dla twojego interfejsu API GraphQL, funkcjonalność offline oraz proces uzgadniania i negocjacji subskrypcji:

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";

const client = new AWSAppSyncClient({
  url: awsconfig.graphqlEndpoint,
  region: awsconfig.region,
  auth: {type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey}
});

Konsola AppSync udostępnia plik konfiguracyjny do pobrania, który zawiera twój punkt końcowy GraphQL, region AWS i klucz API. Następnie możesz użyć klienta z React Apollo:

const WithProvider = () => (
  <ApolloProvider client={client}>
      <Rehydrated>
          <App />
      </Rehydrated>
  </ApolloProvider>
);

W tym momencie możesz używać standardowych zapytań GraphQL:

query ListEvents {
    listEvents{
      items{
        __typename
        id
        name
        where
        when
        description
        comments{
          __typename
          items{
            __typename
            eventId
            commentId
            content
            createdAt
          }
          nextToken
        }
      }
    }
}

Powyższy przykład pokazuje zapytanie z przykładowym schematem aplikacji utworzonym przez AppSync. Prezentuje on nie tylko interakcję z DynamoDB, ale także zawiera paginację danych (w tym zaszyfrowanych tokenów) oraz relacje typów między Events i Comments. Ponieważ aplikacja jest skonfigurowana z AWSAppSyncClient, dane są automatycznie utrwalane offline i będą synchronizowane, gdy urządzenia ponownie połączą się z siecią.

Możesz zobaczyć dogłębną analizę technologii klienckiej stojącej za tym oraz demo React Native w tym filmie.

Opinie​

Zespół stojący za tymi bibliotekami jest bardzo ciekaw, jak działają one dla Ciebie. Chcemy również usłyszeć, co jeszcze możemy zrobić, aby ułatwić Ci tworzenie aplikacji w React i React Native z wykorzystaniem usług w chmurze. Skontaktuj się z zespołem AWS Mobile na GitHubie w sprawie AWS Amplify lub AWS AppSync.