CS 147 Aut 2019 | Team Members: @garrickf (Garrick), @graceannewang (Grace), @singerg22 (Gen)
This repo contains the React Native UI for sharewaves, an application designed for CS 147: Human Computer Interaction. The problem space was "digital democracy", and we created a solution to provide a pathway from news reading to immediate, crowdsourced action on popular issues. More information (including the design process) can be found here!
Useful reference links:
- Download earlier versions of Xcode
- Set up Visual Studio Code for Mac
- Getting started with React Native
- Running React Native on your device
Garrick's dev machine is pretty old, but it works. Here's the setup:
- MacOS High Sierra
10.13.6
- Xcode
10.1
- iOS
12.0
Simulator - VS Code
1.40.0
with some extensions (GitLens, Prettier, ESLint)
Follow the instructions for "React Native CLI Quickstart" in link 3 above up to the point where you create a new project. This sets up you development environment. In brief:
- Install
node
andwatchman
- Install a compatible version of Xcode (at least
9.4
or newer). Link 1 above lets you install previous versions of Xcode, which is useful if you need a newer version of Xcode but don't want to update MacOS. Garrick had success with10.1
. This takes up ~14GB of space! - Install Xcode Command Line Tools and an iOS Simulator (Garrick did iOS
12.0
). This takes up ~2GB of space! - Install
cocoapods
ruby
Next, in the directory you want your project to appear, clone the repository by calling (assuming HTTPS):
git clone https://github.com/garrickf/cs147-app.git
This will take the contents of this repo and put into a local folder you can cd
into. Once inside your project directory, install all dependencies with npm install
. Then, you can run:
npx react-native run-ios
to run the app in an iOS simulator. If you followed everything above, this step should work. Running the app in an emulator can be pretty laggy, so consider following link 4 above to run the app on your own device!
Note 1: link 4 (i.e. Deploy to iPhone via Xcode) didn't work for Garrick (weird linker errors), but this StackOverflow post seemed to have better results: run
npm install ios-deploy
, thennpx react-native ios-deploy --device <YOUR_DEVICE>
.
Note 2: When installing on your device, you may need to go to
Settings > General > Profiles and Device Management
to trust and open developer apps.
Note 3: Garrick found something re: link 4 (i.e. Deploy to iPhone via Xcode). Instead of opening
sharewaves.xcodeproj
, opensharewaves.xcworkspace
(I suppose we are using CocoaPods). Then you can follow the steps as usual. You may need to runpod install
in install iOS dependencies (pods) in theios
folder.
VS Code is a good development environment that can be extended with functionality for linting, formatting, and git
integration. Link 2 above takes you through getting set up. A few nice things to note:
- You can view your current branch, inspect diffs for changed files, and stage and commit all within the IDE!
- You can search for files quickly with the shortcut
Cmd + P
, or execute commands (this is called the Command Palette) withCmd + Shift + P
.
When making changes to the repo, careful not to develop directly off of the branch master
! This branch contains working code that other team members may be basing changes off of.
The best thing to do is to create a local branch, develop and save changes there and create a pull request against master
when you have a big thing ready to merge in.
To make a new branch off of master
, run:
git checkout -b <YOUR_BRANCH_NAME>
To push your new changes, run:
git push --set-upstream origin <YOUR_BRANCH_NAME>
Since the starter code was removed/cannibalized, you still may want to check out the tutorials linked!