Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/isabelamoraes/rotina-de-compartilhamento


https://github.com/isabelamoraes/rotina-de-compartilhamento

dynamic-links firebase react react-native react-navigation react-router-dom rnfirebase styled-components vite

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        


  Dynamic Links com Firebase no React Native






  Rotina de Compartilhamento #9 - Liven






  Mobile Application Demo




## šŸ”— Dynamic Links



O Dynamic link Ć© um recurso que permite definir o comportamento de um link dependendo da plataforma em que ele for acessado, proporcionando uma melhor experiĆŖncia ao usuĆ”rio.



AtravĆ©s dele, podemos definir qual tela do app nativo deverĆ” ser aberta quando o usuĆ”rio acessar o Dynamic Link por um dispositivo iOS ou Android, qual o comportamento caso o usuĆ”rio nĆ£o possua o app instalado e como ele deverĆ” funcionar caso seja aberto em navegador desktop.



## šŸ“ Projeto



Esse projeto foi desenvolvido com o intuito de explorar a implementaĆ§Ć£o do Dynamic Links com Firebase em aplicaƧƵes React Native, na Rotina de Compartilhamento #9 da Liven.



O projeto consiste em duas aplicaƧƵes: web e mobile. Enquanto essa primeira busca disponibilizar os dynamic links para acesso, essa segunda tem o intuito de ilustrar o comportamento nativo ao clicar sobre esses links.



- **Web**: a aplicaĆ§Ć£o web foi desenvolvida em [React](https://reactjs.org/) e disponibilizada atravĆ©s do recurso Hosting do Firebase. 



- **Mobile**: o aplicativo Android e iOS foi desenvolvido utilizando o framework [React Native](https://reactnative.dev/).



## šŸ”§ PrĆ©-requisitos



**Criar o projeto no Firebase**

- Configurar web app e [Firebase Hosting](https://firebase.google.com/docs/hosting/).

- Criar Android e iOS app e seguir as instruƧƵes de configuraĆ§Ć£o do SDK.



**React Native Firebase**

- Para iniciar com a lib [React Native Firebase](https://rnfirebase.io/) Ć© necessĆ”rio instalar o mĆ³dulo `app` e realizar o setup na aplicaĆ§Ć£o Android e iOS. Em seguida, para configurar o Dynamic Links no seu projeto, Ć© necessĆ”rio prosseguir com a instalaĆ§Ć£o dos mĆ³dulos `analytics` e `dynamic-links`.



## šŸ›  ConfiguraĆ§Ć£o Firebase Console



No menu `Engajamento`, selecionar a opĆ§Ć£o `Dynamic Links` e clicar em `Vamos comeƧar`. 



Definir o domĆ­nio (Ex: `rotinacompartilhamento.page.link`) e prosseguir com as etapas.

Com o domĆ­nio criado, Ć© hora de comeƧar a criar os dynamic links. Para isso, clique em `Criar link dinĆ¢mico` e complete as etapas abaixo:

- Configurar seu link de URL curto.

- Configurar seu Dynamic Link.

- Definir o comportamento do link para a Apple.

- Definir o comportamento do link para Android.





  Create Dynamic Link on Firebase




## šŸ›  ConfiguraĆ§Ć£o Android



ApĆ³s realizar o setup do React Native Firebase conforme descrito na seĆ§Ć£o **PrĆ©-requisitos**, Ć© necessĆ”rio realizar apenas uma configuraĆ§Ć£o nativa no Android para garantir que o Dynamic Links vĆ” funcionar no seu projeto.



Para isso, acesse o arquivo `AndroidManifest.xml` localizado no diretĆ³rio `[sua-aplicaĆ§Ć£o]/android/app/src/main/` e insira o trecho a seguir:



```xml

  ...



      

      

      

        

        

        

        

        

      

      

    



  ...



```



Um objeto [Intent](https://developer.android.com/guide/components/intents-filters) carrega as informaƧƵes que o sistema Android usa para determinar o componente que irĆ” iniciar, alĆ©m de informaƧƵes que o componente receptor usa para realizar a aĆ§Ć£o adequadamente. Dito isso, caso o usuĆ”rio tenha o aplicativo instalado, os links de e-mails ou de outras pĆ”ginas que apontem para esse site deverĆ£o abrir o app Android ao invĆ©s da pĆ”gina web.



## šŸ›  ConfiguraĆ§Ć£o iOS



Antes de comeƧar com as configuraƧƵes nativas, Ć© importante lembrar que Ć© necessĆ”rio adicionar a opĆ§Ć£o **Associated Domain** no certificado de *provisioning profile* do seu aplicativo iOS no [Apple Developer Console](https://developer.apple.com/account/).



Prosseguindo, faƧa as seguintes inserƧƵes no seu `AppDelegate.m`. Essas alteraƧƵes farĆ£o com que o app seja capaz de ouvir os links vindo de outras aplicaƧƵes.



```objective-c



  // Adicionar importaĆ§Ć£o no inĆ­cio do arquivo

  #import 



  // Adicionar trecho dentro de `@implementation AppDelegate`, antes do `@end`:

  - (BOOL)application:(UIApplication *)application

    openURL:(NSURL *)url

    options:(NSDictionary *)options

  {

    return [RCTLinkingManager application:application openURL:url options:options];

  }



```



Em seguida, Ʃ necessƔrio adicionar ao arquivo `Info.plist` o prefixo da URL do seu Dynamic Link conforme configurado no Firebase, para que, ao invocar o Dynamic Link, seu app seja capaz de receber os dados e o link.



```xml



  FirebaseDynamicLinksCustomDomains

	

		https://rotinacompartilhamento.page.link

	



```



Para finalizar as configuraƧƵes, abra seu projeto `.xcworkspace` no Xcode, selecione seu projeto em `TARGETS`, clique na aba `Signing and Capabilities`, `+ Capability` e adicione `Associated Domains`. Em seguida, adicione seu Dynamic Link conforme configurado no Firebase em `Domains`:





  Associated Domain




Em seguida, acesse a tab `Info` e informe a `URL Schemes`:





  URL Schemes




## šŸ›  ConfiguraĆ§Ć£o React Native



Realizada as configuraƧƵes nativas no Android e iOS, basta implementar as configuraƧƵes no projeto React Native e enfim, usufruir do uso do Dynamic Links.



Para comeƧar, Ć© necessĆ”rio criar um objeto e definir os prefixos do seu Dynamic Link e as configuraƧƵes de quais telas deverĆ£o ser abertar dependendo do link recebido:



```javascript



  ...



  export const navigationLinking: LinkingOptions = {

    prefixes: [

      'rotinacompartilhamento://rotinacompartilhamento',

      'https://rotinacompartilhamento.page.link',

    ],

    config: {

      screens: {

        Example1: 'example1', //Rota: 'link'

        Example2: 'example2',

      },

    },

  };



```



Em seguida, passe esse objeto como parĆ¢metro para a propriedade `linking` do seu `NavigationContainer` do React Navigation:



```javascript



  ...



  

    

  



  ...



```



Para finalizar, adicione a seguinte estrutura: 



```javascript



  const handleDynamicLink = async (

    link: FirebaseDynamicLinksTypes.DynamicLink | null,

  ) => {

    const URL = link?.url.split('/__/')[1];



    if (URL) {

      Linking.openURL(`rotinacompartilhamento://rotinacompartilhamento/${URL}`);

    }

  };



  useEffect(() => dynamicLinks().onLink(handleDynamicLink), []);



  useEffect(() => {

    dynamicLinks().getInitialLink().then(handleDynamicLink);

  }, []);



```



A funĆ§Ć£o `handleDynamicLink` serĆ” responsĆ”vel por lidar com o link recebido e fazer o direcionamento para determinada tela do app. Enquanto isso, os mĆ©todos `onLink` e `getInitialLink` sĆ£o responsĆ”veis por ouvir os eventos em Foreground (app aberto) e Background/Quit (app em segundo plano ou fechado), respectivamente, e chamar a funĆ§Ć£o handleDynamicLink quando um evento for recebido. 



## šŸ“ƒ InstruƧƵes



Para clonar essa aplicaĆ§Ć£o, execute os seguintes comandos:



```bash

# Clonar o repositĆ³rio

$ git clone https://github.com/isabelamoraes/rotina-de-compartilhamento.git



```



Para rodar a aplicaĆ§Ć£o web, execute os comandos a seguir:



```bash

# Instalar as dependĆŖncias

$ yarn



# Executar a aplicaĆ§Ć£o web

$ yarn dev



# Realizar a build

$ yarn build



# Fazer o deploy

firebase deploy --only hosting:rotina-de-compartilhamento



```



Para rodar a aplicaĆ§Ć£o mobile, execute os seguintes comandos:



```bash

# Instalar as dependĆŖncias

$ yarn



# Inicializar a aplicaĆ§Ć£o

yarn start



# Executar para Android

yarn android



# Executar para iOS

yarn ios



```



## šŸ“š ReferĆŖncias



Esse conteĆŗdo foi criado com base nas documentaƧƵes abaixo:



- [React Native Firebase - Dynamic Links](https://rnfirebase.io/dynamic-links/usage)

- [Firebase - Dynamic Links](https://firebase.google.com/docs/dynamic-links)

- [React Navigation - Deep Linking](https://reactnavigation.org/docs/deep-linking#set-up-with-bare-react-native-projects)