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).🥰
simplescreenrecorder-2023-03-02_12.05.09.mp4
- Node.js, Git, um gerenciador de pacotes node (NPM ou Yarn) instalado na máquina, Docker e o SDK do Flutter.
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.
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
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>
</bodyNo 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>Suba o servidor Node utilizando Docker, basta navegar até a pasta server/
Com o servidor Backend de pé, baixe as deps do projeto usando o commando:
dart pub getDepois disso, rode a aplicação web com o seguinte comando
flutter run -d chrome --web-host localhost --web-port 3000Caso 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]