by Adrian Hall, Sr. Developer Advocate, AWS One of the key challenges for mobile applications is managing users and their identities in order to support monetization strategies, provide differentiated services, and manage fine grained access and data controls. In this session, you’ll learn how Amazon Cognito provides user sign-up and sign-in as part of your onboarding workflow and advanced capabilities for data access/feature management and security. Once you’ve acquired a user, then the even more difficult task of retaining and monetizing the user begins. In order to retain the user, they must be engaged with the application. In this session, you’ll learn how to use Amazon Pinpoint to implement user engagement strategies via data and event capture, advanced analytics, integrated multi-channel messaging (mobile push, SMS, email) to drive campaigns (both transactional and targeted) based on demographics and audience segmentation.

1. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adrian Hall, AWS Mobile
Introduction to React Native
https://tinyurl.com/aws-rn-notes

2. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What is React Native?
• Write in React/JSX
• Run as a Native App
• Code runs in a JS Container
• iOS / Android
• You must be able to:
Ø Write JavaScript
Ø Work with ReactJS technologies
Native Mobile App
React Native Runtime
JavaScript Container
ReactJS
React Native JS
Native Bridges
Your Code

3. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Problems React Native Solves
• Cross Platform App Development with Native UX
• Utilizes Web Development Skillset
• Avoids the “HTML Sandbox” Trap
• Single code-base for business logic

4. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Wide Range of UI Controls
• Wraps existing Native UI Controls
• Libraries of new UI Controls
• NativeBase
• React Native Elements
• React Native Material Design

5. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
UI Component Library
ActivityIndicator
ProgressBarAndroid
PickerIOS
Picker
NavigatorIOS
Modal
ListView
Image
FlatList
DrawerLayoutAndroid DatePickerIOS
Checkbox
Button
ProgressViewIOS
RefreshControl
SectionList
ScrollView
SegmentedControlIOSSlider
StatusBar
Switch
TabBarIOS
Text
TextInput
Switch
ToolBarAndroid
View

6. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Device APIs
Platform
AsyncStorage
AppState
Flexbox
Vibration
StyleSheet
Timers
GeoLocation
Network

7. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native vs. Xamarin Forms – An Opinion
Requirement React Native Xamarin Forms
Legal BSD + PATENTS MIT
Framework React / Flux MVVM
Editor Any Text Editor Visual Studio
Type Safety Optional (Flow / TS) Included (C#)
Components Extensive - npm Extensive - NuGet
iOS on a Windows PC? Cloud Local Mac or Cloud
Time to Productive Short Long
Expert Assistance Community Community
Debugging Yes Yes

8. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Getting Started the easy way
• Install Node (https://nodejs.org)
• Install create-react-native-app (npm install –g)
• Install Expo Client (https://expo.io)
create-react-native-app myapp
cd myapp
yarn start

9. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo: First React-Native App

10. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Resources
• https://reactjs.org/
• https://redux.js.org/
• https://facebook.github.io/react-native
• https://tinyurl.com/aws-rn-notes

11. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adrian Hall, AWS Mobile
Connecting to AWS Resources
With AWS Amplify

12. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Mobile Optimized AWS Services
Major
Use-case
Specific
Essential
Analytics Identity UI Testing
Database Files Cloud Logic
Chat Bots Text to Speech Machine Learning

13. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Introducing AWS Amplify
JavaScript Library for accessing cloud resources
• Analytics
• Authentication
• File Storage
• API Access
Initially for AWS Mobile Hub configuration
React and React Native Support

14. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Installing AWS Amplify
Works with ANY JavaScript Framework
yarn add aws-amplify
React Native Components
yarn add aws-amplify-react-native

15. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Configuring AWS Amplify
1. Create your project in AWS Mobile Hub
• Turn on Hosting & Streaming
• Download aws-exports.js
2. Add the following in your bootstrap JS
import Amplify from ‘aws-amplify’;
import awsmobile from ‘./aws-exports’;
Amplify.configure(awsmobile);

16. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Add Analytics to your app
• Do nothing (it’s already done!)
• Add custom events with Analytics.record()
import { Analytics } from ‘aws-amplify’;
Analytics.record(‘listen’, { ‘id’: ’12345’ });
• Add metrics
Analytics.record(‘listen’, { ‘id’: ’12345’ }, { minutes: 4 });

17. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo: Adding Analytics

18. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adding Authentication
• In Any framework
• use the Auth module
• In React & React Native
• withAuthenticator() – HOC with provided UI
• <Authenticator/> - component with provided UI
• Auth.signIn() (and friends) – your own UI

19. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adding Authentication
import React from ‘react’;
import MyApplication from ‘./src/MyApplication’;
import { withAuthenticator } from ‘aws-amplify-react-native’;
class App extends React.Component {
render() {
return (<MyApplication/>);
}
}
export default withAuthenticator(App);

20. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo: Adding Authentication

21. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adding Authentication (non-wrapped)
• Check my blog
• https://shellmonger.com
• Button: https://tinyurl.com/aws-amplify-auth-1
• Custom UI: https://tinyurl.com/aws-amplify-auth-2