Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/grimmer0125/maolife
This React Native iOS/Android app lets you record a cat/dog daily respiratory rate to get better long-term medical care (some heart and lung diseases, e.g. cat's HCM), sharing record permission OK
https://github.com/grimmer0125/maolife
android facebook-login firebase i18n ios native-base react-navigation redux redux-thunk
Last synced: 2 months ago
JSON representation
This React Native iOS/Android app lets you record a cat/dog daily respiratory rate to get better long-term medical care (some heart and lung diseases, e.g. cat's HCM), sharing record permission OK
- Host: GitHub
- URL: https://github.com/grimmer0125/maolife
- Owner: grimmer0125
- License: mit
- Created: 2017-04-16T14:46:17.000Z (almost 8 years ago)
- Default Branch: develop
- Last Pushed: 2023-01-04T05:14:46.000Z (about 2 years ago)
- Last Synced: 2024-04-28T04:58:17.022Z (9 months ago)
- Topics: android, facebook-login, firebase, i18n, ios, native-base, react-navigation, redux, redux-thunk
- Language: JavaScript
- Homepage:
- Size: 6.48 MB
- Stars: 3
- Watchers: 3
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# maolife
It has only been developed on Mac. However Windows and Linux should work
## Features, Possible feature backlog, Screenshots
See the wiki, https://github.com/grimmer0125/maolife/wiki
## app store link
Android store (beta): https://play.google.com/store/apps/details?id=com.lifeoverflow.maolife
iOS: https://itunes.apple.com/us/app/maolife/id1397714182
## UI components
It mainly uses https://nativebase.io/.
## Library Version and environment requirement
The development was setup on 10.12 and has been upgraded to 10.13 with Xcode 9 and latest React version. 10.12 & 10.11 is not tested for the latest code.
- macOS: 10.13.5 (High Sierra)
- Xcode: 9.4 (Its version may affect the versions about React Native and some native npm library)
- Android Studio: 3.1
- Gradle version: 4.1
- Android Gradle plugin version: 3.0.1
- React Native: 0.55.4 (from v0.49, a breaking change is, there is no more index.Android.js and index.iOS.js, only index.js)
- React: 16.3.1 (Its version will affect - native-base and react-navigation)
- native-base: 2.4.5
- react-navigation: 2.0.4.
- react-native-fbsdk: 0.7.0
- FacebookSDK-iOS (need manually download): 4.33.0
- FacebookSDK-Android: 4.33.0
- Python: 2.7 (Some native npm libraries need Python to build)
### (optional) Create your Firebase project if you are not using this project's Firebase project
ref: https://Firebase.google.com/docs/web/setup
1. Create a Firebase project in the [Firebase console](https://console.Firebase.google.com/)
2. Authentication -> Enable Facebook. Then record **Oauth redirect URI** for the following Facebook setting.
3. Click Add Firebase to your web app to get its **config information**.
## Setup Firebase config
### Firebase web console config
1. Create a project, then choose Realtime Database.
2. Enable Facebook & Email login in Authentication.
3. Change Database rule as the following
```
{
"rules": {
".read": "auth != null",
".write": "auth != null",
"users":{
".indexOn":["KID"]
}
}
}
```
### Change the fields of `firebaseConfig.js`:
```
apiKey: "",
authDomain: ".Firebaseapp.com",
databaseURL: "https://.Firebaseio.com",
storageBucket: ".appspot.com",
messagingSenderId: "",
```
## iOS
### Installation
**Node 10 can not be used since one of dependent package, grpc will fail to install**
**It seems that firebae 5.0.4 will let Android built app can not start (Objects are not valid as a React child) but "debug JS remotely" works**
**It seems that if Android Gradle upgrades to 3.1.3 from 3.0.1 and gradle to 4.4 from 4.1, Android Studio will fail to build. (react-native run-android is OK)**
Reference:
https://facebook.github.io/react-native/docs/getting-started.html
Summary Step:
1. install homebrew from https://brew.sh. (terminal: `type brew` to check if you have)
2. brew install node (or you can install Node from https://nodejs.org/en/, in your terminal, type `node --version` to check your version, should use Node 8 or newer)
3. brew install watchman
4. npm install -g react-native-cli
5. install Xcode 9 and its command line tools, follow https://facebook.github.io/react-native/docs/getting-started.html#xcode
6. git clone this project, https://github.com/grimmer0125/Kiteretsu
7. cd into this project folder, `npm install`
8. (optional) `node node_modules/native-base/ejectTheme.js` (native-base)
9. `react-native link` (required by native-base, react-native-vector-icons, react-native-fbsdk, react-native-svg)
### Download Facebook SDK on iOS
ref: https://developers.facebook.com/docs/ios/getting-started/#download
Download Facebook SDK and uncompress it to `~/Documents/FacebookSDK`
### (optional) Config Facebook project on Facebook site and iOS project if you are not using this project's Facebook application settings
Follow this guide: https://developers.facebook.com/docs/react-native/configure-ios
Keypoint:
1. On https://developers.facebook.com/, after adding **Facebook login** in your Facebook Application, you need to setup OAuth Redirect URI gotten from **Firebase**.
### How to run in on iDevice simulator
1. in project folder, `npm run ios` or `react-native run-ios`.
### How to run on real iPhone
Steps:
https://facebook.github.io/react-native/docs/running-on-device.html
Start from xcode 7, no need paid developer account to run on real device !! Guide:
http://blog.ionic.io/deploying-to-a-device-without-an-apple-developer-account/
## Android + Mac (will complement later)
Keypoint to setup Facebook:
1. Follow https://developers.facebook.com/docs/react-native/configure-android-current
2. Need *a development key hash for the development environment of each person who works on your app (cover in 1.).* Release key is needed, too. (This release key is to authorize to use Facebook, not Android release key)
3. Enable single sign https://developers.facebook.com/docs/facebook-login/android/#expresslogin
## Register test users or developers/testers on Facebook developer site
Only the Facebook accounts which are registered on Facebook developer site can login successfully.
### Tips on Android
You need to launch your Android emulator (Android Virtual Device) first, then `npm run android` to install and run. The default React Native command will not launch Android emulator automatically.
You can use the following ways to launch emulators
1. Android Studio
2. In terminal, type `emulator @YOUR_VIRTUAL_DEIVCE` & or change the VIRTUAL_DEIVCE name in `npm script (qemu)` then you can type `npm run qemu` in start your emuator..
It is possible to directly use Android Studio to launch and debug. In this case, you may encounter `Unable to load script from assets 'index.android.bundle'`, the relative discussion: https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows/47035389.
## How to debug
Follow https://facebook.github.io/react-native/docs/debugging.html to have remote JS debugging. You can setup breakpoint on Nuclide or chrome debugger.
## Debug React Widget
1. Use Nuclide's "React Native Inspector".
2. Use https://github.com/jhen0409/react-native-debugger. (which also includes redux-devtoolsy). p.s. And you can not use it to debug react widget and use http://localhost:8081/debugger-ui to see JavaScript logs at the same time.
3. Standalone [react-devtools](https://facebook.github.io/react-native/docs/debugging.html#react-developer-tools)
## Debug Redux
https://github.com/zalmoxisus/remote-redux-devtools supplies a way to use redux server to get redux'store. It needs
**!! [201806 update] Just use react-native-debugger and it works. The code already set up the according redux store part (same setting as remote-redux-devtools) !!**
**!! [201712 update] remote-redux-devtools-on-debugger is not compatible with the latest React v0.51 and is removed from this project !!**
1. ~~modify your code. follow https://github.com/zalmoxisus/remote-redux-devtools or https://github.com/jhen0409/remote-redux-devtools-on-debugger to setup. I tried the latter's `remote-redux-devtools`'s setting and used its local redux server and integrated react debugging for react native.~~
2. ~~prepare a local redux server (localhost) or a WAN remote server.~~
3. ~~Then just use browser to see the redux'store (http://localhost:8000) or use specific web page/app to Redux's store.~~
~~You can use `remote-redux-devtools`' guide to prepare your own local server.~~
~~Or follow https://github.com/jhen0409/remote-redux-devtools-on-debugger to cover the above 1~3. It comes with a local redux server and also integrates redux with react debugger page. So just use http://localhost:8081/debugger-ui to see React's log and Redux's store at the same time.~~
## Offline build on Devices
`offline` means you can run this app without any dev servers/environment/Mac.
### iOS
1. Choose maolife-release scheme.
2. Connect your iPhone to Mac.
3. Build
possible step: only extra run `npm run ios-offline-jsbundle` before build step if you see `main.jsbundle does not exist` and build fail.
### Android
1. connect your Android device to Mac.
2. use `npm run android-release` to build
possible step: only extra run `npm run android-offline-jsbundle` before build step if you see `unable to load script from assets 'index.android bundle'` and build fail.
## Deploy
iOS:
1. Choose maolife-release scheme.
2. Product -> Archive
Android
1. cd android
2. ./gradlew assembleRelease