AWS Lambda - Exemplo Adicional
Até agora, vimos o trabalho do AWS Lambda com serviços da AWS. Com base nesse conhecimento, vamos criar um formulário de registro de usuário simples e postar os dados usando o gateway de API para o AWS Lambda. O AWS Lambda obterá os dados do evento ou do gatilho do gateway da API e adicionará esses detalhes à tabela do DynamoDB.
Exemplo
Vamos considerar um exemplo e executar as seguintes funcionalidades nele -
Criar tabela DynamoDB
Criar formulário para registro do usuário
Crie AWS Lambda e gateway de API para enviar mensagem ao telefone usando o serviço AWS SNS
Crie AWS Lambda e gateway de API para dados de formulário POST e insira na tabela DynamoDb
Crie AWS Lambda e gateway de API para ler dados da tabela Dynamodb
Trabalho final do formulário de registro do usuário
Criar tabela DynamoDB
Os dados inseridos serão armazenados na tabela DynamodDB. Usaremos o gateway de API para compartilhar dados inseridos com o AWS Lambda e, posteriormente, o AWS Lambda adicionará os detalhes no DynamoDB.
Você pode usar os seguintes detalhes para criar uma tabela DynamodDB no console AWS. Primeiro, vá para Serviço AWS e clique emDynamoDB. CliqueTable para criar a tabela conforme mostrado abaixo -
Você pode usar o ARN para criar uma política para o DynamoDB a ser usado com o AWS Lambda.
Vá para IAM e selecione Policies. CliqueCreate policy, escolha o serviço como DynamodDB conforme mostrado abaixo -
Clique All DynamoDBações conforme mostrado acima. Escolha o recurso e insira o ARN para a tabela conforme mostrado abaixo -
Agora clique Add como mostrado abaixo.
Se você clicar Review policy botão no final da tela, você pode ver a seguinte janela -
Digite o nome da política e clique em Create policybotão no final da página. Agora, precisamos criar uma função a ser usada com Lambda. Precisamos de permissões paraDynamoDB, APIGateway e Lambda.
Acesse os serviços da AWS e selecione IAM. Selecione Funções do lado esquerdo e adicione as funções necessárias.
Insira o nome da função e clique em Create role. A função criada éroleforlambdaexample.
Criar formulário para registro do usuário
Aqui está a tela do formulário de registro do usuário para inserir e ler os dados da tabela dynamodb.
Crie AWS Lambda e API Gateway para enviar mensagem OTP ao telefone usando o serviço SNS
Se você vir o formulário de registro do usuário, há um botão validate phone. O usuário deve inserir o número de telefone e clicar emvalidate phone botão para validar o número de telefone.
Para este propósito -
Quando um usuário clica neste botão, o método post do gateway de API que contém os detalhes do telefone é chamado e internamente o AWS Lambda é acionado.
Em seguida, o AWS Lambda envia OTP para o número de telefone inserido usando o serviço AWS SNS.
O usuário recebe o OTP e deve inserir este número do OTP.
A caixa de texto para inserir OTP aparecerá quando o número de telefone for inserido e validate phone botão é clicado.
O OTP recebido do AWS Lambda e o OTP inserido pelo usuário devem corresponder, para permitir que o usuário envie o formulário de registro do usuário.
Um diagrama de blocos simples que explica o funcionamento da validação do telefone é mostrado aqui -
A função AWS Lambda criada é mostrada aqui -
O código AWS Lambda correspondente é fornecido abaixo -
const aws = require("aws-sdk");
const sns = new aws.SNS({
region:'us-east-1'
});
exports.handler = function(event, context, callback) {
let phoneno = event.mphone;
let otp = Math.floor(100000 + Math.random() * 900000);
let snsmessage = "Your otp is : "+otp;
sns.publish({
Message: snsmessage,
PhoneNumber: "+91"+phoneno
}, function (err, data) {
if (err) {
console.log(err);
callback(err, null);
} else {
console.log(data);
callback(null, otp);
}
});
};Observe que estamos usando o serviço SNS para enviar o código OTP. Este código é usado para validar o número do celular inserido pelo usuário no formulário de registro do usuário. O gateway de API criado para a validação do telefone acima é o seguinte -
A função Lambda dada é phonevalidationexample. Estamos pegando os detalhes do telefone celular aqui para serem usados dentro do AWS Lambda. Em seguida, o AWS Lambda enviará o código OTP para o número de celular fornecido.
Crie AWS Lambda e API Gateway para POST Form Data e insira na tabela DynamoDB
No formulário de cadastro do usuário, todos os campos são obrigatórios. Há uma chamada AJAX feita em que os dados inseridos no formulário são postados na URL do gateway de API.
Um diagrama de blocos simples que explica o funcionamento do botão de envio é mostrado aqui -
Assim que o formulário for preenchido, o botão de envio chamará o gateway de API que acionará o AWS Lambda. O AWS Lambda obterá os detalhes do formulário do evento ou do gateway da API e os dados serão inseridos na tabela DynamodDB.
Vamos entender a criação do API Gateway e AWS Lambda.
Primeiro, vá para os serviços da AWS e clique em Lambda. A função Lambda criada é mostrada aqui -
Agora, para criar um gateway de API, vá para o serviço AWS e selecione API Gateway. Clique emCreate API botão mostrado abaixo.
Introduzir o API name e clique em Create API botão para adicionar a API.
Agora, uma API é criada chamada como registeruser. Selecione a API e clique emActions lista suspensa para criar Resource.
Clique Create Resource. Agora, vamos adicionar oPOSTmétodo. Para isso, clique nos recursos criados à esquerda e a partir deActions seleção suspensa create method. Isso exibirá uma lista suspensa conforme mostrado abaixo -
Selecione o método POST e adicione a função Lambda que criamos acima.
Clique Savebotão para adicionar o método. Para enviar os detalhes do formulário para a função Lambdalambdaexample precisamos adicionar o Integration Request como mostrado abaixo -
Para postar os detalhes do formulário, você terá que clicar Integration Request. Ele exibirá os detalhes abaixo.
Clique Body Mapping Templates para adicionar os campos do formulário a serem postados.
A seguir clique Add mapping templatee insira o tipo de conteúdo. Aqui, nós adicionamosapplication/jsoncomo o tipo de conteúdo. Clique nele e aqui você precisa inserir o campo no formato json conforme mostrado abaixo -
Agora, clique no Save botão e implantar a API conforme mostrado abaixo -
Aqui está a API criada para POST que será usada em nosso arquivo .html. Observe que precisamos ativar o CORS para o recurso criado. Irá usar o url do gateway api para fazer uma chamada ajax para que o CORS tenha que ser ativado.
Selecione os Métodos nos quais deseja ativar o CORS. Clique emEnable CORS and replace existing CORS headers.
Ele exibe a tela de confirmação da seguinte forma -
Clique Yes, replace existing values para habilitar o CORS.
O código AWS Lambda para POST API Gateway é mostrado aqui -
const aws = require("aws-sdk");
const docClient = new aws.DynamoDB.DocumentClient({
region:'us-east-1'
});
exports.handler = function(event, context, callback) {
console.log(event);
console.log("Entering Data");
var data = {
TableName : "registeruser",
Item : {
first_name:event.fname,
last_name:event.lname,
emailid:event.emailid,
mobile_no : event.mphone,
otp:event.otp,
username:event.uname,
password:event.passwd,
confirm_password:event.cpasswd
}
}
docClient.put(data, function(err, value) {
if (err) {
console.log("Error");
callback(err, null);
} else {
console.log("data added successfully");
callback(null, value);
}
});
}O parâmetro de evento no manipulador AWS Lambda terá todos os detalhes que são adicionados anteriormente na solicitação de integração POST. Os detalhes do evento são adicionados à tabela DynamodDB conforme mostrado no código.
Agora, precisamos obter os detalhes do serviço do AWS-SDK conforme mostrado abaixo -
const aws = require("aws-sdk");
const docClient = new aws.DynamoDB.DocumentClient({
region:'us-east-1'
});
var data = {
TableName : "registeruser",
Item : {
first_name:event.fname,
last_name:event.lname,
emailid:event.emailid,
mobile_no : event.mphone,
otp:event.otp,
username:event.uname,
password:event.passwd,
confirm_password:event.cpasswd
}
}
docClient.put(data, function(err, value) {
if (err) {
console.log("Error");
callback(err, null);
} else {
console.log("data added successfully");
callback(null, value);
}
});Crie AWS Lambda e API Gateway para ler dados da tabela DynamodDB
Agora, criaremos a função AWS Lambda para ler dados da tabela DynamoDB. Iremos acionar o APIGateway para a função AWS Lambda, que enviará dados para o formulário html.
A função AWS Lambda criada é mostrada abaixo -
O código AWS Lambda correspondente é o seguinte -
const aws = require("aws-sdk");
const docClient = new aws.DynamoDB.DocumentClient({
region:'us-east-1'
});
exports.handler = function(event, context, callback) {
var readdata = {
TableName : "registeruser",
Limit : 10
}
docClient.scan(readdata, function(err, data) {
if (err) {
console.log("Error");
callback(err, null);
} else {
console.log("Data is " + data);
callback(null, data);
}
});
}Aqui, os dados são lidos da tabela do DynamoDB e fornecidos para o callback. Agora, criaremos o APIGateway e adicionaremos a função AWS Lambda como o gatilho.
Adicionaremos o método get à API criada anteriormente.
A função lambda adicionada é lambdareaddataexample. CliqueSave para salvar o método e implantar a API.
Trabalho final do formulário de registro do usuário
A exibição final do formulário é mostrada abaixo -
Agora, insira os detalhes conforme mostrado acima. Observe que o botão de envio está desabilitado. Ele será ativado somente quando todos os detalhes forem inseridos conforme mostrado -
Agora, digite o número do celular e clique validate phonebotão. Ele exibirá a mensagem de alerta dizendo“OTP is send to the mobile, please enter the OTP to continue”. OTP enviado para o número do celular é o seguinte -
Insira o OTP e os detalhes restantes e envie o formulário.
Os dados no DynamoDB registeruser tabela após o envio é como mostrado aqui -
Os detalhes do código são fornecidos abaixo -
Example1.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="formdet.js"></script>
<style>
input[type=text], input[type=password],button {
width: 100%;
padding: 5px 5px;
margin: 5px 0;
box-sizing: border-box;
}
#maincontainer {
width: 80%;
margin: auto;
padding: 10px;
}
div#userregistration {
width: 60%;
float: left;
}
div#userdisplay {
margin-left: 60%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="userregistration">
<h1>User Registration Form</h1>
<table border="0">
<tr>
<td><b>First Name<span style="color:red;">*</span> : </b></td>
<td><input type="text" value="" name="fname" id="fname" /></td>
<td id="tdfname" style="display:none;"><span style="color:red;">Enter First Name</span></td>
</tr>
<tr>
<td><b>Last Name<span style="color:red;">*</span> : </b></td>
<td><input type="text" value="" name="lname" id="lname" /></td>
<td id="tdlname" style="display:none;"><span style="color:red;">Enter Last Name</span></td>
</tr>
<tr>
<td><b>Email Id<span style="color:red;">*</span> : </b></td>
<td><input type="text" value="" name="emailid" id="emailid" /></td>
<td id="tdemailid" style="display:none;"><span style="color:red;">Enter Email</span></td>
</tr>
<tr>
<td><b>Mobile No<span style="color:red;">*</span> : </b></td>
<td><input type="text" name="mphone" id="mphone"/></td>
<td id="tdmphone" style="display:none;"><span style="color:red;">Enter Mobile Number</span></td>
</tr>
<tr>
<td></td>
<td><button id="validatephone">validate phone</button></td>
<td></td>
</tr>
<tr id="otpdiv" style="display:none;">
<td><b>Enter OTP<span style="color:red;">*</span>:</b></td>
<td><input type="text" value="" name="otp" id="otp" /></td>
<td id="tdotp" style="display:none;"><span style="color:red;">Enter OTP</span></td>
</tr>
<tr>
<td><b>Username<span style="color:red;">*</span>: </b></td>
<td><input type="text" value="" name="uname" id="uname"/></td>
<td id="tduname" style="display:none;"><span style="color:red;">Enter Username</span></td>
</tr>
<tr><td><b>Password<span style="color:red;">*</span> :</b></td>
<td><input type="password" value="" name="passwd" id="passwd"/></td>
<td id="tdpasswd" style="display:none;"><span style="color:red;">Enter Password</span></td>
</tr>
<tr><td><b>Confirm Password<span style="color:red;">*</span> :</b></td>
<td><input type="password" value="" name="cpasswd" id="cpasswd"/></td>
<td id="tdcpasswd" style="display:none;"><span style="color:red;">Enter Confirm Password</span></td>
</tr>
<tr>
<td></td>
<td><button name="submit" id="submit" style="display:;" disabled="true">Submit</button></td>
<td></td>
</tr>
</table>
</div>
<div id="userdisplay">
<h1>User Display</h1>
<table id="displaydetails" style="display:block;width:80%;padding:5px;margin:5px; border: 1px solid black;">
<tr>
<td></td>
<td>FirstName</td>
<td>LastName</td>
<td>Mobile No</td>
<td>EmailID</td>
</tr>
</table>
</div>
</div>
</body>
</html>formdet.js
function validateform() {
var sError="";
if ($("#fname").val() === "") {
$("#tdfname").css("display","");
sError++;
}
if ($("#lname").val() === "") {
$("#tdlname").css("display","");
sError++;
}
if ($("#emailid").val() === "") {
$("#tdemailid").css("display","");
sError++;
}
if ($("#mphone").val() === "") {
$("#tdmphone").css("display","");
sError++;
}
if ($("#otp").val() === "") {
$("#tdotp").css("display","");
sError++;
}
if ($("#uname").val() === "") {
$("#tduname").css("display","");
sError++;
}
if ($("#passwd").val() === "") {
$("#tdpasswd").css("display","");
sError++;
}
if ($("#cpasswd").val() === "") {
$("#tdcpasswd").css("display","");
sError++;
}
if (sError === "") {
return true;
} else {
return false;
}
}
$("#fname").change(function() {
if ($("#fname").val() !== "") {
$("#tdfname").css("display","none");
} else {
$("#tdfname").css("display","");
}
});
$("#lname").change(function() {
if ($("#lname").val() !== "") {
$("#tdlname").css("display","none");
} else {
$("#tdlname").css("display","");
}
});
$("#emailid").change(function() {
if ($("#emailid").val() !== "") {
$("#tdemailid").css("display","none");
} else {
$("#tdemailid").css("display","");
}
});
$("#mphone").change(function() {
if ($("#mphone").val() !== "") {
$("#tdmphone").css("display","none");
} else {
$("#tdmphone").css("display","");
}
});
$("#otp").change(function() {
if ($("#otp").val() !== "") {
$("#tdotp").css("display","none");
} else {
$("#tdotp").css("display","");
}
});
$("#uname").change(function() {
if ($("#uname").val() !== "") {
$("#tduname").css("display","none");
} else {
$("#tduname").css("display","");
}
});
$("#passwd").change(function() {
if ($("#passwd").val() !== "") {
$("#tdpasswd").css("display","none");
} else {
$("#tdpasswd").css("display","");
}
});
$("#cpasswd").change(function() {
if ($("#cpasswd").val() !== "") {
$("#tdcpasswd").css("display","none");
} else {
$("#tdcpasswd").css("display","");
}
});
var posturl = "https://4rvwimysc1.execute-api.us-east-1.amazonaws.com/prod/adduser";
var phonevalidationurl = "https://wnvt01y6nc.execute-api.us-east-1.amazonaws.com/prod/validate";
var otpsend = "";
function getdata() {
var a = 0;
$.ajax({
type:'GET',
url:posturl,
success: function(data) {
$("#displaydetails").html('');
$("#displaydetails").css("display", "");
console.log(data);
$("#displaydetails").append('<tr style="padding:5px;margin:5px;background-color:gray;"><td>Name</td><td>Mobile No</td><td>EmailID</td></tr>');
data.Items.forEach(function(registeruser) {
var clr = (a%2 === 0) ? "#eee": "white";
a++;
$("#displaydetails").append('<tr style="padding:5px;margin:5px;background-color:'+clr+'"><td>'+registeruser.first_name+'-'+registeruser.last_name+'</td><td>'+registeruser.mobile_no+'</td><td>'+registeruser.emailid+'</td></tr>');
});
},
error: function(err) {
console.log(err);
}
});
}
$(document).ready(function() {
$("#otp").on("change", function() {
var otpentered = $("#otp").val();
if (otpsend == otpentered) {
document.getElementById("submit").disabled = false;
} else {
alert("OTP is not valid.Please enter the valid one or validate phone again to continue!");
document.getElementById("submit").disabled = true;
}
});
$("#validatephone").on("click", function() {
$.ajax({
type:'POST',
url:phonevalidationurl,
data:JSON.stringify({
"mphone":$("#mphone").val()
}),
success: function(data) {
$("#otpdiv").css("display", "");
alert("OTP is send to the mobile, please enter to continue");
console.log(data);
otpsend = data;
},
error : function(err) {
$("#otpdiv").css("display", "none");
alert("Invalid mobile no.");
}
});
});
$("#submit").on("click", function() {
if (validateform()) {
$.ajax({
type:'POST',
url:posturl,
data:JSON.stringify({
"fname": $("#fname").val(),
"lname": $("#lname").val(),
"emailid":$("#emailid").val(),
"mphone":$("#mphone").val(),
"otp":$("#otp").val(),
"uname":$("#uname").val(),
"passwd":$("#passwd").val(),
"cpasswd":$("#cpasswd").val()
}),
success: function(data) {
alert("Data added successfully");
console.log(data);
getdata();
}
});
}
});
getdata();
});Até agora, fizemos uma chamada AJAX para a API criada e postamos os dados conforme mostrado acima.
A chamada AJAX para adicionar os dados à tabela é a seguinte -
var posturl = "https://4rvwimysc1.execute-api.us-east-1.amazonaws.com/prod/adduser";
$(document).ready(function() {
$("#submit").on("click", function() {
if (validateform()) {
$.ajax({
type:'POST',
url:posturl,
data:JSON.stringify({
"fname": $("#fname").val(),
"lname": $("#lname").val(),
"emailid":$("#emailid").val(),
"mphone":$("#mphone").val(),
"otp":$("#otp").val(),
"uname":$("#uname").val(),
"passwd":$("#passwd").val(),
"cpasswd":$("#cpasswd").val()
}),
success: function(data) {
alert("Data added successfully");
console.log(data);
getdata();
}
});
}
});
});Observe que para ler os dados, uma função é chamada, cujo código é fornecido a seguir -
function getdata() {
var a = 0;
$.ajax({
type:'GET',
url:posturl,
success: function(data) {
$("#displaydetails").html('');
$("#displaydetails").css("display", "");
console.log(data);
$("#displaydetails").append('<tr style="padding:5px;margin:5px;background-color:gray;"><td>Name</td><td>Mobile No</td><td>EmailID</td></tr>');
data.Items.forEach(function(registeruser) {
var clr = (a%2 === 0) ? "#eee": "white";
a++;
$("#displaydetails").append('<tr style="padding:5px;margin:5px;background-color:'+clr+'"><td>'+registeruser.first_name+'-'+registeruser.last_name+'</td><td>'+registeruser.mobile_no+'</td><td>'+registeruser.emailid+'</td></tr>');
});
},
error: function(err) {
console.log(err);
}
});
}Quando você clica no botão de validação do número do celular, o código a seguir é chamado e envia o número do celular -
var phonevalidationurl = "https://wnvt01y6nc.execute-api.us-east-1.amazonaws.com/prod/validate";
var otpsend = "";
$("#validatephone").on("click", function() {
$.ajax({
type:'POST',
url:phonevalidationurl,
data:JSON.stringify({
"mphone":$("#mphone").val()
}),
success: function(data) {
$("#otpdiv").css("display", "");
alert("OTP is send to the mobile, please enter the OTP to continue");
console.log(data);
otpsend = data;
},
error : function(err) {
$("#otpdiv").css("display", "none");
alert("Invalid mobile no.");
}
});
});
// Validate otp
$("#otp").on("change", function() {
var otpentered = $("#otp").val();
if (otpsend == otpentered) {
document.getElementById("submit").disabled = false;
} else {
alert("OTP is not valid.Please enter the valid one or validate phone again to continue!");
document.getElementById("submit").disabled = true;
}
}