[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怎麼一下子須要，一下子又不須要？