Testing with CocoonJS on iOS

[One of most common responses I give to people asking me about debugging projects with CocoonJS is to use their Compile Launcher/Official App(s) before dealing with cloud compiles. It will save you development time and is often helpful in chasing down specific compatibility problems. It is also the easiest way to get access to the console window and if any errors are being logged.]

(Note: From within a project page on Ludei’s site under ‘Android’ settings, you can request different Compile Launchers for various versions of Android. You cannot do this for iOS. While a cloud compile will send you the necessary XCode files, the only way to test is by using the official app on iOS.)

Installing the CocoonJS App

To start, you visit the App Store on the device.

Photo Apr 14, 8 25 54 PM

Search for “cocoonjs by ludei” to find the “CocoonJS by Ludei” app. (The app is free.)

Tap to start the transaction, enter your password, and then wait for it to download and install.

Once installed, open the CocoonJS App.

Photo Apr 14, 8 26 23 PM

When opened, the CocoonJS App will give you the options of viewing the official demos or “YOUR APP.” (For development, you will want “YOUR APP.” However, it is often useful to look through the demos on a device and then visit the demo page to see the code for how each is done.)

Photo Apr 14, 8 26 30 PM

The first time you use the app on a device and try to access the “YOUR APP” section, it will ask for your user information. Fill this is using the same user and password combination you use to access the ‘Dev Portal’ part of Ludei’s site. (If you don’t have an account yet, you can also use the “REGISTER” button to create an account too.)

Photo Apr 14, 8 27 09 PM

Initially, there will be no projects listed under the ‘Documents’ tab.

Adding files to the CocoonJS App

To add them, we need to connect the device to a computer, bring up iTunes (if it does not come up automatically), and make sure iTunes can communicate the device.

April14--1

Assuming the iOS device is recognized, it will appear as a button on the right-hand side, next to the “iTunes Store” button. (Since I use a Windows machine, I took the screenshot using the Windows version of iTunes. In MacOS X, this may look different.)

April14--2

Once you have accessed the device, select the “Apps” tab.

April14--3

At the very bottom of the tab will be a section on “File Sharing” with “CocoonJS” appearing under the Apps heading.

Click on “Add…” to select a file to send to the iOS device for testing.

April14--4

The “Add” window allows you to select the zipped project file you would like to test on the device using CocoonJS. (Remember that you need to use ZIP files only. Before each test, zip together all your files, including all JavaScript libraries and assets, as one file.)

April14--5

Once a file is selected, it will show up under the “CocoonJS Documents” section under File Sharing and also be transferred to the iOS device.

Running tests

Photo Apr 14, 10 02 48 PMClicking on the refresh icon (the two arrows arranged in a circle) will scan the contents of the ‘Documents’ folder and update its contents listing.

Photo Apr 14, 10 04 50 PM

Tapping on any one project will bring up the options to use “Accelerated Canvas/WebGL” or “System WebView.” (Without going into too many details here, each offers something different. However, to use the “Accelerated Canvas/WebGL” mode, your project MUST create a new SCREENCANVAS element in order for anything to show up.)

Photo Apr 14, 10 05 07 PM

While a project is running, you can tap on the FPS button in the upper left-hand corner to access to the various Console, Warnings, and Error windows.

Photo Apr 14, 10 05 13 PM

Tapping on the “Actions” button will open that menu. From here, you can Reload, record a Profile and view the MemoryLog. You can also tap on ‘Exit’ to close the testing of this project and return to the contents listing of ‘Documents’.

Removing projects

April14--6

Once you have tested what you wanted, or just want to remove some projects from the iOS device, you need to return to the File Sharing section under Apps for that device.

Click on the file you want to remove and then press Delete on the keyboard. A prompt will appear confirming if you really want to take this action.

Confirm the delete by clicking on the “Delete” button.

(You will have to go through these three steps, selecting the file, pressing Delete, and confirming, for every single file every time in iTunes. The CocoonJS App does not have the ability to edit files, merely read and run them.)

One thought on “Testing with CocoonJS on iOS

Comments are closed.