[RN] 03 - Resource Collection & AWS Auth

那些资源

---

一、三个例子

iReading

Bilibili-React-Native

ZhiHuDaily-React-Native

 

二、IM 例子

1. React Native Socket.io Example

2. A simple messaging app with React Native and Socket.io

3. 极光Aurora IMUI

4. 一个基于 react-native + mobx + socket.io + node 的仿微信 JS-Wechat

 

三、业内良心

Goto: React Native Community【相对权威】

Goto: react-native-open-project 【工程】

Goto: Useful-Open-Source-React-Native 【控件】

Goto: react-native-starter-kit      【网页+RN】

Goto: 30-days-of-react-native    【30个demo】

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

Goto: https://github.com/wangdicoder【可用方案】

 

四、国外良心

Ref: https://github.com/jondot/awesome-react-native 【UI,App资源极为丰富】

 

五、运行例子

运行ZhiHuDaily报错，以及处理办法。

可能出现的错误，可惜没彻底解决：

(1) 先用Android Studio打开工程，否则直接npm install会报错。

 

(2) Gradle 'app' project refresh failed.

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 登入的功能

  

一、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);

 

 

二、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

 

一、安装

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

【五星级教程笔记】

 

二、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 。

 

 

三、添加登录模块

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"
  }

 

 

四、登录界面实现

运行 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.

 

 

五、代码示范

• 申请注册 

• 注册验证

• 样式代码

 

 

六、效果预览

更新后的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

 

 

一、 AWSMobile CLI 自动配置

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

【这里没有提及密钥】

 

 

二、IAM

(1) 添加用户到组。

 

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

 

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

【这里有提及密钥】

 

 

三、amazon-cognito-identify-js

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

貌似是与Amplify取得联系。

react-native link amazon-cognito-identify-js

 

加载app到模拟器。

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

 

 

四、两个疑问?

secretAccessKey怎么一会儿需要，一会儿又不需要？