Início rápido com React - SDK da Web

Os Atlas Device SDKs estão obsoletos. Consulte apágina de descontinuação do para detalhes.

Este guia mostra como configurar um aplicativo Web React básico que se conecta ao backend do Atlas App Services e autentica um usuário anônimo.

Reunimos uma versão finalizada deste início rápido no CodeSandbox. Tudo que você precisa fazer é colar seu ID do aplicativo Realm para se conectar ao seu aplicativo.

Pré-requisitos

Este guia pressupõe que você já criou um backend do Atlas App Services e habilitou a autenticação anônima.
Para criar e executar esse aplicativo, você precisará do npm instalado em seu computador.
O create-react-app a documentação recomenda que você instale o npx para executar create-react-app o ao invés de usar uma versão que está instalada na sua máquina.

Procedimento

Configure um novo aplicativo React

Gere um novo modelo de aplicativo usando create-react-app:

npx create-react-app realm-web-react-quickstart

npx create-react-app realm-web-react-quickstart --template=typescript

Navegue até o novo aplicativo e instale o pacote do realm-web:

cd realm-web-react-quickstart
npm install --save realm-web

Importar dependências e conectar ao seu aplicativo do Realm

O Realm SDK da Web contém tudo o que você precisa para se conectar a um aplicativo MongoDB Realm a partir de um aplicativo de navegador. No /src/App.js, adicione o seguinte código para importar o SDK da Web.

import * as Realm from "realm-web";

Agora usa o pacote importado para instanciar um novo Realm.App. O objeto app representa seu aplicativo Realm. Irá utilizá-lo para autenticar e gerir os utilizadores que interagem com a sua aplicação.

// Add your App ID
const app = new Realm.App({ id: APP_ID });

Criar componentes de reação

Em /src/App.js, adicione os seguintes componentes que exibem detalhes sobre um determinado usuário e permitem que os usuários façam login.

// Create a component that displays the given user's details
function UserDetail({ user }) {
  return (
    <div>
      <h1>Logged in with anonymous id: {user.id}</h1>
    </div>
  );
}
// Create a component that lets an anonymous user log in
function Login({ setUser }) {
  const loginAnonymous = async () => {
    const user = await app.logIn(Realm.Credentials.anonymous());
    setUser(user);
  };
  return <button onClick={loginAnonymous}>Log In</button>;
}

// Create a component that displays the given user's details
const UserDetail = ({ user }: { user: Realm.User }) => {
  return (
    <div>
      <h1>Logged in with anonymous id: {user.id}</h1>
    </div>
  );
};
// Create a component that lets an anonymous user log in
type LoginProps = {
  setUser: (user: Realm.User) => void;
};
const Login = ({ setUser }: LoginProps) => {
  const loginAnonymous = async () => {
    const user: Realm.User = await app.logIn(Realm.Credentials.anonymous());
    setUser(user);
  };
  return <button onClick={loginAnonymous}>Log In</button>;
};

Criar e exportar o componente do aplicativo

No /src/App.js, substitua o componente App existente pelo seguinte componente que armazena o usuário atual no estado local e renderiza condicionalmente detalhes sobre o usuário atual ou uma tela de login se nenhum usuário estiver atualmente autenticado.

const App = () => {
  // Keep the logged in Realm user in local state. This lets the app re-render
  // whenever the current user changes (e.g. logs in or logs out).
  const [user, setUser] = React.useState(app.currentUser);
  // If a user is logged in, show their details.
  // Otherwise, show the login screen.
  return (
    <div className="App">
      <div className="App-header">
        {user ? <UserDetail user={user} /> : <Login setUser={setUser} />}
      </div>
    </div>
  );
};
export default App;

const App = () => {
  // Keep the logged in Realm user in local state. This lets the app re-render
  // whenever the current user changes (e.g. logs in or logs out).
  const [user, setUser] = React.useState<Realm.User | null>(app.currentUser);
  // If a user is logged in, show their details. Otherwise, show the login screen.
  return (
    <div className="App">
      <div className="App-header">
        {user ? <UserDetail user={user} /> : <Login setUser={setUser} />}
      </div>
    </div>
  );
};
export default App;

Execute o aplicativo

Agora você está pronto para se conectar ao seu aplicativo Realm e fazer login! Certifique-se de que guardou as suas alterações no /src/App.js e, em seguida, execute o seguinte comando a partir da raiz do projeto:

yarn start

Isto inicia um servidor da web local que atende seu aplicativo. Se for bem-sucedido, você verá a seguinte saída em seu shell:

Compiled successfully!
You can now view realm-quickstart-web in the browser.
  Local:  http://localhost:3000

Abra http://localhost:3000 em seu navegador e teste se consegue fazer login como usuário anônimo.

Resumo

Se você concluiu este guia com êxito, criou um aplicativo React que pode se conectar a um backend do App Services e autenticar um usuário anônimo.

Bem-vindo aos Docs do Atlas Device SDK