Developing native Appcelerator modules – Part II – iOS module

Part II –  building a native Appcelerator module for iOS

Start by creating a new “Mobile Module Project.” To do this, right-click your Titanium App project in Appcelerator Studio, then select “New” and “Mobile Module Project.” Appcelerator will create an Xcode project for us.

Open the module project in Xcode and take a note that AppceleratorStudio created four Objective-C files: TiVkModuleAssets.h, TiVkModuleAssets.m and TiVkModule.h, TiVkModule.m. We won’t alter the automatically generated assets files. Some developers starting with Appcelerator modules development might get confused by Titanium documentation mentioning views and proxies necessary to implement visual elements. To make it clear, in our case, the module is only invoked through API methods. There are no buttons and/or similar. Hence, we won’t, at this time, make a use of these proxies/views.

In TiVkModule.h, we add the public properties and methods to the interface.

/*
* TiVkModule.h
*
* Appcelerator module for social network VK
*
* Created by Diophant Technologies, OU
* Copyright (c) 2015 Diophant Technologies. All rights reserved.
*/

#import “TiModule.h”
#import <VKSdk.h>
@interface TiVkModule : TiModule <VKSdkDelegate>
{
NSString *appid;
NSArray *permissions;
NSString *token;
NSString *user;

// VK permissions for public API
enum : NSUInteger
{
….
} PERMISSION;
}
-(void) authorize:(id)sender;
-(void) deauthorize:(id)sender;
-(void) makeAPICall:(id)args;
@end

Appcelerator Studio generated two important methods – moduleGUID and moduleId. Let’s keep those without altering. Add barebone public methods to TiVkModule.m and start building out the functionality. According to VK developer documentation, our module has to implement <VKSdkDelegate>. Take a note how our TiVkModule.h reflects this. It is also important to remember that although JavaScript methods authorize() and deauthorize() have no arguments, we need to declare Objective-C module methods with (id) argument.

The most important method is authorize. Let’s quickly code the initial implementation.

/**
* JS example:
*
* var vk = require(‘ti.vk’);
* vk.appid = ‘1234567’;
* vk.permissions = [
*   vk.PERMISSION.POST_WALL,
*   vk.PERMISSION.FRIENDS
* ];
* vk.authorize();
*/
-(void) authorize:(id)sender
{
// we can only authorize for a specific app
if (nil == appid)
[self throwException:@”missing appid” subreason:nil location:CODELOCATION];

[VKSdk initializeWithDelegate:self andAppId:appid];
TiThreadPerformOnMainThread(^{
NSNotificationCenter * nc = [NSNotificationCenter defaultCenter];
[nc addObserver:self selector:@selector(activateApp:) name:UIApplicationDidBecomeActiveNotification object:nil];
if (![VKSdk wakeUpSession])
{
[VKSdk authorize:SCOPE revokeAccess:YES];
} else {
// Have a token?
if (![[VKSdk getAccessToken] isExpired])
{
NSMutableDictionary *event = [NSMutableDictionary dictionaryWithObjectsAndKeys:
NUMBOOL(NO),@”cancelled”,
NUMBOOL(YES),@”success”,
NUMLONG(0),@”code”,nil];
token = [[VKSdk getAccessToken] accessToken];
[self fireEvent:@”login” withObject:event];
}
}
}, NO);
}

Let’s also implement more authorize methods with appropriate signatures as below.
– (void) authorizeForceOAuth:(id)sender
{
[VKSdk authorize:SCOPE revokeAccess:YES forceOAuth:YES];
}

Now, we can finish implementing <VKSdkDelegate> methods, like the below.
// called when authorization succeeded
– (void) vkSdkReceivedNewToken:(VKAccessToken*) newToken
{
NSMutableDictionary *event = [NSMutableDictionary dictionaryWithObjectsAndKeys:
NUMBOOL(NO),@”cancelled”,
NUMBOOL(YES),@”success”,
NUMLONG(0),@”code”,nil];
token = [newToken accessToken];
[self fireEvent:@”login” withObject:event];
}

Once we implemented all methods, let’s ensure that module.xcconfig includes a reference to the utilized VKSdk.framework framework so we could build our module with the Appcelerator Studio generated build.py script.

Add the newly created module to your Appcelerator project from Help->Install Mobile Module… and adjust tiapp.xml.

The last step is to replace the require statement and we can use the brand new ti.vk native iOS module in our app.

modules

We can now utilize the native iOS VK module to build Appcelerator apps. In the next installment, we will learn how to make our module work on Android.

Please follow and like us:

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.

Please follow and like us: