Up and running iOS development

Archive for the ‘Mobile’ Category

Up and running iOS development

Tuesday, 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 »

Virtual directories with RippleSites? Sort of, sure.

Tuesday, October 16th, 2012

By Rod Nolan – consultant

I’ve always used IIS or Apache when I needed a web server in my development environment. But as a BlackBerry developer, the Ripple Mobile Environment Emulator has become a more important part of my toolkit. And the latest version includes a built in web server. So I recently put IIS on the shelf and decided to trade port 80 for port 9910.

I make regular use of virtual directories because:

I don’t want to store my web sites in wwwroot/ or htdocs/ since
My git repo contains EVERYTHING related to a project, not just .htm, .css and .js files and I don’t want it all accessible via http so
It’s cleaner to keep the repo in one location (not wwwroot/ or htdocs/) and use virdirs to point to the “website” subsection of my repo

But Ripple doesn’t provide any sort of standard way to configure virdirs using a GUI or config files. Fortunately, neither of these options is required when you have Windows 7, a “Run as administrator” command prompt and the mklink command.

Here’s how it works:

C:\>cd \Users\<You>\RippleSites
C:\>mklink /J siteName "C:\SomePathTo\MyRepositories\MyProject\WebRoot"

This command will create a new directory junction called

siteName

in:

C:\Users\<You>\RippleSites\

which looks and acts like a directory but is really nothing more than a pointer to the real physical location:

C:\SomePathTo\MyRepositories\MyProject\WebRoot

So that when I browse to:

http://localhost:9910/siteName/index.html

it’s this file gets served:

C:\SomePathTo\MyRepositories\MyProject\WebRoot\index.html

I can still keep everything related to the project in my repo, store that repo anywhere I choose on my local system and enable http access to only the web-related assets via Ripple’s web server. I can develop and test and emulate my mobile brains out… without using virtual directories and without manually copying files between my repo’s folder and my web server’s document root folder.

This post http://ipggi.wordpress.com/2009/09/07/windows-file-junctions-symbolic-links-and-hard-links/ helped to clarify the difference between symbolic links, hard links, soft links and junctions.

Tags: directory junction, mklink, Ripple, Rod Nolan, virtual directory
Posted in BlackBerry, Mobile, Uncategorized, WebWorks | No Comments »

Appcelerator webinar – 4 Steps to Creating a Mobile Development Strategy – June 13, 2012

Monday, June 4th, 2012

Join New Toronto Group and Mike King, Principal Mobile Strategist for Appcelerator and formerly Gartner’s Research Director for Mobile, as we outline the 4 key steps to creating a successful, cost effective, mobile development strategy.

During this webinar we will also answer some of the most common mobile development questions, such as:

How can you reuse your development code when deploying from one device to the next?
How do you build mobile apps for multiple devices using your web team?
How can you use your existing web software, apps, and information in your mobile apps?

Appcelerator makes Titanium, the leading mobile platform of choice for thousands of companies seizing the mobile opportunity.

Webinar Details:
Date: Wednesday, June 13
Time: 1:00pm – 2:00pm EST
Duration: 1 hour

For more information, contact Andrew Rybak:
Phone: 905.283.0617
Email: andrewr@newyyz.com

Full Details >

Tags: Appcelerator, Events, Webinar
Posted in Announcements, Best Practices, Mobile | No Comments »

Webinar Reminder

Thursday, May 31st, 2012

A reminder about our upcoming webinar on June 13^th at 1pm EST. During this webinar NTG and Appcelerator will discuss mobile development strategies. We are particularly excited that Appcelerator’s Mike King will be joining us to share his thoughts and insight. Prior to joining Appcelerator, Mike was Research Director for Mobile at the Gartner Group. He has authored Gartner’s Magic Quadrants for MCAP (Mobile Consumer Application Platforms) and MEAP (Mobile Enterprise Application Platforms), as well as the Magic Quadrants for Wireless LAN, U.S. Wireless Carriers, and the Packaged Mobile Applications Market Scope.

This event promises to be highly informative. We invite you to join us; you can register at: https://ntg.adobeconnect.com/_a164689/mobile-dev-strategy/event/registration.html

Tags: News, Webinar
Posted in Announcements, General Knowledge, Mobile | No Comments »

4 Steps to Create a Mobile Development Strategy

Wednesday, May 23rd, 2012

Probably the single most common question I hear when talking to companies about their mobile projects is along the lines of: How can I use a single code base to support Native, Hybrid and mobile web applications?

This is not at all surprising. Mobile apps can help organizations to better reach customers, or improve internal workflows, or reinforce their brand, or deliver a myriad of other benefits. But the costs associated with app development can quickly escalate, especially if you are targeting multiple platforms. At NTG we have long helped companies evaluate their development options and select the right strategy. Sometimes we have advocated HTML5, other times it made more sense to develop multiple native apps, or to use a hybrid approach. As the mobile market matured, we noticed an influx of MEAP/MCAP (Mobile Enterprise/Consumer Application Platform) providers offering yet another option for developing mobile apps.

After a thorough evaluation of the various players in the market, NTG reached out to Appcelerator and formed a partnership whereby we are qualified to provide Appcelerator related development and enablement services.

On Wed, July 13th, at 1pm EST we will be hosting a webinar to discuss how organizations can deploy Appcelerator and develop a sound mobile strategy. Please join us and Mike King, Principal Mobile Strategist for Appcelerator and formerly Gartner’s Research Director for Mobile, as we outline the 4 key steps for creating a successful, sustainable, mobile application strategy. You can register by clicking through to this link: https://ntg.adobeconnect.com/_a164689/mobile-dev-strategy/event/registration.html

It promises to be an informative discussion. I hope you can join us.

Tags: Appcelerator, Mobile
Posted in Mobile | No Comments »

BlackBerry Hackathons – Come out and Play(Book)!

Wednesday, May 16th, 2012

I’m currently in Bogotá, Colombia taking part in my third Hackathon on behalf of RIM. These hackathons are two-day events where local developers get the opportunity to interact directly with experts in PlayBook development. They also get a free PlayBook just for showing up!

We typically have a team of three experts covering AIR, HTML5/WebWorks and Native development. Most of the events have been focused on game development, but I’ve also done one centred around business apps using WebWorks.

Developers, either in teams or individually, work some long hours over the two day period. At the end of the second day, their apps are judged and winners awarded additional prizes. Nothing like a bit of competition to bring out the best in a dev team!

And with BB10 on the horizon, there’s a lot of anticipation from developers. Keep your eyes open for an event coming to your city this summer. Hope to see you there!

Tags: AIR, HTML5, Native, WebWorks
Posted in Actionscript, AIR, Best Practices, BlackBerry, Flash, Flex, HTML5, JavaScript, Mobile, RIM, WebWorks | 1 Comment »

Flex Mobile: Skinning the ActionBar

Wednesday, January 25th, 2012

By Alain Thibodeau – Consultant

In a Flex mobile application, the ActionBar is the main bar at the top which contains several content areas. These areas consists of the titleDisplay, actionGroup, titleGroup and navigationGroup skin parts. With a custom skin you can move these skin parts where you need them and add background images.

I first hit Photoshop and created my visuals for the ActionBar as shown below. (I know most of you designers out there will give me the “eye brow” with my design, but go easy on me please…)

I sliced out the logo and a 3 pixel slice of the bar. Looking like this:

I then created a Flex Mobile Project. In the main project file, I referenced a css file which contains this code:

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

@namespace s "library://ns.adobe.com/flex/spark";

s|ActionBar {
skinClass:ClassReference("skins.CustomActionBarSkin");
defaultButtonAppearance: beveled;
}

s|ActionBar #titleDisplay {
fontWeight:normal;
color: #000000;
}

s|ActionBar #titleGroup {
fontWeight:normal;
color: #FFFFFF;
}

The most important part of the css file is the declaration of the skin class for our custom skin. The other styles are for the text in the titleGroup and titleDisplay groups.

Here is the custom action bar mxml skin. It could have been written in ActionScript, however, I did not notice any performance issues with mxml.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Metadata>
[HostComponent("spark.components.ActionBar")]
</fx:Metadata>

<s:states>
<s:State name="titleContentWithActionAndNavigation"/>
<s:State name="titleContentWithNavigation"/>
<s:State name="titleContentWithAction"/>
<s:State name="titleContent"/>
<s:State name="titleWithActionAndNavigation"/>
<s:State name="titleWithNavigation"/>
<s:State name="titleWithAction"/>
<s:State name="title"/>
</s:states>

<s:Image source="@Embed('/assets/images/bar.png')"
left="0"
right="0"
scaleMode="stretch"/>

<s:Image source="@Embed('/assets/images/logo.png')"
horizontalCenter="0"/>

<s:Group id="navigationGroup"
left="12"
top="15"/>

<s:Group id="titleGroup"
left="10"
top="68"/>

<s:Group id="actionGroup"
right="12"
top="15"/>

<s:Label id="titleDisplay"
horizontalCenter="0"
top="8"/>
</s:Skin>

The modifications to the skin are adding the background images and moving the skin parts where we need them. In this case, my slice of the background is stretched across the width of the application. The logo is then put on top of the bar and centered, aligning itself with the lines and shadows.

What I didn’t add is consideration for different dpis. This could be accomplished by having different images for the different screen resolutions.

Lastly, here is the view that defines what goes in the content areas. We could extend the ActionBar and add more skin parts as needed. In our case we are using the “titleContent” SkinPart for some form of subtitle text area.

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

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Action Bar Skin">

<s:navigationContent>
<s:Button label="Back"/>
</s:navigationContent>

<s:titleContent>
<s:Label text="Some Text Here"/>
</s:titleContent>

<s:actionContent>
<s:Button label="Action" />
</s:actionContent>

</s:View>

Here is what the application looks like with the custom ActionBarSkin:

Tags: Actionscript, AIR, flash builder, Flex, Mobile
Posted in Actionscript, AIR, Flash Builder, Flex, Mobile | 9 Comments »

Flex Mobile: IconItemRenderer Example

Thursday, January 5th, 2012

By Alain Thibodeau – Consultant

For Flex mobile applications you should use the mobile optimized item renderers. The default base class for mobile renderers is the LabelItemRenderer. Extending this is the IconItemRenderer, which is a handy renderer that includes an icon area, label and message.

Here is an example of using IconItemRenderer in the simplest form:

MyIconItemRenderer.mxml

1
2
3
4
5
6
7
8
9
10

<s:IconItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    iconField="icon"
    labelField="label"
    messageField="message"
    iconWidth="45"
    iconHeight="45"
    />

HomeView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:List
width="100%"
height="100%"
itemRenderer="MyIconItemRenderer"
>
<s:dataProvider>
<s:ArrayList>
<fx:Object
label="Title 1"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 2"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 3"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 4"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 5"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
<fx:Object
label="Title 6"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:View>

Outcome:

Here is an example of IconItemRenderer using messageFunction, labelFunction to display content other than what is directly in our dataprovider. I added a color property to my dataprovider objects.

Updated HomeView.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<?xml version="1.0" encoding="utf-8"?>
<s:View
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView"
>
<s:List
width="100%"
height="100%"
itemRenderer="MyIconItemRenderer"
>
<s:dataProvider>
<s:ArrayList>
<fx:Object
label="Title 1"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Red"
/>
<fx:Object
label="Title 2"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Blue"
/>
<fx:Object
label="Title 3"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Green"
/>
<fx:Object
label="Title 4"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Pink"
/>
<fx:Object
label="Title 5"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Brown"
/>
<fx:Object
label="Title 6"
icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
message="This is a message"
color="Yellow"
/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:view>

And here is the modified MyIconItemRenderer.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
iconField="icon"
labelField="label"
labelFunction="getLabel"
messageField="message"
messageFunction="getMessage"
iconWidth="45"
iconHeight="45" >
<fx:Script>
<![CDATA[
private function getMessage(item:Object):String {
return item.message + " - " + new Date().toDateString();
}
private function getLabel(item:Object):String {
return item.message + " - " + item.color;
}
]]>
</fx:Script>
</s:IconItemRenderer>

Outcome:

For online and in-person Flex and AIR training, checkout our course finder.

Posted in Actionscript, AIR, Android, Flash, Flash Builder, Flash Player, Flex, iOS, Mobile | No Comments »

JavaScript Developer Survey

Sunday, December 4th, 2011

Looks like this is turning into an annual event. Given JavaScript’s importance in the Mobile/HTML5 space, it will be interesting to see how developers are using it:

http://dailyjs.com/2011/12/01/javascript-developer-survey-2011/

Posted in HTML5, JavaScript, Mobile, WebWorks | No Comments »

NFC vs QR Codes

Sunday, December 4th, 2011

By Chad Upton – senior consultant

Smart phones brought the productivity of computers to our pockets, but their tiny size didn’t make any improvements to the full-size keyboards we leave at our desks. Smart phone users want quicker ways to enter text or website URLs.

QR Codes

Square bar codes, or QR codes are an easy way to “scan” text into your phone. This makes it easy for you to visit a website or copy useful text, such as phone numbers or contest entry codes into your phone without touching the keyboard.

QR codes have been around since they were invented by a Japanese company in 1994. Originally used to track products in warehouses, QR codes were designed to replace traditional “vertical line” bar codes. Traditional bar codes just represent numbers, which can be looked up in a database and translated into something meaningful. QR, or “Quick Response” bar codes were designed to contain the meaningful info right in the bar code.

They’ve been a successful marketing tool in Asia and Europe, but they’ve had limited success in North America. A recent survey of college students found that 81% of college students owned smart phones, but only 22% were able to successfully scan the QR code. Many students didn’t know a third party app was required on most platforms (iOS, Android, BlackBerry). Windows Phone is the only mobile platform that supports QR codes natively, and it has one of the smallest market shares.

Data types supported:

URL
Text
Phone Number
SMS Message

The support for Phone Numbers and SMS Messges is great, it allows you to scan a QR code and have that info pre-populated for you.

NFC

Near Field Communication (NFC) is a technology that offers similar use cases to QR codes, but through a different medium. While QR codes require a camera to “scan” the code, NFC uses a low powered magnetic field to send and receive data. That’s right, NFC has a peer to peer mode that allows bi-directional communication.

NFC is supported in the latest versions of Android, BlackBerry OS and Symbian. iPhone and Windows Phone support is expected next year. Although it has a lot of superior capabilities to QR codes, it does require specialized hardware in the phone. NFC is still fairly young and a little over a dozen handsets are currently available with the technology, but that number is expected to grow quickly.

Data types supported:

URL
Text
Phone Number
SMS Message
Email Message
Business Card/VCard
Signature
Bluetooth or Wifi connection parameters

As you can see, NFC supports a few more data types than QR codes. The vcard support is great, bump your phone with someone else’s to exchange contact info.

Comparison

QR codes and NFC offer some overlap in uses, but each one has fundamental advantages over the other for certain situations. If you’re running a contest and you want users to enter via text message, QR codes could be scanned from TV, magazines, newspapers, billboards, transit ads, etc. It would be more costly to put an NFC tag in every magazine or newspaper, so QR might be the right choice here.

But, lets say you were attending a large event and wanted to connect to the secure wifi network. You could flip through all the event info to find the SSID and password for the network, but you’d much prefer tapping your phone as you enter and have it automatically connect in seconds. This is how technology is supposed to work.

Both technologies help you get small amounts of info into your phone without typing it, but each one has pros and cons.

Technology	Pros	Cons
QR Codes	inexpensive, print/display anywhere, all phones have the hardware, scan pre-composed SMS messages	can be difficult or time consuming to scan, not always weatherproof
NFC	good native device support, weatherproof, quick and easy to scan, two way communication possible	more costly, cannot be used in as many ways as QR codes, limited phones supported at this time

Be sure to “like” us on facebook to stay in the loop.

Tags: Chad Upton, code, nfc, qr, qrcode
Posted in General Knowledge, Mobile | No Comments »