Developing native Appcelerator modules – Part I

A possibility of using native modules along with JavaScript is one of the reasons Appcelerator is selected for many projects. Modules narrow the gap between native and cross-platform development approaches. Sometimes, native modules are the only way to make your Appcelerator app do what is required.

Programming native Appcelerator modules is not difficult. At the same time, we felt that even with existing tutorials, the first time developers could use another detailed walk-through, based on a real project.

Enjoy the three-part blog post covering in detail implementation of a native Appcelerator module for the social network VKontakte, based on the VK SDK for iOS and Android.

VK

Part I –  Designing native Appcelerator modules for VK

Why/when is a native plugin necessary? In every situation the answer in different. In our case, the app was originally made with a JavaScript module. We found a free barebone JavaScript Titanium module called ti.vkontakte on GitHub and within a couple of hours extended it with the additional functionality that we needed. The resulting module correctly worked on all supported platforms. The problem was that users were complaining about having to enter username and password via VK web authentication, instead of authorizing through the standalone VK app. In fact, we discovered that majority of end-users often do not remember their credentials. A native plugin would allow users to interact with the VK social network using a session already running on the VK app. There would be no need to enter credentials separately.

Our extended ti.vkontakte JavaScript Appcelerator module supported methods: authorize(), deauthorize(), makeAPICall(), exposed properties: appid, permissions, token and user, plus the JavaScript plugin generated various events. We were happy with JavaScript module’s API. Our goal is to rewrite the VK module in the native code, supporting one platform at a time. We decided to reimplement the JavaScript vkontakte module API keeping all signatures. This way, we would get away with only one conditional JavaScript statement to utilize native modules where available.

Further, we found a working Appcelerator module with similar functionality – ti.facebook developed for the same purpose as our module, except for Facebook. In this tutorial, we will create a new module named ti.vk based on the JavaScript module’s API, VK SDK for Android and iOS, as well as the ti.facebook Appcelerator module.

Before we begin coding the native VK module, let’s prepare by configuring VK SDK. We already had made a standalone VK app used to authorize with JavaScript. To authorize through SDK, VK requires that developers configure the app bundle field of the standalone app. The last configuration task is to setup our app’s URL-schema. We add the below section to the tiapp.xml file.

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>vk1234567</string>
<key>CFBundleURLSchemes</key>
<array>
<string>vk1234567</string>
</array>
</dict>
</array>

For more information about developing for VK, see the relevant developer documentation. In the meantime, we are ready to start coding our iOS and Android native Appcelerator modules. To be continued in Part II.

Categories

More from our blog

See all posts