Javascript Urna eletronica e firebase

th3xcalibur · 5 de novembro de 2018

bom dia preciso fazer com que a urna apos a contagem dos votos mande para o banco de dados (firebase) e apos mostre o resultado como eu faço isso

let digito1
let digito2
let statusDigitio = false

let quantVotos = 0

let votosDeadPool = 0
let votosCyborg = 0
let votosEstrelar = 0
let votosMutano = 0
let votosRavena = 0
let votosRobin = 0
let votosBrancos = 0
let votosNulos = 0

function digitado(tecla){
    console.log(tecla)
    console.log(digito1)
    if((digito1 === undefined) && (digito2 === undefined)){
        if(tecla === 'tecla-1'){
            digito1 = 1
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-2'){
            digito1 = 2
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-3'){
            digito1 = 3
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-4'){
            digito1 = 4
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-5'){
            digito1 = 5
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-6'){
            digito1 = 6
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-7'){
            digito1 = 7
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-8'){
            digito1 = 8
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-9'){
            digito1 = 9
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }else if(tecla === 'tecla-0'){
            digito1 = 0
            console.log('D1: ', digito1)
            statusDigitio = true
            document.getElementById('digito1').value = digito1
        }
    }else{
        if((statusDigitio) && (digito2 === undefined)){
            if(tecla === 'tecla-1'){
                digito2 = 1
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-2'){
                digito2 = 2
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-3'){
                digito2 = 3
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-4'){
                digito2 = 4
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-5'){
                digito2 = 5
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-6'){
                digito2 = 6
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-7'){
                digito2 = 7
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-8'){
                digito2 = 8
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-9'){
                digito2 = 9
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }else if(tecla === 'tecla-0'){
                digito2 = 0
                console.log('D2: ', digito2)
                document.getElementById('digito2').value = digito2
            }
        }
    }

    candidato(digito1, digito2)
}

function corrigir(){
    document.getElementById('digito1').value = ''
    document.getElementById('digito2').value = ''

    digito1 = undefined
    digito2 = undefined
    statusDigitio = false

    document.getElementById('imgPresidente').src = 'img/branco.jpg'
    document.getElementById('nome').innerHTML = ''
    document.getElementById('partido').innerHTML = ''
}


function candidato(num1, num2){
    if((num1 === 1) && (num2 === 0)){
        document.getElementById('imgPresidente').src = 'img/deadpool.jpg'
        document.getElementById('nome').innerHTML = 'Deadpool'
        document.getElementById('partido').innerHTML = '*****'
    }else if((num1 === 1) && (num2 === 5)){
        document.getElementById('imgPresidente').src = 'img/cyborg.jpg'
        document.getElementById('nome').innerHTML = 'Cyborg'
        document.getElementById('partido').innerHTML = 'Jovens Titãs'
    }else if((num1 === 2) && (num2 === 0)){
        document.getElementById('imgPresidente').src = 'img/estrelar.jpg'
        document.getElementById('nome').innerHTML = 'Estrelar'
        document.getElementById('partido').innerHTML = 'Jovens Titãs'
    }else if((num1 === 2) && (num2 === 5)){
        document.getElementById('imgPresidente').src = 'img/robin.jpg'
        document.getElementById('nome').innerHTML = 'Robin'
        document.getElementById('partido').innerHTML = 'Jovens Titãs'
    }else if((num1 === 3) && (num2 === 0)){
        document.getElementById('imgPresidente').src = 'img/ravena.jpg'
        document.getElementById('nome').innerHTML = 'Rabena'
        document.getElementById('partido').innerHTML = 'Jovens Titãs'
    }else if((num1 === 3) && (num2 === 5)){
        document.getElementById('imgPresidente').src = 'img/mutano.jpg'
        document.getElementById('nome').innerHTML = 'Mutano'
        document.getElementById('partido').innerHTML = 'Jovens Titãs'
    }
}

function votoBranco(){
    votosBrancos++
    quantVotos++
    setTimeout(finalizar, 3000)
    console.log('Votos Brancos: ', votosBrancos)
}

function reiniciar(){
    document.getElementById('fim-voto').style.display = 'none'
    
    if(quantVotos < 10){
        document.getElementById('container-hidden').style.display = 'block'
    }

    corrigir()
}

function inicio(){
    document.getElementById('container-hidden').style.display = 'block'
    document.getElementById('container-resultado').style.display = 'none'
    
    quantVotos = 0
    
    votosDeadPool = 0
    votosCyborg = 0
    votosEstrelar = 0
    votosMutano = 0
    votosRavena = 0
    votosRobin = 0
    votosBrancos = 0
    votosNulos = 0
    
    corrigir()
}

function finalizar(){
    document.getElementById('container-hidden').style.display = 'none'
    
    if(quantVotos < 10){
        document.getElementById('fim-voto').style.display = 'block'
        setTimeout(reiniciar, 3000)
    }

    terminarVotacao()
}

function confirmar(){
    if((digito1 === 0) && (digito2 === 0)){
        votosNulos++
        quantVotos++
        console.log('Votos Nulos: ', votosNulos)
        setTimeout(finalizar, 3000)
    }else if((digito1 === 1) && (digito2 === 0)){
        votosDeadPool++
        quantVotos++
        console.log('Votos Deadpool: ', votosDeadPool)
        setTimeout(finalizar, 3000)
    }else if((digito1 === 1) && (digito2 === 5)){
        votosCyborg++
        quantVotos++
        console.log('Votos Cyborg: ', votosCyborg)
        setTimeout(finalizar, 3000)
    }else if((digito1 === 2) && (digito2 === 0)){
        votosEstrelar++
        quantVotos++
        console.log('Votos Estrelar: ', votosEstrelar)
        setTimeout(finalizar, 3000)
    }else if((digito1 === 2) && (digito2 === 5)){
        votosRobin++
        quantVotos++
        console.log('Votos Robin: ', votosRobin)
        setTimeout(finalizar, 3000)
    }else if((digito1 === 3) && (digito2 === 0)){
        votosRavena++
        quantVotos++
        console.log('Votos Rabena: ', votosRavena)
        setTimeout(finalizar, 3000)
    }else if((digito1 === 3) && (digito2 === 5)){
        votosMutano++
        quantVotos++
        console.log('Votos Mutano: ', votosMutano)
        setTimeout(finalizar, 3000)
    }else{
        votosNulos++
        quantVotos++
        console.log('Votos Nulos: ', votosNulos)
        setTimeout(finalizar, 3000)
    }

}

console.log('Votos: ', quantVotos)

function terminarVotacao(){
    if(quantVotos === 10){
        document.getElementById('container-hidden').style.display = 'none'
        document.getElementById('fim-voto').style.display = 'none'
        document.getElementById('container-resultado').style.display = 'block'

        document.getElementById('deapool').innerHTML = votosDeadPool
        document.getElementById('cyborg').innerHTML = votosCyborg
        document.getElementById('robin').innerHTML = votosRobin
        document.getElementById('ravena').innerHTML = votosRavena
        document.getElementById('estrelar').innerHTML = votosEstrelar
        document.getElementById('mutano').innerHTML = votosMutano
        document.getElementById('brancos').innerHTML = votosBrancos
        document.getElementById('nulos').innerHTML = votosNulos
    }
}

makotsunami · 5 de novembro de 2018

Amigo, você já configurou o firebase ou só deu um Ctrl C + Ctrl V no seu código?

Você está usando NPM no seu projeto para trabalhar com módulos? Se sim, uma solução é fazer o uso do firestore.

Você vai precisar de um arquivo de configuração do firebase que o próprio firebase te fornece no site, dai você pode importar esse arquivo para um outro arquivo que utiliza o firestore, e com isso iniciar seu banco.

import firebase from 'firebase/app'; //MÓDULO NPM
import 'firebase/firestore'; //MÓDULO NPM
import config from './firebaseConfig'; //ESSE É O ARQUIVO DE CONFIGURAÇÃO FORNECIDO PELO PRÓPRIO FIREBASE

const firebaseApp = firebase.initializeApp(config);
const db = firebaseApp.firestore();
db.settings({
    timestampsInSnapshots: true,
});
export default db;

Daí no arquivo Javascript que vai mandar a requisição você importa esse módulo que acabou de criar, que vai facilitar muito sua vida. Daí você pode usar alguns métodos bem simples. Para salvar algo no banco, pode exemplo, seria assim:

import db from "./firebaseInit.js";

db.collection('registers').add({
	votos_nulo: sua_variável_com_votos_nulos,
	votos_no_haddad: sua_variável_com_para_haddad,
	votos_no_bolsonaro: sua_variável_com_para_bolsonaro,
	//aqui pode ser enviado qualquer dado que será salvo no seu documento online do firebase
}).then(docRef => {
	console.log('dados salvos, os votos serão apurados!');
}).catch(error => {
	console.log(error);
});

Agora, caso você esteja usando Javascript Vanilla, sem node e sem NPM, ai eu já não sei. O que eu faria seria escrever meu código utilizando o node e npm depois utilizaria o Babel para compilar o código.

th3xcalibur · 11 de novembro de 2018

Em 05/11/2018 às 17:51, makotsunami disse:
Amigo, você já configurou o firebase ou só deu um Ctrl C + Ctrl V no seu código?

Você está usando NPM no seu projeto para trabalhar com módulos? Se sim, uma solução é fazer o uso do firestore.

Você vai precisar de um arquivo de configuração do firebase que o próprio firebase te fornece no site, dai você pode importar esse arquivo para um outro arquivo que utiliza o firestore, e com isso iniciar seu banco.
import firebase from 'firebase/app'; //MÓDULO NPM
import 'firebase/firestore'; //MÓDULO NPM
import config from './firebaseConfig'; //ESSE É O ARQUIVO DE CONFIGURAÇÃO FORNECIDO PELO PRÓPRIO FIREBASE

const firebaseApp = firebase.initializeApp(config);
const db = firebaseApp.firestore();
db.settings({
    timestampsInSnapshots: true,
});
export default db;
Daí no arquivo Javascript que vai mandar a requisição você importa esse módulo que acabou de criar, que vai facilitar muito sua vida. Daí você pode usar alguns métodos bem simples. Para salvar algo no banco, pode exemplo, seria assim:
import db from "./firebaseInit.js";

db.collection('registers').add({
	votos_nulo: sua_variável_com_votos_nulos,
	votos_no_haddad: sua_variável_com_para_haddad,
	votos_no_bolsonaro: sua_variável_com_para_bolsonaro,
	//aqui pode ser enviado qualquer dado que será salvo no seu documento online do firebase
}).then(docRef => {
	console.log('dados salvos, os votos serão apurados!');
}).catch(error => {
	console.log(error);
});
Agora, caso você esteja usando Javascript Vanilla, sem node e sem NPM, ai eu já não sei. O que eu faria seria escrever meu código utilizando o node e npm depois utilizaria o Babel para compilar o código.

entao nao entendo muito de javascript pois estou tendo agora no curso e nada mesmo de firebase

esse é o projeto completo https://jsfiddle.net/ygdve7a5/1/

estou com esse projeto e preciso fazer com que os dados fossem para o firebase

https://jsfiddle.net/ygdve7a5/1/

e apos isso voltarem com a apuração como esta no código só que pegando os dados do banco

makotsunami · 12 de novembro de 2018

@th3xcalibur Vou te dar uma dica, algo que passei na pele, sofri e aprendi.

Antes de fazer esse curso, pegue um curso de Javascript avançado e faça-o inteiro, mesmo que pareça inútil.

https://www.udemy.com/modern-javascript-from-the-beginning/

Esse cara tem um canal no Youtube chamado Traversy Media eu acho, tem muita coisa boa e grátis no youtube, recomendo ainda mais do que o curso dele da Udemy.