Onboarding

Para dar as boas-vindas e contextualizar novas colaboradoras, toda vez que alguma pessoa nova entra no time iSUS fazemos o processo de onboarding. Esse processo inclui acessos, reuniões de contextualização, entre outras atividades. Como parte do onboarding, temos o onboarding técnico, que dará a base técnica para a nova pessoa do time contribuir nas atividades.

Onboarding Técnico

• O que é o frontend do iSUS
• Dependências
  • Como instalar Node.js
  • Como instalar yarn
  • Como instalar watchman
  • Como instalar Android Studio
  • Como instalar Xcode
• Organização do projeto
• Bibliotecas utilizadas
• Padrões de desenvolvimento

O que é o frontend do iSUS

O iSUS é um aplicativo híbrido cujo frontend é feito em React Native (versão 0.62.2). O repositório desse projeto encontra-se aqui.

Dependências

• Node 12
• yarn >= 1.21.1
• Watchman
• Android Studio (para desenvolvimento de app Android)
• Xcode (para desenvolvimento de app iOS)
• React Native

Como instalar Node.js

Para Mac OS, recomenda-se o uso do Homebrew.

Para instalar Homebrew:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew update

Adicione ao seu .bash_profile ou .zshrc:

export PATH="/usr/local/bin:$PATH"

Para instalar o Node:

brew install node

Como instalar yarn:

brew install yarn

Como instalar Watchman:

brew install watchman

Como instalar Android Studio

Baixe o Android Studio clicandoneste link.

Quando pedir para escolher uma versão da SDK para instalar, instale o Android 9.0 (Pie) (API Level 28)

Como instalar Xcode

No Mac OS você pode baixar o Xcode tanto pela App Store quanto pelo site. A vantagem de baixar pela App Store é a atualização automática.

Organização do projeto

Dentro da pasta src, o projeto está dividido nestas pastas:

apis - Contém módulos com funções que fazem requisições à api do iSUS assets - Contém imagens, e ícones usados no app components - Contém componentes que podem ser reutilizados em diversas telas do app pages - Contém pastas que guardam cada tela do app juntamente com seus componentes específicos routes - Contém módulos responsáveis pelos roteamentos de tela do app services - Contém módulos com funcionalidades que podem ser reutilizadas em diversas telas (Ex: armazenamento) utils - Contém módulos com funções de utilidade

Bibliotecas utilizadas

Utilizamos diversas bibliotecas específicas do React Native que nos permitem criar funcionalidades que utilizam os recursos dos sistemas operacionais (Android e iOS) sem ter que nos preocupar com os detalhes de baixo nível. Algumas das principais são:

• React Native Paper (biblioteca de componentes de UI)
• React Native Vector Icons (biblioteca de ícones)

Padrões de desenvolvimento

Você pode conhecer mais sobre nossos padrões de desenvolvimento na nossa página na wiki, clicando aqui.