Azure App Services for Unity3D

Azure Mobile Services will be migrated to App Services on Sept 1st 2016. To prepare for this migration I’ve renamed and updated the open source Mobile Service Unity3d projects to support Azure App Service going forward.

Using Azure App Services to create highscores leaderboard for Unity

To demonstrate the Azure App Service I have created a sample Highscores demo for Unity to insert, update and query a user’s highscores. But to run the project in Unity Editor you will need to hook it up to an Azure App Service. Using an Azure account simply create a new App Service in the Azure portal, (for this demo I am using an App Service with Javascript backend). In a couple of minutes the Azure App Service should be up and running and ready to configure.

  1. Open Settings, search for Easy Tables and add a ‘Highscores’ table.

    AppService_1-EasyTables
  2. Set all table permissions to allow anonymous access to start with.

    AppService_2-TablePermissions
  3. Manage schema to add Number column for ‘score’ and String column for ‘userId’

    AppService_3-ManageSchema
  4. Set CORS to ‘*’ to allow all origins to start with.

    AppService_CORs
  5. Additionally, if you want to store user data or game scores you can enable authentication using Facebook, Twitter, Microsoft account or Google account. If you want to use the Facebook login in this demo you will need to create a Facebook app. Once you’ve created the Facebook app add the Facebook App ID and Secret to your Azure App Service Facebook Authentication settings.

    AppService_Auth

    Then configure the Facebook App Basic and Advanced settings with your Azure App Service URL:

    FacebookAppDomains
    FacebookAppSecureCanvasURL
    FacebookAppAdvancedSettings

    If in doubt how to configure these settings check out the Azure App Service documentation.

  6. Once authentication is setup the ‘Highscores’ table script can be edited to save ‘userId’ information.

    AppService_4-TableInsertScript

  7. In addition to table scripts you can also create custom APIs. In Settings, search for Easy APIs and add an example ‘hello’ API.

    AppService_EasyAPIs
    AppService_EasyAPIs-hello.js

Once you have setup Azure App Service you can update the Unity scene with your App Service ‘https’ url and hit run!

Notes

  • Sometimes the script needs to be reattached to the Scene game object. In this case remove it and then reattach it by dragging and dropping the ‘Scripts/AppServicesDemo.cs’ script onto the game object. If required more instructions are available in the Azure App Services for Unity readme.
  • If building a Windows Universal App you will need to switch off processing plugins for the JsonFX plugin:

    1. In Unity Project select Assets > Plugins > Pathfinding.JsonFx.dll
    2. Check ‘Don’t process’, then Apply
      Unity-JsonFx-DontProcess

Responsive Design from problem to production

Responsive Design is often seen in terms of technical execution or production. In this article I will describe what it means to design responsively as a design process from problem to production.

Contents:

Background

The need for responsive design

The idea of designing multiple versions of a website optimized for mobile and desktop might sound like a good idea, but a separate design approach will not scale easily as “the number of unique screen resolutions being used to access web sites is increasingly varied and growing at a rapid pace” [1]. I only have to look back at my last three phones I’ve purchased and each one has a larger physical display than the last one. (Admittedly this was not always by choice as the new models I wanted were not made available in the smaller form factor, due to the “bigger is better” [2] style trend of the phone industry.) As a result, my phone displays more pixels than my old 20” desktop screen which is easier to comprehend with the release of phones with 4K displays. So if I end up on some mobile ‘optimized’ site with reduced functionality or content I will always request the full-fat Desktop experience. I feel the very fact that there is a button to request the ‘Desktop version’ of a website on a mobile device is like an admission of design failure.

Responsive design is the ability for a website to display the same content across all screen sizes and resolutions often by using a resizable layout or grid (therefore removing the need for the user to choose what version of the site they want to see). Ethan Marcotte who first described ‘Responsive Design’ as the way forward proposed “rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience” [3]. Since then there have been plenty of articles describing the technical characteristics of responsive web design and why it is recommended; ultimately our goal is about creating the best experience for users, but responsive design will benefit SEO for mobile searches as well.

Intro

What makes good design?

There are many design apps and developer tools available, but some tools and techniques are better suited for responsive web design. But before I launch into responsive design I’d like to consider the design aspect. If I was to share one truth from my time learning graphic design and all the years of experience as a designer, it would be; good design needs a good problem. As a designer I always have the desire to produce an award winning or world class design for every project. To reproduce success is really hard and that’s why designers develop some form of working habit or pattern to try to repeat successful outcomes. This is often explained as the ‘Design Process’. I don’t wish to cover every variation of the design process but I feel its good practice to review the general principles:

  1. Research / investigation
  2. Design brief
  3. Generation of ideas
  4. Synthesis
  5. Final design and production

The word ‘design’ infers the need to solve a particular problem. Therefore, it is important to start the design process with knowledge and thought. Sometimes its all to easy to think we know enough about what the end product should look like that we fail to investigate or question the motivation for design. When the problem isn’t immediately obvious it will take a certain amount of research into the subject to be able to ask the right questions to find out the problem which the design will aim to solve. When the problem is known, we can describe the solution which will solve the problem – this forms the design brief. When it comes to generating ideas it maybe helpful to have a brain storming session first. The best ideas (traditionally three) are identified as concepts for further development and design synthesis. Finally, the strongest concept is selected as the solution for final design and production.

I encourage designers to define your own design process (or pattern for success). When Steve Jobs asked designer Paul Rand to generate some logo ideas for them to look at he declined suggesting that he would only present them with the solution to their problem. I admire Rand’s thinking – I feel when I have to ask a client about which options they prefer its usually because I haven’t found the right solution yet.

Responsive design is the recognised technical solution to the diverse screen size problem, but we must always consider the design aspect of a project. I must constantly challenge myself to find a good problem to solve. Without a good problem to solve I will just be pushing pixels and not fulfilling my purpose as a designer.

Responsive Design for designers

If you are a designer for print it helps to have an understanding of the print production process. Similarly, with responsive web design it is important to know how responsive developer tools operate. When it comes to design for print designers use grids and guides for page layout. This grid layout mechanism is similar for web developers except the grid will dynamically resize depending on window or screen size. The most popular grids for responsive design are Bootstrap and Foundation so even if you don’t like to get your hands dirty with code, it is something that anyone can play with and see how design elements (or columns) will react as the dynamic grid changes with different widths. By default, both grid systems use a 12 column grid but you can also customize the number of columns with Bootstrap and with Foundation using Sass. Designers who have a grasp of how the dynamic grid operates on the production or development side will be in a better position to create ‘responsive-ready’ designs.

Design tools

When I started designing for web there was only the desktop browser to think about so the basic approach of designing for the lowest common resolution worked well. Initially I used Photoshop for web designs with pixel perfect layouts. But as consumer monitors became capable of displaying greater resolutions it was possible to reproduce richer layouts influenced by print design. Illustrator became a superior tool for web design as it offered advanced control of grids and guides originally used for print design. Illustrator was also vector based and that made it easier to stretch out graphics as screens got bigger. Because of this I feel vector based tools are vastly more equipped for responsive design work than pixel-based design tools. But while Illustrator is a great tool for seasoned print design professionals, some digital designers might prefer something a little lighter and easier to use like Sketch or the new Experience Design app. However, the problem with all these design tools is that none can produce design with responsive information. Even the new digital design apps still feel like design for print tools stuck with static canvas layouts and limited bitmap resizing that fail to scale in a way that mimics the production process (ie. CSS background properties). Because of the lack of professional tools capable of responsive design that means the designer has to do extra work. For responsive designs I will design at least two size layouts for each page. I like to design a page in portrait aspect to represent a mobile view, and landscape aspect to represent desktop or tablet. So as long as a designer understands how responsive grids or dynamic columns work, then these designs should be easily fused together during development or production stage.

Responsive Design for developers

There is an abundance of tools for developing responsive websites. But just like I mentioned that it was important for designers to think about the development or production I also feel responsive web developers should be mindful of the design side. Developers need to be aware of the current problem that professional design tools don’t contain responsive information and that means they will need to work closer with designers to figure out how to merge separate designs into one single responsive design. Responsive web developers will need to be familiar with the design grid so that they can turn page designs into a single dynamic layout of HTML and CSS.

The language of responsive web design

CSS is the design language of the web. But CSS is rather an unwieldy art that does not sit comfortably in a designer or developer camp. I find CSS must be constantly tweaked along with the HTML elements to achieve the required layout, especially with the added complication of responsive design media queries. It is therefore preferential to use web technologies that are fast to deploy and allow live refreshing when developing responsive design.

Responsive web kit

Just like I encouraged designers to make their own design process, I also encourage developers to use or discover the web technologies that will work best for producing the website or web app.

Unsurprisingly it’s not possible to cover every web technology in one article so I will explain the reasons behind the web technologies that I’ve been consistently using for my recent projects. Plus, I really want to share my favourite client-side web design / developer stack because if you are passionate about design I think you will like it too!

Project dependencies

Responsive web projects tend to use a number of third party dependencies, and package managers can be used to help install and version manage them all. Bower is awesome for managing project dependencies like Bootstrap or jQuery. While NPM is great for install testing and build tools like Gulp and BrowserSync. Package management is also advantageous for source controlled projects as it can be easily setup to prevent committing a shed load of third party code into your repro. Following this procedure means contributor commits are kept clean and will make it easier to inspect changes or code review.

Design as you go

A painter will add strokes of paint to his canvas, while a sculptor will chip bits of a rock to expose an image. Designing websites is a progressive art that is both additive like a painter and subtractive like a sculptor. Can you imagine asking a painter or sculptor to work blind folded? As a designer I can’t produce my best work unless I have real-time feedback of my adjustments. I need to see and interact with my design in real-time and across multiple devices. That’s why BrowserSync is the single most important responsive design tool for client-side web development. ‘Live reload’ or ‘live preview’ is important for web design, and with responsive web design it’s mission critical to test all the desktop and touch screens!

A UI kit for web apps

Ever wanted to replicate the performance of the native UITableView on iOS or ListView on Android? Polymer’s ‘iron-list’ and ‘iron-image’ elements can be used to create ‘buttery-smooth’ scrolling recyclable lists at 60fps. Polymer is also built on top of Web Components which allows you create your own reusable elements, but Polymer also provides a ‘Material Design’ UI kit suited for responsive web app development. I also find the template and binding model lends itself well for creating responsive designs. Polymer is well suited for developing SPAs (single page applications) and can support client-side routing.

Smarter CSS

Design should be an enjoyable art, but can you imagine what a lot of CSS is like to manage! All these responsive elements, layout grids, images and glyphs will add lines and lines of CSS. The sheer amount of CSS required by a responsive design project could very easily and quickly become unmanageable. Sass or SCSS is just like writing CSS, except you can do it with less code and fewer lines of code are easier to manage. Sass variables will enable designers to create a theme to easily define or tweak colours, type styles and spacing. Another powerful feature is ‘mixins’ which can be used to reuse common styles, define responsive media queries, generate image tiles, build font faces and include browser prefixes. Sass will reduce the number of lines of CSS you need to manage.

Responsive Grid

When it comes to responsive web design the use of a popular grid system like Bootstrap is a good place to start. I do feel however the default four tier grid system (xs, sm, md, lg) of Bootstrap 3 doesn’t give me enough granular control to deal with phone vs phablet sized devices. So I use the Bootstrap grid as a starting point and usually add extra media queries for smaller mobile devices. Bootstrap 4 promises to address this issue and will deliver a more comprehensive five tier grid system (xs, sm, md, lg, xl) for responsive design amongst other differences.

HD is the new standard

Retina displays are everywhere these days! If you walk into a phone shop today, I reckon it would be harder to find a phone without an HD display. The new HTML5 picture element allows developers to specify higher resolution images so the graphics will display sharper. But I still prefer to use CSS media queries to handle ‘Retina’ (@2x) and ‘Retina HD’ (@3x) images.

I find the CSS method gives more control over scaling, cropping and positioning which can be advantageous for responsive designers. With the CSS background image methods I can also use an image sprite technique to load in a texture map (or texture atlas) of tiled images and this improves page load times as there will be less http requests.

One final thing though, high definition images are much larger in filesize so make sure to compress all bitmaps! ImageOptim is a great image compression tool I use on Mac, though they also recommend File Optimizer for Windows.

Vector glyphs

With responsive design there is always a need to scale graphics. Vector graphics are resolution independent and can be scaled to any size and that makes them a great asset. The good news it that most modern browsers support SVG. But if you have a set of vector icons that are monochromic, then a neater way to bring these to web is by exporting them all as a custom font. Icomoon is a free online tool to create custom font glyphs. Oh, and because its seen as a font you can take advantage of CSS font sizing and colour properties.

Automate all the things

Gulp makes it easy to develop with full source, or build a minified version for production. Gulp also watches for source code changes and works in conjunction with BrowserSync. So whether you fiddle with HTML, edit a line of script, tweak a style, modify an image or asset it can notify BrowserSync to reload. Gulp can even compile Sass into normal CSS for reloading live design changes.

Production

Building web apps with Cordova

Cordova tools make it easy to package your web app as a hybrid app for distribution on multiple app stores. But the big challenge for web app developers is creating a user experience that will look and feel as good as a native app.

App-ify web view behaviours

The web view provided by iOS and Android come with a number of behaviours that are designed to improve user experience with websites. In a website context this is true, but when it comes to responsively designed web apps these web view behaviours result in undesirable effects as far as an app experience is concerned:

  1. Page bounce or spring – pages have a bounce or spring effect, but apps don’t bounce.
  2. Double tap zoom – pages allow double tap regional zooming, but apps don’t zoom.
  3. 300ms tap delay – page interactions are artificially slower to accommodate the double tap zoom gesture, but apps don’t exhibit unresponsiveness.
  4. Long tap inline magnification – pages allow prolonged selection for inline magnification, but apps don’t show inline magnification everywhere.
  5. Global user selection – page selection is everywhere, but apps only provide selection where user input is desired.

Fortunately, most of these web view behaviours can be tamed so a hybrid app can behave in a native app manner that a user would expect.

  1. Page bounce or spring behaviour can be disabled by setting Cordova’s ‘DisallowOverscroll’ preference to ‘true’.
  2. Double tap zoom behaviour can be disabled by setting Cordova’s ‘EnableViewportScale’ preference to ‘true’ and setting the HTML5 viewport meta tag (http://www.w3schools.com/css/css_rwd_viewport.asp) to disable user scaling.

  3. The 300ms click delay is fixable on Chrome by setting the device width on the HTML5 viewport meta tag (shown above).
  4. Long tap inline magnification can be disable by setting Cordova’s ‘Suppresses3DTouchGesture’ preference to ‘true’.
  5. Global user selection can be disabled with CSS ‘user-select’ set to ‘none’ (including the usual browser prefixes (https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)). With iOS ‘-webkit-touch-callout’ also needs to set to ‘none’ to disable the touch callout.

    NB: As this turns off all user selection, you might need certain elements or form inputs to allow user selection. In this case certain exceptions can be added using the :not() CSS selector.

Turbo web view performance for iOS

While there are quite a number of things you can do to improve web page performance, one of the recent hybrid app performance headlines for iOS is the availability of WKWebView which provides faster performance than the older UIWebView. Cordova supports WKWebView but there is a need to install the WKWebView Cordova plugin and set the ‘CordovaWebViewEngine’ preference to use ‘CDVWKWebViewEngine’ in Cordova’s ‘config.xml’ file.

A couple of time saving Cordova scripts

Summary

Responsive web design for designers

  • Understanding the dynamic grid to design responsively
  • Separate designs that lend themselves to a single responsive design
  • The advantages of vector-based design tools

Responsive web design for developers

  • Understanding the design grid to merge separate designs
  • Responsive design with multiple device testing and live reloading
  • Developer web kit for responsive design

Production of hybrid app

  • Removing the unwanted web view behaviours for responsive Cordova hybrid apps
  • Turn on turbo performance of Cordova hybrid apps for iOS
  • Scripts to help production of Cordova hybrid apps across platforms

References:

  1. Jason Sperling (2013) The Big Argument for Responsive Design [Online] Viget. Available: https://www.viget.com/articles/the-big-argument-for-responsive-design [Accessed 2 May 2016]
  2. Ben Taylor (2014) Why smartphone screens are getting bigger: Specs reveal a surprising story [Online] PCWorld. Available: http://www.pcworld.com/article/2455169/why-smartphone-screens-are-getting-bigger-specs-reveal-a-surprising-story.html [Accessed 2 May 2016]
  3. Ethan Marcotte (2010) Responsive Web Design [Online] A List Apart. Available:
    http://alistapart.com/article/responsive-web-design/ [Accessed 2 May 2016]

Additional media:

Making sense of web app debug logs on multiple Android and iOS devices

If you’ve ever needed to debug Cordova web apps on iOS and Android it can be quite an awful experience for a web developer. Since working on Postcard web app I’ve found a couple of neat tips to help make sense of those noisy debug logs.

From localhost to native land

Designing and developing in localhost is familiar territory to web developers and so it makes sense to try and get as much work done there as possible. But when you need to use the physical hardware features of a mobile platform the only way to see if things really work is to go native.

For Cordova app development on Android there are a few ways to debug web apps but usually it’s a case of cordova build android then cordova run android --device --debug. Then if you have setup Android SDK’s PATH environment var you can run monitor in command line to open up the Android Device Monitor app to see all the logs.

AndroidDeviceMonitor

For Cordova app development on iOS it’s usually cordova build ios in Terminal and then you just open the project in Xcode to debug the app.

XcodeLogs

Both these options allow you to run and debug multiple devices although you have to tab or switch views to see the other devices logs. Also Android logs are so noisy it’s almost impossible to spot the stuff you want to look at. Ideally I would like to look at all logs at the same time and dial in on the stuff I’m really interested in.

While developing the Postcard app I mocked up the UX flow to perform an Identity Exchange with two devices using our peer to peer Thali Cordova plugin for iOS and Android. Needless to say the Android logs got very busy and I also wanted to be able to get the logs of iOS devices outside of Xcode sessions. Thankfully there are a couple of better ways to debug multiple Android and iOS devices from one Mac –

Debugging Cordova web apps on multiple Android devices using adb and logcat filtering

List android devices attached:

Because I have two android devices attached I want to be able to target both from command line.

Once Cordova has installed the app on device you can use logcat to see the logs in Terminal. However with multiple devices you want to use adb -s to target a device and then use logcat -s to filter out all the noise! With the Postcard app we are using jxcore to run Node.js on mobile so I used ‘jxcore-log:*’ as my filter.

In another Terminal tab or split window in iTerm.

logcat-jxcore

Now that’s much cleaner and stuff doesn’t scroll faster than you can actually read! 😉

Assuming the Android device is already developer enabled you can also inspect the web view and javascript console logs in Chrome: chrome://inspect/#devices

Debugging Cordova web apps on multiple iOS devices using iOS Console

With iOS all you need to do is attach your devices and download iOS Console which is a handy freeware app to view iOS logs on a Mac with filtering. With our iOS Postcard app I have set the filter to ‘jxcore’.

iOSConsole-logs

iOS Console doesn’t need Xcode running and the logs are a lot cleaner than the default Console app.

Also you can inspect the web view and javascript console in Safari once the app is running. In Safari browser go to:
Safari > Preferences > Advanced and turn on “Show Develop menu in menu bar” then select:
Safari > Developer > Device Name

Note: If you are using mobile Safari to test your web app instead of Cordova then you will have to enable “Web Inspector” on the iOS device under Settings > Safari > Advanced

Faster Cordova web app deployment with hotwire script

Building for iOS can be very time consuming. Every time you make changes to a Cordova web app you need to do a cordova build to update the app project. Then you have to go into Xcode to debug on device. But if you don’t need to make changes to native code and you only need to update web elements like HTML, Javascript, image and media files then you can save time by just updating those bits.

I’ve made a Hotwire IPA bash script to replace the ‘www’ web app folder with the updated directory. All you need to do is create an ‘*.ipa’ archive and the hotwire script can quickly update it with all web app changes and deploy to device (without need to jailbreak).

Example usage:

sh hotwire-ipa.sh -f ~/Desktop/app.ipa -d "www" -p ~/Cordova/app/www -b ~/Cordova/app/platforms/ios/www -i

where:
-f is the path to *.ipa archive
-d is the dir to delete inside app
-p is the dir to copy in place
-b is the dir with Cordova build plugins and scripts

Setup and instructions for deploying iOS app using hotwire-ipa over on GitHub.

Time results for iOS Cordova app:

3m 09s – Each time you update web files you need to execute cordova build ios to stage the updates.
0m 38s – Open in Xcode
8m 10s – Debug from Xcode

Total: 11m 57s

To run the script we need to first create an Archive and export it as an *.ipa archive in Xcode. Once this is done then future updates can be pushed using the script.
2m 53s – Create Archive
2m 13s – Export as .ipa
4m 39s – Deploy to device using hotwire-ipa script with -i switch to install as *.ipa instead of *.app.

Total: 8m 45s (11m 54s if you include initial cordova build ios)

That’s 3 minutes 12 seconds saved the first time if you have already done cordova build ios just to compile the native code, then 7 minutes 18 seconds saved to deploy repeated web app updates.

All times recorded using Postcard web app (using ‘Story_0’ branch) on MacBook 1.2 GHz Intel Core M

Azure Mobile Services for Unity3d

State of play

If you’ve followed my previous Unity3D Azure tutorials I’ve covered two well known Unity Azure plugins – Prime31 and Bitrave. Bitrave had better multi-platform support, however it required the ‘JSON.NET’ paid asset to support iOS and Android. But then there was issues with iOS AOT compiler. Because of this I decided to start a new Azure Mobile Services library for Unity3d to support multi-platforms like Unity3d – iOS, Android and Windows without need for paid plugins.

Using Azure Mobile Services in Unity3d

You can drop the Unity3dAzure library into your existing Unity project or try out the demo project to get started.

Getting started

  1. Download the Unity3d Azure demo project or use git to clone the project:
  2. Create a Mobile Service
    • Create ‘Highscores’ table for app data
    • Modify ‘Highscores’ table Insert node script to save userId
    • Create a custom API called ‘hello’
  3. In Unity3d open scene Scenes/HighscoresDemo.unity
    • Check the Demo UI script is attached to the Camera. (The script can be attached by dragging & dropping the Scripts/HighscoresDemoUI.cs script unto the Scene’s ‘Main Camera’ in the Hierarchy panel.)
  4. Paste Azure Mobile Service app’s connection strings into Unity Editor Inspector fields (or else directly into script Scripts/HighscoresDemoUI.cs)
    • Mobile Service URL
    • Mobile Service Application Key
  5. If you want to save score with userId then create Facebook app
    • Fill in Azure Mobile Service’s Identity > Facebook settings (App Id & App Secret)
    • Paste Facebook access user token into Unity Editor Inspector field (or else directly into Scripts/HighscoresDemoUI.cs)
      Play in UnityEditor

Credits

Special thanks to Jason Fox and Bret Bentzinger who put together the UnityRestClient library using the JsonFX plugin.

Developing a web app that behaves like a native app

Like many developers out there I started out coding for the web. So you might think it would be easier to develop a web app than a native app, right? The short answer is no… but web app development is getting better and the performance gap is closing.

Thoughts on web app vs native app development

Delivering a world-class UX is the main reason to opt for native development. Web app performance has quite some way to go especially on the vast majority of low spec devices. For example even if you get your web app running at a buttery smooth 60fps in iOS Safari, it doesn’t automatically mean you get that sort of performance in an app’s UIWebView.

iOS Tip: Don’t be content testing any web app or web UI framework in Safari and think that it works. A real web app development test is only done by running it inside an embedded WebView.

What you have to be careful off is getting sucked into some web app framework because you can get some decent results pretty quickly, but as soon as you add a little more complexity things can start to break and the speed of development will slow as a result. Whereas while native development might take longer to learn initially, after that you can start building some pretty slick apps just using the standard suite of UI components provided.

Ultimately things are getting better for web app development but probably not enough as to make native app developers want to consider switching. But with all the modern browser javascript speed optimisations and mobile devices becoming ever more powerful it’s worth considering a web app where the ability to share code is most important. After all who wouldn’t rather develop code once that works across mobile and desktop and leverages the extensive web developer knowledge base? So the compelling reason to build a web app is that your code should run on any screen that runs a modern browser.

Postcard app

I’ve been involved with developing the Postcard app which is a web app for demoing a peer to peer web experience using the Thali Cordova plugin. Throughout the design, development and build process of this web app I’ve encountered a number of issues or pain points and thought it would be good to share the golden nuggets I’ve learnt while trying to develop a web app that behaves like a native app!

Postcard app icon

Icons and splashes generator for Cordova web app

With any project I always like to start with design before I jump into development. Design is a time consuming task but some things can be automated like resizing all those app icons and splashscreens across multiple platforms. I wrote a time saving Ruby script to build app icons and splashscreens for iOS and Android with Cordova’s image filenames and sizes. (Usage and instructions are in the gist)

Designing a web app across different screens – live!

Many web apps take advantage of node and there is a great module for designers called BrowserSync.

BrowserSync allows you live preview all your design or code changes across multiple screens. That means you can test your web app in real-time on any browser on Mac or Windows as well as hook up the web app on iPhone, iPad or Android. Also when you interact on one screen for example following a link or scrolling the page this automatically updates everywhere else. This is a must have for any responsive design or adaptive design work!
BrowserSync demo

Polymer 1.0 – a UI kit for web apps

For the UI design side of things I choose Polymer 1.0 due to it’s host of web app elements inspired by a native app’s UI kit. Initially I didn’t like all the custom element names, as this reminded of an Angular wild west of element names but you can quickly learn the Polymer core elements and view the documentation and source behind them. Also there is a benefit to this as it prevents the usual ‘div nest of inception’ meaning that an HTML layout can be understood at a glance.

Getting started developing with Polymer

The trickiest thing is actually getting all the Polymer elements you need to use as these all come separately which of course makes sense later for production. But do yourself a favour and just install all the paper, iron and neon elements for no hassle development.

Should I use Polymer’s ‘on-click’ or ‘on-tap’ event?

There is a 300ms click delay issue that affects mobile web apps. The good news is that there is a simple fix by using the viewport meta tag with width=device-width property. But the bad news is that this trick only works in Chrome 32+ on Android.

Thankfully Polymer tries to handle this issue for you if you use the on-tap event however it doesn’t appear to currently trigger a click on Mac Safari (using an iframe web app). So if desktop Safari compatibility is more important then you may have to stick with the standard on-click event until this is fixed. Or just incase you already use a ‘fast click’ javascript polyfill it may run into issues due to click delay complications with the iOS 8 web view.

Meet ‘iron-list’ – the UITableView for web app

Polymer’s iron-list element is essential for scrolling large amounts of data on mobile devices. It does this by using a virtual list and recycling (20) cells to handle smooth scrolling of 1000s of items. One note of caution is that this runs fine in Safari browser but there is currently a scrolling issue in iOS 8 WebView beyond a certain number of items. If only UIWebView would behave the same as Safari then development would run so much smoother!

Make it feel like a native app – not a web site!

It’s important to make sure things act like an app and not feel like a website thrown inside a Cordova webview. There are a couple of giveaway indicators that can be fixed, although not everything will behave perfectly.

Disable the scrolling bounce effect

While adding the magical web app meta tags will give you full screen control in the browser it doesn’t get rid of the web page scrolling spring effect common with iOS and Mac. Now while the spring effect provides a wonderful UX in a web browsing context – native app’s don’t spring! To disable this unwanted behaviour the first thing to do is to enable the DisallowOverscroll preference in Cordova’s config.xml.

If you are not using Cordova then you can disable the iOS webview scroll:

It’s always a good idea to do a CSS reset on the html,body and then add the following to disable the bounce effect in the browser:

Disable select copy/paste

Another annoying web behaviour inherited is that everything is selectable on a web page. Again a useful behaviour in a web browsing context but not so much with a web app. Besides not feeling right there is a UX issue if a user taps the ‘wrong way’ instead of activating a button click as expected they end up in a text selection mode. The easiest workaround is setting user-select to none on the ‘body’. NB: If your web app contains form inputs then you can exclude those inputs using the :not() CSS selector but I find it easier to switch everything off by default.

The one problem you still get with iOS UIWebView is that you always get a magnifying glass when doing a long-press and unfortunately there is no simple way of disabling this without hacking UIWebView private APIs.

Prevent scrolling nav bar when editing input

A quirk with web apps on iOS is trying to fix a nav bar so it won’t scroll off the screen when editing an input or textarea that would obscure the soft-keyboard when it pops up. One trick is to position your input as high up the page as possible in order to avoid the issue. But sometimes this isn’t always possible so the other option is to try a hacky workaround discussed on SO which also seems to work pretty well with Polymer:

In Cordova if you want to enable Javascript focus() calls to open the soft-keyboard you can disable the KeyboardDisplayRequiresUserAction preference. Although bear in mind iOS8 now supports focus() calls but I found the input and keyboard can lose connection sometimes.

Problems with web app when running as a native iOS app…

I encountered quite a number of problems when running a web app inside the iOS 8 UIWebView. I have listed the main issues below to watch out for with possible workarounds:

[WebActionDisablingCALayerDelegate setBeingRemoved:]: unrecognized selector sent to instance 0x174009d20
*** WebKit discarded an uncaught exception in the webView:willRemoveScrollingLayer:withContentsLayer:forNode: delegate: -[WebActionDisablingCALayerDelegate setBeingRemoved:]: unrecognized selector sent to instance 0x174009d20

Solution: Add body style for -webkit-transform. This WebView bug occurred when animating an element sliding up from the bottom of the page. It caused the animation to jump and skip frames and seemed to trigger memory warnings.



[46377:7026777] Received memory warning.

Solution: If you’ve tested for memory leaks then try disabling animations. If this solves the issue then try to optimise your script so that expensive business logic is called only after animations are completed.



Message from debugger: failed to send the k packet

Solution: Keep app awake! In the app delegate enable setIdleTimerDisabled:

iOS Tip: When testing web apps on iOS it can take so long to build and debug on device that the screen locks and the deploy fails. Use the setIdleTimerDisabled to keep the app alive for debugging!


Developing a peer to peer web for iOS

To establish peer to peer (p2p) communication on iOS devices there is an API for that known as the Multipeer Connectivity framework. There are a couple of things to bear in mind about this framework:

  • Discovers and connects with iOS devices but will not discover devices on other platforms like Android
  • Maximum number of 7 invitees (client peers)
  • Will raise a prompt for user acceptance of a peer connection request

Intro to Thali project for iOS

Thali is an experimental open source p2p project that promises to enable p2p web to run on mobile devices. This is quite a big undertaking so to make life easier to begin with we can start to look at the iOS to iOS p2p connectivity story which is documented as Thali “Story -1”.
The spec will use the TCP internet standard to transport data across peers therefore all mobile devices will run a Node.js layer. In order to run Node.js on iOS we use a Cordova plugin which runs JXCore. This will then connect with a native TCP bridge which will relay the data over the iOS Multipeer Connectivity framework. The flow is illustrated in the diagram below:
Thali flow for iOS

How to build Thali demo for iOS

If you like playing with bleeding edge code you can build the “Story -1” iOS dev branch. (NB: You will need two iOS devices with Bluetooth 4.0 support.)

To run this build script in Terminal you will need Node.js. If you haven’t already got Node.js installed you can get Node.js with NVM for Mac OS X.

Install the Cordova package:

Build Thali “Story -1” demo for iOS:

How all the parts work inside the Xcode project…

There are three main parts or layers in the Thali iOS project:

  1. Cordova

    • All demo UI code is handled by “thali_main.js” script.
  2. JXCore

    • UI actions will trigger a call to functions in “app.js” script which is responsible for running all our Node.js code and calling the native methods as documented in the Thali common API.
  3. Native Plugins

    • All native methods called from JXCore are registered in “THEAppContext.m” defineJavaScriptExtensions method

What about Android p2p?

More info about Thali for Android is available on Dr Jukka’s blog.

What about iOS and Android p2p?

More info about future Thali development including iOS and Android p2p interoperability is documented on Thali stories.

Using Azure CLI on Mac OS X to create Mobile Service

One of our startups at MS Ventures was looking to use the command line to manage their Azure account on Mac. If you prefer using Mac OS X Terminal or iTerm and have an Azure account then you should check out the Azure CLI tools for Mac.

Azure CLI

Install Azure CLI for Mac

You can either download the Azure Command Line tools installer for Mac or install the Azure command line tools using nodejs. I have previously written a post covering installing nodejs using NVM.

Test Azure command works with help:

Download Azure Publish Settings file

Sign in to your Azure account and download your *.publishsettings subscription file.

Import Publish Settings file

Import path to downloaded Azure Publish Settings file:

Tip: You can drag & drop the file into Terminal instead of typing the link.

Show Azure account subscriptions:

Create Mobile Service with Azure CLI

Create Mobile Service TerminalTest:

You will be prompted to enter SQL admin user name and password. The Mobile Service should only take a couple of minutes to provision.

Show Mobile Service details including applicationUrl and applicationKey:

You will want to make a note of your applicationUrl and applicationKey for CRUD examples below.

Create Table Items:

Show Tables:

Read Table Items:

CRUD examples with Mobile Service using curl

You can quickly execute Create, Read, Update and Delete operations with Mobile Services using curl commands. Here’s a quick overview of Mobile Service CRUD operations and methods:

Operation Method REST URL format
Create / Insert POST https://<service_name>.azure-mobile.net/tables/<table_name>
Read / Query GET https://<service_name>.azure-mobile.net/tables/<table_name>
Update PATCH https://<service_name>.azure-mobile.net/tables/<table_name>/<item_id>
Delete DELETE https://<service_name>.azure-mobile.net/tables/<table_name>/<item_id>

You will need to replace the X-ZUMO-APPLICATION header value below with your own Mobile Service applicationKey.

  1. Create / Insert

    Change the data text to submit a couple of items… Note you will get a JSON response with the id of the inserted item. This item id value is to be used in the Update and Delete examples below.

  2. Read / Query

  3. Update

    azure_hello_mac

    ^ Data updates shown in Azure Mobile Service table.
  4. Delete

How to query and filter Mobile Service table data with curl

Get items marked as complete

Get items starting with text ‘hello’ with total count of results:

Get a collection of items in order (eg. pagination):

Just be aware if you use double quotes for --location then you must escape the dollar signs that prefix the params with a backslash (eg. \$). Single quotes don’t require dollar escaping but you may have trouble encapsulating filters with quoted strings hence I have opted for double quotes in these query examples.

Ember-CLI ToDo example app with Azure Mobile Services

Background

When you create an Azure Mobile Service you can download a ToDo sample app to help you get started on a number of platforms including Windows, iOS and Android. There are also cross platform options available with Xamarin or web app development using PhoneGap or HTML/Javascript. Recently I came across a pretty neat Javascript framework called Ember for creating web apps. While you can go ahead and quickly download the Ember Starter Kit to try out some of the introductory snippets listed on the Emberjs homepage, the better option for serious development of Ember apps is to use Ember-CLI. The Ember Command Line Interface gets you up and running with a full MVC framework and helps install project dependencies using NPM (Node Package Manager) and Bower. Having just started learning Ember-CLI myself I thought it might be useful to do a getting started tutorial showing how to hook it up with Azure Mobile Services to create a ToDo app with same functionality as the other offerings already available on the Mobile Services quick-start page.

Prerequisites

Before you can start using Ember-CLI you will need Node.js installed.

How to install Node.js on Windows

Alternatively you can manage multiple node versions using the latest nvm-setup Windows installer.

See nvm-windows for more commands.

How to install Node.js on Mac

If you’re using a Mac its better to install Node.js using NVM (Node Version Manager) rather than install as admin/sudo user. Run the following commands in Terminal:

NB: In new Terminal sessions you may need to run nvm use default. If you want to you can add this to your bash profile to setup automatically.

Or for a specific node version:

Once you have node installed you can check its working by getting the version:

Installing Ember-CLI and bower

Install ember-cli, bower and phantomjs globally using the -g switch.

Creating the Todo example app using Ember-CLI and Azure Mobile Services

  1. Create an Azure Mobile Service
  2. Create example TodoItem table.
    CreateTable-TodoItem
  3. Create a new Ember-CLI app
  4. Run in ember client in Browser.
  5. Open http://localhost:4200/ in new Browser window to see web app.

    welcome-to-emberjs

  6. Save Azure Mobile Services javascript files into /vendor folder.
  7. Update the Broccoli file Brocfile.js to import /vendor javascripts
  8. Update the js hint file .jshintrc to recognise the WindowsAzure global namespace.
  9. Generate TodoItem model, index controller and route. (Generating a route will also generate a Handlebars index.hbs template by default).

  10. Create azure service. (Generating a service will also generate an azure-service.js initalizer)

  11. Update the services/azure.js script with your own Mobile Service connection strings (on lines 61-62):

    When the app first loads we will need to read a table. In this case we will read the TodoItem table to get a list of TodoItems. When a user needs to add a Todo item we will call the insert method to add an item into a table and update our Ember model for display. The del method will work the same way except the item will be deleted. Finally the update method will be used to save changes to an item, which in this case will be when the TodoItem is completed (stroked out).

  12. Edit models/todo-item.js to handle todo text string and a completed boolean so tasks can be marked off:

    The TodoItem model consists of a string property for the Todo text and a boolean property to say if the Todo item has been completed.

  13. Edit routes/index.js and set model to read TodoItems table:
  14. As ember serve auto updates as you save changes you should see some activity in your Browser’s console log.

  15. In the Browser’s console log you might get a refused to connect error “because it violates the following Content Security Policy directive: connect-src ‘self'” that means we need to update our environment config. To fix this add the following contentSecurityPolicy settings to the ENV var in config/environment.js to allow connections to *.azure-mobile.net:
  16. Update the templates/index.hbs which will be used to display the user interface.

    NB: You will get an uncaught error if you try to add, update or delete items as we still need to handle user actions with a controller.

  17. Update the controllers/index.js to handle actions from user interface and delegate them to our Azure service.

    To allow access to the service from the controller we need to inject the azureService in the initializers/azure-service.js service initializer.

    ember-cli-todo-app
    TodoItem-table

  18. Finally add some styles to grey out and strike through completed items styles/app.css:

    ember-cli-todo-app-style

Download finished Todo ember-cli project on GitHub

Unity3D Leaderboard demo using BitRave Azure plugin

This is a quick Unity3D game developer tutorial showing how to save, update and query high scores stored in the Cloud using a Mobile Service and the BitRave Azure plugin.

Watch how to create a Leaderboard in the cloud using the Unity3D BitRave plugin.

  1. To save scores in the Leaderboard table you will need to create a Mobile Service.

    If you don’t have an Azure account there is a special Cloud GameDev Offer for game developers.

  2. Get the BitRave plugin with Leaderboard scripts on my GitHub fork.

    There are two new scripts I’ve added for the Leaderboard demo:

    Unity3D BitRave Fork with Leaderboard script demo
  3. Create new Unity project.

    Unity3D BitRave Fork with Leaderboard script demo
  4. Copy contents of the BitRave Universal Plugin Assets folder into your Unity3D project’s Assets folder.

    Unity3D BitRave Fork with Leaderboard script demo
  5. Import JSON.NET dependancy from Unity Asset Store.

    Unity3D BitRave Fork with Leaderboard script demo
  6. Open the TestAzure scene.

    Unity3D BitRave Fork with Leaderboard script demo

    Select Main Camera and remove Script in the Inspector panel. (This will be replaced later.)

    Unity3D BitRave Fork with Leaderboard script demo
  7. Create ‘Leaderboard’ table in Azure Mobile Services.

    Unity3D BitRave Fork with Leaderboard script demo
  8. Open AzureUILeaderboard.cs script and replace Azure Mobile Service connection strings.

    Unity3D BitRave Fork with Leaderboard script demo
  9. Drag & drop AzureUILeaderboard.cs script to attach it to the Main Camera.

    Unity3D BitRave Fork with Leaderboard script demo
  10. Now you’re ready to play in Unity Editor add post some high scores!

    Unity3D BitRave Fork with Leaderboard script demo
    Unity3D BitRave Fork with Leaderboard script demo

In this demo project you can submit new scores, return list of all scores and update them. You can also query to show only high scores or get list of a user’s scores.

Check it out!

Karma Labs on Azure Mobile Services and BitRave plugin in their Unity3D game development.

If you are also looking to handle user identity with Mobile Services and configure build settings for iOS and Android development I touch on this in my first getting started with BitRave Azure plugin tutorial.

Share your Unity3D #GameDev with @deadlyfingers