serverless-sam
Version:
Serverless framework plugin to export AWS SAM templates for a service
80 lines (73 loc) • 2.39 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="">
<div id='logo'>
<img src="https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/blog/twilio-logo.jpg" />
</div>
<h3>Twilio Serverless Example</h3>
<div id="message"></div>
<div class="inputs">
<input id="phone-number" placeholder="Phone Number" />
<input id="text" placeholder="Input your text message" />
</div>
<div class='api-actions'>
<button id="send-text" class="btn">Send Text</button>
</div>
<a href="https://github.com/serverless/examples/">
View the source on github
</a>
</div>
</div>
<!-- polyfill browser fetch -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.js"></script>
<script>
// Fill in with your API endpoint
const API_ENDPOINT = 'https://sq2uyqp3re.execute-api.us-east-1.amazonaws.com/dev/api/sendText';
const messageDiv = document.getElementById('message')
// Handle public api call
document.getElementById('send-text').addEventListener('click', function () {
const text = document.getElementById('text').value
const number = document.getElementById('phone-number').value
if (!text) {
messageDiv.innerHTML = 'Enter a message!'
return false
}
if (!number) {
messageDiv.innerHTML = 'Enter a number!'
return false
}
const data = JSON.stringify({
to: number,
message: text
})
// post to API with native browser Fetch
const getdata = fetch(API_ENDPOINT, {
headers: {
"Content-type": "application/json"
},
method: 'POST',
body: data,
mode: 'cors',
cache: false,
});
getdata.then(function(response) {
response.json().then(function(data) {
console.log('Response:', data);
const body = JSON.parse(data.body);
messageDiv.textContent = '';
messageDiv.textContent = (body && body.message) ? body.message : '';
});
}).catch(function(err) {
console.log(err)
});
});
</script>
</body>
</html>