News

October 17: Google visit
October 9: Start of weekly coaching meetings and Retrospective reports
September 26: First demo!
September 21: Hybrid setup report and four-panel storyboard.
September 19 Day One -- What each team needs to prepare for the first day of class!

When

TTh 11am - 12:20am

Where

Tech M164

Who

Chris Riesbeck

Resources

Note: Supersonic here refers to any of tools variously referred to as Steroids, AppXGyver, Supersonic and so on. It does not refer to Composer, a WYSIWYG development tool for business apps. Appgyver is pushing Composer as their default tool now, so be careful to stay with Supersonic

Set up an account at Appgyver

The best starting point is http://www.appgyver.com/supersonic/. From there you can quickly get started for your particular platform and target device, find documentation, and so on.

Create an account with Appgyver and log in.

Follow the instructions at https://academy.appgyver.com/installwizard/steps#/home.

Install NodeJS and NPM

For now, you need to install NodeJS 4 and NPM 2. Do not install NodeJS 5 with NPM 3. If you already have and need those versions,

Windows 8.1

Run the installer inside the plain vanilla Windows cmd.exe command shell, not a Cygwin or git-bash shell.

MacOS

Install Apple's XCode IDE first. Just the XCode command line tools are not enough. XCode is free on the App Store. Open it once after downloading to initialize things, but you don't need to create a project.

If nvm --version gets a command not found after installing nvm, close the Terminal window and open a new window.

Install Steroids

First, be sure you've done the steps at Supersonic involving directory permissions, or verified that you are indeed the owner of /usr/local/lib and its subdirectories.

Then do npm install steroids -g as instructed.

You may see some warnings about the NodeJS version not being what was expected. Some of the packages expect version 8, but work fine with version 10.

Be sure you eventually see the message Everything looks all right., followed by:

steroids@4.0.8 install ...\npm\node_modules\steroids
> node ./bin/install

installing ...
steroids@4.0.8 C:\Users\riesbeck\AppData\Roaming\npm\node_modules\steroids
├── express-json@1.0.0
├── colorize@0.1.0
...

If you get Everything looks all right but installation hung, try cancelling and re-running the install with these commands:

npm cache clean
...
npm -d install steroids -g

The -d will show more output on the steps, including network timeouts, if they're happening.

If things still seem hung, open the Task Manager on Windows, or the Activity Monitor on MacOS, and see if the NPM process is using any CPU time. It doesn't use a lot because it's mostly waiting for network data, but it should tick up a second every 10 seconds or so. If it goes a minute without any change in CPU time, it's definitely hung.

Create an App

Run steroids create your-app-name. It will ask just a couple questions:

Warning: there may be a several minute pause before steroids create finishes.

Try Running the App

cd into the directory for the project you just created.

Do steroids connect.

If you get a page with a QR code your app, time to get the Appgyver Scanner app.

You can also try running the app in a simulator but

The Scanner App Can't Connect to my App

Your development machine and device must be on the same local network. Some common cases where it won't work:

If that's true, then most likely there is a network problem. For details, see this troubleshooting guide.

Test Editing Your App

The sample page that opens up in the app tells you what file to try changing. Use any programmer text editor you like. The file you edit will depend on whether you have a Multipage app or a single page app. When you save your changes, the Scanner App should automatically reload your app.

Note: Even though the Single page app is supposed to be library-agnostic, it's initially an AngularJS app. You should be able to strip out all the Angular parts. Your app interface will be whatever is in www/index.html.

For some tips of getting a more polished native-like app, see Marc Gauthier's Tips and Tricks.