Rails + Bootstrap: Integrando as tecnologias na criação de aplicações web
Esse artigo traz uma prática de criação de aplicação CRUD convencional unificando o poder da programação do Ruby on Rails em conjunto com a responsividade e componentes do Bootstrap, mostrando desde a instalação e configuração do ambiente.
ArtigosCanal MaisRails + Bootstrap: Integrando as tecnologias na criação de aplicações web
Artigo no estilo Mentoring
Mentoring:Constantemente nos vemos forçados a lidar com novas tecnologias e,
mais que isso, integrar as mesmas em um mesmo projeto usando recursos afins e
determinando uma boa experiência final com o usuário. Um dos maiores desafios
de efetuar esse tipo de procedimento são as incompatibilidades das tecnologias,
bem como a falta de material oficial que auxilie nos passos de tal migração.
Nesse artigo veremos como integrar as tecnologias do Rails com o famoso
framework de componentes do Bootstrap através de uma aplicação web que abrace
os principais recursos de ambos. Assim, você terá insumos suficientes para dar
os primeiros passos e adaptar as suas aplicações para usar ambas as
tecnologias.
O Bootstrap é um framework estruturado de
forma a tornar mais fácil ao desenvolvedor criar um design agradável para sites
ou aplicações web. Há classes CSS predefinidas para a criação de componentes
comuns, tais como widgets, elementos de tipografia, listas, formulários e muitos
outros. O framework também oferece funções e uma API JavaScript que torna mais
fácil a criação de modelos, popovers,
scrollspy, acordeões, entre inúmeros
outros recursos comuns às aplicações web. A sua documentação é bem profunda,
proporcionando exemplos de códigos para a maioria, se não para todos os
componentes que fornece o Bootstrap.
O Bootstrap tem um grande guia de primeiros
passos que o ajudará a integrá-lo em sua aplicação. E quando falamos em
aplicações nos referimos exatamente a qualquer tipo de tecnologia server side: Java, Python ou Ruby, por
exemplo.
O Rails, por sua vez, nasceu como uma extensão
à linguagem de programação Ruby tendo como objetivo principal demandar todo o
universo web da linguagem, já que a mesma não fornecia nenhum recurso nativo
para tal finalidade. Trata-se especificamente de uma biblioteca que provê
recursos para desenvolvimento usando o protocolo HTTP e o Ruby juntos. A
riqueza do Rails é tanta que se expressa na grande quantidade de adeptos e na
abrangência de suas implementações tanto em projetos e comunidades open source
quanto nas grandes empresas que o usam por padrão para desenvolver suas soluções.
Uma das grandes dificuldades da maioria dos
desenvolvedores que iniciam numa nova linguagem ou ambiente de programação
consiste na integração de uma tecnologia à outra. Em vários pontos da web
coletamos informações pertinentes sobre determinados frameworks (como a própria
documentação oficial, por exemplo) que nos ajudam a entendê-lo praticamente por
inteiro, porém, na maioria das vezes, de forma individual, o que acaba não atendendo
às necessidades de sistemas reais que os mesmos desenvolvedores lidarão no dia
a dia.
O objetivo desse artigo é levá-lo através
desse processo no que se refere à integração de ambos os frameworks em um
projeto simples de CRUD de tarefas que nos ajudará a entender como as
estruturas funcionam em conjunto. Assim, o leitor terá embasamentos suficientes
para efetuar quaisquer outros procedimentos que envolvam o uso do Bootstrap e
do Rails juntos em um ambiente web totalmente dinâmico.
Criando uma nova aplicação Rails
Vamos criar uma nova aplicação no Rails para
que o leitor entenda todos os passos necessários para se atingir tal objetivo.
Se você já possui um aplicativo que deseja integrar ao Bootstrap pode pular
este passo.
No caso de estar usando o Windows, podemos proceder
com a instalação usando o utilitário do rubyinstaller
para Windows (na seção Links você
encontra a URL de download do mesmo), mas também é possível configurar uma máquina
virtual (VM) e, em seguida, seguir com as mesmas instruções. Portanto, baixe o
instalador (verifique a versão correspondente ao seu Sistema Operacional – 32
ou 64 bits) e execute o mesmo seguindo os passos da instalação até o fim.
Certifique-se de deixar marcada a opção “Add
Ruby executables to your PATH” (tal como demonstrado na Figura 1) para garantir que os binários
do Ruby sejam adicionados ao nosso caminho da variável de ambiente Path e, portanto, estejam disponíveis
via linha de comando.
Figura 1. Marcando opções para adicionar
Ruby ao Path.
Para verificar se o
Ruby foi realmente instalado, execute o seguinte comando no seu prompt cmd:
ruby -v
Em alguns ambientes, dependendo da
configuração dos mesmos, pode se fazer necessária a instalação do Development Kit (disponível para
download no mesmo link do RubyInstaller). Esse kit traz uma série de recursos e
adaptações do Ruby para o ambiente do Windows e evita, assim, que alguns
problemas de compatibilidade entre libs venham a atrapalhar o seu
desenvolvimento. Portanto, para evitar isso efetue o download da versão zip
mais recente e descompacte-a em um diretório de sua preferência. Depois,
navegue via cmd até o referido diretório e execute os seguintes comandos:
ruby dk.rb init
ruby dk.rb install
Isso será o suficiente para instalar o kit e
associá-lo à sua variável de ambiente Path. Feito isso, vamos precisar nos certificar
de instalar a gem (vide BOX 1)do Rails, executando o
seguinte comando:
gem install rails
BOX 1. Gems
São
espécies de pacotes disponibilizados pelo Ruby para trabalhar com diversas
funcionalidades disponibilizadas para auxiliar no processo de desenvolvimento.
O conceito é semelhante ao npm do Node.js.
Esse processo de download da gem do Rails pode
demorar um pouco e não exibir nenhuma mensagem no cmd durante esse período,
dando a impressão de que algo de errado ocorreu, mas não. Se quiser ter noção
do que está acontecendo, execute o comando com a partícula –V no final, isso o forçará a ser mais verboso e imprimir mensagens
mais claras do que está acontecendo. Agora vamos criar nossa aplicação do Rails
via linha de comando, dando à mesma o nome de tarefas_app:
rails new tarefas_app
É importante estar dentro de um diretório que
você vá usar de fato como workspace no cmd antes de executar o comando. Todo o
processo de criação e gerenciamento dos arquivos do projeto pode ser feito pela
interface de linha de comando, mas o leitor pode ficar à vontade para usar
qualquer IDE de sua preferência. Aguarde até que o Rails efetue todo o processo
de criação do projeto. Você verá, no final, uma estrutura de diretórios e
arquivos que está explicada na Tabela 1.
Arquivo/Diretório
Descrição
app/
Contém os
controllers, models, views, helpers, mailers e assets para a aplicação.
bin/
Contém os scripts
rails que iniciam a aplicação e pode conter outros scripts que você use para
setup, deploy ou execução da sua aplicação.
config/
Configura as
rotas da sua aplicação, banco de dados e mais.
db/
Contém o esquema
atual do seu banco de dados, assim como as migrações de banco efetuados.
Gemfile
Gemfile.lock
Esses arquivos
nos permitem especificar quais gems dependentes são necessárias à nossa
aplicação Rails e quais estão bloqueadas, respectivamente.
lib/
Módulos
estendidos para a aplicação.
public/
O único diretório
aberto para a web, contém arquivos estáticos e assets compilados.
test/
Testes unitários,
mocks e outros aparatos de testes.
tmp/
Arquivos
temporários: cache, pid, arquivos de sessão, etc.
Recomendamos começar pelo Plano de Estudo Carreira Programador Front-End. Essa área da programação é mais visual e intuitiva, tornando-a ideal para iniciantes. No Front-End, você aprenderá a criar a parte visual dos sites, como layout, cores e interatividade. Depois de dominar o Front-End, você pode avançar para Programador Back-End, onde aprenderá a lidar com a lógica e o funcionamento interno dos sites, e, finalmente, para Programador Mobile, focando no desenvolvimento de aplicativos para smartphones. Nossa metodologia é estruturada de forma progressiva para garantir que você desenvolva confiança e experiência ao criar projetos reais, como sites estáticos e dinâmicos.
Em quanto tempo vou me tornar um programador?
O tempo necessário para se tornar um programador varia de acordo com a dedicação de cada estudante. Com nossa metodologia, que inclui um Plano de Estudo detalhado e suporte contínuo, você pode se tornar um programador de 6 meses a um ano, dependendo do seu ritmo e esforço. Nossa abordagem prática e orientada a projetos ajudará a acelerar seu aprendizado.
Eu preciso de um diploma de faculdade para começar a atuar como programador?
Não. Ser programador é uma excelente oportunidade para quem não possui diploma de faculdade. Muitas empresas contratam baseadas nas habilidades técnicas e experiência prática, não necessariamente em diplomas. Após conquistar uma vaga, você pode optar por complementar sua formação com um diploma.
Por que a programação se tornou a profissão mais promissora da atualidade?
A necessidade de programadores cresceu exponencialmente, especialmente após a pandemia de Covid-19, que forçou muitas empresas a se adaptarem ao digital. Com o crescimento das empresas de tecnologia, a demanda por programadores aumentou. Atualmente, há mais de 200 mil vagas abertas no Brasil devido à falta de profissionais qualificados.
Metodologia
Quais são os principais diferenciais da DevMedia?
Didática e Metodologia
Com mais de 20 anos de experiência, nossa metodologia foca em menos aulas e mais prática. Desenvolvemos dezenas de projetos e exercícios para ajudar você a se tornar um programador completo. Nossos projetos são desafiadores e autênticos, não apenas exercícios repetitivos.
Projetos reais e exercícios
Você desenvolverá diversos projetos práticos em cada carreira (Front-End, Back-End e Mobile), recebendo mentoria e suporte contínuo. A prática é essencial, e oferecemos milhares de exercícios para ajudar você a fixar o conteúdo e melhorar sua posição no ranking.
Suporte ao aluno
Nossa plataforma oferece suporte dedicado com professores experientes, respondendo suas dúvidas em menos de uma hora. Isso garante que você receba a ajuda necessária durante toda a sua jornada de aprendizado.
Gamificação
A DevMedia utiliza gamificação para tornar o aprendizado mais envolvente e motivador. Você acumula pontos e moedas por acertos, que podem ser trocados por produtos e customizações no seu card pessoal. Além disso, o sistema de ranking mensal incentiva a competição amigável e a melhoria contínua.
O que eu irei aprender estudando pela DevMedia?
Ao estudar conosco, você se tornará um programador Full Stack, dominando Front-End, Back-End e Mobile. Utilizamos a linguagem JavaScript, a mais utilizada no mercado, preparando você para criar sistemas webs e aplicativos celulares. Nossa abordagem prática inclui exercícios para fixar o conhecimento e desenvolvimento de projetos reais que te preparam, para o mercado de trabalho.
Quais as vantagens de aprender programação através da linguagem JavaScript?
Ela é Multiplataforma, ela vai te permitir programar para web e para celulares utilizando praticamente a mesma sintaxe.
Elá é Full Stack. Ela te permite criar aplicações Front-end, Back-end e Mobile. Isso acelera muito sua carreira e aumenta suas possibilidades de pegar trabalhos autônomos e conquistar uma vaga no mercado.
Ela é fácil de aprender. Como ela não exige conhecimento inicial em “Orientação a Objetos” ela se torna mais simples com uma curva de aprendizado suave e vai te permitir começar a programar mais rápido do que outras linguagens
A plataforma oferece certificados?
Sim, oferecemos dois tipos de certificados: o certificado de conclusão, que você adquire ao consumir o conteúdo, e o certificado de autoridade, que você obtém ao acertar exercícios. Ambos possuem carga horária, que pode ser utilizada para fins acadêmicos, como atividades complementares na faculdade, e também para comprovações em processos seletivos ou no seu currículo.
A plataforma tem suporte ao aluno, como funciona?
Sim, temos uma equipe de programadores pronta para ajudar com todas as suas dúvidas! Durante o horário comercial, o tempo médio de resposta é de até 10 minutos. E não se preocupe, também oferecemos suporte à noite e nos finais de semana, com um prazo de resposta um pouco maior.
A DevMedia me forma como programador Full Stack?
Sim! Oferecemos uma formação completa, do zero até Full Stack. Nosso foco é na prática, então você vai encontrar muitos exercícios e projetos reais ao longo do curso. Garantimos que você sairá com a autonomia necessária para desenvolver seus próprios projetos com confiança!
Tem horário para as aulas?
Não, não temos horários fixos para as aulas. Todo o nosso conteúdo está disponível para você acessar a qualquer momento, permitindo que você estude conforme sua própria disponibilidade e ritmo. Dessa forma, você pode integrar o aprendizado à sua rotina de maneira mais flexível e eficaz.
Por que a DevMedia não usa videoaulas em sua didática?
Nosso foco principal é formar programadores de verdade. Sabemos que o dia a dia de um programador envolve muita leitura, interpretação e escrita de código. Por isso, nosso conteúdo é desenvolvido para ambientar você nesse processo desde o início, proporcionando mais autonomia e acelerando seu aprendizado.
Na vídeo-aula é o professor que está lendo, interpretando e escrevndo o código para você, isso limita o seu progresso. Ao ler e interagir diretamente com o conteúdo, você exercita sua capacidade de leitura e concentração, além de poder avançar no seu próprio ritmo. Dessa forma, você se torna um programador mais independente e preparado para os desafios reais do mercado.
Preciso de um computador específico para estudar na DevMedia?
Não é necessário nada específico. Qualquer computador com processador atual e memória de 8 GB é suficiente.
Eu consigo estudar pelo celular?
Sim, a DevMedia possui um aplicativo que te permite seguir com seus estudos de qualquer lugar.
A DevMedia tem aplicativo?
Sim, nosso aplicativo está disponível na Play Store e na Apple Store, permitindo que você estude de forma prática e conveniente em qualquer lugar.
Preciso estar na faculdade para acompanhar os estudos na DevMedia?
Não, a faculdade não é necessária. Você não precisa de nenhum conhecimento prévio para iniciar os estudos na nossa plataforma.
Assinatura e Pagamentos
Quais são os planos de assinatura disponíveis?
Oferecemos o plano anual, o valor total é lançado no cartão de crédito, parcelado em 12 vezes, e você precisa dispor do valor total no limite do seu cartão. Você também pode optar por pagar no PIX
Adquirindo o plano, terei acesso a todo o conteúdo?
Sim, ao assinar nossa plataforma, você desbloqueia acesso total a todo o nosso conteúdo, sem precisar comprar nada separadamente.
A plataforma tem planos vitalícios?
Não, nossos planos são anuais, garantindo que você tenha acesso contínuo às atualizações mais recentes e aos novos conteúdos. A tecnologia evolui rapidamente, e um plano vitalício oferece um conteúdo estático que se tornará ultrapassado em pouco tempo. Com nossos planos anuais, você está sempre à frente, aprendendo as novidades e tendências mais atuais no mundo da programação.
A DevMedia tem fidelidade?
Sim, nosso plano tem uma fidelidade de 12 meses, o que garante o tempo ideal para você explorar nosso conteúdo e desenvolver a autonomia necessária para trabalhar com programação.
Como funciona o cancelamento?
Nós garantimos seu direito de cancelamento com reembolso total dentro dos primeiros 7 dias.
Para que você aproveite ao máximo seu investimento, oferecemos suporte personalizado para orientá-lo na utilização da plataforma. Também temos a opção de transferência de titularidade do plano, permitindo que outra pessoa aproveite o restante do seu período de assinatura.
Cadastro
Como excluir meus dados da plataforma?
Para excluir seus dados da plataforma, acesse o link : https://www.devmedia.com.br/fale-conosco/ e abra um protocolo de 'Exclusão de dados'. Nossa equipe processará a solicitação e removerá todas as informações do seu cadastro.
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com
vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa
bagagem consegui um estágio logo no início do meu primeiro
período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo. Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento! Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a
pena, pois a plataforma é bem intuitiva e muuuuito
didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito
obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento
front-end, tinha coisas que eu ainda não tinha visto. A
didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado,
adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É
um passo a passo incrível. Só não aprende quem não quer.
Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido
bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da
programação, irei assinar meu contrato como programador
graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana,
aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem
como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de
seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com
React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo
muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na
área.