- Nodejs: https://nodejs.org/en/ (Cài bản LTS)
- Yarn (https://yarnpkg.com/lang/en/docs/install/#windows-stable)
- Java SDK 8: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
- Visual Studio Code: https://code.visualstudio.com/Download
- Git SCM: https://git-scm.com/download/
- Setup IDE: Xcode, Android Studio
- Android Studio: https://developer.android.com/studio/
- Configure ANDROID_HOME (c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk)
- Add platform-tools to Path (c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools)
- Setup JAVA_HOME (https://confluence.atlassian.com/doc/setting-the-java_home-variable-in-windows-8895.html)
- Auto Rename Tag: (Downloads: 2.7M)
- Bracket Pair Colorizer 2 (Donwloads: 842K)
- ES7 React/Redux/GraphQL/React-Native snippets (Downloads: 1.3M)
- Visual Studio IntelliCode (5.1M)
- ESLint (8.9M)
- React Native Tools (Downloads: 1.2M)
- Prettier - Code Formatter (Downloads: 6.3M)
- Debugger for Chrome (Downloads: 15.4M)
- Material Icon Theme (Downloads: 5M)
- One Dark Pro (Downloads: 7.8M)
1. Cài đặt công cụ expo-cli:
Tại của sổ terminal hoặc bash, gõ:
npm install -g expo-cli
hoặc
yarn global add expo-cli
2. Tạo mới 1 project:
Tại của sổ terminal hoặc bash, gõ (chọn blank):
expo init AwesomeProject
cd AwesomeProject
npm start # you can also use: expo start
hoặc
expo init AwesomeProject
cd AwesomeProject
yarn start # you can also use: expo start
3. Chạy ứng dụng React Native trên Expo Client
- 🤖 Android Play Store - Android Lollipop (5) and greater.
- 🍎 iOS App Store - iOS 10 and greater.
4. Homeworks
https://www.figma.com/file/kUPJvUtB8ch6f9frDKn97I/Eatme-Food-Delivery-UI-Kit?node-id=58%3A30
- https://reactnative.dev/
- https://reactnative.dev/docs/getting-started
- https://reactnative.dev/docs/environment-setup
Get started: Select tab: React Native CLI Quickstart
npx react-native init AwesomeProject
cd AwesomeProject
yarn android
Install Package: At root folder of project, open terminal (Ctrl + ` ), type:
npm install --save prop-types
hoặc
yarn add prop-types
2.1.3. Xem lại các ví dụ tại Session02
2.2.1 State: https://reactnative.dev/docs/state
2.2.3 Handling Touches: https://reactnative.dev/docs/handling-touches
- https://reactjs.org/docs/state-and-lifecycle.html
- Theory: https://reactjs.org/docs/react-component.html
- Diagram: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
- add react-native-vector-icons
yarn add react-native-vector-icons
Open: android/app/build.gradle
Go to end of file: paste: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
-
Height and Width: https://facebook.github.io/react-native/docs/height-and-width https://facebook.github.io/react-native/docs/dimensions
-
Layout with Flexbox: https://facebook.github.io/react-native/docs/flexbox
-
ImageBackground: https://reactnative.dev/docs/imagebackground
-
StatusBar: https://reactnative.dev/docs/statusbar
-
Packages:
react-native-vector-icons: https://github.com/oblador/react-native-vector-icons
https://github.com/react-native-community/react-native-linear-gradient
react-native-svg
Browse Icons: https://oblador.github.io/react-native-vector-icons/
Face Stock: http://pravatar.cc/
Stock: http://thestocks.im/
- ScrollView: https://reactnative.dev/docs/using-a-scrollview
- ListView: https://reactnative.dev/docs/using-a-listview
- FlatList: https://reactnative.dev/docs/flatlist
- SectionList: https://facebook.github.io/react-native/docs/sectionlist
- Networking: https://facebook.github.io/react-native/docs/network
- Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
- Axios Package: https://github.com/axios/axios
- JSON samples: https://jsonplaceholder.typicode.com/
- Download POSTMAN Tool: https://www.postman.com/downloads/
- API Practices:
- https://training.softech.cloud/api/users
+ Description: Get all users
+ Method: GET
- https://training.softech.cloud/api/users/?id
+ Description: Get a user by id
+ Method: GET
+ Params ?id is indentity of user
+ Example: https://training.softech.cloud/api/users/607794d7754c104db4e4b379
- https://training.softech.cloud/api/users/login
+ Description: Login
+ Method: POST
+ Body: {"email": "[email protected]", "password": "123"}
- https://training.softech.cloud/api/users/register
+ Description: Register a new user
+ Method: POST
+ Body: {"email": "[email protected]", "password": "1234", "fullname": "Your Name"}
-- https://training.softech.cloud/api/users/forgot-password
+ Description: Forgot password
+ Method: POST
+ Body: {"email": "[email protected]"}
-- https://training.softech.cloud/api/users/change-password
+ Description: Change password
+ Method: POST
+ Body: {"email": "[email protected]", "password": "1234", "newPassword": "4321"}
-- https://training.softech.cloud/api/users/?id
+ Description: Delete a use by id
+ Method: DELETE
+ Params ?id is indentity of user
+ Example: https://training.softech.cloud/api/users/607794d7754c104db4e4b379
EATME:
Categories
- https://training.softech.cloud/api/categories
Products
- https://training.softech.cloud/api/products/popular
- https://training.softech.cloud/api/products/recommended
Riders - Reviews:
- https://github.com/ngothanhtung/ReactNative-Tutorials/tree/master/Batch09/ExpoExamples/src/Session06/HomeWorks/ReviewRider
SPACEX:
- https://github.com/r-spacex/SpaceX-API/blob/master/docs/v4/README.md
POSTMAN:
- Notes: POSTMAN: Method: POST, Body: Raw => JSON
- Basic Hooks
- useState (https://reactjs.org/docs/hooks-state.html)
- useEffect (https://reactjs.org/docs/hooks-effect.html)
- Additional Hooks
- useCallback
- useMemo
- useRef
- Advanced Hooks
- useContext
- useReducer
- Step 1 (Core): npm install @react-navigation/native
- Step 2 (Expo):
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
- npm install @react-navigation/stack
-
Setup (Important):
-
StackNavigation
-
TabNavigation
https://reactnavigation.org/docs/material-bottom-tab-navigator
-
DrawerNavigation
-
Nesting Navigatord
- React Native Papers
- React Native Elements
- NativeBase
- AsyncStorage (https://github.com/react-native-community/async-storage)
- moment / numeral / lodash
- Working with form: Formik (https://jaredpalmer.com/formik/docs/guides/react-native)
- Working with entry data validation: Yup (https://github.com/jquense/yup)
- KeyboardAvoidingView: https://reactnative.dev/docs/keyboardavoidingview
- https://console.firebase.google.com/
- Login / Register a Google account
- Create a firebase project
- Install package React Native Firebase: https://rnfirebase.io/
- Add an application in this project (Example: Android application).
- Download google-service.json
- Go to project dashboard
- Go to project setting: Project Overview -> Setting Icon -> Project settings
- Add mobile app: Your apps -> Select android app -> type package name: com.softech.jobs, app name: Softech Jobs -> Click Button [Register app]
- Download the google-services.json file and place it inside of your project at the following location:
/android/app/google-services.json.
- Add the google-services plugin as a dependency inside of your /android/build.gradle file:
buildscript {
dependencies {
// ... other dependencies
classpath 'com.google.gms:google-services:4.2.0'
// Add me --- /\
}
}
- Execute the plugin by adding the following to the very bottom of your /android/app/build.gradle file:
apply plugin: 'com.google.gms.google-services'
- Build & Run
- Error: The number of method references in a .dex file cannot exceed 64k API 17
- Link: (https://stackoverflow.com/questions/36785014/the-number-of-method-references-in-a-dex-file-cannot-exceed-64k-api-17)
- Xử lý lỗi: Just add these lines in the app/build.gradle:
android {
defaultConfig {
...
// Enabling multidex support.
multiDexEnabled true
}
...
}
- On the right menu of console.firebase.google.com -> Choose [Database] -> Create database
- Link (https://rnfirebase.io/firestore/usage#main)
- Setup:
# Install & setup the app module
yarn add @react-native-firebase/app
# Install the firestore module
yarn add @react-native-firebase/firestore
A QuerySnapshot returned from a collection query allows you to inspect the collection, such as how many documents exist within it, access to the documents within the collection, any changes since the last query and more. To access the documents within a QuerySnapshot, call the forEach method:
import firestore from '@react-native-firebase/firestore';
firestore()
.collection('Users')
.get()
.then(querySnapshot => {
console.log('Total users: ', querySnapshot.size);
querySnapshot.forEach(documentSnapshot => {
console.log('User ID: ', documentSnapshot.id, documentSnapshot.data());
});
});
A DocumentSnapshot is returned from a query to a specific document, or as part of the documents returned via a QuerySnapshot. The snapshot provides the ability to view a documents data, metadata and whether a document actually exists. To view a documents data, call the data method on the snapshot:
import firestore from '@react-native-firebase/firestore';
firestore()
.collection('Users')
.doc('ABC')
.get()
.then(documentSnapshot => {
console.log('User exists: ', documentSnapshot.exists);
if (documentSnapshot.exists) {
console.log('User data: ', documentSnapshot.data());
}
});
- Cloud Firestore: https://firebase.google.com/docs/firestore/quickstart
- Query Data: https://firebase.google.com/docs/firestore/query-data/queries
- Get Data: https://firebase.google.com/docs/firestore/query-data/get-data
- Add / Update Data: https://firebase.google.com/docs/firestore/manage-data/add-data
- Delete Data: https://firebase.google.com/docs/firestore/manage-data/delete-data
- Realtime Update: https://firebase.google.com/docs/firestore/query-data/listen
- Dashboard -> Authencation -> Sign-in Method -> Enable: Email / Password, Phone
- Docs: https://rnfirebase.io/docs/v5.x.x/auth/getting-started
- Refs: https://rnfirebase.io/docs/v5.x.x/auth/reference/auth
- Phone Authentication:
- Dashboard -> Authencation -> Sign-in Method -> Phone numbers for testing (optional)
- Get SHA-1 key: https://stackoverflow.com/questions/27609442/how-to-get-the-sha-1-fingerprint-certificate-in-android-studio-for-debug-mode or cd android && ./gradlew signingReport
- Dashboard -> Project Settings -> General -> Select Android App -> Paste SHA-1
- Enable Android Device Verification (Real devices)
- https://firebase.google.com/docs/auth/android/phone-auth#enable-app-verification
- https://console.cloud.google.com/apis/library/androidcheck.googleapis.com?authuser=1&project=reactnative-firebase-examples&folder=&organizationId=
- Setup firebase tools:
- npm install -g firebase-tools
- yarn add global firebase-tools
- Login / Logout: firebase login / firebase logout
- Init project: (Project folder)
- Terminal: firebase init =>
- OPTIONS: => Choose Cloud Function =>
- OPTIONS: => Choose Project =>
- OPTION: => Choose Language => Javascript
- SELECT DEFAULTS
- OPTIONS => DONE
- Hello Function: Uncomment
- Deploy: firebase deploy
- Test API
https://rnfirebase.io/storage/usage
https://documentation.onesignal.com/docs/react-native-sdk-setup
- Login at: https://app.onesignal.com/login
- Create an OneSignal App: Choose Google Android (FCM) + [Next]
- Open Firebase dashboard, project settings and copy: Firebase Server Key & Firebase Sender ID, then paste to OneSignal Panel
- Next and Close panel.
- At OneSignal Dashboard: Choose menu Audience (on the top navigation bar), and then choose All Users and add a user to Test Users
- At OneSignal Dashboard: Choose menu Messages (on the top navigation bar), and send a test message to a device.
- Url: https://onesignal.com/api/v1/notifications
- Method: POST
- Headers:
Content-Type: application/json
Authorization: Basic <REST API KEY của OneSignal>
- Body (Raw -> JSON):
{
"app_id": "YOUR ONE SIGNAL APP ID",
"include_player_ids": [
"user id of one signal"
],
"large_icon": "ic_action_cloud_upload",
"android_group": "group-1",
"android_group_message": {"en": "You have $[notif_count] new messages"},
"ios_badgeType": "Increase",
"ios_badgeCount": 1,
"thread_id": 1,
"summary_arg_count": 1,
"summary_arg": "React Native",
"data": {
"foo": "bar"
},
"headings": {
"en": "React Native - Thông báo lịch thi"
},
"contents": {
"en": "Nội dung thông báo"
},
"big_picture": "https://images.unsplash.com/photo-1491672736592-902f2f08d0b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1331&q=80",
"ios_attachments": {
"id1": "https://images.unsplash.com/photo-1530555328699-3ac77bc66854?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
}
}
https://documentation.onesignal.com/reference/create-notification
- Theory: https://redux.js.org/introduction/getting-started
- Usage with React: https://react-redux.js.org
- Diagram: https://kuanhsuh.github.io/2017/09/28/What-s-Redux-and-how-to-use-it/
- Install packages: redux, react-redux:
npm install --save redux || hoặc || yarn add redux
npm isntall --save react-redux || hoặc || yarn add react-redux
npm isntall --save --dev redux-devtools-extension || hoặc || yarn add --dev redux-devtools-extension
- Coding:
- actions / types.js (constants)
- actions / index.js
- reducers / index.js
- components
- root reducers (store.js)
- store (store.js)
- App.js (config Provider with store)
- Debug:
- Download tool: https://github.com/jhen0409/react-native-debugger/releases
- redux-thunk
- Install: npm install --save redux-thunk
- Actions: PENDING, SUCCESS, ERROR
- Async Action (axios / fetch)
- Config middleware (store.js)
- redux-saga
- https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html
- Install: npm install --save redux-saga / yarn add redux-saga
- sagas
- rootSagas
- Android icon: https://romannurik.github.io/AndroidAssetStudio/index.html
- iOs icon: https://appicon.co/
- https://facebook.github.io/react-native/docs/signed-apk-android
- https://play.google.com/apps/publish
- react-native-firebase
- rnfirebase.io
- react-navigation
- npm install --save react-navigation
- npm install --save react-native-gesture-handler
- react-native link react-native-gesture-handler
- react-native-vector-icons
- npm install --save react-native-vector-icons
- react-native link react-native-vector-icons
- redux-saga
- redux
- react-redux
- redux-saga
- UI: react-native-elements / react-native-paper / nativebase
- npm install react-native-elements --save
-
axios
-
Open File:
- Open Camera / Photos gallery
- Offical Site: https://expressjs.com
- Install CLI tool: https://expressjs.com/en/starter/generator.html
- Basic Routing: https://expressjs.com/en/starter/basic-routing.html
- Run server forever: http://pm2.keymetrics.io/ (npm install pm2 -g)
- Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development (https://nodemon.io)
- Install CLI
- Create a project with express tool
- Run project: npm start
- Expressjs: https://expressjs.com/en/starter/generator.html
- Basic Routing: https://expressjs.com/en/starter/basic-routing.html
- Routing: https://expressjs.com/en/guide/routing.html
- Mongodb: https://www.mongodb.com/download-center/community
- Tools: https://www.mongodb.com/download-center/compass
- Others: RoboMongo: https://robomongo.org/
- Nodejs Mongodb Driver: http://mongodb.github.io/node-mongodb-native/3.1/
- Databases with Express: https://expressjs.com/en/guide/database-integration.html
- All stocks: http://thestocks.im
- Font Icons: https://oblador.github.io/react-native-vector-icons
- Image Icons: https://www.flaticon.com
- Color: https://flatuicolors.com
- Face / Avatar: http://pravatar.cc
- Faces: https://uifaces.co/
- Animatable (Animation): https://github.com/oblador/react-native-animatable
- Videos: https://www.youtube.com/watch?v=kNHuLOXR5T0&list=PLWBrqglnjNl31S91FFE63DtuRc9v9LSGl
- Style Cheat Sheet https://github.com/vhpoet/react-native-styling-cheat-sheet
- FlexBox: https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent