|
| 1 | +# Contributing to the RoboJackets Mobile App |
| 2 | + |
| 3 | +## Table of Contents |
| 4 | + |
| 5 | +- [Getting Started](#getting-started) |
| 6 | +- [Running the App](#running-the-app) |
| 7 | +- [Development Workflow](#development-workflow) |
| 8 | +- [Useful Resources](#useful-resources) |
| 9 | +- [Points of Contact](#points-of-contact) |
| 10 | + |
| 11 | +## Getting Started |
| 12 | + |
| 13 | +### Prerequisites |
| 14 | + |
| 15 | +Follow the instructions to [Set Up Your Environment](URL) for React Native development. **Windows** + **Linux**: Target OS = Android, **macOS**: Target OS = iOS and Android. |
| 16 | + |
| 17 | +Also install the following: |
| 18 | + |
| 19 | +- **Node.js** 18+ and npm |
| 20 | +- **Git** |
| 21 | + |
| 22 | +Lastly, this project is a refactoring of the [RoboJackets Android App](https://github.com/RoboJackets/apiary-mobile), so it would be worthwhile to set that up. It also needs Android Studio. |
| 23 | + |
| 24 | +### Initial Setup |
| 25 | + |
| 26 | +1. **Fork and Clone** |
| 27 | +From the directory you want to clone into: |
| 28 | +```sh |
| 29 | +git clone https://github.com/RoboJackets/apiary-react-native.git |
| 30 | +``` |
| 31 | + |
| 32 | +2. **Install Dependencies** |
| 33 | +```sh |
| 34 | +npm install |
| 35 | +``` |
| 36 | + |
| 37 | +## Running the App |
| 38 | + |
| 39 | +### Step 1: Start Metro |
| 40 | + |
| 41 | +First, you will need to run **Metro**, the JavaScript build tool for React Native. |
| 42 | + |
| 43 | +To start the Metro dev server, run the following command from the root of your React Native project: |
| 44 | + |
| 45 | +```sh |
| 46 | +# Using npm |
| 47 | +npm start |
| 48 | + |
| 49 | +# OR using Yarn |
| 50 | +yarn start |
| 51 | +``` |
| 52 | + |
| 53 | +### Step 2: Build and run your app |
| 54 | + |
| 55 | +With Metro running, open a new terminal window/pane and navigate into the root of your React Native project. Then, use one of the following commands to build and run your Android or iOS app: |
| 56 | + |
| 57 | +### Android |
| 58 | + |
| 59 | +Make sure Android Studio is open. If testing on physical device, follow instructions [here](https://reactnative.dev/docs/running-on-device). If testing on virtual device, follow instructions under "Using a virtual device" [here](https://reactnative.dev/docs/set-up-your-environment?os=windows&platform=android). Then, run the following: |
| 60 | + |
| 61 | +```sh |
| 62 | +# Using npm |
| 63 | +npm run android |
| 64 | + |
| 65 | +# OR using Yarn |
| 66 | +yarn android |
| 67 | + |
| 68 | +# OR using npx |
| 69 | +npx react-native run-android |
| 70 | +``` |
| 71 | + |
| 72 | +### iOS |
| 73 | + |
| 74 | +For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). |
| 75 | + |
| 76 | +The first time you create a new project, run the Ruby bundler to install CocoaPods itself: |
| 77 | + |
| 78 | +```sh |
| 79 | +bundle install |
| 80 | +``` |
| 81 | + |
| 82 | +Then, and every time you update your native dependencies, run: |
| 83 | + |
| 84 | +```sh |
| 85 | +bundle exec pod install |
| 86 | + |
| 87 | +# OR manually |
| 88 | +cd ios |
| 89 | +pod install |
| 90 | +cd .. |
| 91 | +``` |
| 92 | + |
| 93 | +For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). |
| 94 | + |
| 95 | +```sh |
| 96 | +# Using npm |
| 97 | +npm run ios |
| 98 | + |
| 99 | +# OR using Yarn |
| 100 | +yarn ios |
| 101 | + |
| 102 | +# OR using npx |
| 103 | +npx react-native run-ios |
| 104 | +``` |
| 105 | + |
| 106 | +If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device. |
| 107 | + |
| 108 | +This is one way to run your app — you can also build it directly from Android Studio or Xcode. |
| 109 | + |
| 110 | +## Development Workflow |
| 111 | + |
| 112 | +Generally, you... |
| 113 | +1. Create a branch |
| 114 | +2. Make changes on the branch |
| 115 | +3. Push changes to origin |
| 116 | +4. Make a Pull Request (PR), requesting to merge changes |
| 117 | +5. Go through review process |
| 118 | +6. Get code merged! |
| 119 | + |
| 120 | +### Local Development on Branch |
| 121 | + |
| 122 | +- `feat/[name]`: For new features |
| 123 | +- `fix/[name]`: For bug fixes |
| 124 | +- `docs/[name]`: For doc updates |
| 125 | + |
| 126 | +1. **Create a Feature Branch** |
| 127 | +```sh |
| 128 | +git checkout -b feature/your-feature-name |
| 129 | +``` |
| 130 | + |
| 131 | +2. **Make Your Changes** |
| 132 | +- Follow instructions above to run app and test changes |
| 133 | +- Make sure linter passes. (Linter checks for code style.) |
| 134 | + |
| 135 | +3. **Commit Your Changes** |
| 136 | +```sh |
| 137 | +git add . |
| 138 | +git commit -m "commit title here" |
| 139 | +``` |
| 140 | + |
| 141 | +4. **Push and Create PR** |
| 142 | +```sh |
| 143 | +git push origin feat/your-feature-name |
| 144 | +``` |
| 145 | + |
| 146 | +### Pull Requests |
| 147 | + |
| 148 | +After you've pushed your changes, go to the "Pull requests" tab of the Github repository and make a new pull request, with compare: set to your branch. There is a template for you to fill out. |
| 149 | + |
| 150 | +After you make the PR, add Reviewers under the Reviewers -> Settings cog menu. (If the option does not appear, message on Slack or let us know in our meetings.) |
| 151 | + |
| 152 | +This is the general process by which features are merged into the project! |
| 153 | + |
| 154 | +### Legal |
| 155 | + |
| 156 | +This project is open-source and is supported by many open-source libraries. |
| 157 | +The app includes a notice of these dependencies which must be updated when a |
| 158 | +library is added. Run the below command whenever adding a dependency to update |
| 159 | +the OSS notice: |
| 160 | + |
| 161 | +```sh |
| 162 | +npx react-native legal-generate |
| 163 | + |
| 164 | +# OR with yarn |
| 165 | +yarn react-native legal-generate |
| 166 | +``` |
| 167 | + |
| 168 | +## Useful Resources |
| 169 | + |
| 170 | +- [Git Command Cheat Sheet](https://git-scm.com/cheat-sheet) |
| 171 | +- [Resolving Git Merge Conflicts](https://docs.github.com/en/pull-requests/how-tos/merge-and-close-pull-requests/resolving-a-merge-conflict-using-the-command-line) |
| 172 | +- [Linux Command Cheat Sheet](https://linux-commands.labex.io/) |
| 173 | +- [React Native Basics](https://reactnative.dev/docs/getting-started) |
| 174 | + |
| 175 | +## Points of Contact |
| 176 | + |
| 177 | +Slack channels: |
| 178 | +- **#web-app-development**: For questions about the development of this app |
| 179 | +- **#apiary-mobile**: For IT questions about mobile app, provisioning iOS dev licenses |
| 180 | +- **#apiary**: For questions about the RoboJackets website and APIs |
0 commit comments