PWA




PWA
• ALM
• Application Lifecycle Management
•
•
• Java
• →
• iOS: Swift
• Web Vuejs → Angular/Ionic
• C# .NET
• Microsoft MVP for Visual Studio and Development
• CI / CD
• CircleCI
Agenda
1.
2.
3. Java on AWS Lambda
4. Ionic PWA
5.
6.
1.
2.
3. Java on AWS Lambda
4. Ionic PWA
5.
6.
• Quality
•
• Cost
•
• Delivery
•
• Spec
•
• Quality
•
• Cost
•
• Delivery
•
• Spec
•
VS
•
• 

• 

•
•
• 

• 

•
• GraphQL API
• SPA
•
• React Native 



•
• GraphQL API
• SPA
•
• React Native 



1.
2.
3. Java on AWS Lambda
4. Ionic PWA
5.
6.
• 

• MVP
• =
• MVP =
•
AWS
•
• CRUD
•
•
• Web / iOS / Android 3
•
• 



SaaS 

• 



PWA 

AWS
AWS


AWS
AWS


AWS
AWS
CloudFront
Cognito
1.
2.
3. Java on AWS Lambda
4. Ionic PWA
5.
6.
Java on AWS Lambda
• Java
• 



• AWS Lambda




Java on AWS Lambda
• DynamoDB
• RDB
• AWS
• AWS Toolkit for Eclipse
•
• Cognito
DynamoDB
• AWS DynamoDB ORM
• DynamoDBMapper: 

https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBMapper.html
• Dynamo Index
• ORM
DynamoDBMapper
@DynamoDBTable(tableName = "Detail")
public class MemoryDetailItem {
@DynamoDBHashKey(attributeName = "id")
public String getId() {
return childId;
}
@DynamoDBAttribute(attributeName = “Tag")
public String getTag() {
return title;
}
@DynamoDBAttribute(attributeName = "Item")
public Item getItem() {
return answer;
}
}
@DynamoDBDocument
public class Item {
@DynamoDBAttribute(attributeName = "Title")
public String getTitle() {
return title;
}
@DynamoDBAttribute(attributeName = "Content")
public String getContent() {
return content;
}
}
AWS
•
AWS Toolkit for Eclipse
• AWS SAM Eclipse
• BluePrint
AWS Toolkit for Eclipse
AWS Toolkit for Eclipse
AWS Toolkit for Eclipse
AWS Toolkit for Eclipse AWS
AWS Toolkit for Eclipse AWS
• Cognito
• API Gateway
• AWS
• Java
•
•
• DynamoDB Region
•
• DynamoDBMapper
•
•
Java
•
• JVM
• Spring
10 20
•
•
•
•
Java
•
• / Java
•
• Java


Go
1.
2.
3. Java on AWS Lambda
4. Ionic 

PWA
5.
6.
PWA
• Progressive Web Apps
• Web iOS/Android
• iOS/Android
• Android
• iOS: 

Safari Edge Service Worker 

https://www.publickey1.jp/blog/17/safariedgeservice_worker.html
PWA

 









PWA
PWA vs Native Apps
https://youtu.be/XoIhPjS5y1M
•
•
Ionic
• Angular
• UI
• Web
• cordova native
Ionic
•
• iOS/ Android
• Web
• PWA
•
• CLI
Ionic
Ionic PWA
• PWA
• ServiceWorker
•
•
•
service-worker.js
'use strict';
importScripts('./build/sw-toolbox.js');
self.toolbox.options.cache = {
name: 'ionic-cache'
};
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
// dynamically cache any other local assets
self.toolbox.router.any(' /*', self.toolbox.fastest);
// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;
Ionic
• CLI
•
•
• CLI
•
•
Ionic
• TypeScript
• 



• IDE
VS Code / WebStorm
Ionic
• Ionic UI
• , &
•
• 

Web
• Angular
AWS Cognito
AWS Cognito
• AWS Amplify
• / /
•
//
Auth.signIn(credential.email, credential.password)
.then((user) => {
console.log('sign in: success', user);
});
//
Auth.signUp({username, password, attributes: {email}})
.then(data => {
console.log(data);
});
// PIN
Auth.confirmSignUp(this.user.username, this.registerInfo.code)
.then((user) => {
console.log('confirm: success', user);
});
AWS Cognito
• Cognito
OK
• PIN or SMS
• Console
• Ionic UI
• UI
• Ionic UI
• Angular
• directive
1.
2.
3. Java on AWS Lambda
4. Ionic PWA
5.
6.
CloudFront
Cognito
•
•
• 1k 1M
•
•
•
•
• Web
•
Support Vector Machine
• 





•
•
•
• 



SaaS
• 





•
•
•
• 



SaaS
SaaS
• AWS / Microsoft / Google
•
• Google Natural Language API
• AWS:
• Microsoft:
• Google:
Google Natural Language API
• API
•
•
•
•
Google Natural Language API - -
•
Salience
Google Natural Language API - -
• Positive Negative 

Score 

Magnitude
Google Natural Language API - -
•
Google Natural Language API
※ 1,000 /
1 500
100 10
Google Natural Language API
• API




•
•
•
•
• Lambda Java Lambda
• Ionic
• SaaS
•
• Lambda 

MBaaS
• Google FireStore / AWS AppSync
•
• Ionic
• React / Vue.js
• React Native / Nuxt
•
• SaaS PaaS
• AWS SageMaker PaaS
• MVP 



• 

•

新しい技術を取り入れるための実験のやり方 〜サーバーレス・機械学習・PWAを実戦に投入するまで〜