chellongCoder / React-Native-Saga-Template

A React Native project boilerplate for producing reliable applications.

Base project

Project là 1 React Native boilerplate giúp khởi động 1 dự án react native 1 cách nhanh nhất

Project cung cấp 1 Kiến trúc phát triển mobile đa nền tảng Phân tách tầng UI và tầng Logic. Dưới đây là những ghi chú để có thể sử dụng project 1 cách hiệu quả nhất.

Kiến trúc

The main purpose of the Architecture of the boilerplate is the separation of concerns Mục tiêu chính của kiến trúc là phân tách các phần của project.

• phân tách giữa components và screens.

• State được quản lý qua Redux stores.

• các logic khác của ứng dụng (API calls, etc.) được phân tách khỏi UI và state thông qua Redux Saga.

Các thư viện liên qua

gồm có:

• React Native (v0.62.3)
• Clear directory layout cung cấp 1 tổ chức code ổn định để phát triển ứng dụng
• Redux (v4.0.5) để quản lý state
• Redux Persist (v6.0.0) để quản lý lưu trữ state
• Redux Sagas (v1.1.3)để phân tách logic tầng UI và tầng Business
• React Navigation 5 với NavigationService để thực thi luồng màn hình.
• i18Next (v11.3.5) to facilitate the more than one language in the App đa ngôn ngữ
• Firebase (v5.6.0)
• Push Notifications được tích hợp ở project này
• Code-Push (v6.2.0) cung cấp phân phối code cho dev và test 1 cách nhanh chóng
• react-native-fbsdk (v2.0.0) tích hợp đăng nhập fb
• google-signin (v4.0.0) tích hợp đăng nhập google
• Theme Support với DarkTheme và LightTheme
• react-native-splash-screen (v3.2.0)
• axios call api (v0.19.2)
• TypeScript
• prettier and eslint pre configured for React Native

Note: ...

Directory layout

• app/components: các component đang được sử dụng
• app/screens: các màn hình
• app/assets: Các assets được sử dụng project (ảnh, font chữ, video, audio ...)
• app/i18next: quản lý ngôn ngữ
• app/navigation: React-Navigation setting
• app/redux/store: Redux store quản lý state
• app/redux/sagas: Redux sagas quản lý logic api
• app/redux/actions: Redux actions
• app/redux/reducers: Redux reducers
• app/redux/connects: Redux data connectors
• app/redux/types: Redux action types
• app/redux/api: application services, e.g. API clients
• app/Utils: Styles helpers for the application
• app/config: Routes and Screen configurations
• app/constants: Colors, images and common styles
• app/helpers: Colors, images and common styles

Yêu cầu

Môi trường node 8 hoặc cao hơn. Yêu cầu Xcode 10 trở lên

Cài đặt môi trường để phát triển ứng dụng cross platform

• Dành cho Android development
• Dành cho iOS development

Các sử dụng base project

Để tạo 1 project mới sử dụng base:

• Clone Project

• Xoá git: rm -rf .git/

• Install thư viện yarn or npm install

• Rename the React Native project (Without custom Bundle Identifier)

  yarn run rename -- <YourProjectName> or npm run rename -- <YourProjectName> (the default name is BaseProject)

• Đổi tên project (với Bundle Identifier, chỉ trên Android. với iOS, dùng Xcode)

  yarn run rename -- <YourProjectName> -b <bundleIdentifier> or npm run rename -- <YourProjectName> -b <bundleIdentifier> (the default name is BaseProject)

• Facebook SDK Android/iOS Setup

  Chỉ cần cung cấp FacebookAppID và FacebookLoginProtocolScheme rồi vất vào .env.staging và .env.production.

  

• Google Sign-In SDK Android Setup

  Để bắn noti cho android và login bằng google hãy import google-services.json into android/app

• Google Sign-In SDK iOS Setup

  Để bắn noti cho ios và login bằng google hãy import GoogleService-Info.plist vào project trong xcode và lấy REVERSED_CLIENT_ID trong GoogleService-Info.plist để vào .env.staging và .env.production

  

• Push Notifications

  Tải 2 file này về vất và firebase

  
  

• [Optional]codepush android setup

  Setup code-push cho phát triển ứng dụng Tạo trên appcenter với os="Android" and platform="React Native" . Sau khi tạo xong app sẽ có secret key, vất nó vào android/app/src/main/assets/appcenter-config.json. Kích vào Distribute ở side menu trong appcenter, click code push, nó sẽ tạo cho 2 key là production và staging. vất key production vào .env.production vất key staging vào .env.staging

• [Optional]codepush ios setup

  Setup code-push cho phát triển ứng dụng Tạo trên appcenter với os="iOS" and platform="React Native" . Sau khi tạo xong app sẽ có secret key, vất nó vào AppCenter-Config.plist. Kích vào Distribute ở side menu trong appcenter, click code push, nó sẽ tạo cho 2 key là production và staging. vất key production vào .env.production vất key staging vào .env.staging

Commit đầu tiên lên git bằng cách git init > commit > push

Running the project

• yarn or npm install
• Run the following steps for your platform

Android

• đầu tiên để chạy android, phải generate debug.key:
  • cd android/app
  • keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
  • cd ../.. quay về root folder
• yarn start or npm install để start bundle
• yarn run android or npm run android Để start android app (Nhớ cắm đt hoặc chạy máy ảo)

iOS

• cd ios
• pod install để kéo dependencies
• cd .. quay về root folder
• react-native run-ios Để start ios app (Nhớ cắm đt hoặc chạy máy ảo)

Useful documentation

CodePush

CodePush is an App Center cloud service that enables Apache Cordova and React Native developers to deploy mobile app updates directly to their users’ devices.

Google Sign-In SDK

Google Sign-In is a secure authentication system that reduces the burden of login for your users, by enabling them to sign in with their Google Account—the same account they already use with Gmail, Play, and other Google services.

Facebook SDK

The Facebook SDK for is the easiest way to integrate your app with Facebook. It enables:

• Facebook Analytics - Understand how people are using your product.
• Facebook Login - Authenticate people with their Facebook credentials.
• Share and Send dialogs - Enable sharing content from your app to Facebook.
• App Events - Log events in your application.
• Graph API - Read and write to Graph API.

I18next

I18next is an internationalization-framework written in and for JavaScript. But it's much more than that.

i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

Firebase-crashlytics

License

This project is released under the MIT License.

Why this boilerplate?

I looked into existing boilerplates before starting this project, and while many of them are awesome, But every boilerplate was lacking something, so I come up with a boilerplate that has all the features that modern app needed. For example

• React Native Latest Stable Version (v0.62.3)
• Great Architecture
• React Navigation 5 Integrated
• Redux Integrated
• Redux Saga Integrated
• Redux Persist Integrated
• Firebase SDK Integrated
• Facebook SDK Integrated
• Google Sign-in SDK Integrated
• Code-Push SDK Integrated
• Push Notifications Integratd
• Theme Integrated
• Multilingual Integrated
• Splash Screen Integrated
• Vector Icons Integrated
• TypeScript Support