sharewaves

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!

🌊 Getting Started Developing

Useful reference links:

1. Download earlier versions of Xcode
2. Set up Visual Studio Code for Mac
3. Getting started with React Native
4. 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)

Setting Up Environment

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 and watchman
• 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 with 10.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

Cloning the Repository

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, then npx 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, open sharewaves.xcworkspace (I suppose we are using CocoaPods). Then you can follow the steps as usual. You may need to run pod install in install iOS dependencies (pods) in the ios folder.

Setting Up VS Code (Optional, but Recommended)

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) with Cmd + Shift + P.

💫 Developing Guide

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.

Branching and Pull Requests

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>

React Native Tutorials

Since the starter code was removed/cannibalized, you still may want to check out the tutorials linked!

• Basics
• Style
• Layout, i.e. Flexbox
• Components
• Navigation
• Networking
• Help