# Galera.bet

Plataforma para Landing Pages Dinâmicas do Galera.bet, foi desenvolvida com o **[Vue 2](https://v2.vuejs.org/)** que é um Framework baseado em JavaScript.

## Estrutura do Gitflow - Fluxo de trabalho em equipe do Git

#### Links de apoio para se trabalhar com o git:
* aprenda os comandos básicos: [Guia do Git](http://rogerdudler.github.io/git-guide/index.pt_BR.html)
* o que é GitFlow: [Git Workflow](https://www.zup.com.br/blog/git-workflow)

#### Branchs do fluxo de trabalho:
* **main:**
É o inicio da ramificação do fluxo do git que após alterar o código nas branchs **fix-bug** ou **new-feacture** são atualizadas na branch **main** (merge);
* **homolog:**
Ramificação secundária responsável por executar os códigos que foram feitos em **fix-bug** ou **new-feacture** (merge) para testes antes de subir para a branch **main**.
* **fix-bug:**
É criada para correção de bugs, conforme surge a necessidade de atualização ou melhorias na aplicação;
* **new-feacture:**
Branch que desenvolvemos novas funcionalidades para a aplicação.

#### Veja os seguintes fluxos das branchs:


###### **⬆️Legenda:** As branchs `fix-bug` e `new-feacture` sempre serão criadas a partir da branch `main`.


###### **⬆️Branch Homolog:** Fluxo utilizado para subir a aplicação no ambiente de `homolog` para realizar testes, onde cada branch seja ela `fix-bug` ou `new-feacture` quando é feito o `merge` os arquivos serão publicado no servidor.


###### **⬆️Branch Main:** O mesmo vale para o fluxo da branch `main`, porém os arquivos da aplicação são publicados no ambiente de produção para o usuário final.

###### IMPORTANTE: Após as fases de testes em homolog, se os processos ocorrerem corretamente, o merge deve ser realizado dentro da branch main + a branch que foi resolvido o problema ou nova implementação, seja elas: fix-bug ou new-feacture.

## Como utilizar o Local By FlyWheel na máquina (Back-end)

Para rodar o back-end pela primeira vez utlizamos esse software para simplificar o processo de execução do PHP, WordPress e MySQL.

> **[Clique aqui para baixar o arquivo do back-end](https://drive.google.com/file/d/1Yem3WFzyrvV8UdcvKWJXdA9illLkmbf-/view?usp=sharing)**

#### Passo a passo de importação do arquivo `api-galera-bet.zip`:


###### ⬆️Depois de instalar o programa, com ele aberto pegue o arquivo baixado anteriormente e arraste para essa tela do local, vai aparecer a mensagem "Drop to import site";


###### ⬆️Após soltar o arquivo, siga os passos dessa tela deixando os campos preenchidos da forma padrão e clique em "Continue";


###### ⬆️Na última etapa de importação, mantenha selecionado a opção "Preferred", para manter as configurações padrões da versão do PHP, Web Server e MySQL, em seguida clique em "Importe site";


###### ⬆️Aguarde o processo de importação até concluir, pois os arquivos zipados estão sendo extraídos e os serviços estão sendo provisionádos para criação do servidor local;


###### ⬆️Por fim, após a importação ser concluída com sucesso, o site já estará em funcionamento, caso não esteja funcionando clique em "Start site" no botão verde no canto superior direito;



###### ⬆️Para finalizar, clique em "WP Admin" para abrir o painel do Wordpress;

#### Configurações adicionais:



###### ⬆️Para rodar o servidor sem o domínio ".local" altere nas configurações avançadas clicando em: `Menu Hamburguer > Preferences > Advanced > Router mode > localhost > Apply`;


###### ⬆️Atenção, retificando que esse é um processo iniciante para quando não se tem o projeto na máquina. Caso já tenha o projeto na máquina, o Local By Flywheel identifica e não deixa salvar o arquivo com o mesmo nome. Por esse motivo ocorre o erro de “Invalid Domain”, como apresenta no exemplo acima.

## Como fazer deploy do Back-end nos ambientes de Homologação e Produção

Diferente do processo para rodar o `Local By FlyWheel` pela primeira vez, nós vamos precisar exportar um arquivo no formato JSON de dentro do painel do Wordpress no `ACF (Advanced Custom Field v6.1.6)`.

###### ⬆️**Exportar:** Depois de logar no painel, acesse o menu lateral em: ACF > Ferramentas > Selecionar grupos de campos `(selecione apenas o grupo que foi modificado)` > Exportar como JSON;

###### ⬆️**Importar**: Dentro do painel do ambiente de Homologação ou Produção acesse as seguintes opções: ACF > Ferramentas > Selecionar arquivo > Escolher arquivo `(Arrastar ou escolher o arquivo JSON do computador)` > Importar JSON. Após seguir esses passos o painel personalizado é atualizado automaticamente.

## Project setup

Depois de clonar o projeto em sua máquina, certifique de que tenha os sequintes programas e bibliotecas:

> ✔ **[Visual Studio Code](https://code.visualstudio.com/)** - Editor de código-fonte;
>
> ✔ **[Local by Fly Wheel](https://localwp.com/)** - Testar projetos;
>
> ✔ **[Node.js](https://nodejs.org/en)** - Programa necessário para executar os pacotes do Vue.js;
>
> ✔ **[Git](https://git-scm.com/)** - Controle de versionamento do código;
>
> ✔ **[Google Chrome](https://www.google.com/intl/pt-BR/chrome/)** - Navegador padrão;
>
> ✔ **[Extensão Vue DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=pt-BR)** - Extensão devtools do Chrome para depurar aplicativos Vue.js;
>
> ✔ **[Postman ( Ferramenta API)](https://www.postman.com/)** - Software para testes de API ao lado do cliente;
>
> ✔ **[Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)**: Gerenciador de pacotes do Node;
>
> ✔ **[GitHub Desktop](https://github.com)** - Plataforma que auxilia os desenvolvedores a armazenar, administrar o código e faz o registro de mudanças;
>
> ✔ **[Outlook](https://outlook.live.com/owa/)** - Organização de emails, calendários, contatos, tarefas e listas de tarefas pendentes em um único lugar.
>
> ✔ **[Asana](https://asana.com/pt?gclid=EAIaIQobChMIpf2S17D1_wIVMjjUAR3NfgUGEAAYASAAEgJR8_D_BwE&gclsrc=aw.ds)** - Acompanhamento e visibilidade sobre as demandas atuais, novas e futuras que estão sendo realizadas pela equipe.

## Extensões do Google Chrome

> ✔ **[AdBlock](https://chrome.google.com/webstore/detail/adblock-%E2%80%94-best-ad-blocker/gighmmpiobklfepjocnamgkkbiglidom?hl=pt-BR)** - Bloquear anúncios;
>
> ✔ **[Dashlane](https://www.dashlane.com/pt-br)** - Plataforma de auxilio diário, onde armazena logins e senhas de qualquer site que deseja salvar.
>
> ✔ **[JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=pt-BR)** - É uma forma de visualizar respostas de API com mais clareza.
>
> ✔ **[Vue.js DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)** - Painel de debbuguer do vue;
>
> ✔ **[Analytics Debbuger](https://chrome.google.com/webstore/detail/analytics-debugger/ilnpmccnfdjdjjikgkefkcegefikecdc)** - É um painel de debbuguer do Google Analytics para testes de eventos.

##### Execute o comando ⬇ para instalar todas as dependencias do projeto:

yarn install

### Compiles and hot-reloads for development

yarn serve

### Compiles and minifies for production

yarn build production

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).