Vistas externas e estilos em Sinatra

Embora seja possível fazer um site com Sinatra em um único arquivo isso é realmente uma má ideia, pois o problema é que quanto mais complexo for o nosso site, mais difícil será navegar naquele arquivo e, portanto, quando ocorrer um erro, mais difícil será corrigi-lo .
A ideia por trás do uso de uma estrutura como Sinatra é poder simplificar o nosso trabalho ao mesmo tempo que aproveitamos todas as ferramentas que nos são oferecidas no pacote, incorporando também a nossa forma de trabalhar, o que torna muito provável que utilizar um único ficheiro para tudo não seja algo que seja em nossa filosofia.
É por isso que podemos começar a trabalhar em visualizações e estilos externos, de modo que cada visualização de que necessitamos esteja em um arquivo separado com o qual possamos, em primeiro lugar, ser capazes de detectar erros mais facilmente e, em segundo lugar, organizar de uma forma muito mais prática a estrutura do nosso projeto .
1- Devemos ter linguagem primeiro Rubi baixado, instalado e configurado em nosso ambiente de desenvolvimento.
2- Acesso à Internet para poder baixar alguns dos recursos que vamos indicar nos exemplos.
3- Permissões suficientes para gravar novos arquivos e criar pastas, além de poder executar arquivos com Rubi.
4- Um editor de texto para poder escrever o código que usaremos para os arquivos, pode ser Texto Sublime ou NotePad ++, mas aquele com o qual estamos familiarizados serve ao nosso propósito.
O HTML No arquivo principal do projeto não é recomendado a menos que nosso site seja estático ou temporário e precisemos ir imediatamente ao mercado com algo, já que como já mencionamos, esta prática torna nosso código ilegível e não pode ser mantido no tempo certo.
A fim de superar este problema que surge, Sinatra nos oferece a possibilidade de criar visualizações externas, que nada mais são do que arquivos .erb onde colocaremos o HTML correspondendo à nossa visão, onde Sinatra Ao rotear a view criada, ele irá imediatamente procurar esses arquivos e com isso será gerada a resposta para o usuário.Vamos ver no código a seguir como criamos uma view externa para que nosso projeto mostre ao usuário algumas informações.
Primeiro o que faremos é criar um arquivo chamado principal.rb e lá criamos nossa estrutura de base, como veremos a seguir:

 requer 'sinatra' get '/' do erb: início fim obter '/ on' do erb: no final obter '/ contato' do erb: contato fim

Até agora isso não representa nada de novo se já vimos o tutorial dos primeiros passos com o Sinatra, aqui o que fazemos é importar a biblioteca com exigir e finalmente definimos as rotas que as visualizações retornarão, todas com o método OBTER HTTP.
Agora vamos criar um arquivo chamado layout.erb e vamos colocá-lo em uma nova pasta chamada Visualizações que deve estar no mesmo diretório onde criamos nosso arquivo principal.rb, vamos ver o código que nosso arquivo conterá layout.erb:

Começar
Sobre mim
Contato

Agora na mesma pasta Visualizações que acabamos de criar vamos gerar um novo arquivo para poder testar nosso exemplo, neste caso o chamaremos de arquivo home.erb e tem esse nome porque uma de nossas rotas definidas em principal.rb tem este nome, para finalizar neste arquivo colocaremos o seguinte código:

Bem vindo ao meu site, aqui vamos ver como funciona a nossa primeira visão externa do Sinatra

Se olharmos com atenção, percebemos que não é nada mais do que HTML. Com isso concluído, agora basta ir ao console de comando e executar nosso novo aplicativo, para isso só temos que executar o seguinte:

 ruby principal.rb

O que este comando faz é aumentar o servidor web de desenvolvimento integrado WEBrick como vemos na imagem a seguir:

Feito esta ação podemos navegar para a nossa página com uma visão externa, para isso iremos para o endereço localhost: 4567, o que nos dá um resultado como o que podemos ver na imagem a seguir:

PROLONGAR

Como criamos nossa primeira visão externa, ainda temos algumas coisas a explicar, e esta é a estrutura do projeto, já que por padrão Sinatra esperamos uma estrutura que se a seguirmos não devemos fazer mais nada, mas se não for do nosso agrado podemos alterá-la.
Estrutura de baseA estrutura base é um arquivo principal que é onde o framework é incluído e as rotas são criadas, então temos duas pastas adicionais, uma chamada Visualizações que é o que usamos para armazenar nossos arquivos .erb que correspondem às visualizações e uma pasta público que é onde armazenaremos os diferentes arquivos estáticos, como .css ou .js.
Se virmos a imagem a seguir, podemos apreciar a estrutura de base que geramos para a aplicação do exemplo anterior:

Aqui vemos que a pasta principal do nosso projeto se chama sinatra, então, na raiz disso, temos nosso arquivo principal.rbe, finalmente, temos as duas pastas que mencionamos, com a pasta Visualizações exibido para mostrar os dois arquivos que criamos no exemplo anterior.
Agora, e se não quisermos usar os nomes padrão de Sinatra já que por algum motivo nosso aplicativo deve ter outras pastas, como simplesmente indicamos no arquivo principal.rb da seguinte forma:
set: public_folder, 'staticCom esta instrução, dizemos Sinatra que agora em vez de procurar por uma pasta público, você deve procurar uma pasta chamada Static.
set: views, 'templatesCom esta instrução, dizemos a Sinatra que, em vez de pesquisar Visualizações pesquisar modelos.
Com isso, já sobrescrevemos a maneira como o framework lida com esses arquivos, dando-nos mais liberdade sobre o nosso projeto.
Agora que entendemos como funciona a estrutura de nossa aplicação, vamos incluir os estilos, para isso podemos aplicar várias abordagens, porém a mais recomendada é criar um arquivo geral que se aplique a todas as visualizações. Embora possamos aplicar a abordagem de criação de nosso CSS manualmente, vamos explicar neste exemplo como adicionar Bootstrap e, assim, ter um ponto de partida mais sólido.
Em primeiro lugar, devemos baixar o framework do Bootstrap e salve a pasta resultante em nosso diretório público ou estático no caso de termos seguido as instruções para a alteração do nome na explicação da estrutura da pasta. Então em nosso arquivo layout Vamos mudar um pouco o conteúdo da etiqueta para poder incluir as bibliotecas necessárias para o funcionamento do Bootstrap, vamos ver as alterações aplicadas:

Depois de incluir as bibliotecas de Bootstrap vamos modificar nosso HTML Para lhe dar uma estrutura mais alinhada com o framework, com isso podemos perceber mais diretamente a mudança de estilos em nosso site:

Começar
Sobre mim
Contato

Se olharmos, mudamos algumas coisas, primeiro de tudo no rótulo, incluímos as bibliotecas de Bootstrap, então criamos um estilo que só se aplica dentro layout.erb para elementos que têm o id estilo, no caso deste exemplo, nós o aplicamos ao elemento e, finalmente, usando os componentes de Bootstrap nós adicionamos a classe nav nav-tabs para exibir nosso menu na forma de guias.
Reiniciamos nosso servidor de WEBrick e inserimos o caminho fornecido no qual nosso aplicativo é executado, que deve ser o seguinte com as alterações aplicadas:

Como podemos ver, aplicamos efetivamente um estilo em nosso aplicativo da web feito com SinatraClaro que ainda há muito trabalho a ser feito para que esta aplicação fique mais alinhada a um ambiente de produção, porém com esta base fica muito mais fácil experimentar e agregar funcionalidades que nos darão um desenvolvimento muito mais completo.
Assim, encerramos este tutorial, com o qual aprendemos a organizar nosso projeto usando visões externas definindo uma estrutura de pastas e tornando nossa aplicação muito mais atraente ao incorporar estilos, mas não apenas CSS simples, mas incorporamos o framework Bootstrap o que nos ajuda a criar interfaces de usuário muito mais atraentes sem muitas dores de cabeça.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo