On my work, technology and related stuff....

No comments

Xcode 9 was announced at WWDC17 earlier this year. I think it is probably one of the best Xcode releases to date, with a plethora of new features including a markdown editor which I am using for writing this post and considerably less buggy than it’s predecessors! One of the features that got me very excited was the ability to run multiple iOS simulators at the same time ! Finally …Now you can simulatneously test the app on different iOS versions and devices at the same time. The only limitation to the number of simulators you can run in parallel is the (memory/CPU) resources on your Mac. You would launch the app as usual by selecting the simulator as shown below If you want to run the app simulatneously on another simulator, you would go about that as shown below. That’s it!
 

No comments

There are many instances where you would need to support multiple configurations within your iOS app beyond the standard debug and release project configuration. Let’s suppose you app needs to talk to different server deployments – Development, QA and Production. In this case , you would want your app targeted for a specific environment to be configured to talk to the appropriate  server deployment. This blog post describes how you can do that within your swift iOS app. Things are slightly different with Obj-C, where you could define preprocessor flags within your .xcconfig files created for each environment . But with limited support for macros in swift, we will follow a slightly different approach

Step 1: Create desired configurations for Dev, QA and Prod

  • Under Project-Demo ,  add new configurations based upon existing Debug and Release configurations.
  • Duplicate the Debug configuration as a “Dev” configuration and duplicate the Release configuration as “QA” and “Prod” configurations .
  • Delete the Debug and Release configuration

Step 2: Add new schemes for Dev, QA and Prod configurations

Step 3: Make sure that the schemes created in Step 2 are “visible”

Step 4: Edit schemes created in Step2 and associate it with the appropriate configuration

So associate the QA scheme with QA configuration , the Dev scheme with Dev configuration and the Prod scheme with Prod configuration.

Step 5: Add a new user-defined build setting under Build Settings under tab.

This setting has a different value for each of the configurations.

Step 6: Add a info.plist property corresponding to the user-defined setting

Step 7: In your app,  read the info.plist property

That's it. Take appropriate actions depending on the configuration setting.

A demo project can be downloaded from here.

1 comment

There are many options available to display charts within your [native] iOS apps. You could write one yourself (why?) or use one of the many third party libraries that are available . Check out this GitHub repo for a list of charting libraries in swift/ ObjC.
 
However, if you are interested in using Highcharts within your app, then read on . Highcharts is a popular JS charting engine and you can learn more about it at http://www.highcharts.com.
 
 This  post will demonstrate how you can load a Highcharts based chart into a iOS native app.  We will use the example charts available as part of the Highcharts library. A more interesting and complete example that demonstrates how you can dynamically load chart data is available at https://github.com/rajagp/iOS_Highcharts_Sample.
 

1)   Download the sample xcode app project from http://www.priyaontech.com/wp-content/uploads/2017/01/HighchartDemo.zip.  This is a simple single view application that will load a .html file into a WKWebView.

2)   Download the Highcharts library from http://www.highcharts.com/download

3)   Once downloaded , unzip its contents and examine it. You should see contents list similar to screenshot below

4) Navigate to the “examples” folder

5) Copy the “index.htm” file from any of the examples into your project. Make sure you copy it into your project

6)  Your project should look something like this

7) In your xcode project, open and review the the index.htm file that you just copied over. It contains a JS function that creates a chart  using the Highcharts chart API as defined in http://api.highcharts.com/highcharts/chart. The chart data and options are defined statically. 

8) Now, open the “ChartViewController.swift” file and review it.  This is a simple view controller that manages a WKWebview and loads the index.html into the web view. 

 Look for  the “loadContainerPage” function . This is where the index.htm is loaded.


9) That’s it !  Run the app and you should see the sample chart load …

 The chart data and chart options were statically predefined as part of the JS function. In a real world application, you would probably want to load the chart data and options dynamically.

A complete example that demonstrates how you can dynamically load chart data is available at https://github.com/rajagp/iOS_Highcharts_Sample.

No comments

A software pattern is a template for solving a repeatable problem. Any user facing client app can be broadly composed of three main layers –
·      The Presentation / UI Layer:  Layer that a user interacts with.
·      The Business Logic Layer: Layer that handles the data model and interactions for local/remote databases
·      The Application Logic Layer : The glue between the Presentation and Business Logic Layers.

The Model View Controller (MVC):

 

The MVC is a well-known architectural pattern used for building iOS Apps.  
·      The View , which is generally not passive, corresponds to the  Presentation Layer
·      The Model , corresponds to the  Business Logic Layer
·      The Controller sits between the View and the Model , corresponds to the Application Logic Layer.
However, the controller becomes the catch-all for everything that isn’t exactly a UI control or a data model,  leading to the  “Massive View Controller” issue.
 
Two popular alternatives to the MVC pattern are the MVP and MVVM patterns, both of which are essentially variants of the MVC pattern.
 

The Model View Presenter (MVP):


The MVP defines the following
·      The View , which is generally passive, corresponds to the  Presentation Layer
·      The Model , corresponds to the  Business Logic Layer and is identical to the MVC pattern
·      The Presenter sits between the View and the Model , corresponds to the Application Logic Layer.
A View is typically associated with one Presenter.
 
In iOS, the interaction between the View and Presenter can be implemented using the Delegation Pattern (https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/Delegation.html). The Delegation Pattern allows one object to delegate tasks to another object. In iOS, the pattern is implemented using a Protocol. The Protocol defines the interface that is to be implemented by the delegate.

In the MVP pattern, the View and Presenter are aware of each other. The Presenter holds a reference to the view it is associated with.
 
The PresenterProtocol defines the base set of methods that any Presenter must implement. Applications must extend this Protocol to include application specific methods.
 

 
The PresentingViewProtocol  defines the base set of methods that View must implement. By providing default implementation of the methods in this interface, the conformant view does not have to provide its own implementation. This interface can be extended to define application specific methods.
 

 
 
 

The Model View View Model (MVVM) :

 

 
 
The MVVM defines the following
·      The View , which is generally passive, corresponds to the  Presentation Layer
·      The Model , corresponds to the  Business Logic Layer and is identical to the MVC pattern
·      The View Model sits between the View and the Model , corresponds to the Application Logic Layer.
The key aspect of the MVVM pattern is the binding between the View and the View Model.  In other words, the View is automatically notified of changes to the View Model.

In iOS, this can be accomplished using Key-Value-Observer (KVO) Pattern. In the KVO Pattern (https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/KeyValueObserving/KeyValueObserving.html) , one object is automatically notified of changes to the state of another object. In Objective C, this facility is built into the run-time. However, it’s not as straightforward in Swift. One option would be to add the “dynamic” modifiers to properties that need to be dynamically dispatched. However, this is limiting as objects now need to be of type NSObject.  The alternate is to simulate this behavior by defining a generic type that acts as a wrapper around properties that are observable.
 
 

 
The View can “bind” an appropriate callback to the ViewModel by using the “bind” method on the DynamicType. Every time the property value changes, the callback is automatically invoked.
 

Code and More:

A sample app that showcases the implementation of the MVC, MVP and MVVM pattern is available on GitHub at https://github.com/rajagp/iOS_MVC_MVP_MVVM_SampleApp
 
Slides from a related talk on supporting the MVP and MVVM patterns in iOS apps can be downloaded from iOS_MVP_MVVM_Patterns  .
 

2 comments

REST has been growing in popularity as the preferred way of publishing and consuming web services. REST has its origins in 2000 when Roy. T. Fielding introduced an architectural style and design for network control systems as part of his dissertation in U.C Irvine.  In academic terms, a RESTful architecture must comply with the following set of constraints –
–       Client Server Architecture
o  Clear separation of concerns with a modular approach to building systems where one entity publishes web services and one consumes them
–       Uniform Interface
o   Support heterogeneity of clients by exposing a uniform interface to the services, there by allowing clients and services to evolve independently of each other. Every resource is universally identifiable.
–       Stateless
o   Requests and Responses are self-contained and self-describing. Servers are stateless, thereby allowing for quick recovery from failures such as loss of requests or responses
–       Cacheable
o   Support for response caching at the clients or intermediaries, thereby improving scalability and performance
–       Layered
o   Support for proxies, gateways and other intermediaries between the clients and servers, allowing for the intermediaries to process messages before forwarding them on. The self-describing and stateless nature of the system would allow intermediaries to process the messages.
 
 
In simpler terms, REST is a set of guidelines and principles on how web services can be published and consumed over the Internet.  The common misconception is that it is a protocol and a standard. REST is neither a protocol nor a standard. It is however, standards based, thereby facilitating interoperability.  While REST makes no assumptions on the underlying protocol, HTTP is almost used universally as the underlying protocol for REST communications. Likewise, while there is no requirement on the data representation format, JSON is very popular as the data exchange format.
 
A lot of the popular services including Facebook, Twitter, Stripe, GitHub, Paypal and others today support a “REST” based API for developers to consume . With a lot of buzz around REST, everyone wants to to have a REST complaint API. However, a closer examination of these APIs would reveal that not all of them are truely RESTful.  Of course, it may not be always practical to model your resources and consequently, design an API that a RESTifarian would approve. Without a standard dictating what is allowed or disallowed, there is room for interpretation and consequently, there are variations in how these APIs are designed.
 
I recently gave a talk on REST API design at Self.Conference with the goal of describing the underlying principles that govern the design of RESTful APIs and the common anti-patterns to avoid. It discusses the approach to API Driven Development and  in fact, much of the content in the slides can serve as recommendations for API design in general .

The slides can be downloaded from here

5 comments

In iOS8 Apple introduced the Modern WebKit framework. The Modern WebKit supports a multi-process architecture wherein web content is loaded in a process separate from the app (upto a limit). The framework is unified across the iOS and OS X platforms and includes a lot of performance enhancements such as the optimized JS Nitro Engine , hardware accelerated 60fps scrolling etc. It also includes support for WebGL for 3D rendering.

The WKWebView For Displaying Web Content

The WKWebView is a replacement for the UIWebView on iOS for loading web content within a native app. It is essentially a wrapper around the WebKit.framework and exposes an interface that is a lot more powerful than what the UIWebViews allowed.

One of the significant improvements is the simplified communication model between Native and JS .
This article will discuss how Native-WebView bridging can be achieved.

WKWebViews are associated with a WKWebViewConfiguration object. Multiple webviews can share the configuration object.

The following code snippet creates an instance of WKWebView
Obj-C

Swift

Native to JS Bridging Using User Scripts.

User Scripts are JS that you inject into your web page at either the start of the document load or after the document is done loading. User scripts are extremely powerful because they allow client-side customization of web page, allow injection of event listeners and can even be used to inject scripts that can in turn call back into the Native app.
The following code snippet creates a user script that is injected at end of document load. The user script is added to the WKUserContentController instance that is a property on the WKWebViewConfiguration object.

ObjC:

Swift:

JS to Native Bridging Using Script Messages

Your web page can post messages to your native app via the
window.webkit.messageHandlers.<name>.postMessage (<message body>) method.
Here,  “name” is the name of the message being posted back. The JS can post back any JS object as message body and the JS object would be automatically mapped to corresponding ObjC / Swift native object.
The following JS code snippet posts back a message when a button click event occurs on a button with Id “ClickMeButton”

JS

Handling Callbacks Using Script Message Handlers

In order to receive messages posted by your web page, your native app needs to implement the WKScriptMessageHandler protocol.
The protocol defines a single required method. The WKScriptMessage instance returned in the callback can be queried for details on the message being posted back.

ObjC :

Swift:

Finally, the native class that implements WKScriptMessageHandler protocol needs to register itself as a message handler with the WKWebView as follows.

ObjC:

Swift:

Sample Code:

A complete example app demonstrating the bridging concept can be downloaded from https://github.com/rajagp/iOS-WKWebViewBridgeExample-ObjC.git. The Swift Version can be downloaded from https://github.com/rajagp/iOS-WKWebViewBridgeExample-Swift.git.

In this sample app, we load a simple HTML page that has a button using a WKWebView. When the page loads, the native app injects a JS (“User Script”) into the loaded document that listens for button click event and calls back into the native app (“Script Message”) . The native app implements a listener to handle the callback message from the web page and updates the color of the button from within the callback handler

I did a short presentation on this topic at CocoaHeads. The presentation can be downloaded from here.

No comments

If you are developing an iOS app that communicates with a server over the network, the Network Link Conditioner is an invaluable tool. You can use the tool to “condition” the network communication to simulate various network conditions. ProTip: You never ship an app which requires network communications without putting it through the wringer with the Network Link Conditioner tool. Details on the Network Link Conditioner available here.

Often times, you need to develop against a server running on localhost while running your app on a simulator. This may be because you don’t have access to the remote server or you don’t have network connection for instance. 
So how do you simulate different network conditions when testing against localhost server?  Or what if you wanted to selectively throttle traffic ? A network Link Conditioner cannot be used to condition local loopback connections and it impacts all traffic flowing through the network interface.

So here is a really awesome preference pane called SpeedLimit which can be used to condition loopback connections and selectively throttle network traffic based on ports.

  • You can download and install it from here

           You may have to tweak your Mac's Security & Privacy preferences so as to allow the download.

  • Once installed, you can launch  SpeedLimit  from System Preferences.

         Set the host as “localhost” , set the port, select the speed and select “Slow Down” to slow down the network. Sometimes, you may have to set up the host as the local loopback address “127.0.0.1”

 
The revert back , press “Speed Up” button
 

 

No comments

I had an awesome time presenting on Mobile Development at Girl Develop It, Ann Arbor group. There was an incredible level of interest in this topic that explained the good turnout despite the stormy weather. 


The talk covered the basics of developing native apps for the iOS, Android and Windows platforms. In addition, an overview of some of the major cross-platform tools and frameworks including Appcelerator Titanium, Cordova PhoneGap and Xamarin Mono were provided. The talk also briefly addressed the concept of Responsive Web Design as it applies to mobile website and web apps.

You can download a copy of the talk from here and video of presentation is available on YouTube

Now a brief note on the evening itself : The topic of "Women in Technology" (or lack thereof) has always been an important to me and I am always looking for opportunities to help bridge the gender gap.

So it was encouraging to be speaking to an audience where women techies were in the majority (and a special shoutout to all the men who made it and showed their support to the group). Judging by the enthusiasm of the attendees, it is quite clear that women are just as curious and interested in technology as their male counterparts  I believe that a forum that allows women to learn without fear of being judged and network comfortably with fellow women techies can be vital in encouraging more women to join the rest of us. 

No comments

I recently gave a talk on Dynamic Fonts at Cocoaheads meeting. You can download the presentation and sample code from here.

iOS7 introduced a cool feature called Dynamic Fonts. What it essentially allows you to do is to set your preferred reading text size in Settings (General or Accessibility) app of your phone and voilà, all apps that support dynamic type automatically adjust to display text content according to the preferred size setting

In this post, I’ll go over what you would need to do to support dynamic type within your apps so that yours will be one of the cool apps that reacts to the preferred text size change!

UITextKit, Text Styles and Font Descriptors

iOS7 introduced UITextKit – a powerful framework that allows you to support rich text content, layouts and without the complexities of drawing it with Core Text or having to use UIWebView.
An important component of UITextKit is TextStyles. Text Styles describe an intended use of a font .

The table below shows the list of supported text styles and the font descriptors that define them for the case when we set the preferred text size slider settings to the center.
 

Text Styles
Font Descriptor
UIFontTextStyleHeadline
(headings)
  NSCTFontUIUsageAttribute = UICTFontTextStyleHeadline;
NSFontNameAttribute = ".AppleSystemUIHeadline";
NSFontSizeAttribute = 17
UIFontTextStyleSubheadline (more…)

2 comments

Functional Testing is system level , end-to-end testing of your app from a user's perspective. Automating the process of functional testing of your app offers several benefits – it saves time and effort, it's repeatable, simplifies regression testing, enables testing with large data sets and it can be tied into your Continuous Integration process. UI Automations is an automated functional test framework from Apple. Here, user interactions are driven by test scripts are written in JavaScript and executed using the Instruments Automation tool.

While there are several other automated functional test tools available including Calabash, KIF, Frank and Fone Monkey, UI Automations has the benefit that it is very simple to use, needs minimal or no changes to your existing app and since it's from Apple, it is (fairly) well supported and maintained.

I recently gave a talk on automated functional testing of iOS apps using UI Automations. You can download the presentation from this link. There is also a sample demo application with a corresponding set of UI Automation test scripts.