Green Up Vermont

Summer of Civic Hacking A mobile app for Vermont's Green Up Day.

Table of Contents

• Setting Up Your Development Environment on Windows

  • Install Python 2
  • Install Node
  • Install and Configure Atom
  • Install Meld
  • Install and Configure Git
  • Install Java 8 JDK
  • Install React Native
  • Install and Configure Android Studio
  • Set the ANDROID_HOME Environment Variable
  • Create a New Android Virtual Device
  • Clone the Green Up Vermont repository
  • Run the Project

• Setting Up Your Development Environment on Mac

  • Install Python 2 on Mac
  • Install Node on Mac
  • Install and Configure Atom on Mac
  • Install Meld on Mac
  • Install and Configure Git on Mac
  • Install Java 8 JDK on Mac
  • Install React Native on Mac
  • Install XCode on Mac
  • Install and Configure Android Studio on Mac
  • Set the ANDROID_HOME Environment Variable on Mac
  • Create a New Android Virtual Device on Mac
  • Clone the Green Up Vermont repository on Mac
  • Run the Project on Mac

Setting Up Your Development Environment on Windows

These instructions are for Windows 10 - 64 bit.

Install Python 2

1. Download the Python2 installer here : https://www.python.org/ftp/python/2.7.13/python-2.7.13.amd64.msi
2. Launch the installer.

3. Selected the default install location

4. On the "Customize Python" screen, select "Add python.exe to Path." and then select "Will be installed on local hard drive"

5. Continue through the wizard using the default settings

6. Verify that Python 2 is installed by opening a terminal. You open a terminal by typing "cmd" in the windows search bar and choosing "command prompt." in the terminal type python --version you should see "Python 2.7.13"

Install Node

1. Download the Node installer here : https://nodejs.org/dist/v7.10.0/node-v7.10.0-x86.msi

2. Launch the installer.

3. Click through the installer accepting all the default settings.

4. Verify that Node is installed by opening a terminal and typing node --version you should see "v7.10.0"

Install and Configure Atom

1. Download the Atom installer here : https://atom.io/download/windows_x64

2. Launch the installer and acknowledge that you want to run the file.

3. Click through the installer accepting all the default settings.

4. Launch Atom by typing "atom" in the search bar. You may want to add Atom to your task bar by right-clicking the Atom icon and selecting "Pin to taskbar"

5. You will need to install the Nuclide package which is an IDE package for React-Native created by Facebook. On the Atom Welcome Guide Screen, click "Install a Package"

6. In the Settings search box type "nuclide" an click "Packages". Then click "install" for "nuclide" and "nuclide-format-js"

Install Meld

1. Download the Meld installer here : https://download.gnome.org/binaries/win32/meld/3.16/Meld-3.16.2-win32.msi

2. Launch the installer.

3. Click through the installer accepting all the default settings.

4. If you want, pin Meld to your taskbar like you did Atom.

Install and Configure Git

1. Download the Git installer here : https://git-scm.com/download/win

2. Launch the installer.

3. Click through the installer accepting all the default settings.

4. Verify that Node is installed by opening a terminal and typing node --version you should see "git version 2.14.0.windows.1"

5. Set your name and email in Git using the following commands in the terminal.

git config --global user.name "YOUR NAME"
git config --global user.email [email protected]

Install Java 8 JDK

1. Go to the Download page for the Java 8 JDK here : http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2. Accept the licensing agreement and click the download link for Windows x64.

3. Launch the installer.

4. Click through the installer accepting all the default settings.

5. Verify that Java is installed by launching a terminal window and typing java -version. You should should see 'java version "1.8.0_131"'

Install React Native

1. Open a terminal window and install React Native Command Line Interface using the Node Package Manager by typing npm install -g react-native-cli

2. Verify that React Native is installed by typing react-native -version You should see "react-native-cli: 2.0.1"

Install and Configure Android Studio

1. Go to the download page for Android Studio here : https://developer.android.com/studio/index.html

2. Click the first download button and accept the licensing agreement and click the second download button to begin the download.

3. Launch the installer

4. On the "Choose Components" screen, select all components for installation.

5. Accept the License Agreement

6. On the "Configuration Settings" screen, change the "Android SDK Installation Location" to C:\Android\sdk. This will avoid a possible problem later.

7. Accept the default menu folder. When the initial installation is finished, start Android Studio.

8. Begin configuring Android Studio by clicking "next" on the initial screen

9. Choose "Custom" for the type of setup.

10. Choose which theme you prefer.

11. Install the AVD and HAXM. Make sure the boxes next to all of the following are checked:

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

Then, click "Next" to install all of these components.

12. Set your RAM allocation to 2048 MiB (2Gib)

13. Verify your settings and click "Finish"

14. We will now need to configure an Android emulator. To get to the main screen, select "start a new Android Stuoio project"

15. We won't be using this project for anything, so accept the default name. You may need to change the project location if your home folder contains spaces. If set the project location to "C:\MyAndroidProjects\MyApplication".

16. Uncheck all except "Phone and Tablet". The Minimum SDK should be set at "API 15: Android 4.0.3 (IceCream Sandwich)""

17. Choose "Basic Activity"

18. Click "Finish"

19. If you get a firewall warning click "Allow access"

20. You should now be at the main screen. We need to install the correct SDK versions. Select Tools >> Android >> SDK Manager

23. Select the "SDK Platforms" tab Click the "Show Package Details" checkbox near the bottom right and the select the following under "Android 6.0 (Marshmallow)"

• Google APIs
• Android SDK Platform 23
• Sources for Android 23
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atome_64 System Image

24. Select the "SDK Tools tab Click the "Show Package Details" checkbox near the bottom right. Select the following

• 23.0.1
• 23.0.3
• 25.0.0
• 25.0.3

25. Click "OK" to start the installation.

Set the ANDROID_HOME Environment Variable

1. We need to set the ANDROID_HOME path variable. To start this open up the control panel, You can find it by typing "Control Panel" in the search bar. Then click "System and Security"

2. Select "System"

3. Select "Advanced system settings"

4. Choose the "Advanced" tab and click the "Environment Variables..." button

5. Click the "New..." button under "User variables"

6. Set the variable name to "ANDROID_HOME" and the variable value to "C:\Android\sdk". If this is not where you installed the sdk you will need to point this value to the correct path.

7. Verify that your ANDROID_HOME variable is set correctly.

Create a New Android Virtual Device

1. Open Android Studio and select Tools >> Android >> AVD Manager

2. Click the "Create Virtual Device" button

3. Select the Nexus 5x device under the Phone category, then click "Next"

4. Under the "x86 Images" tab, choose the "Marshmallow API 23 | ABI | x86_64" Image. Click "Next"

5. Change the AVD Name to "GreenUpVT" and click "Finish"

6. Verify that you created a new device.

Clone the Green Up Vermont repository

1. You should already be here, but if you aren't go to the Green Up Vermont GitHub page here : https://github.com/johnneed/GreenUpVermont

2. Click the green "Clone or download" button and then click the small "Copy to clipboard" icon to the right of the repository url.

3. Open a terminal window, then type "git clone" and then hit ctrl v to paste the url from the repository

4. After the cloning finishes, Install the project dependencies. First navigate into the project folder by typing "cd GreenUpVermont" and then install the packages by typing "npm install"

Run the Project

1. Start Android Studio. Then start your GreenUpVT virtual device by selecting Tools >> Android >> AVD Manager, and then clicking the green arrow under actions next to your virtual device. It may take a couple of minutes for the emulator to launch.

2. Open a terminal and cd into the GreenUpVermont folder. Run the command react-native start

3. Leave the first terminal running and open a second terminal window. Use the cd command to navigate into the GreenUpVermont folder. Run the command react-native run-android the project should build and launch in the Virtual Device.

Setting Up Your Development Environment on Mac

Install Python 2 on Mac

Install Node on Mac

Install and Configure Atom on Mac

Install Meld on Mac

Install and Configure Git on Mac

Install Java 8 JDK on Mac

Install React Native on Mac

Install XCode on Mac

Install and Configure Android Studio on Mac

Set the ANDROID_HOME Environment Variable on Mac

Create a New Android Virtual Device on Mac

Clone the Green Up Vermont repository on Mac

Run the Project on Mac