GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Como implementar front-end com back-end pronto?

front-end
javascript
site
back-end
Tags: #<Tag:0x00007f1861ce4a20> #<Tag:0x00007f1861ce4868> #<Tag:0x00007f1861ce46b0> #<Tag:0x00007f1861ce44f8>

#1

Olá, bem vindo e feliz 2019 à todos!

Então, comecei em uma empresa e já recebi vários desafios e uma delas é fazer um front-end com o back-end pronto (já tenho o código em JavaScript pronto) para simular a aposentadoria, pra ser mais específico.

Então, queria saber algumas dicas de como posso começar no front-end aplicando esse back-end… Alguém poderia me ajudar como posso começar, como posso criar e tal?

Obrigado!


#2

Qual exatamente a dificuldade que está tendo no momento? Tente ser mais específico. Já tem os requisitos e protótipos?


#3

rapaz, vai ter que utilizar um framework - procura os mais utilizados de JS


#4

Você não especificou se esta usando algum framework js ou não, mas você pode fazer uma requisição ajax com jQuery e então receber os dados do backend.


#5

Sua pergunta é extremamente genérica, sem saber as tecnologias envolvidas, o objetivo do sistema e a estrutura fica difícil dar uma resposta.

Para uma pergunta genérica, cabe uma resposta genérica:
O primeiro passo é estudar o back-end, sabendo suas funcionalidades e as rotas para fazer uso de tais funcionalidades você parte para o front-end, criando as páginas com os botões e/ou campos. Os botões acionam funcionalidade do back ou enviam os dados para o back fazer processamento.


#6

Poderia especificar um pouco mais sua pergunta, por exemplo quais linguagens estão sendo utilizadas, qual a arquitetura ja existente, vai ser trafego de JSON, XML, pagina?


#7

Então, eu pretendo desenvolver uma landing page e um hotsite especial também contendo o simulador de aposentadoria utilizando JavaScript com HTML e CSS, com alguns frameworks como Bootstrap, o que acham?

E o código do simulador de aposentadoria pronto está abaixo:

<script>
    //Formatando inputs
    function conv_number(expr, decplaces) {
        var str = "" + Math.round(eval(expr) * Math.pow(10, decplaces));
        while (str.length <= decplaces) {
            str = "0" + str;
        }

        var decpoint = str.length - decplaces;
        return (str.substring(0, decpoint) + "." + str.substring(decpoint, str.length));
    }

    // Função para cálculo do valor presente 
    function pv(rate, nper, pmt, fv) {
        rate = parseFloat(rate);
        nper = parseFloat(nper);
        pmt = parseFloat(pmt);
        fv = parseFloat(fv);
        if (nper == 0) {
            alert("Why do you want to test me with zeros?");
            return (0);
        }
        if (rate == 0) { // Interest rate is 0
            pv_value = -(fv + (pmt * nper));
        } else {
            x = Math.pow(1 + rate, -nper);
            y = Math.pow(1 + rate, nper);
            pv_value = -(x * (fv * rate - pmt + y * pmt)) / rate;
        }
        pv_value = conv_number(pv_value, 2);
        return (pv_value);
    }

    // Função para Cálculo do Valor Futuro
    function PMT(rate, nperiod, pv, fv, type) {
        if (!fv) fv = 0;
        if (!type) type = 0;

        if (rate == 0) return -(pv + fv) / nperiod;

        var pvif = Math.pow(1 + rate, nperiod);
        var pmt = rate / (pvif - 1) * -(pv * pvif + fv);

        if (type == 1) {
            pmt /= (1 + rate);
        };

        return pmt;
    }

    function FV(rate, nper, pmt, pv, type) {
        var pow = Math.pow(1 + rate, nper),
            fv;
        if (rate) {
            fv = (pmt * (1 + rate * type) * (1 - pow) / rate) - pv * pow;
        } else {
            fv = -1 * (pv + pmt * nper);
        }
        return fv.toFixed(2);
    }

    var myArray = new Array();
    var myArray2 = new Array();
    var CenarioA = new Array();

    var myArrayB = new Array();
    var myArrayB2 = new Array();
    var CenarioB = new Array();

    var myArrayC = new Array();
    var myArrayC2 = new Array();
    var CenarioC = new Array();

    //Valores Fixos
    var parcial = 4.5 / 100; //taxa de juros anual
    var rate = Math.pow((1 + parcial), (1 / 12)) - 1; //taxa de juros mensal
    var type = 1; //deixar default
    var beginningBalance, endingBalance;

    //Inputs do Usuário
    var periods = 360; //quantidade de meses juntando dinheiro
    var lifeexpectancy = 360; //expectativa de vida
    var payment = 7500; //objetivo de aposentadoria
    var future = 500000; //valor de herança
    var initial = 500000; //valor que tenho disponível agora
    var deposit = 1500; //depósitos mensais



    var vp = pv(rate, periods, payment, future, type);
    vp = vp * -1;

    vp_temp = vp * -1 //Valor 1 

    var result = PMT(rate, lifeexpectancy, initial, vp_temp, 0);

    beginningBalance = endingBalance = initial;

    for (var a = 0; a <= periods; a++) {

        beginningBalance = endingBalance
        endingBalance = parseFloat(beginningBalance * (1 + rate) + result);

        myArray[a] = beginningBalance;

    }

    var lastItem = myArray.pop();
    beginningBalance2 = endingBalance2 = lastItem;


    for (var b = 0; b <= lifeexpectancy; b++) {

        beginningBalance2 = endingBalance2;
        endingBalance2 = parseFloat((beginningBalance2 - payment) + (beginningBalance2 * rate));

        if (endingBalance2 > future) {
            myArray2[b] = endingBalance2;
        } else {
            myArray2[b] = future;
        }

    }

    CenarioA = myArray.concat(myArray2);

    var CaixaTeorico, ObjetivoMensalTeorico;

    CaixaTeorico = FV(rate, lifeexpectancy, deposit, initial, 0);
    CaixaTeorico = CaixaTeorico * -1;

    ObjetivoMensalTeorico = PMT(rate, lifeexpectancy, CaixaTeorico * -1, future, 0);

    beginningBalance = endingBalance = initial;

    for (var a = 0; a <= periods; a++) {

        beginningBalance = endingBalance
        endingBalance = parseFloat(beginningBalance * (1 + rate) + deposit);

        myArrayB[a] = beginningBalance;

    }

    lastItem = myArrayB.pop();
    beginningBalance2 = endingBalance2 = lastItem;

    for (var b = 0; b <= lifeexpectancy; b++) {

        beginningBalance2 = endingBalance2;
        endingBalance2 = parseFloat((beginningBalance2 - ObjetivoMensalTeorico) + (beginningBalance2 * rate));


        if (endingBalance2 > future) {
            myArrayB2[b] = endingBalance2;
        } else {
            myArrayB2[b] = future;
        }

    }

    CenarioB = myArrayB.concat(myArrayB2);

    var CaixaTeorico, HerancaTeorica;

    CaixaTeorico = FV(rate, lifeexpectancy, deposit, initial, 0);
    CaixaTeorico = CaixaTeorico * -1; //Valor 1
    HerancaTeorica = FV(rate, lifeexpectancy, payment * -1, CaixaTeorico, 0);
    HerancaTeorica = HerancaTeorica * -1; //Valor 1

    beginningBalance = endingBalance = initial;

    for (var a = 0; a <= periods; a++) {

        beginningBalance = endingBalance
        endingBalance = parseFloat(beginningBalance * (1 + rate) + deposit);

        myArrayC[a] = beginningBalance;

    }

    lastItem = myArrayC.pop();
    beginningBalance2 = endingBalance2 = lastItem;


    for (var b = 0; b <= lifeexpectancy; b++) {

        beginningBalance2 = endingBalance2;
        endingBalance2 = parseFloat((beginningBalance2 - payment) + (beginningBalance2 * rate));


        if (endingBalance2 >= HerancaTeorica) {
            myArrayC2[b] = HerancaTeorica;
        } else {
            myArrayC2[b] = endingBalance2;
        }

    }

    CenarioC = myArrayC.concat(myArrayC2);
</script>

#8

Então vamos la.
Primeiro de tudo seria legal você ter um mapeamento de tudo o que o backend recebe e de tudo o que ele envia. Qual a forma de comunicação REST? SOAP? Websockets? Com esses endpoints mapeados, eu começaria o desenvolvimento do front orientado a esses pontos(ja passei por isso em desafios passados, integrar com um backend totalmente pronto), se não quer utilizar o backend existente na sua fase de testes, pode criar endpoints de echo.
Lembre-se sempre de respeitar os padrões de comunicação pois isso pode ser o diferencial de funcionar ou não.


#9

Então, amigo!

Para esse caso, não vai ter nenhuma forma de comunicação pois o objetivo do front é desenvolver visualmente um hotsite especial + landing page com o simulador de aposentadoria (código já pronto) para que os clientes possam fazer a sua simulação.


#10

Está chamando de back-end esse javascript que está rodando no client/browser?


#11

Então esse javascript que você postou é o “backend”? Certo?


#12

Sim, isso mesmo… O JavaScript é o “back-end”.


#13

O que vou te passar agora é uma opinião minha, de como tenho feito em toda a minha carreira.
Como você ja tem o seu JS pronto para executar a lógica, mantenha ele em um arquivo separado, lembre-se sempre de manter separada as camadas (HTML, JS, CSS) seu frontend recomendo fortemente utilizar o Bootstrap para suas interfaces é muito simples de trabalhar e a UI fica elegante. O JQuery ficará para controlar a sua interface para ser mais dinâmica, deixar bonitinha e cheia de coisas que o usuário adora.
Estruture seu JS para ser um objeto e dai você pode instancia-lo nos seus JS’s auxiliares ou diretamente chamando no HTML.


#14

Muito obrigado, amigo!

Agora irei começar o projeto.