NTG Web Site

Up and running iOS development

Ryan R — Tue, 30 Apr 2013 19:34:59 +0000

Creating an iOS application can be a daunting task. From design and architecture to testing and deploying, there’s a lot to think about. Luckily, you don’t have to start from scratch, as most of the problems you’ll run into have already been solved by someone else. The internet is filled with a great selection of reusable components and libraries which can be used to jump-start your next iOS project.

User Interface and Architecture

Cocoa Controls (https://www.cocoacontrols.com/) is a directory of open source controls for Cocoa (OS X) and CocoaTouch (iOS) applications. A recent phenomenon you’ll discover on Cocoa Controls is that when a big app is released on the app store with a unique user interface control of some sort, there will be dozens of open source implementations within weeks. A great example of such a phenomenon is the parallax zooming effect ‘clones’, which imitate a visual effect implemented in some new apps like CNN and Tweetbot (https://www.cocoacontrols.com/search?utf8=✓&q=parallax).

One drop-in component that I want to make special mention of is InAppSettingsKit (https://github.com/futuretap/InAppSettingsKit). Many developers find the process of storing app settings in the official iOS settings app confusing, and simply implement their settings in their own application. InAppSettingsKit makes writing a settings screen *and* having those settings exposed to the iOS settings application a snap – huge time saver.

Networking

A great user interface is not all that important without some data. If you’re integrating with a web service, downloading images, or just making simple GET requests, you definitely need to take a look at AFNetworking. AFNetworking (the AF stands for AlamoFire, the team behind Gowalla, now a part of the Facebook) is a very mature library for making network request. Its biggest draw is its powerful block-based syntax. If you’ve used anonymous functions, and observed their closure abilities, then you understand blocks.

What if you want to build a network connected app, but don’t have your back-end figured out yet? Well there are libraries (libraries as a service?) which not only handle the networking layer of your app, but generate a backend server based on the model objects you design for your application.

Check out Parse (http://www.parse.com). Parse, which coincidentally is now also owned by Facebook, is one such service. If you don’t mind locking yourself into the Parse-o-verse, then you may find yourself very impressed with how much time Parse can save you. Parse allows you to model your data online, import values from common formats (CSV, etc.), and provides an SDK for every platform under the sun to access the data. It can also take care of push notifications, login (including with Facebook or Twitter credentials) and supports what it calls “Cloud Code”: the ability to have your own custom JavaScript server code, run on the Parse servers.

Testing

So you have your beautiful Internet-connected app, and you’re almost ready to ship. Time to test. TestFlight (http://www.testflightapp.com), is designed to make testing and, more importantly, organizing beta tests a breeze. TestFlight allows you to organize your testers, invite them to betas, inform them of new betas and even deliver beta applications over the air, completely bypassing the App Store.

While your testers are finding all the bugs in your app, Crashlytics (http://try.crashlytics.com) can be used collecting detailed crash logs. When an app normally crashes, it stores a crash log (a blackbox recording of what went wrong) in the device. On the next iTunes sync, these logs are sent to Apple. Apple will eventually let you see these logs, which have to be downloaded and interpreted by analysing the code that generated it (so it can properly report line numbers, method names, etc.). It’s quite a process. This is where Crashlytics comes in.

Crashlytics simplifies all that by having your app communicate directly with its servers on a crash. Better yet, it caches unsent crash logs to be sent on the next launch, to ensure it’s been sent. You can also inject custom Crashlytics flags, to help debug the state of an application on crash.

Production

Finally, your app is approved and in the store. You may want to make tweaks but the app update process is lengthy. GroundControl (https://github.com/mattt/GroundControl#readme) is a library that allows you to store application configurations in the Cloud. Use GroundControl to tweak default values, or maybe have dynamic themes. You can now tweak your app to fit user trends without re-submitting a new version.

Finally…

This is just a small subset of what’s available. With new developers joining the community every day, there’s an ever-changing landscape of bits and pieces to be toyed with… but don’t be afraid to create something unique, and maybe your next piece of code may the next big thing.

The Gist of Code Sharing

oliverm — Wed, 17 Apr 2013 19:35:01 +0000

Agile development teams often need to share code while in the heat of battle.

At the high end of the scale, there are publicly-accessible repositories, such as GitHub. Creating a GitHub project is obviously overkill for those wishing to simply pass a few key lines of code to their buddy in the next seat.

For stand-alone, runnable demo code, sites like Plunker and JSFiddle are great. You will see references to these sites wherever HTML, CSS and JavaScript bugs are reported; for example stackoverflow and the AngularJS Google Group.

But again, maybe overkill for just a few lines.

So what are the other options for code sharing?

Email – I suppose, but there may be delays in receiving the email if your server is slow.
Skype or other messaging service – Alright, but you lose history eventually.
USB Key (sneaker-net) – It works, but it is hard to share it with a lot of people and history is also an issue.
Gist – This has been around a couple of years but I’ve only just discovered it since it is baked into IntelliJ/WebStorm. Gist is a GitHub sub-project and is associated with your GitHub account. For example, my GitHub account is at https://github.com/oliverm2112 and my Gists are at https://gist.github.com/oliverm2112. Gist allows developers to post snippets of code in various languages and features in-place editing and syntax highlighting.

Here is a Gist home page and a code sample:

Here is a shot of IntelliJ/WebStorm’s abilitity to create a Gist from within the IDE:

Hopefully you will find this a useful way to share information.

AngularJS – Promises

alaint — Wed, 03 Apr 2013 17:45:03 +0000

AngularJS comes with promise/deferred APIs that are simple to set up and are also built into the $http API. The Angular promise is basically a guarantee that some code will be fulfilled after other parts are done.

Single Promise:

1
2
3
4
5
6
7
8
9
10
11

myApp.controller('myController', ['$scope', '$q', function ($scope, $q) {
var defer = $q.defer();

defer.promise.then(function () {
$scope.$emit('shoutEvent', {'message' : 'I kept my promise!'});
});

$scope.$on('someEvent', function (event, data) {
defer.resolve();
});
}]);

In the above example we create a new instance of a deferred object which exposes a promise. Next, we access the promise and add the callback that we need. We can now resolve the promise when the ‘someEvent’ is received.

Multiple Promises:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

myApp.controller('myController', ['$scope', '$q', function ($scope, $q) {
var defer1 = $q.defer(),
defer2 = $q.defer();

$scope.$on('someEvent', function (event, data) {
defer1.resolve();
});

$scope.$on('someOtherEvent', function (event, data) {
defer2.resolve();
});

$q.all([defer1.promise, defer2.promise]).then(function () {
$scope.$emit('shoutEvent', {'message' : 'I kept my promise to all of you'});
});
}]);

As shown above, when we need to wait for multiple promises to resolve and take action, we can use the $q.all() method to combine them into one promise.

These examples show how AngularJS promises are powerful. But, this post just touches a few of their features. There are other features you might be interested in such as chaining promises with return values, using them in templates and rejecting promises.

You can read more about them in the AngularJS documentation.

BlackBerry 10/Qt Libraries and Namespaces

bslack — Tue, 02 Apr 2013 18:25:37 +0000

A quick note for those developing C++ libraries with Qt (hopefully for BlackBerry 10). You should use a namespace(s) to group your library code together and to avoid conflict with other libraries and the users’ code. When working with Qt however, some extra considerations need to be taken into account if you plan on using Qt’s signal/slot mechanisms. In Qt 4.x (the latest version of Qt available for BlackBerry 10), your function signal/slot prototype declarations must match exactly. This can cause issues for users of your library if you assume that your namespace is global within your header definition. Take for instance the following code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

namespace mycompany {
namespace mylibrary {

class LibData;
class LibraryManager : public QObject {
Q_OBJECT
public:
LibraryManager(QObject *parent = NULL);
virtual ~LibraryManager();

Q_SIGNAL void dataRead(LibData &d);

};

}
}

In the above sample, the ‘dataRead’ signal provides one parameter when emitted, the LibData pointer. The LibData object is part of the mycompany::mylibrary namespace. While this will work, it potentially causes an issue for a user of your library. It forces the library user to make your namespace global within their own header file (which may or may not be intended). As an example:

1
2
3
4
5
6
7
8
9
10
11
12
13

#include
#include

using namespace mycompany::mylibrary;

class MyClientClass : public QObject {
Q_OBJECT
public:
MyClientClass();
virtual ~MyClientClass();

Q_SLOT void onDataRead(LibData &d);
}

In the above case, the MyClientClass onDataRead slot must match the LibraryManager classes ‘dataRead’ signal signature, exactly. This forces the user to make the namespace global within the header file, which can somewhat defeat the purposes of namespaces. A better implementation would be to always explicitly set your namespace in your signal prototype declarations. The below snippet shows a better implementation of both the library and client code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1
2
3
4
5
6
7
8
9
10
11

#include
#include

class MyClientClass : public QObject {
Q_OBJECT
public:
MyClientClass();
virtual ~MyClientClass();

Q_SLOT void onDataRead(mycompany::mylibrary::LibData &d);
}

Note how in the above example, the LibData objects namespace is explicitly declared. This eliminates the need to have the ‘using namespace mycompany::mylibrary’ definition.

Getting repetitive tasks done quickly and efficiently

Rod Nolan — Wed, 20 Feb 2013 17:51:52 +0000

I’m working on a project right now where I often have to grab a master copy of a single file, paste it into my current working directory and open it for editing. My environment is Windows 7.

Since the master file exists in a static location, I wrote a batch script to copy the file into my current directory and open it.

  copy %ANT_HOME%\..\..\build.xml . /-Y
  build.xml

The first line of this script will copy the master version of build.xml into whatever directory I run it from from. The -Y option prompts me to overwrite if a file named build.xml happens to be present. The second line will open the local file in the system default editor for .xml files (if you have one configured). So it’s just two lines. Nice and simple and it sure beats doing this manually.

To make this script callable from anywhere on my file system, I placed it in a directory that is included in my PATH and I called it getBuild.bat.

At this stage, calling the script requires me to SHIFT+right-click > Open Command Prompt Here and type the name of the batch file. Too many clicks and keystrokes for my liking.

Ideally, I’d like to be able to access this functionality from the context menu and bypass the need to open the command window at all. Here’s how I did it.

Open regedit.exe
Navigate to HKEY_LOCAL_MACHINE\SOFTWARE\Classes\*\shell
Add a new key called getBuild
Navigate to HKEY_LOCAL_MACHINE\SOFTWARE\Classes\*\shell\getBuild
Add a new key called command
Modify the (Default) value and set it to C:\Windows\System32\cmd.exe /c getBuild.bat

editing the registry to add an item to the Windows Explorer context menu

Save and close the registry editor
Open Windows Explorer and right click on a file in any directory to see the new context menu item. I haven’t bothered to try to make it work by right clicking anywhere so as it stands, you have to right click a file.

using the new context menu

Next, you’ll see the prompt to overwrite the .existing file.

the batch file doing its job

Answering ‘y’ opens the file in my editor.

so I can do my job

If you’re wondering why I need to copy build.xml so often, keep an eye on this space for my next blog post. I’ll be talking about the ANT build script I wrote to package and deploy WebWorks apps to the upcoming BB10 smartphone. But until then, happy copying.

NTG at Upcoming BlackBerry Experience Forums: NYC, March 4 and Chicago, March 6

aaronv — Wed, 06 Feb 2013 20:44:55 +0000

New Toronto Group will have a booth at the BlackBerry Experience Forum on March 4 in New York City at the Marriott Marquis Hotel. http://www.blackberryexperienceforum.com/about/index/event/13.

We will also be in Chicago on March 6 at The Sheraton Chicago Hotel. http://www.blackberryexperienceforum.com/about/index/event/17

Come and see our sample BB10 apps we’ve been working on and we can tell you about all of the BB10 app dev services we currently provide.

I Love You Implicitly

seanh — Mon, 04 Feb 2013 16:43:39 +0000

I can see that learning to develop with C++ and Qt can be daunting at first.

Here’s my tip: If you’re learning Cascades, make sure you don’t skim over “Implicit Sharing”. It’s a very cool feature of Qt/Cascades, that lets you relax about memory management, and stay efficient at the same time.

Briefly, implicit sharing allows you to pass objects around in arguments and return values without making copies, unless you write to them. i.e. copy-on-write

Underlying that is a smart pointer called QSharedDataPointer. If you don’t want to make your own implicitly shared classes, you still need to know about it because all of Qt’s basic types (QString, QImage, QList, etc.) all use it. If you ignore that, you’ll be doing a lot of redundant memory management.

Now you can pass arbitrarily big objects around as if they were values instead of pointers. When no one uses the object anymore, it gets deleted. You don’t have to trace an object’s whole life span to make sure it gets deleted. “This Class is implicitly shared” is all you have to document for your clients. They don’t have to sweat where to delete it either. Very nice.

As soon as I figured this out, my code and I both got faster and my blood pressure went down a couple of kilopascals.

If you don’t know about the other Qt smart pointers (QScopedPointer, QSharedPointer) and their C++ equivalents (auto_ptr, and shared_ptr) you need to check them out too. And if you don’t know how to use those, then you probably don’t know C++ as well as you think you do. When I started cascades programming, I was comfortable with C++’s syntax — I knew C really well, and had done a small project many years ago in C++. But lots of very smart people have figured out a ton about how to really use C++ since then. You can still shoot yourself in the foot, but it is a lot safer, when you know how. I think that’s contributed to a big resurgence of C++ (seemingly backed by even Google and Microsoft. See a bunch of articles on this, and a good counterpoint here.)

To embrace the modern practice of C++ read Effective C++ , an essential resource. Seriously, you have to read it. The third edition.

Cascades’ documentation on Implicit Sharing is pretty clear. Play with it a bit to make sure it works the way you think it does, and you’ll be glad you did.

P.S. All this stuff about smart pointers is generally called RAII (Resource Allocation Is Initialization). It works for mutexes, and file handles and other resources as well as memory and is key to making your code exception-safe as well.

Adding an X to Close a noty.js Notification

Chad Upton — Mon, 04 Feb 2013 15:10:13 +0000

By Chad Upton – senior consultant

Noty is a jQuery plugin for doing popup notifications in a browser. They’re simple, pretty, and they slide in like toast style notifications on the desktop.

They can be positioned at the top, side, bottom or even in a custom container. Here’s a screen capture of one that slides in from the top:

Noty does have a built in way to do confirmation buttons, but it adds an additional line to the popup, which isn’t as clean as the example above. Here’s what the built in method looks like:

I think it looks a lot cleaner with just the “x” to close. My example just shows one button (the “x”) but you modify my example and put “ok” and “cancel” buttons where I have the “x” if you need more than just close functionality.

Adding custom html to noty is very easy, and my example also includes a callback to handle a user click on the “x” (or your substitute buttons).

Source Code:

You can run and view the working source code on jsfiddle here and an explanation of the code follows:

1. I’ve added some css to float the div containing the button (“x”) to the right:

>
.notyCloseButton {
position: relative;
float: right;
}
>

2. Import the necessary javascript files for jQuery and noty. These can be found in the side panel of jsfiddle, but should be added above the existing script tag in the document if you copy the code from jsfiddle and try it elsewhere: