Skip to main content

Cordova

This guide assumes that you have a Cordova project already set up, have iOS and/or Android platforms added, and installed the Cordova device plugin. Check out Cordova's Getting Started guide for more information.

Furthermore, it is assumed that a text editor, such as Visual Studio Code, and a command line app, such as Mac OS' Terminal, will be used to work within the Cordova project. Xcode and Android Studio are required to test your app on each platform.

Install the Skillz Cordova Plugin​

By now, your HTML5 game has been migrated to Cordova, iOS and/or Android platforms have been added, and the Device Plugin is installed. You're now ready to install the Skillz Cordova plugin.

Manually installing the plugin​

Download the Skillz Cordova plugin here. Decompress the file to a folder that will not be removed. Now, open the Terminal app and run:

cordova plugin add skillz-crossplatform-cordova --save --searchpath <plugin-path>

This will save (in config.xml) the location of where to search for the plugin if it is removed from the plugins folder and needs to be re-added.

Reference SkillzCordova.js and SkillzDelegateCordova.js​

Open the Cordova project with your favorite text editor. The Skillz Cordova plugin will contain two files that are copied to the platform_www/ folder of each platform. These files are SkillzCordova.js and SkillzDelegateCordova.js. They need to be loaded in index.html in order to integrate with Skillz. To do so, add these lines:

<script src="SkillzCordova.js"></script>
<script src="SkillzDelegateCordova.js"></script>

SkillzCordova is a static class that will be used to integrate with Skillz.

SkillzDelegateCordova is a static class that contains two callbacks: OnMatchWillBegin, and onSkillzWillExit. The former is called before a match will begin, while the latter is called if the user exits Skillz via the hamburger menu. You will need to add logic to start your game in OnMatchWillBegin.

These two classes will be covered more in-depth in the instructions for integrating your game with the Skillz SDK.

Regenerate the Xcode or Android Studio Projects​

At some point, you will be ready to test your app for iOS or Android. You'll need to run the cordova build command to make Cordova regenerate the respective Xcode or Android Studio projects under the platforms/ folder; the Skillz SDK will also update the resulting project(s) as part of the integration process.

In a command line app, run cordova build ios to update just the Xcode project, cordova build android for the Android Studio project, or cordova build for both platforms.

WARNING​

Cordova treats the Android Studio and Xcode projects as build artifacts - they will be regenerated any time you modify the Cordova project and push those changes. When this happens, the Skillz Cordova Plugin will copy SkillzDelegateCordova.js to the platform_www/ folder for each platform. In turn, all changes made that you have made to this file will be lost.

To mitigate this issue, it is recommended that you keep a copy of this file with your changes in a safe location in your project, and copy it to platform_www/ every time a platform project is regenerated. Furthermore, you can automate this by writing a script that is run in Cordova's before_compile hook. See the documentation on Cordova Hooks for more information.

iOS specific steps​

You'll need to open regenerated Xcode project that's under platforms/ios/ with Xcode to make some modifications.

NOTE: these steps will have to be followed each time you run cordova build ios because the project will be regenerated.

Install the Skillz.framework File​

The Skillz Cordova plugin contains a Skillz.framework file that you will add to your Xcode Project. Follow the steps for installing the Skillz iOS SDK on how to add this file to your Xcode Project.

Your Xcode project should reside in <app-root>/platforms/ios.

After installing the Skillz SDK to your Xcode project, you should now be able to compile your iOS project.

WARNING​

Cordova treats the Xcode project as a build artifact; it can be regenerated simply by running:

cordova platform remove ios
cordova platform add ios

Additionally, the Xcode project can be regenerated when running cordova prepare or cordova build ios commands.

You'll have to add the Skillz SDK to your Xcode project every time it is regenerated - be careful!

Android specific steps​

You'll need to open the regenerated Android Studio project that's under platforms/android/ with Android Studio and make some modifications.

NOTE: these steps will have to be followed each time you run cordova build android because the project will be regenerated.

Modify AndroidManifest.xml​

The <uses-sdk> element needs to be removed from platforms/android/CordovaLib/AndroidManifest.xml. Otherwise, the Gradle Sync process will fail. Make sure the Gradle Sync process succeeds before continuing.

Change MainActivity to subclass SkillzCordovaActivity​

You'll need to change Cordova's MainActivity class to subclass SkillzCordovaActivity. Look for the MainActivity.java file in your project, and make sure you modify it like so:

// Add the following line
import com.skillz.SkillzCordovaActivity;

// Change the class declaration to subclass SkillzCordovaActivity
public class MainActivity extends SkillzCordovaActivity
{
    // Other code omitted for brevity
}