Criando um aplicativo de bate-papo móvel no React Native

Esta é a segunda parte do artigo (a primeira aqui ) dedicada à criação de bate-papo usando apollo-server-koa e react-native. Ele cobrirá a criação de um aplicativo de bate-papo móvel. Na parte anterior, um back-end já foi criado para este bate-papo. Para obter mais detalhes sobre a descrição desse processo, você pode encontrar o link .

Primeiro, usando o expo-cli, crie um novo projeto expo, para isso, executamos o comando no terminal:

expo init 

E siga todas as etapas do assistente para criar um aplicativo vazio.

Depois de recebermos o aplicativo criado, você precisará adicionar as dependências que serão usadas no futuro:

yarn add apollo / react-hooks apollo-cache-inmemory apollo-client apollo-link-http apollo-link-ws apollo-utilities graphql graphql-tag nativo-base react-router-nativo subscrições-transporte-ws

Concluído, o próximo passo é conectar e configurar o cliente Apollo para trabalhar com nosso back-end. Para fazer isso, adicione o código abaixo a App.js. Observo que aqui vamos configurar o apollo para conectar-se ao nosso back-end via protocolos http e websocket, além de criar um cache na memória para o apollo, além de criar 2 rotas: uma para o formulário de login e a segunda para a página de bate-papo.

 get link() { const BACKEND_URL = Platform.OS === 'ios' ? 'localhost:3000' : '10.0.2.2:3000'; const httpLink = new HttpLink({ uri: `http://${BACKEND_URL}/graphql` }); const wsLink = new WebSocketLink({ uri: `ws://${BACKEND_URL}/graphql`, options: { reconnect: true } }); return split( // split based on operation type ({ query }) => { const definition = getMainDefinition(query); return ( definition.kind === 'OperationDefinition' && definition.operation === 'subscription' ); }, wsLink, httpLink, ); } async componentDidMount() { const cache = new InMemoryCache(); this.client = new ApolloClient({ link: this.link, cache }); …. } render() { return ( ... <ApolloProvider client={this.client}> <NativeRouter> <Route exact path="/" component={UsernameForm}/> <Route path="/chat" component={Chat}/> </NativeRouter> </ApolloProvider> ) } 

Não descreverei a criação do formulário em detalhes, acho que você já viu isso várias vezes, apenas direi que o código do formulário de login pode ser encontrado aqui , por uma questão de simplicidade, decidi não adicionar autorização e um campo de senha; no entanto, se desejar, você pode fazê-lo facilmente .

Vou me debruçar sobre um ponto interessante:

 const [ findOrCreateUser ] = useMutation(FIND_OR_CREATE_USER, { update(cache, { data: { findOrCreateUser: { id, username } } }) { cache.writeQuery({ query: GET_CURRENT_USER, data: { id, username }, }); } }); 

Aqui é chamada a mutação de adicionar / receber um usuário por seu nome de usuário, bem como registrar o resultado no cache para seu uso posterior em outras partes do aplicativo.

Após a implementação do formulário de login, o próximo item é o chat.

Novamente, não vamos nos debruçar sobre o layout, o código inteiro pode ser encontrado aqui .

Usamos a funcionalidade de assinatura para receber notificações sobre uma nova mensagem de bate-papo e processamos apenas esse encadeamento quando a mensagem não foi criada pelo usuário atual, pois, caso contrário, a mensagem já irá para o cache da Apollo:

 useSubscription(MESSAGE_CREATED, { onSubscriptionData: ({ client, subscriptionData: { data: { messageCreated } } }) => { const { getLast100Messages } = client.readQuery({ query: GET_LAST_100_MESSAGES }); if (messageCreated.user.id !== id) { client.writeQuery({ query: GET_LAST_100_MESSAGES, data: { getLast100Messages: [ ...getLast100Messages, messageCreated ] } }); } } }); 

Outro ponto interessante, ao baixar um bate-papo com mensagens existentes, a mensagem mais antiga será exibida na parte superior da tela, isso é incomum para os usuários, tornaremos o comportamento do aplicativo mais natural, adicionando as seguintes linhas de código:

 const scrollEl = useRef(null); … <Content ref={scrollEl} onContentSizeChange={() => { scrollEl.current.wrappedInstance.scrollToEnd({ animated: true }); }} > 

Agora, ao receber os dados iniciais ou ao adicionar uma nova mensagem, o bate-papo rolará suavemente até a última mensagem.

O restante do código não faz sentido, já que é semelhante ao que já foi feito, a implementação do aplicativo é armazenada no repositório .

Depois que toda a funcionalidade do aplicativo foi implementada, resta apenas testar a operacionalidade do aplicativo junto com o back-end do artigo anterior. O aplicativo iniciado no emulador é assim: