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!
Qual exatamente a dificuldade que está tendo no momento? Tente ser mais específico. Já tem os requisitos e protótipos?
rapaz, vai ter que utilizar um framework - procura os mais utilizados de JS
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.
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.
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?
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>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.
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.
Está chamando de back-end esse javascript que está rodando no client/browser?
Então esse javascript que você postou é o “backend”? Certo?
Sim, isso mesmo… O JavaScript é o “back-end”.
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.
Muito obrigado, amigo!
Agora irei começar o projeto.