This document discusses using JavaScript with Amazon Web Services (AWS) in different environments including browsers, mobile, backend, internet of things (IoT), and edge computing. It provides code examples for using AWS services like Cognito, S3, IoT, and Greengrass in JavaScript applications across these environments. Specifically, it shows how to use JavaScript to register and authenticate users with Cognito, upload files to S3, connect IoT devices, and implement edge computing solutions with Greengrass.

1. © 2016, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Julio M. Faerman, Developer Relations
April 2017
AWS on Javascript
From the browser to IoT, Edge, Backend and more!

5. Browser & Mobile

7. var albumBucketName = 'BUCKET_NAME';
var bucketRegion = 'REGION';
var IdentityPoolId = 'IDENTITY_POOL_ID';
AWS.config.update({
region: bucketRegion,
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
})
});
var s3 = new AWS.S3({
apiVersion: '2006-03-01',
params: {Bucket: albumBucketName}
});

8. var albumBucketName = 'BUCKET_NAME';
var bucketRegion = 'REGION';
var IdentityPoolId = 'IDENTITY_POOL_ID';
AWS.config.update({
region: bucketRegion,
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
})
});
var s3 = new AWS.S3({
apiVersion: '2006-03-01',
params: {Bucket: albumBucketName}
});

10. Amazon Cognito

12. // When using loose Javascript files:
var CognitoUserPool = AmazonCognitoIdentity.CognitoUserPool;
// Under the original name:
var CognitoUserPool =
AWSCognito.CognitoIndentityServiceProvider.CognitoUserPool;
// Modules, e.g. Webpack:
var AmazonCognitoIdentity = require('amazon-cognito-identity-js');
var CognitoUserPool = AmazonCognitoIdentity.CognitoUserPool;
// ES Modules, e.g. transpiling with Babel
import { CognitoUserPool, CognitoUserAttribute, CognitoUser } from
'amazon-cognito-identity-js';

13. var poolData = {
UserPoolId : '...', // Your user pool id here
ClientId : '...' // Your client id here
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var attributeList = [];
var dataEmail = { Name : 'email', Value : 'email@mydomain.com'};
var dataPhoneNumber = { Name : 'phone_number', Value : '+15555555555’ };
var attributeEmail = new
AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
var attributePhoneNumber = new
AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber);
attributeList.push(attributeEmail);
attributeList.push(attributePhoneNumber);
userPool.signUp('username', 'password', attributeList, null, function(err, result){
if (err) {
alert(err);
return;
}
cognitoUser = result.user;
console.log('user name is ' + cognitoUser.getUsername());
});
Use case 1. Registering a user with the application.

14. var poolData = {
UserPoolId : '...', // Your user pool id here
ClientId : '...' // Your client id here
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var attributeList = [];
var dataEmail = { Name : 'email', Value : 'email@mydomain.com'};
var dataPhoneNumber = { Name : 'phone_number', Value : '+15555555555’ };
var attributeEmail = new
AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
var attributePhoneNumber = new
AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber);
attributeList.push(attributeEmail);
attributeList.push(attributePhoneNumber);
userPool.signUp('username', 'password', attributeList, null, function(err, result){
if (err) {
alert(err);
return;
}
cognitoUser = result.user;
console.log('user name is ' + cognitoUser.getUsername());
});

15. var poolData = {
UserPoolId : '...', // Your user pool id here
ClientId : '...' // Your client id here
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
var attributeList = [];
var dataEmail = { Name : 'email', Value : 'email@mydomain.com'};
var dataPhoneNumber = { Name : 'phone_number', Value : '+15555555555’ };
var attributeEmail = new
AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail);
var attributePhoneNumber = new
AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber);
attributeList.push(attributeEmail);
attributeList.push(attributePhoneNumber);
userPool.signUp('username', 'password', attributeList, null, function(err, result){
if (err) {
alert(err);
return;
}
cognitoUser = result.user;
console.log('user name is ' + cognitoUser.getUsername());
});
24 use cases, including confirmation (SMS & e-mail) and Multi-Factor Authentication

16. var albumBucketName = 'BUCKET_NAME';
var bucketRegion = 'REGION';
var IdentityPoolId = 'IDENTITY_POOL_ID';
AWS.config.update({
region: bucketRegion,
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
})
});
var s3 = new AWS.S3({
apiVersion: '2006-03-01',
params: {Bucket: albumBucketName}
});

18. function addPhoto(albumName) {
var files = document.getElementById('photoupload').files;
if (!files.length) {
return alert('Please choose a file to upload first.');
}
var file = files[0];
var fileName = file.name;
var albumPhotosKey = encodeURIComponent(albumName) + '//';
var photoKey = albumPhotosKey + fileName;
s3.upload({
Key: photoKey,
Body: file,
ACL: 'public-read'
}, function(err, data) {
if (err) {
return alert('There was an error uploading your photo: ', err.message);
}
alert('Successfully uploaded photo.');
viewAlbum(albumName);
});
}

19. Backend

24. Internet of Things

26. var awsIot = require('aws-iot-device-sdk');
var device = awsIot.device({
keyPath: <YourPrivateKeyPath>,
certPath: <YourCertificatePath>,
caPath: <YourRootCACertificatePath>,
clientId: <YourUniqueClientIdentifier>,
region: <YourAWSRegion>
});
device.on('connect', function() {
console.log('connect');
device.subscribe('topic_1');
device.publish('topic_2', JSON.stringify({ test_data: 1}));
});
device.on('message', function(topic, payload) {
console.log('message', topic, payload.toString());
});

27. var awsIot = require('aws-iot-device-sdk');
var device = awsIot.device({
keyPath: <YourPrivateKeyPath>,
certPath: <YourCertificatePath>,
caPath: <YourRootCACertificatePath>,
clientId: <YourUniqueClientIdentifier>,
region: <YourAWSRegion>
});
device.on('connect', function() {
console.log('connect');
device.subscribe('topic_1');
device.publish('topic_2', JSON.stringify({ test_data: 1}));
});
device.on('message', function(topic, payload) {
console.log('message', topic, payload.toString());
});

28. var awsIot = require('aws-iot-device-sdk');
var device = awsIot.device({
keyPath: <YourPrivateKeyPath>,
certPath: <YourCertificatePath>,
caPath: <YourRootCACertificatePath>,
clientId: <YourUniqueClientIdentifier>,
region: <YourAWSRegion>
});
device.on('connect', function() {
console.log('connect');
device.subscribe('topic_1');
device.publish('topic_2', JSON.stringify({ test_data: 1}));
});
device.on('message', function(topic, payload) {
console.log('message', topic, payload.toString());
});

29. var awsIot = require('aws-iot-device-sdk');
var thingShadows = awsIot.thingShadow({...});
…
thingShadows.on('connect', function() {
thingShadows.register( 'RGBLedLamp', function() {
var rgbLedLampState = {"state":{"desired":{"red":rval,"green":gval,"blue":bval}}};
clientTokenUpdate = thingShadows.update('RGBLedLamp', rgbLedLampState );
});
thingShadows.on('status',
function(thingName, stat, clientToken, stateObject) {});
thingShadows.on('delta',
function(thingName, stateObject) {});
thingShadows.on('timeout',
function(thingName, clientToken) {});

30. var awsIot = require('aws-iot-device-sdk');
var thingShadows = awsIot.thingShadow({...});
…
thingShadows.on('connect', function() {
thingShadows.register( 'RGBLedLamp', function() {
var rgbLedLampState = {"state":{"desired":{"red":rval,"green":gval,"blue":bval}}};
clientTokenUpdate = thingShadows.update('RGBLedLamp', rgbLedLampState );
});
thingShadows.on('status',
function(thingName, stat, clientToken, stateObject) {});
thingShadows.on('delta',
function(thingName, stateObject) {});
thingShadows.on('timeout',
function(thingName, clientToken) {});

31. var awsIot = require('aws-iot-device-sdk');
var thingShadows = awsIot.thingShadow({...});
…
thingShadows.on('connect', function() {
thingShadows.register( 'RGBLedLamp', function() {
var rgbLedLampState = {"state":{"desired":{"red":rval,"green":gval,"blue":bval}}};
clientTokenUpdate = thingShadows.update('RGBLedLamp', rgbLedLampState );
});
thingShadows.on('status',
function(thingName, stat, clientToken, stateObject) {});
thingShadows.on('delta',
function(thingName, stateObject) {});
thingShadows.on('timeout',
function(thingName, clientToken) {});

32. AWS Greengrass

33. Network Edge

34. Global Network of Regions and Edge Locations

36. 고맙습니다
@jmfaerman