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,
- Install and use nvm to let you switch versions of NodeJS
- Install npm-2 so that you can run that to install and update Steroids.
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:
- Multipage, Single page, or Custom?
- Pick Multipage if you are going to use AngularJS and the Supersonic library.
- Pick Single page if you plan to use React, jQuery, or some other framework.
- CoffeeScript or JavaScript
- Pick JavaScript, unless everyone on your team knows and wants to use CoffeeScript. (I am not a fan.)
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.
- Go to the Apple App Store (iOS) or the Google Play Store (Android).
- Search for "appgyver scanner".
- Download the free personal version.
- Start it. A camera view will open. Point at the QR code until the image is locked in.
- Your app should open.
You can also try running the app in a simulator but
- You will need to have installed the Android or Xcode tools for that
- Not all aspects of that work, e.g., for me, simulated rotations were not recognized by the app.
- Running on a simulator is nowhere near as much fun, or as crucial, as running on a real device.
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:
- your development machine is on a wired connection and your device is on a wireless network
- your development machine is on a wireless network and your device is on 3G or 4G
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.