bene@theodo.co.uk
Ben Ellerby
@EllerbyBen
@EllerbyBen
@EllerbyBen
💰 Cost reduction
👷♂️ #NoOps
💻 Developers focus on delivering business value
📈 More scalable
🌳 Greener
@EllerbyBen
Lambda
S3
Dynamo
API Gateway
Compute
Storage
Data
API Proxy
Cognito
Auth
SQS
Queue
EventBridge
Event Bus
@EllerbyBen
@EllerbyBen
@EllerbyBen
@EllerbyBen
AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow, and React Native for mobile developers.
@EllerbyBen
@EllerbyBen
$ yarn add aws-amplify
$ yarn add aws-amplify-react-native
$ react-native link
import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);
@EllerbyBen
@EllerbyBen
$ amplify add auth
$ amplify push
@EllerbyBen
import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);
@EllerbyBen
@EllerbyBen
@EllerbyBen
$ amplify add api
-> Please select from one of the below mentioned services
GraphQL
❯ REST
@EllerbyBen
➜ myAmplifyProject git:(master) ✗ amplify add api
-> Please select from one of the below mentioned services REST
-> Provide a friendly name for your resource to be used as a label for this category in the project: testProject
-> Provide a path (e.g., /items) /items
-> Choose a Lambda source Create a new Lambda function
-> Provide a friendly name for your resource to be used as a label for this category in the project: listFunctionTest
-> Provide the AWS Lambda function name: listFunctionTest
-> Choose the function template that you want to use: Serverless express function (Integration with Amazon API Gateway)
-> Do you want to access other resources created in this project from your Lambda function? No
-> Do you want to edit the local lambda function now? Yes
Please edit the file in your editor: ~/project/src/index.js
-> Press enter to continue
Succesfully added the Lambda function locally
-> Restrict API access Yes
-> Who should have access? Authenticated users only
-> What kind of access do you want for Authenticated users? (Press <space> to select, <a> to toggle all, <i> to invert selection)
-> Do you want to add another path? No
Successfully added resource locally
const awsServerlessExpress = require('aws-serverless-express');
const app = require('./app');
app.get('/items', function(req, res) {
res.json(req.apiGateway.event);
});
const server = awsServerlessExpress.createServer(app);
exports.handler = (event, context) => {
console.log(`EVENT: ${JSON.stringify(event)}`);
awsServerlessExpress.proxy(server, event, context);
};
$ amplify push
@EllerbyBen
// ...
import Amplify, { API } from 'aws-amplify';
Amplify.configure(amplify);
class App extends Component {
state = { apiResponse: null };
async getSample() {
const path = "/items";
const apiResponse = await API.get("theListApi" , path)
console.log('response:' + apiResponse);
this.setState({ apiResponse });
}
render() {
return (
<View>
<Button title="Send Request" onPress={this.getSample.bind(this)} />
<Text>Response: {this.state.apiResponse && JSON.stringify(this.state.apiResponse)}</Text>
</View>
);
}
}
export default withAuthenticator(App);
Local mock of all API calls and AppSync
As well as local Dynamo DB mock
$ amplify mock
$ amplify add analytics
$ amplify push
import { Analytics } from 'aws-amplify';
...
componentDidMount() {
Analytics.record('FIRST-EVENT-NAME');
}
import { Analytics, AWSKinesisProvider } from 'aws-amplify';
Analytics.addPluggable(new AWSKinesisProvider());
Analytics.record({
data: {
// The data blob to put into the record
},
partitionKey: 'myPartitionKey',
streamName: 'myKinesisStream'
}, 'AWSKinesis');
@EllerbyBen
@EllerbyBen
@EllerbyBen
serverless-transformation
@EllerbyBen
serverless-transformation
@EllerbyBen
npm install -g sls-dev-tools
@EllerbyBen