Tutorial: Deploy on all your devices at once with TiShadow and Sublime Text

Hi everyone! This tutorial will cover an incredibly awesome tool to perform testings on all your devices and simulators at once, TiShadow.

I was very lucky to recently meet James Young, CTO/founder of PlayViews and be told about this tool, but before getting into setting everything up and for those who still don’t know the wonders of TiShadow, here is a short video by his father, David Bankier, demonstrating what we’ll end up being able to do with it.


Cool, so what exactly is that?

TiShadow is a set of components including a Mobile App wich acts as the client side of it, a Command-Line Interface and a CLI Server.

It works by packaging your Titanium app into its Mobile App’s Documents folder and performing black magic on it so it is able to run it as it would when built as usual.

TiShadow is able to do much more than that but for this tutorial we are just going to focus on building, updating and clearing apps on/from it.


Installing Node.js

Those who already followed my previous tutorial about building from Sublime Text will already have this covered but in case anyone doesn’t love Sublime as much as the rest of us, I’m going to blatantly copy that part of the tutorial here:

We will first install Node.js. We will not discuss the utility of Node.js here as it’s out of the scope of this tutorial, but its installation package includes a command-line utility we will use later: npm. Installing Node.js is probably the easiest way to get npm on a Mac computer. But we have to be aware of something, later versions of Node.js cause some issues when building for Appcelerator Titanium so we have to double check we are getting version 8.22. The link to a direct download is here.

Installing Node.js

Node.js installs as a common .pkg file for Mac: double-click – next – next – ready to go!


Install TiShadow Server

Having Node.js installed we can proceed and type a simple command in terminal wich will download and install TiShadow Server in our machine:

sudo npm install -g tishadow

For now we will just leave it there and continue to the next step.


Generating TiShadow Mobile App

We have to generate the mobile app wich will act as the client for receiving our deploys from TiShadow Server, to do that we can simply launch this command into the Terminal:

mkdir ~/tishadowapp && tishadow app -d ~/tishadowapp

This will create a folder on our home directory containing the app ready to be imported to Titanium Studio as an Existing Mobile Project or modified from Sublime Text.


Include your external modules into TiShadow

You can safely build TiShadow at this stage but if you want to test some apps with it that contain external modules (yes Platino users! I’m looking at you!) you’ll have to include those modules into the app before building it.

It’s not needed to write any code to require your modules, just adding them in tiapp.xml either with Titanium Studio’s fancy interface or like men do, directly coding the file with Sublime.

Once you have all your used modules in, go right away, build and install TiShadow on every device you happen to have, don’t forget installing it on your Simulators too!


Update your apps – Part 1

Even with all its awesomeness, TiShadow still has a couple things we should manage on our developments, first is making sure everything in our app gets closed when being closed by TiShadow, or else we could hear duplicate looping sounds or have some previous windows beneath those in the actual simulation wich would consume memory, probably until a crash happens.

So the first thing we should do is making sure our app.js contains this little snippet wich would do the trick for us:

if (typeof exports !== 'undefined') {
    // useful variable to check if we are
    // in TiShadow
    Ti.App.TiShadow = true;

    exports.close = function() {
        // close everything else you need
        // or fire events that do it here

        // always close your main app's window
        // as the last thing you do
        window.close();
    };
}

Platino users, you will have a full example on forums very soon on how to make sure everything gets closed properly when deploying our games on TiShadow and rebuilding them over and over again.


Update your apps – Part 2

The second issue we could encounter when deploying to TiShadow is about paths, usually a graphic asset is loaded like this:

"images/mygreatpic.png"

TiShadow needs a first slash / in that string otherwise it won’t be able to load the asset, and that goes for sound assets too and pretty much anything you have distributed in subfolders inside your Resources folder. So our final strings will look like this:

"/images/mygreatpic.png"

If you are using dinamically generated paths in your app you have to make sure the folder bit of it has the first slash too.

In my experience having a slash at the start of the string doesn’t always go well when building commonly from Titanium Studio, CLI or Sublime, so that’s where Ti.App.TiShadow variable will come in handy.


Start TiShadow Server

Time has come to do our first massive deploy, we need a Terminal running to host the TiShadow Server so we’ll open a Terminal window and write this simple command:

tishadow server

If everything has gone well, we should be able to see a message telling us TiShadow Server has properly started:

TiShadowServerStart


Start TiShadow on your devices

Now it’s time to start the TiShadow app on every device and simulator we want to perform testings on. A window like following will be presented and we will have to make sure device is connected to the same network our computer is and points to the IP address and port TiShadow Server is telling us.

Remember localhost is only suitable for simulators running on the very same computer, every other device will have to point to a typical IP address.

TiShadowApp

We can now tap Connect on every device and TiShadow will be ready and waiting for us to start sending it some apps.


Deploy an app into TiShadow

We will first learn to do this via our Terminal before moving to the awesomeness of Sublime.

To deploy an app you have to navigate to its root folder (the one containing tiapp.xml) with a new Terminal window and write this command:

tishadow run

That’s it! the app will appear on every single device connected to server and will be ready for testing inmediately.

If we are working on an app and had previously performed a run for it, we can speed up the process of deploying even more by writing this command:

tishadow run --update

That will only send to our devices the very single files changed since last deploy, simply fast.

we could also want to clear every app we have deployed to TiShadow to make sure we start from a fresh state, that is done with the following command:

tishadow clear

Deploying from Sublime

How sad would life be if we had to leave our editor, go to Terminal and type a command every time we want to deploy a new version? Not here! If you want to be able to deploy from Sublime just create a new Build System from this menu:

SublimeNewBuildSystem

Sublime will create a new file for you, just paste this code in overwriting whatever it previously had.

{
"cmd": ["open /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\\ Simulator.app/ & tishadow run"],
"working_dir": "${project_path:${folder:${file_path}}}",
"shell": true,
"variants":
[
{
"name": "run",
"cmd": ["open /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\\ Simulator.app/ & tishadow run"]
},
{
"name": "update",
"cmd": ["open /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\\ Simulator.app/ & tishadow run --update"]
},
{
"name": "clear",
"cmd": ["tishadow clear"]
}
]
}

This will make sure iOS Simulator gets focused every time we launch a TiShadow command with the exception of clear for obvious reasons. If you don’t want that and prefer just launching commands without them making you leave Sublime, use this code instead:

{
"cmd": ["tishadow run"],
"working_dir": "${project_path:${folder:${file_path}}}",
"shell": true,
"variants":
[
{
"name": "run",
"cmd": ["tishadow run"]
},
{
"name": "update",
"cmd": ["tishadow run --update"]
},
{
"name": "clear",
"cmd": ["tishadow clear"]
}
]
}

Now you can save your file and Sublime will prompt you for a name, of course I think the proper name for this is TiShadow. Once saved, you’ll be able to select it as a new Build System from this menu:

TishadowBuildSystem

Once selected you just have to press Cmd+B to perform a tishadow run but you can also press Cmd+Shift+P and start typing update or clear, those options will appear preceded by Build: as they will also be part of your newly created Build System for Sublime.


In Closing

I’m still astonished on how devilish fast TiShadow is. Hopefully this tutorial will help spread the word about it and developers everywhere will make profit of this fantastic tool. Of course, from here I want to deeply thank David Bankier for his awesome work, you kick ass dude! Thanks a lot!

One thought on “Tutorial: Deploy on all your devices at once with TiShadow and Sublime Text

  1. Pingback: Sublime Text Tips & Tricks – Syntacticsugar.nl | Syntacticsugar.nl

Leave a Reply