Up and running iOS development

April 30th, 2013

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.

Posted in iOS, Mobile, OSX Development, Uncategorized | No Comments »

The Gist of Code Sharing

April 17th, 2013

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.

Posted in Actionscript, AIR, Android, AngularJS, ANT, Best Practices, BlackBerry, ColdFusion, Flash Builder, Flex, General Knowledge, HTML5, Java, JavaScript, jQuery, WebWorks, WPF | No Comments »

AngularJS – Promises

April 3rd, 2013

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.

Tags: AngularJS, javascript
Posted in AngularJS, HTML5, JavaScript | No Comments »

BlackBerry 10/Qt Libraries and Namespaces

April 2nd, 2013

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.

Tags: Blog
Posted in BlackBerry, Uncategorized | No Comments »

Getting repetitive tasks done quickly and efficiently

February 20th, 2013

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.

Tags: .bat, ant, build.xml, context menu, registry, windows7
Posted in ANT, BlackBerry, RIM, WebWorks | No Comments »

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

February 6th, 2013

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.

Tags: Events
Posted in Announcements | No Comments »

I Love You Implicitly

February 4th, 2013

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.

Tags: Blog, implicity, Sean Hopen
Posted in HTML5 | No Comments »

Adding an X to Close a noty.js Notification

February 4th, 2013

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:

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:

3. On document ready, create the noty notification:

You’ll notice I’ve added an id to the img tag (notyCloseButton) and then added a click event listener to that tag so you have a callback to execute code if the user closes the noty. If you don’t need to respond to the user closing the noty, then you can leave this out of course.

Hopefully that helps you make cleaner notifications with a close (or other) buttons.

If you need help specific to your application, contact us for consulting on your project.

Tags: button, Chad Upton, close, jQuery, noty, x
Posted in HTML5, jQuery | No Comments »

BlackBerry Experience Forum February 4, 2013

January 31st, 2013

New Toronto Group will have a booth at the BlackBerry Experience Forum this Monday http://mobilesyrup.com/2013/01/08/blackberry-experience-forum-starts-february-4th-in-toronto/.

Be sure to come and check us out. We’d love to show you some of the sample BB10 apps we’ve been working on and talk to you about all of the BB10 app dev services we currently provide.

Tags: Events
Posted in Announcements | No Comments »

Developer Tools for OS X

January 4th, 2013

Web developers have been embracing Macs as development boxes for many years, but with the recent prevalence of mobile development there has been a big influx of OS X development machines in development shops.

Wether you are a long time Mac addict, or are just now using a Mac for pragmatic reasons, such as iOS development, here are some development tools you may find you can’t live or at least work without:

Code Runner

Code Runner is a neat application which allows you to quickly run snippets of code in various programming languages, including but not limited to, AppleScript C, C++, C# , Objective-C, Java, JavaScript (Node.js), Lua, Perl, PHP, Python and Ruby. Code Runner is wonderful if you want to simply evaluate a snippet of code, which can be as simple as pasting code into a pre-generated, language specific, entry point.

Want to write some C?

Or maybe you want to evaluate a snippet of PHP?

Code Runner isn’t going to replace Eclipse or Xcode, nor is it trying to be, give it a try and see if it finds a place in your workflow.

Rested

Rested allows you to quickly create mock HTTP requests and view the returned response. Designed for testing REST based web-services, this tool can be a great sanity-check to ensure you’re application is actually getting the data it should be.

Rested supports authentication using HTTP Basic Auth or OAuth, and can set custom headers, parameters or an entire HTTP body. Even better, the requests you create with Rested (along with their responses) can be saved, to be logged or re-used.

Dash

If you’re like most developers, you don’t work exclusively in a single programming language, or platform. Dash is designed for the jack-of-all-trades developer in all of us, by providing quick access to the API documentation to almost every API under the sun. Mobile platforms, JavaScript libraries, server technologies and even game engines are all represented in Dash’s impressive list of available documentation.

One of the best reasons to have all your documentation in one place is language-agnostic searching. I know printf() is a function in some language, but which is it again? Dash will tell you.

Dash also can be used to build up a universal collection of code snippets, and even directly integrate into Xcode.

Base

SQLite is the embedded database of choice for most mobile platforms. BlackBerry developers may also be familiar with SQLite as both WebWorks (BlackBerry 7+) and Cascades (Blackberry 10) can take advantage of it. iOS developers who’ve implemented Core Data will know that underneath (by default) is an SQLite database powering all your app’s data. Ever want to peek inside? Take Base for a spin.

Base is a simple SQLite database browser, just open a file and start digging.

Along with visually observing the table makeup of the database, Base allows you to view and edit table data, and even run your own SQL queries.

Go2Shell

Go2Shell is a very simple Finder extension that does one thing, and one thing well : opens the terminal at your current Finder location.

Go2Shell can be added as a shortcut in the Finder window, jump to the directory you need, press your handy new Go2Shell button and enjoy the 15 seconds of typing you just saved as an OSX Terminal is opened and directed to the above directory’s location.

BetterSnapTool

BetterSnapTool is a simple utility which adds the window 7 “snap” effect to OS X. The window “snap” is the ability to resize and re-position a window by dragging it into one of the screen’s sides or corners. BetterSnapTool takes the basic “window snapping” concept introduced in Windows 7 and adds a whole bucket of customizability

With the customizability options you can add Keyboard shortcuts, a right-click menu to every finder window, add padding, or even create custom “snap areas”. Is BetterSnapTool interfering with the window management of your IDE? No problem, you can enable snapping on a per-application basis.

Sip

Sip is one of many tools I’ve found to combat a very common situation when implementing a user interface: dealing with colours. Maybe you are dealing with a series of designs from a designer, or trying to get a custom button to have *just the right* tone to nicely fit in with a toolbar, the first step is probably going to involve you becoming a colour detective. This is where you use all sorts of tricks to extract some sort of RGB value from what you’re looking at.

Sip provides a system wide colour picker, and maintains a stack of previously “pick”ed colours.

The final (and most important) feature of Sip is that a colour will be copied to Clipboard to be pasted into the appropriate piece of code. This is where Sip really becomes powerful as it can generate the appropriate code or colour string for numerous formats.

Working in CSS? Sip can output in one of five valid CSS colour syntaxes, like CSS3 HSL :

HSL(145.54, 73.72%, 26.86%)

or CSS HEX:

#12773D

Working in the Apple-world? Sip can output CoreGraphics, Cocoa or Cocoa Touch based Colours:

[UIColor colorWithRed:0.07f green:0.47f blue:0.24f alpha:1.00f];

Sip can also output in platform agnostic formats like comma delimited RGB:

18.00, 119.00, 61.00

or Decimal:

0.07, 0.47, 0.24

Take Sip for a test-drive, it’s just one of many solutions in the tool belt of an experienced colour detective.

Tags: base, code runner, dash, go2shell, Mac, osx, rested, sip, xcode
Posted in OSX Development | No Comments »