AWS MobileHub와 AWS Amplify를 사용한 하이브리드 모바일 어플리케이션 개발하기 l 강정희 솔루션즈 아키텍트
4 likes2,419 views
AWS MobileHub와 AWS Amplify를 사용한 하이브리드 모바일 어플리케이션 개발하기 l 강정희 솔루션즈 아키텍트
AWS MobileHub와 AWS Amplify를 사용한 하이브리드 모바일 어플리케이션 개발하기 l 강정희 솔루션즈 아키텍트
- 1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS MobileHub와 AWS Amplify를 사용한 하이브리드 모바일 어플리케이션 개발하기 Junghee Kang, Solutions Architect
- 2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 모바일 산업 트렌드 지속적으로 증가하는 App을 이용하는 시간 1.6조 시간 Source: AppAnnie 웹 기술을 이용하여 제작된 신규 엔터프라이즈 App 수 50%+ Source: AWS JavaScript – 가장 대중적으로 사용되는 개발언어 66.7%▲ Source: Stack Overflow
- 3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 고품질의, 클라우드를 활용한 App 개발하기
- 4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile Development Lifecycle AWS상에 App배포 배포 Device Farm: 클라우드 상의 실제 디바이스에서 Android, iOS, Web App을 테스트 테스트 Pinpoint: App 사용 데이터 수집 및 분석 Mobile SDK: SDK를 활용하여 iOS, Android, Unity 등의 플랫폼에서 App 개발 개발 Pinpoint, SNS & SES: Push, SMS, Email 알림 전송 고객 참여 측정
- 5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 간단한 3단계 과정 1. 플랫폼 선택 Mobile Hub 2. 클라우드 서비스 구성 Native SDKs 3. App에 연결 Mobile CLI AWS Amplify
- 6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS MOBILE CLI: 클라우드 서비스 구성 AWS Mobile Hub Console AWS Mobile CLI awsmobile init awsmobile user-signin enable awsmobile pull awsmobile push
- 7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS MOBILE CLI: 클라우드 서비스 구성 > awsmobile init > awsmobile user-signin enable app 초기화 사용자 로그인 기능(User Sign-in) 추가 지원하는 서비스 : • User-signin (Amazon Cognito) • analytics (Amazon Pinpoint) • database (Amazon DynamoDB) • user-files (Amazon S3) • cloud-api (API GW & AWS Lambda) Web app 배포 지원: • hosting (Amazon S3, Amazon CloudFront)
- 8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Library JavaScript Library - Declarative interfaces - Convention over configuration Categories for application programming with Cloud services - Auth, Analytics, Storage, API - Caching, i18n, logging, message bus React/React Native extensions - Higher-order components - Native bridging for mathematical operations (Amazon Cognito User Pools) - Open sourced – Apache 2.0 - Implemented with AWS services, open for external contribution
- 9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Library 인증, 인가, OIDC JWT, MFA 인증 한줄의 코드로 Amazon Pinpoint와 통합 분석 Amazon API Gateway를 통한 RESTful API 구성 및 활용 API S3에 컨텐츠 저장 스토리지 web app 부터 React Native까지 적용가능한 캐싱 인터페이스 활용 캐싱 Amazon Pinpoint 캠페인 및 타겟팅을 지원하는 푸시 알림 Push 알림
- 10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amplify 를 이용하여 App에 연결 React의 HOC(Higher-order component) 패턴으로 단 두줄의 코드로 로그인 UI와 기능을 적용 할 수 있습니다.
- 11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify를 활용한 하이브리드 개발 시작하기
- 12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: Getting Started 예제 $ awsmobile start my-project react-native Amazon S3 Amazon Cognito Amazon API Gateway Amazon DynamoDBAmazon Lambda Amazon Mobile Hub
- 13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Getting Started 구성 $ awsmobile start pet-tracker react-native $ cd pet-tracker $ npm run ios Starter app 구성 $ npm install -g react-native-cli $ npm install -g create-react-native-app $ npm install -g awsmobile-cli 사전 설치
- 14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo : getting started 예제 Pet Tracker
- 15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify를 활용한 인증/인가
- 16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile Hub – Amazon Cognito User Pools
- 17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: 인증(AuthN), 인가(AuthZ) 구성 $ awsmobile init $ awsmobile user-signin enable $ awsmobile push AWS Mobile CLI 활용 시 $ awsmobile pull AWS Mobile Hub Console 활용 시
- 18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Login – React Higher Order Component
- 19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Login – React Higher Order Component
- 20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 로그인(Sign In)
- 21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 회원가입(Sign Up)
- 22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 로그아웃(Sign Out)
- 23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify를 활용한 API 활용
- 24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile Hub: Cloud Logic
- 25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: 클라우드 API 구성 $ awsmobile init $ awsmobile cloud-api enable $ awsmobile push AWS Mobile CLI 활용시 $ awsmobile pull AWS Mobile Hub Console 활용시
- 26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API 활용하기
- 27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo : 인증/인가, API 활용
- 28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 데모 환경 구성 $ create-react-native-app scratch-summit $ cd scratch-summit $ npm install $ awsmobile init $ npm run ios 샘플 프로젝트 구성
- 29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify를 활용한 분석
- 30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: Amazon Pinpoint Analytics
- 31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: Amazon Pinpoint Events
- 32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: Amazon Pinpoint Analytics
- 33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo : 분석(Analytics)
- 34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 테스트 및 배포 성능 분석을 위해 실제 기기에서 Web App을 테스트 가능 S3에서 Web App 호스팅 > awsmobile publish --test
- 35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile Development Lifecycle AWS상에 App배포 배포 Device Farm: 클라우드 상의 실제 디바이스에서 Android, iOS, Web App을 테스트 테스트 Pinpoint: App 사용 데이터 수집 및 분석 Mobile SDK: SDK를 활용하여 iOS, Android, Unity 등의 플랫폼에서 App 개발 개발 Pinpoint, SNS & SES: Push, SMS, Email 알림 전송 고객 참여 측정
- 36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 더 자세한 것은 AWS 교육 정보를 참고하시기 바랍니다. 온라인 교육 AWS 무료 온라인 교육 자료, 실습 과정을 만나실 수 있습니다. 오프라인 공인 교육 AWS 공인 강사가 직접 유료 과정을 통해 다양한 교과 과정을 운영합니다. AWS 공인 자격증 산업 현장에서 인정 받을 수 있는 다양한 전문 자격증 제도를 활용하세요. 더 자세한 사항은 AWS 교육 자료 웹 사이트를 참고하세요! https://www.aws.training/
- 37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Innovate에 참여해주셔서 감사합니다! 본 세션이 끝난 후, 간단한 설문 조사에 응해 주시면 여러분의 피드백을 바탕으로 향후 더 좋은 콘텐츠를 준비해드리겠습니다. 다양한 AWS 콘텐츠를 온라인에서 만나보세요! aws-korea-marketing@amazon.com twitter.com/AWSKorea facbook.com/AmazonWebServices youtube.com/user/AWSKorea slideshare.net/AWSKorea twitch.tv/aws