Jump to content
Thiago Franchin

Iniciando um projeto: Git, Ruby, NodeJs, Sass, Bootstrap 4 e Animate.css

Recommended Posts

:star: Iniciando um projeto: 

 

Crie um ambiente para iniciar um projeto profissional e aprenda também como estilizar os botoes do Bootstrap 4 usando o Sass.

  • [01:33] Instalando Git
  • [03:38] Instalando Ruby
  • [05:34] Instalando NodeJS
  • [07:42] Instalando Sass
  • [09:14] Instalando Bootstrap 4
  • [13:41] Instalando Animate.css
  • [23:02] Estilizando os botões do bootstrap dinamicamente com Sass

 

Links:

 

 

  • +1 1

Share this post


Link to post
Share on other sites

Thiago, obrigado.

Estava fora do mercado de programação a uns quatro anos e agora voltei.... vi a necessidade de me atualizar e este post me ajudou muito... parabens cara, ninguem explica como utilizar esse gerenciador de pacotes no windows(ruby), ja tinha estalado varias e varias vezes mas os animais por ai que ensinam não mostram o caminho para uso no windows.... Deus te abençoe pois faltava um detalhe e você me ajudou... abriu minha mente.... falow

  • Gostei 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By acneto.frc
      Tenho uma aplicação WEB NodeJs+Javascript. Na minha view (FILTROS PARA RELATÓRIO) além dos inputs tenho um radio button onde seleciono o tipo de do relatório que será gerado. No meu Controller tenho acesso aos campos inputs (type=text) normalmente mas não tenho acesso aos inputs (type=radio). Abaixo vou colocar parte do código.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags --> <title><%= title %></title> <link rel="stylesheet" type="text/css" media="screen" href="/estilos/estilos.css" /> </head> <body> <header> <nav class="menuBase"> <ul> <li><a href="/">Início</a></li> <li><a href="/estagio/relatorios">Voltar</a></li> <li><a href=""> </a></li> </ul> </nav> </header> <main class=frmRelFiltros> <ul class="nav nav-tabs"> <li class="active" id="home-tab"><a data-toggle="tab" href="#pagina1">Relatório de Contratos</a></li> </ul> <div class="tab-content"> <div id="pagina1" class="tab-pane fade in active"> <form action='/contratos/relatorios/RelContratosPrint' method="post" id="relAlunos"> <!-- primeira linha --> <br> <div class="filtros" style="margin:15px"> <div class="row"> <div class="form-group col-md-6 col-md-offset-0"> <label>Código Contrato.:</label> <input type="text" name="cod_ini" value="0"/> A <input type="text" name="cod_fim" value="999999" /> <br> <br> <label>Ativo/Inativo...:</label> <input type="text" name="atv_ini" value="A"/> A <input type="text" name="atv_fim" value="Z" /> <br> <br> <label>Data Cadastro...:</label> <input type="text" name="cad_ini" value="01/01/2000"/> A <input type="text" name="cad_fim" value="31/12/2090" /> <br> <br> <label>Data Vigência...:</label> <input type="text" name="vig_ini" value="01/01/2000"/> A <input type="text" name="vig_fim" value="31/12/2090" /> <br> <br> <label>Sit. Contrato...:</label> <input type="text" name="sit_ini" value="0"/> A <input type="text" name="sit_fim" value="99" /> <br> <br> <label>Código do Curso.:</label> <input type="text" name="cur_ini" value="1"/> A <input type="text" name="cur_fim" value="99" /> <br> <br> </div> <div class="form-group col-md-6 col-md-offset-0"> <label>Código da Empresa.:</label> <input type="text" name="emp_ini" value="1"/> A <input type="text" name="emp_fim" value="9999" /> <br> <br> <label>Centro Integração.:</label> <input type="text" name="cie_ini" value="1"/> A <input type="text" name="cie_fim" value="999"/> <br> <br> <label>Valor da Bolsa....:</label> <input type="text" name="vlr_ini" value="1"/> A <input type="text" name="vlr_fim" value="99999999"/> <br> <br> <br> <div id="opcoesRelContratos" > <p>Selecione o Tipo do Relatório:</p> <input type="radio" id="tipoRel" name="padrao" value="padrao" checked=true> <label for="padrao">Padrao-Conferência</label><br> <input type="radio" id="tipoRel" name="faixa" value="faixa"> <label for="faixa">Faixa Salarial-Estatístico</label><br> <input type="radio" id="tipoRel" name="alunos_empresas" value="alunos_empresas"> <label for="alunos_empresas">Identificação de Alunos por Empresa</label> <br> <input type="radio" id="tipoRel" name="entregas" value="entregas"> <label for="entregas">Pastas de Estágios Entregues</label><br> <input type="radio" id="tipoRel" name="contratos_vencer" value="contratos_vencer"> <label for="contratos_vencer">Contratos a Vencer 30 dias</label> <br> </div> </div> </div> </div> <br> <!-- botões de acão --> <div class="btn-acao" style="margin-bottom: 0px;"> <div class="row"> <div class="col-md-2 col-md-offset-1"> <button id="btn-executarRel" type="submit" class="btn btn-primary btn-block" >Executar </button> </div> <div class="col-md-2 col-md-offset-1"> <button type="button" id="btn-cancelarRel" class="btn btn-primary btn-block">Voltar</button> </div> </div> </div> <br> </form> </div> <!-- tab pagina 1 --> </div> </main> <!-- JavaScript (Opcional) --> <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="/js/funcoesCliente.js"></script> <script type="text/javascript" src="/js/script.js"></script> </body> </html>  
       
      Agora o código do routes e controllers. No controllers preciso acessar um elemento radio da view
      *** botão para submeter a view <button id="btn-executarRel" type="submit" class="btn btn-primary btn-block" >Executar </button> *** rota a ser executada ao sonfirmar a execução do relatório <form action='/contratos/relatorios/RelContratosPrint' method="post" id="relAlunos"> ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ arquivo: contratosRoutes.js var contratosControllers = require('../controllers/contratosControllers.js'); module.exports = (app) => { app.get('/contratos/relatorios/relContratos', contratosControllers.contratosRel); app.post('/contratos/relatorios/RelContratosPrint', contratosControllers.printContratosRel); } +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ arquivo: contratosControllers.js const alunosController = require('../models/contratosModels.js'); const cnf_ambiente = require('../../config/config.js'); const moment = require('moment'); module.exports = { printContratosRel, } function printContratosRel(req, res){ console.log("Data Inicial Normal: "+req.body.cad_ini) console.log("Data Final Normal..: "+req.body.cad_fim) console.log("++++++++++++++++++++ DATA NO FORMATO DE ENTRADA APÓS O POST ++########################") // ++++++++++++ BAIXO O ERRO document is not defined var radios = document.getElementsById("tipoRel"); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { console.log("Escolhido: " + radios[i].value); } } cod_i = req.body.cod_ini; cod_f = req.body.cod_fim; atv_i = req.body.atv_ini; atv_f = req.body.atv_fim; cad_i = req.body.cad_ini; cad_f = req.body.cad_fim; vig_i = req.body.vig_ini; vig_f = req.body.vig_fim; sit_i = req.body.sit_ini; sit_f = req.body.sit_fim; cur_i = req.body.cur_ini; cur_f = req.body.cur_fim; emp_i = req.body.emp_ini; emp_f = req.body.emp_fim; cie_i = req.body.cie_ini; cie_f = req.body.cie_fim; vlr_i = req.body.vlr_ini; vlr_f = req.body.vlr_fim; console.log("Relatório >>>>>>>>>>>>>>>>>>>>>>>> "+cad_i + ' - '+ cad_f); alunosController.buscarPrintContratosRel( cod_i, cod_f, vlr_i, vlr_f, sit_i, sit_f, cur_i, cur_f, emp_i, emp_f, cad_i, cad_f, vig_i, vig_f, atv_i, atv_f, cie_i, cie_f, function(err, result){ if(result){ console.log("Encontrei registro de contratos.... Vou tratar das datas.."); for(var i = 0; i < result.length; i++ ){ result[i].cea_dtcadastro = moment(result[i].cea_dtcadastro).format("DD/MM/YYYY"); result[i].cea_dtalteracao = moment(result[i].cea_dtalteracao).format("DD/MM/YYYY"); result[i].cea_vigenciainicial = moment(result[i].cea_vigenciainicial).format("DD/MM/YYYY"); result[i].cea_vigenciafinal = moment(result[i].cea_vigenciafinal).format("DD/MM/YYYY"); } } if (err) { throw err; } else{ res.render('estagios/relatorios/frm_relContratosPrint.ejs', {title: 'Contratos', nomeUsuario: global.nomeUsuario, codigoUsuario: global.codigoUsuario, nomeFormulario: req.originalUrl, obj_contratos: result, }); } }); }  
    • By AlexandrePrezzi
      Olá ...
       
      Hospedamos uma aplicação feita em NODEJS  e REACT e ela esta em HTTPS  ,  porem essa aplicação consome uma API REST que esta em HTTP. 
       
      Com isso o navegador indica Mixed Content,  porem não temos como alterar essa API para HTTPS ....
       
      Existe alguma solução para esse caso  ?   Trabalhar com conteúdo misto ....
    • By BrendonPawn
      Olá a todos! Venho através desta postagem, solicitar a ajuda de alguém que conheça o Sequelize, e que possa me ajudar com a seguinte dúvida. Baseado no código a seguir:
      import { Sequelize, Model, DataTypes } from 'sequelize'; import { config } from '../config/config'; const sequelize = new Sequelize(config); export class Vehicle extends Model { public model!: string; public plate!: string; public owner!: string; } Vehicle.init({ model: DataTypes.STRING(32), plate: DataTypes.STRING(16), owner: DataTypes.INTEGER // id do dono }, { sequelize }); export class User extends Model { public name!: string; public email!: string; } User.init({ name: DataTypes.STRING(32), email: DataTypes.STRING }, { sequelize }); Vehicle.belongsTo(User, { foreignKey: 'vehicles', targetKey: 'id', as: 'user' }); User.hasMany(Vehicle, { foreignKey: 'owner', sourceKey: 'id', onUpdate: 'cascade', onDelete: 'set null' }); Ao efetuar uma consulta geral com o código:
      User.findAll({ raw: true, nest: true, include: [Vehicle] }).then((data) => { console.log(data); }); Eu esperava receber algo semelhante com isso:
      [{ id: 1, name: 'Brendon', email: 'mail@mail.com', vehicles: [{ // 2 veículos encontrados para o usuário 1 id: 1, model: 'GOL', plate: 'ABC 1234' },{ id: 2, model: 'SAVEIRO', plate: 'QWE 7890' }] },{ id: 2, name: 'Ricardo', email: 'mail@mail.com', vehicles: [] // nenhum veículo encontrado para o usuário 2 }] Porém, o que estou recebendo no meu console é o seguinte:
      [{ id: 1, name: 'Brendon', email: 'mail@mail.com', 'Vehicles.id': 1, 'Vehicles.model': 'GOL', 'Vehicles.plate': 'ABC 1234' },{ id: 1, name: 'Brendon', email: 'mail@mail.com', 'Vehicles.id': 2, 'Vehicles.model': 'SAVEIRO', 'Vehicles.plate': 'QWE 7890' },{ id: 2, name: 'Ricardo', email: 'mail@mail.com', 'Vehicles.id': null, 'Vehicles.model': null, 'Vehicles.plate': null }]  
    • By Thamiris Paiano
      Olá,   Meu nome é Thamiris, sou aluna de Ciências Contábeis e estou em fase de elaboração do meu TCC, através do desenvolvimento de artigo.   Meu projeto de TCC é sobre jogos digitais. Mais especificamente sobre a fase de desenvolvimento dos games. Mas por que uma aluna de ciências contábeis, está fazendo um trabalho envolvendo jogos digitais?   Porque eu e minha colega de TCC, Aline, percebemos o quanto essa área esta crescendo e resolvemos estudar como a contabilidade pode ser uma ferramenta útil aos desenvolvedores de jogos digitais, referenciando o tratamento dos custos, despesas, receitas e demais operações que os desenvolvedores realizam no seu dia a dia de trabalho, visando o lucro do seu negócio.   Como estamos realizando uma pesquisa de campo, gostaria de saber se poderia responder algumas perguntas para compor os dados do nosso artigo cientifico? E nos indicar alguns desenvolvedores?   Segue o link do formulário:   https://forms.gle/GW2wiGyXzRzdCqxZ9
         
      Deixo aqui nossos e-mails para contato: Aline Lippi: aline-lippi@hotmail.com Thamiris Paiano: thamirispaiano@gmail.com   Desde já agradecemos!
    • By drx
      Olá pessoal!
      Estou iniciando no nodejs e estou achando incrível. Porém estou precisando de uma mãozinha.
      Eu estou usando o passport local para autenticação do usuário e apesar de estar exatamente como ensina na video aula,
      ainda assim não avança para a página principal. Só para explicar melhor. Ao debugar, percebo que ele faz a leitura do email e do id na base mysql.
      As constantes estão declaradas e não mostra erro algum. Alguém poderia me dar uma luz?
      Vou postar o código tal como está, para melhor entendimento e desde já agradeço.
       
      Este é o "auth.js"
       
      const localStrategy = require("passport-local").Strategy
      const bcrypt = require("bcryptjs")
       
      //model
      const Usuario = require("../models/Usuario")
      require("../models/Usuario")
       
      module.exports = function(passport){
          passport.use(new localStrategy({usernameField: 'email', passwordField: 'senha'}, (email, senha, done) => {
               Usuario.findOne({where: {email: email}}).then((usuario) => {
               //Usuario.findOne({email: email}).then((usuario) => {
                  if(!usuario){
                      return done(null, false, {message: "Esta conta não existe"})
                  }
          
                  bcrypt.compare(senha, usuario.senha, (erro, batem) => {
                      if(batem){
                          return done(null, usuario)
                      }else{
                          return done(null, false, {message: "Senha incorreta"})
                      }
                  })          
              })
          }))
          
            passport.serializeUser((usuario, done) => {
              done(null, usuario.id)
            })
            
            passport.deserializeUser((id, done) => {
                Usuario.findByPk(id, (err, usuario) => {
                done(err, usuario)
              })
            })
          }
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.