Construindo o Frontend [Parte 1]

Introdução

Nesta parte nós vamos construir todo o nosso Html, no processo vamos aprender a usar duas Gems importantes (wysiwyg-rails para criar um editor de texto robusto para o usuário e o toastr para mostrar notificações elegantes) e também vamos aprender como usar partials e o Scss da maneira correta.

Links importantes

Board no Trello: https://trello.com/b/uj7RQAiR/onenote-onebitcode

Link para o Githbub do Projeto: https://github.com/leonardoscorza/onenote

Link para o Postman: https://chrome.google.com/webstore/detail/postman

 

Conteúdo da aula

Criar Partial Menu
——————
1 – Vamos criar uma nova Branch para executar a feature:

2 – Crie uma pasta chamada shared dentro das views

3 – Crie um arquivo chamado _menu dentro desta pasta com o seguinte conteúdo:

4 – Crie um arquivo Scss chamado variables.scss na pasta stylesheets e coloque o seguinte conteúdo dentro dele:


5 – Crie um arquivo Scss chamado _menu.scss na pasta stylesheets e coloque o seguinte conteúdo dentro dele:


6 – Agora no application.scss acrescente os seguintes imports:


4 – Agora vamos salvar o que fizemos:


5 – Vamos voltar ao master, fazer o merge e apagar a branch:


 

Criar Modal Tags
—————-
1 – Vamos criar uma nova Branch para executar a feature:

2 – Crie um arquivo chamado _modal_tags.html.erb dentro da pasta views shared e coloque o seguinte conteúdo:


3 – Agora vamos salvar o que fizemos:


4 – Vamos voltar ao master, fazer o merge e apagar a branch:


Criar Modal Share

—————–
1 – Vamos criar uma nova Branch para executar a feature:

2 – Crie um arquivo chamado _modal_share.html.erb dentro da pasta views shared e coloque o seguinte conteúdo:


3 – Agora vamos salvar o que fizemos:


4 – Vamos voltar ao master, fazer o merge e apagar a branch:


 

Criar sidebar menu
——————
1 – Primeiro vamos alterar o nosso Trello para incluir uma nova necessidade
2 – Vamos criar uma nova Branch para executar a feature:

3 – Crie um template HTML dentro do pasta shared chamado _sidebar.html.erb e coloque o seguinte conteúdo:


4 – Crie um arquivo Scss chamado _sidebar.scss e coloque o seguinte conteúdo dentro dele:


5 – No arquivo Scss que já existe chamado notes.scss coloque o seguinte:


6 – Importe os dois no application.scss:


7 – Agora vamos salvar o que fizemos:


8 – Vamos voltar ao master, fazer o merge e apagar a branch:


 

Setup extra
—————–
1 – Vamos criar uma nova Branch para executar a feature:

2 – Vamos instalar a Gem de wysiwyg e a gem toastr, no seu Gemfile coloque:


3 – Agora no seu Application js coloque o seguinte código:


4 – No seu arquivo Application Scss Adicione:


5 – Mostrar demo:


6 – Agora vamos salvar o que fizemos:


7 – Vamos voltar ao master, fazer o merge e apagar a branch:


 

Criar tela Index Notes (Principal)
———————–
1 – Vamos criar uma nova Branch para executar a feature:

2 – Na sua view Index Note coloque:


3 – Vamos mudar nosso controller Note, no método index coloque:


4 – No scss Note que já existe coloque:


5 – No seu coffeescript Note coloque a chamada para o elemento de texto:


6 – Vamos colocar essa página com root do projeto, no seu arquivo de rotas coloque:


7 – Agora vamos salvar o que fizemos:


8 – Vamos voltar ao master, fazer o merge e apagar a branch:


 

Criar View do email Notes new_note_permission
———————————————
1 – Vamos criar uma nova Branch para executar a feature:

2 – Dentro do seu template Html (new_note_permission) coloque o seguinte código:


3 – Agora altere o template principal de emails (application) e coloque o seguinte código:


4 – Agora vamos salvar o que fizemos:


5 – Vamos voltar ao master, fazer o merge e apagar a branch:


 

Criar View do email Notes permission_revoked
——————————————–
1 – Vamos criar uma nova Branch para executar a feature:

2 – Dentro do seu template Html (permission_revoked) coloque o seguinte código:


3 – Agora vamos salvar o que fizemos:


4 – Vamos voltar ao master, fazer o merge e apagar a branch:


 

Próximo Aula
————
– Coffeescript
– Deploy na Digital Ocean
VER TUDO Add a note
Você
Adicionar comentário
 
Feito com s2 por OneBitCode