708's Wiki

Dudes of 708's knowledge base for getting started and tools we use

Edit the wiki on GitHub 708innovations/wiki

Visit our homepage dudesof708.com

Sputnik App

Back to homepage • software development guides

Table of Contents

Prerequisites

You’ll need the following already set up in order to follow the setup portion of this guide:

Setup

You can go the table of contents in order to jump to any section of setup.

Node.js Setup

  1. Navigate to the Node.js website and download the latest LTS installer. You are encouraged to download any additional tools reccommended by Node.js.

Note: if you are a Linux user, you may have to access a NodeSource distribution. It is assumed that if you are a Linux user you know what you are doing.

Expo Setup

  1. Open a Terminal and run

    npm i expo-cli --global

  2. Log in to expo with the command:

    expo login

    This will bring up a page in your web browser where you can either login or create an account on Expo’s servers. Join the Dudes of 708 development team (owner: Gideon Tong).

Device Setup

If you have an Android device, jump to the Android device setup section. If you have an iOS device, jump to the iOS device setup section. You can set up both if you have both.

Android Device Setup

  1. Download the Expo Go app from the Play Store.
  2. Log into your Expo account. Every step after this is optional.

Expo Go on the Play Store

Optional Steps:

  1. Download the Android SDK Platform Tools onto your computer.
  2. Extract the folder to a folder on your computer you won’t easily delete, like C:\Software\platform-tools on Windows or /home/<username>/platform-tools on macOS or Linux.
  3. Open a Terminal or Command Prompt window and navigate to the folder you extracted using the cd (change directory) command. For example, if I extracted it to C:\Software\platform-tools, I would write cd C:\Software\platform-tools.
  4. On your Android device, enable Developer Options. First navigate to Settings, and scroll to the bottom and find About Phone.
  5. Tap Build Number seven times. You should see a toast telling you Developer Mode is now enabled.
  6. Navigate back one screen, and you’ll find a Developer Options button. Tap it, and enable the option that says something like Enable USB debugging. The exact wording may depend on your device and version of Android.
  7. Plug your Android device into your computer. In your Terminal, type adb devices on Windows or ./adb devices for macOS and Linux computers.
  8. If prompted on your Android device, accept the prompt to allow USB debugging on your device.

iOS Device Setup

  1. Download the Expo Go app from the App Store.
  2. Log into your Expo account.

If you own a Mac, there are additional advanced setup steps you can take advantage of, but they will not be covered in this guide beacuse I don’t own a Mac. If you are a Mac user and would like to contribute usage of Xcode or other iOS debugging tools, by all means, please submit an improvement for this section.

Expo Go on the App Store

Developing

If you already have an editor you like, jump to project structure.

Editor

I personally use VS Code, but I’m going to try to cover all the potential ways you may want to develop. If you don’t already use an editor, download VS Code and head on to the VS Code section

Otherwise, pick your editor of choice:

VS Code

VS Code

You can download VS Code at this link. Thankfully, because VS Code is designed as an Electron app, it provides Javascript/Typescript extensions, debugging, and IntelliSense out of the box. ChompChomp is written in pure Javascript with React extensions, and does not support Typescript at this time.

This is really all you need, but you should set up Expo Tools and React Native Tools (both are one click extensions to add) for your VS Code environment.

Next, proceed to setting up.

Vim

Vim

Why are you reading this if you already know your way around Vim? Set it up for JavaScript/TypeScript bindings and you’ll be fine. Next, proceed to setting up.

Expo Snack

Expo Snack

This isn’t actually a screenshot of the code, but this is Expo Snack.

Expo Snack runs in the browser and basically acts like a Repl.it, if you have used that before. It provides a way to develop and test without leaving your browser. You can access it here.

It provides all the libraries and tools built-in, and is a conveneint way to develop. It isn’t officially supported by ChompChomp but you are free to use this to develop if you wish to sync your changes to git manually.

Next, proceed to setting up.

Xcode

Xcode is the official code editor by Apple for Macs, and is only available for macOS. You can download it at this link. It is also the only way to self-compile the iOS version of ChompChomp, so you’ll need to follow this setup guide even if you don’t use Xcode normally so you can compile.

Download Xcode from the link above and run it. Apple will set up all the developer tools for you automatically. You’ll also need an Apple ID, which frankly is weird if you have a Mac but don’t have one.

Next, proceed to setting up.

Setting Up

  1. Clone the Sputnik App repository. If you don’t know how, please see the setting up git guide.

  2. Open Terminal or Command Prompt and navigate to the ChompChomp repository you cloned. Then run

    npm ci

    This process will take several minutes to complete if you’re running for the first time. If you need to update your packages, use the following command instead:

    npm i

If you are curious how the files are laid out, please see file structure, or you can see the code structure if you want to get a sense of how the code is formatted so you can make similar contributions.

Making an Edit

Use an editor of your choice to edit a file, and the commit it. If you don’t know how, see the guide to using git.

Testing Your Changes

Run this command to start the development server:

expo start