[RN] 03 - Resource Collection & AWS Auth

Error:Unsupported method: BaseConfig.getApplicationIdSuffix().
The version of Gradle you connect to does not support that method.
To resolve the problem you can change/upgrade the target version of Gradle you connect to.
Alternatively, you can ignore this exception and read other information from the model.

Consult IDE log for more details (Help | Show Log)

(3) 在ZhiHuDaily-React-Native/android/gradle/wrapper/gradle-wrapper.properties中升级到4.1。

distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip

From: Unsupported method: BaseConfig.getApplicationIdSuffix()

Open build.gradle and change the gradle version to the recommended version:
classpath 'com.android.tools.build:gradle:1.3.0' to
classpath 'com.android.tools.build:gradle:2.3.2'
Hit 'Try Again'
In the messages box it'll say 'Fix Gradle Wrapper and re-import project' Click that, since the minimum gradle version is 3.3
A new error will popup and say The SDK Build Tools revision (23.0.1) is too low for project ':app'. Minimum required is 25.0.0 - Hit Update Build Tools version and sync project
A window may popup that says Android Gradle Plugin Update recommended, just update from there.

Now the project should be runnable now on any of your android virtual devices.

(4) 继续报错

gradle project sync failed. basic functionality will not work properly android studio

Goto: Android Studio 3.0.1 Error: Gradle project sync failed. Basic functionality (e.g. editing, debugging) will not work properly

让咱们从AWS登陆开始

登陆: aws-samples/aws-mobile-react-native-starter 【serverless】

--> 侧边栏 --> 按钮列表、路由

台湾哥们的好文，收之：使用 REACT NATIVE 與 AMAZON COGNITO 實做 GOOGLE & FACEBOOK 登入的功能

1、React or React Native

Adding authentication to your React or React Native app is as easy as wrapping your app's main component with our withAuthenticator higher order component.

AWS Amplify will provide you customizable UI for common use cases such as user registration and login.

import { withAuthenticator } from 'aws-amplify-react-native';

export default withAuthenticator(App);

2、React Native apps with [AWS Amplify]

Ref: 官方开发指导

一些概念

CLI support: AWS 命令行界面

AWS Mobile Hub: 建立AWS资源、相关用户、安全机制等

awsmobile-cli: It provides utilities for managing your backend, without visiting AWS Mobile Hub console.

用户登陆

As an example, in you React Native app, you can use a Higher-Order Components to provide a sign-in/sign-out experience for your app simply by wrapping your app’s main component:

export default withAuthenticator(App);

一行代码搞定登陆前端。

用户检测

Monitoring your users’ interaction with your app.

AWS Amplify provides analytics, push notifications and targeted messaging capabilities out-of-the-box.

Analytics.record('albumVisit', { genre: 'jazz', artist: 'Miles Davis' });

动手实践

详见：Create an app

参见：[RN] 01 - Init: Try a little bit of React Native

(1) 打开Access keys，而后 “Create New Access Key”。

(2) 手动配置后端

官方代码中应该有实例: aws-amplify/packages/aws-amplify-react-native/

RN for AWS AUTH

官方的不够良心，这个才是真爱：Expo - React Native Authentication with Expo, AWS Amplify, & Cognito

对应的代码：dabit3/expo-user-authentication

1、安装

代码需安装：
npm install aws-amplify
npm install react-navigation

【五星级教程笔记】

2、AWS Mobile Hub *

Ref: react-community/create-react-native-app

当心Ubuntu的yarn带来的歧义: ERROR: There are no scenarios; must have at least one.#2821

create-react-native-app RNExpoAuthProject

cd RNExpoAuthProject/

sudo npm i -g awsmobile-cli

awsmobile init　　#相关后端配置

Please tell us about your project:
? Where is your project's source directory:  .
? Where is your project's distribution directory that stores build artifacts:  build
? What is your project's build command:  npm run-script build
? What is your project's start command for local test run:  npm run-script start

? What awsmobile project name would you like to use:  RNExpoAuthProject

Successfully created AWS Mobile Hub project: RNExpoAuthProject

retrieving the latest backend awsmobile project information
awsmobile project's details logged at:
    awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's specifications logged at:
    awsmobilejs/#current-backend-info/mobile-hub-project.yml
awsmobile project's access information logged at: 
    awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: 
    aws-exports.js
contents in #current-backend-info/ is synchronized with the latest in the aws cloud

Executing yarn add aws-amplify ...
ERROR: [Errno 2] No such file or directory: 'add'
yarn add aws-amplify returned 1

Executing yarn add aws-amplify-react-native ...
ERROR: [Errno 2] No such file or directory: 'add'
yarn add aws-amplify-react-native returned 1

Success! your project is now initialized with awsmobilejs

   awsmobilejs/.awsmobile
     is the workspace of awsmobile-cli, please do not modify its contents

   awsmobilejs/#current-backend-info
     contains information of the backend awsmobile project from the last
     synchronization with the cloud

   awsmobilejs/backend
     is where you develop the codebase of the backend awsmobile project

   awsmobile console
     opens the web console of the backend awsmobile project

   awsmobile run
     pushes the latest development of the backend awsmobile project to the cloud,
     and runs the frontend application locally

   awsmobile publish
     pushes the latest development of the backend awsmobile project to the cloud,
     and publishes the frontend application to aws S3 for hosting

Happy coding with awsmobile!

配置日志记录

后台效果：有了新添加的项目 RNExpoAuthProject 。

3、添加登陆模块

awsmobile user-signin add
awsmobile user-signin enable
awsmobile push

后台呈现效果：后端添加了User Sign-in

Cognito也出现了一个自动生成的User Pool：

$ npm install aws-amplify 添加Amplify模块

  "dependencies": {
    "aws-amplify": "^0.4.1",
    "expo": "^27.0.1",
    "react": "16.3.1",
    "react-native": "~0.55.2"
  }

4、登陆界面实现

运行 npm run android 的前提是首先打开模拟器，也就是须要先搭建好基本的android代码，让模拟器跑起来。

【就是给expo代码添加原生代码，貌似没啥必要，在此只是记录下】

lolo@lolo-UX303UB$ react-native init RNExpoAuthProject
prompt: Directory RNExpoAuthProject already exists. Continue?:  (no) yes
This will walk you through creating a new React Native project in /media/unsw/CloudStorage/Linux-pan/ExtendedTmpSpace/Android-Workplace/android-and-ml/React-Native/demo-auth/RNExpoAuthProject
Cannot parse yarn version: 0.10
Installing react-native...
Consider installing yarn to make this faster: https://yarnpkg.com
npm WARN react-native@0.55.4 requires a peer of react@16.3.1 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-native@3.2.1 requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ react-native@0.55.4
added 15 packages, removed 598 packages, updated 13 packages and moved 1 package in 46.424s
Setting up new React Native app in /media/unsw/CloudStorage/Linux-pan/ExtendedTmpSpace/Android-Workplace/android-and-ml/React-Native/demo-auth/RNExpoAuthProject
Cannot parse yarn version: 0.10
Installing React...
npm WARN eslint-plugin-react-native@3.2.1 requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ react@16.3.1
added 1 package in 4.464s
Installing Jest...
npm WARN eslint-plugin-react-native@3.2.1 requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ babel-preset-react-native@4.0.0
+ babel-jest@23.0.0
+ react-test-renderer@16.3.1
+ jest@23.0.0
added 279 packages and updated 1 package in 12.787s
To run your app on iOS:
   cd /media/unsw/CloudStorage/Linux-pan/ExtendedTmpSpace/Android-Workplace/android-and-ml/React-Native/demo-auth/RNExpoAuthProject
   react-native run-ios
   - or -
   Open ios/RNExpoAuthProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /media/unsw/CloudStorage/Linux-pan/ExtendedTmpSpace/Android-Workplace/android-and-ml/React-Native/demo-auth/RNExpoAuthProject
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

有区别么？看上去貌似是同样的效果。

npm run android

Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android.

react-native run-android

GO TO your project’s folder and initiate react-native run-android command and your project will be automatically run into Real Android Device.

5、代码示范

申请注册

注册验证

样式代码

6、效果预览

更新后的app.js在 22:44 / 29:27；

进一步了解 AWS Mobile Hub

Ref: Authentication 【React Native Training 五星级资源】

Ref: AWS Mobile Hub 【React Native Training 五星级资源】

本篇内容为如下的四篇学习笔记：

1. AWSMobile CLI - Getting Started
2. Adding Analytics to a React Native Application
3. Expo - React Native Authentication with Expo, AWS Amplify, & Cognito【以前已阅】
4. Adding Analytics to an Expo Project
5. React Native iOS Push Notifications with AWS & Amazon Pinpoint

1、 AWSMobile CLI 自动配置

AWSMobile CLI 与3相似，就是自动配置后端：

【这里没有说起密钥】

2、IAM

(1) 添加用户到组。

(2) 添加一个组，这个组须要给予适当的权限，好比admin。

(3) 而后得到两个key，运行awsmobile configure时有用到。

【这里有说起密钥】

3、amazon-cognito-identify-js

仍是自动化配置后端那一套。

貌似是与Amplify取得联系。

react-native link amazon-cognito-identify-js

加载app到模拟器。

npm start  　　# kick off the package react-native run-ios

4、两个疑问?

secretAccessKey怎么一下子须要，一下子又不须要？