---
# System prepended metadata

title: Galera.bet

---

# 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:

![](https://hackmd.io/_uploads/Byay2JaSn.png)

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

![](https://hackmd.io/_uploads/S1qEcyarn.png)

###### **⬆️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.

![](https://hackmd.io/_uploads/rk4mRvm8n.png)

###### **⬆️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`:

![](https://hackmd.io/_uploads/BySQNmJO2.png)

###### ⬆️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";

![](https://hackmd.io/_uploads/ryZISm1_3.png)

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

![](https://hackmd.io/_uploads/rJEW8mkd3.png)

###### ⬆️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";

![](https://hackmd.io/_uploads/S1qYUm1_h.png)

###### ⬆️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;

![](https://hackmd.io/_uploads/BJDdPQyO2.png)

###### ⬆️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;

![](https://hackmd.io/_uploads/rJCMuQ1_2.png)

![](https://hackmd.io/_uploads/SJnr_QyOh.png)

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

#### Configurações adicionais:

![](https://hackmd.io/_uploads/HyCZt71Oh.png)

![](https://hackmd.io/_uploads/r1bF97yO2.png)

###### ⬆️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`;

![](https://hackmd.io/_uploads/BkvOM3btn.png)

###### ⬆️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)`.

![](https://hackmd.io/_uploads/Bk4yXux_h.png)
###### ⬆️**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;

![](https://hackmd.io/_uploads/S1AiHuluh.png)
###### ⬆️**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/).
