Google Flutter App

🚀 Sobre

Aplicação multiplataforma desenvolvido em Flutter (ios, android e web) com o foco de ter as mesmas funcionalidades do Google Docs. A aplicação conta com o mesmo sistema de edição colaborativa de documentos via WebSocket e um sistema de autenticação OAuth2 usando ferramentas da plataforma Google Cloud Platform(GCP).🥰

💻 Tecnologias

Mobile/Web

Infra

Backend

simplescreenrecorder-2023-03-02_12.05.09.mp4

💽 1. Pré-requisitos:

Node.js, Git, um gerenciador de pacotes node (NPM ou Yarn) instalado na máquina, Docker e o SDK do Flutter.

💮 2. Configurando o ambiente

Na pasta docs, existe dois arquivos nomeados de index.html e info.plist, esses arquivos servem de configuração para setar o cliente OAUTH2 no projeto.

Para mais informações de como você pode gerar o cliente OAUTH2 nas plataformas web, android e IOS, aqui está um guia de como configurar:

https://developers.google.com/identity/protocols/oauth2?hl=pt-br

Lembre-se de ativar os escopos do PeopleAPI, tais como /auth/userinfo.email e /auth/userinfo.profile.

E também ativar o serviço do PeopleAPI na plataforma da GCP.

📇 2.1 Configurando portas e host

No portal da GCP, quando você gerar seu cliente OAUTH2 com ID e etc, lembre-se de no campo Authorized JavaScript origins você colocar as opções de

- http://localhost
- http://localhost:3000

⚠️ O projeto flutter roda obrigatóriamente sobre a porta 3000, então se certifique que está porta no seu PC está livre ⚠

🔑 2.2 - Configurando os tokens e id's do oatuh2

Com os clientes e tokens configurados, baixe os arquivos dos clientes android e IOS na tela inicial de credenciais, para android renomeie o arquivo baixado para google-services-2.json e mova ele para a pasta android/app/.

Com o cliente IOS, baixe o arquivo em formato plist e renomeie para GoogleService-info.plist, depois mova-o para ios/Runner.

Pegue o seu OAUTH2_CLIENT_ID e insira o ID nos arquivos index.html e info.plist que estão na pasta docs

Detalhe, você também precisa do secret que está no cliente web do oauth2

...
 <meta name="google-signin-client_id" content="OAUTH2_CLIENT_ID">
...
 <body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
  <script src="https://apis.google.com/js/api.js"></script>
  <script src="https://accounts.google.com/gsi/client" async defer></script>
  <script>
   function start() {
     gapi.client.init({
       'apiKey': 'OAUTH2_API_KEY_WEB_CLIENT',
       'clientId': 'OAUTH2_CLIENT_ID',
     });
   };
   gapi.load('client', start);
</script>
</body

No arquivo GoogleService-Info.plist que você baixou, encontre a key REVERSE_ID_CLIENT e insira em <string></string>

<array>
			<dict>
				<key>CFBundleTypeRole</key>
				<string>Editor</string>
				<key>CFBundleURLSchemes</key>
				<array>
					<!-- O valor da string se encontra em GoogleService-Info.plist [REVERSE_ID_CLIENT] -->
					<string></string>
				</array>
			</dict>
</array>

🏝️ 3. Levantando o servidor Backend com Node

Suba o servidor Node utilizando Docker, basta navegar até a pasta server/

📲 4. Rodando o flutter

Com o servidor Backend de pé, baixe as deps do projeto usando o commando:

dart pub get

Depois disso, rode a aplicação web com o seguinte comando

flutter run -d chrome --web-host localhost --web-port 3000

Dica: 🤫

Caso você não queira rodar o chrome, faça um export da var CHROME_EXECUTABLE com o arquivo binário do seu navegador, o flutter vai reconhecer ele como Chrome.

Se você quiser rodar o projeto no seu android/IOS, utilize o comando:

flutter run -d [id_do_seu_dispositivo]

Drack112 / Google-Docs-Flutter