Converting an existing project to a blueprint - kavyasukumar/shenanigans GitHub Wiki

This page guides you through the process of converting an existing app or graphic into a blueprint.

This guide assumes that your original app uses middleman. But the steps are applicable to any app

1. Refactor

You probably built the app for a one time use and it contains a lot of project specific code and content. The first step is to clean all that out and refactor the code till you are left with only the part you want to keep in your blueprint.

At the end of this step, your app should have an index.html.erb path that returns just the blueprint contents.

2. Decide on inputs

Now that you have a clean and minimal app, you should figure out what inputs you need to collect from the user. Are the inputs going to come directly from Autotune form or do you need a spreadsheet? If you are going to use a spreadsheet or other data source, look for a way to bring this data into javascript as JSON. We recommend middleman-google_drive.

3. Build Alpaca form and dummy data

At the root of the project add autotune-config.json to build an Alpaca form to accept inputs you decided in step 2. Instructions are here

Set up a data\autotune.json file with example data. Follow instructions here

4. Wire up data

Update the index.html.erb page to pass the data to the javascript as shown here

5. Parameterize

Update your app to remove any hardcoding and references to local data. Instead use AUTOTUNE JavaScript object to get data.

6. Test locally

Running your project locally should work at this point. Fix any errors.

Make sure that it is using data from the newly-created data\autotune.json file.

7. Build script

At the root of the project, add a autotune-build file and configure it to build the project. See instructions here.

8. Add embed.txt

Finally, create an embed.txt or embed.txt.erb file that will return the embed code for the project. See examples here

---

Push your code to the master branch of a repo accessible from your Autotune setup. Follow instructions to add the blueprint to Autotune.