The Adventures of a Consulting Technologist

Tuesday 9 October 2012

Windows 8 App Development - Part 4 of ?

Building our app

Whaddup Internets

I want to start this entry with a disclaimer; this blog will not be a lesson in how to write a Javascript Alarm clock nor will it be how to write beautiful code... I wont be posting much code as I consider myself a hacker at best (in the traditional not illegal sense) and so I wont be advocating that my particular coding approach is in any way best practice, in fact it may even be laughably bad in parts.

If you want JS and HTML lessons go here: http://w3schools.com/ ...I love this website wholeheartedly.

If you want the Windows App Store MSDN references go here: http://msdn.microsoft.com/en-us/library/windows/apps/br229519.aspx - I have been hitting this page about 200 times per day at the moment and its great for figuring out those new Windows 8 APIs (except bloody WinJS.UI controls as discussed below)

Now with that out of the way let's not let a lack of coding skill curb our enthusiasm for writing a spectacular app! I have been working on this app in my spare time for about 5 days now and here are my early impressions

I am a lot further advanced than I expected to be a few days into this project
I am shocked at how easy MSFT are making it for even a hacker like me to knock up a somewhat usable application using Javascript and HTML5... It's really bloody easy.
I am having fun.
I am surprised at how much the developer community outside of MSFT have NOT embraced this yet.
Blend for Visual Studio 2012 is an amazing HTML5/JS/CSS tool and I'll probably use it a lot from now on.

In my last post I created a list of functions as product for my version 1.0 (or more correctly it should be 0.1) here's the list again as a reminder and a status update as to where I am up to at the time of this post:

Main Function() - Ongoing
Display clock() - Done
Set alarm() - Done
Run in background() - Next
Save alarm data() - Done
Read alarm data() - Done
Set 24hr time() - Not Done
setAMPM() - Not Done
Update Clock() - Done
Alarm Trigger() - Done
Alarm Snooze - Done
Wake Device() - Not Done
Set Alarm Volume() - Removed from v0.1 (for simplicity we might as well use the native windows controls)

And here's a screen shot in "clock" mode, I have put all the set alarm controls under the clock for ease of testing but its likely I'll move this into its own settings page or something by the end of this phase:

The clock itself was basic to setup, right now its basically just a Javascript Date() object that updates every second and then tests to see if its time for an alarm, my primary area of concern here is that I have put the setInterval() function in the html <body> element:

I am wondering if I can push this setInterval off to another processor with a WebWorker or some other async process and I feel like its a clumsy place to put this but it works so I'll play with it later.

My other internal question regarding the clock is whether I update it once a second or once a minute. I think I will move this to once a minute given that I don't need to show seconds... but this means I'll need to adjust my code for testing the alarm to disregard the seconds.

With the clock up and running OK the next part was to set an alarm. The "Add Alarm" button creates an new alarm object with all the info I need and saves it to roaming data, we then immediately read that data back into the alarm div just below the clock and also read it whenever we test for an alarm trigger.

the functions I created in the end are as follows:

setAlarm() - create a new alarm object, read required data from the controls and call saveAlarm(alarmdata)

saveAlarm(alarmInfo) - uses the stupidly easy "Windows.Storage.ApplicationData.current" to save the alarm data to the cloud (or locally if there is no connection)

readAlarmData() - read the data back out of the cloud storage

displayAlarm() - calls readAlarmData() to get the alarm data and then displays it in a <div> under the clock.

My plan is to support multiple alarms so this will eventually be an alarm object array but that's for the next version.

The only really non-standard JS control on the page is the TimePicker - this is the first control on the left under the clock.. its part of the WinJS.UI library which MSFT are giving us to make pretty Win8 apps:

This basically works great out of the box but I want to caution you about a gotcha I encountered referencing these controls in JavaScript as this took me AGES to work out... in fact I spent more time on this than anything else so far.

For my purposes I obviously need the current value of the TimePicker control so I can throw it into my alarm object. I looked it up and guess what this super awesome control out puts the current value as a JS Date() object with TimePicker.current.getTime().. TOO easy! but when I tried to reference the control in JS I kept getting the <div> element back and not the timepicker control.... here's what I had at the time.

HTML:

<div id="alarmPicker" data-win-control="WinJS.UI.TimePicker"></div>

Javascript:

var alarmControl = document.getElementById('alarmPicker');

"alarmControl" would of course come back as the <div> but I could not find ANYWHERE a guide as to how to access the "data-win-control" so I could call my current.getTime();

After several hours trying all manner of crazy shit I found a code example on some random blog (not on any MSFT site - sorry I didn't save the link) that had the answer.

var alarmControl = document.getElementById('alarmPicker').wincontrol;

I think this is also a code predictor bug in visual studio because "wincontrol" does not come up as an option at all... but it might be one of those things that an experienced Javascript dude would lol at me for.

anyway after getting that bit I simply wrote this bit of code:

Javascript:

var currentTime = alarmControl.current.getTime();

and yay I get back the current value of the TimePicker control... so moral of the story is:

Use .wincontrol to access WinJS.UI controls in the DOM.

that is literally the hardest bit of code I have had to write... the rest is pretty much native HTML DOM and native JS calls styled by CSS

Next Time: How its stupidly easy to play media and youTube videos....

Here's a screenshot when the YouTube alarm goes off...

Now I can wake up everyday to Gangnam style... curse or blessing?

Peace.

Thursday 4 October 2012

Windows 8 App Development - Pt 3 of ?

App Project Planning and Design.

Whaddup Internet

I'm going to build an alarm clock app... not exactly a billion dollar idea but I think it will cover some interesting stuff without being too much work AND it pisses me off that Windows doesn't have a decent alarm clock utility - it's irritated me for years...

Now I'm not going to spend a huge amount of time on project planning and design for this app given I am doing all the work anyway and the concept is quite simple. I have a clear idea of what I want to get out of the final product but its always prudent to do some planning before embarking on any project no matter how small.

The planning approach I use is based on Prince2 project management, it's a product based planning approach which is both easy and comprehensive enough to ensure success. Normally in real application development we'd be spending quite a bit of time understanding the business requirements and forming a project team of people who have an interest in the project but it's just me and the app won't be big enough to form a committee so we'll skip to assembling a list of all the "products" or "deliverables" of this application.

To do this I looked at all the alarm clock apps I know and assembled a huge list of features which could be included, ideally I'd like to include almost all of these in the final product but we need to get on with it so I did a MoSCoW analysis (Must, Should, Could, Won't until later) and created a v1.0 list of features I must have in this app:

v1.0 list of features

display current time
set an alarm
alarm plays a media file
alarm can be snoozed
alarm can be repeated at regular intervals (weekdays or weekends)
alarm can wake up the machine from sleep
alarm can sound at the specified volume even when volume turned down.

Sounds like an alarm clock to me and is a good basic place to start but often where people go wrong in development is that they don't specify the quality expectations of their requirements, so what happens is the developer goes and builds something that meets the documented requirements but is not what the customer expected... I'm doing everything for this so it's unlikely that I'll build something that does not meet my own expectations but for this example and as the person responsible for quality in my project lets expand my list a little:

display current time - has to be a large 'digital' clock that is easy to read, user can select 12hr or 24hr time, clock shows AM/PM, clock does not require seconds. must update every second. must be good looking and easy to read from a distance.
set an alarm - user can set 1 alarm multiple not required in v1, the alarm will play the media file selected at the specified time even if the app is not running. Alarm time will be displayed near the clock to indicate it has been set.
Alarm plays a media file - media file can be anything video, audio or web-link to youube video, can play in native 3rd party player but...
Player must have a snooze option so an embedded player might be required.
Alarm can be repeated - user can tick which days of the week the alarm goes off.
Alarm can wake the machine - from sleep or hibernate modes... preferably can also go off in low battery modes.
alarm controls hardware volume - to ensure alarm sounds at the specified volume no matter hardware volume state. To ensure user is alerted in the manner selected.

Given that this is not a massive list lets consider each function of the app a "product" that means based on the requirements above our product will be something like this:

Main Function() - function to run the app startup and close down
Display clock()
Set alarm()
Run in background()
Save alarm data()
Read alarm data()
Set 24hr time()
setAMPM()
Update Clock()
Alarm Trigger()
Alarm Snooze
Wake Device()
Set Alarm Volume()

On top of the functions we have 3 page designs required:

Clock page
Alarm Settings (new/edit)
Alarm Triggered

Even though we started with only the bare minimum of requirements for this alarm clock app there is some significant work to do to get this across the line! I have a whole swag of extra stuff I want to add to this app and I'm sure I've overlooked something which will come out in the development but this list of products is a great start.

Now you know I'm not satisfied with just a list of products we need quality rules on the products and the last step is to guestimate the length of time to build each bit too - lets update the list with a description and any quality and time details.

Main Function()

Function to run the app, app must load quickly and shutdown cleanly releasing all unnecessary resources. time: 1 day

Display clock()

Read clock look/feel settings and display clock on the screen, clock must update every second, clock must always be visible when setting alarms. Time: 1 day

Set alarm()

Create alarm object according to alarm settings: time, snooze time, recurrence, media file. Time: 1 day

Run in background()

Run a service which monitors the time and compares to our alarm data. Time 2 days

Save alarm data()

The alarm data needs to persist across sessions - Time 1 day

Read alarm data()

Read the stored alarm data and update the alarm when service or app is restarted -Time 1 day

Set 24hr time()

Set the clock to 24 hr display: Time 1 day

setAMPM()

Turn on AMPM mode and display correctly: Time 1 day

Update Clock()

Update clock data every second and check for alarm trigger: Time 1 day

Alarm Trigger()

Function to manage Alarm trigger event:Time 1 day

Alarm Snooze

handle snooze button and reset alarm time to new snooze time: Time 2 days

Wake Device()

Control hardware to wake device and sound alarm even when sleeping: Time 2 days

Set Alarm Volume()

control hardware volume to ensure alarm sounds at set level despite current volume state Time 2 days

On top of the functions we have 3 page designs required (the only quality requirement is that they look good to me):

Clock page

Time: 1 day

Alarm Settings (new/edit)

Time 1 day

Alarm Triggered

Time 1 day

So now we have a great view of our project's requirements:

Time: 20 days
Cost: 20 days of my time or I guess we could put it on freelancer!
Scope: see above list of products.
Quality: see above list.
Risk: low risk, low impact, low cost, low likelihood of something going wrong.
Benefits: We get our first app under our belt. Increased reputation. Chance of selling later more sophisticated versions in the store.

That was a pretty simple exercise but we sort of covered the really important stuff... I don't recommend this approach if you are running a full blow development but we need to carefully tailor how much project management overhead we put on this given its just me so for my purposes its just fine and breaks up the project into achievable "chunks" which will help with my motivation and hopefully ensure get this done. If you are considering using freelancer.com or some other service I strongly recommend you have good project management skills and do something like this plus a little bit more work on quality expectations, who is responsible for checking quality, justified benefits and possible risks and you'll get a great result every time.

This really only covers the development of the app and not the subsequent uploading to app store etc ( I should have put that "out of scope") but frankly this is really the hard bit and we can cross the rest of the bridge when we come to it... we might need another plan if the app doesn't meet MS quality standards.

Sorry about the long post... Next we find out how good my time estimation skills are and build our first few functions.:

Peace

Monday 1 October 2012

Windows 8 App Development - Part 2 of ?

Installing Visual Studio 2012

Whaddup Internet.

The next part of my epic app development blog is to set up Visual Studio 2012 which I am downloading from the official Windows 8 developer centre here: http://msdn.microsoft.com/en-us/windows/apps

So anyway I downloaded Visual Studio Express for Windows 8 and ran the installer - Immediately got an error to say my version of .Net 4.5 is not up to visual studio standards... boo!

Found out this is an issue because I downloaded the very latest RTM of Windows 8 I need the visual studio 2012 Release Candidate for Windows 8... I found it here: http://www.microsoft.com/en-us/download/details.aspx?id=29915

This installed successfully and I am on my way to app development greatness... woot!

OK To start with it looks like you need a Developer License for Windows 8, I presume this is tantamount to getting your Apple Dev license so I just click "I Agree" and MS added one to my live account which expires in a couple of months. If you haven't got a live account by now and want to do the Microsoft thing I strongly suggest getting one.. its pretty painless and you get free hotmail and a SkyDrive account with like 7GB on it so its not all bad...

Digression: To attach pictures to these blog posts (which I am writing on my Win 7 gaming PC) I take screenshots in Win 8 then save to my Sky drive using the native app and pull it from there into the blog on my other PC.. Sky Drive is super handy (or Dropbox or Google drive or iCloud).

With VS 2012 RC installed and my license set up I can start building my app. first I'm doing some reading on the MS recommendations for app planning. I already have a very good idea of what I am trying to build so I'll hop into it after confirming there's nothing else I need to know or do...

Next Episode: App Project Planning and Design.

Peace.

Windows 8 App Development - Part 1 of ?

Windows 8 App Development - PT 1 of ?

Whaddup Internet

So this is a multi part blog to follow the development of my first Win 8 app. I thought now would be a good time to start since I am footloose and fancy free. Lets hope Win 8 catches on!

Note I am writing this blog as I perform each task so its a live commentary in a way, If things go wrong then this blog will act as a record of what I did wrong (or right!)

Installing the Windows 8 RTM

The first step is to set up my Windows 8 environment, I have chosen to install the RTM version straight up on my development laptop which is an HP ProBook 6550b, not ideal for this task but its the best I've got since losing my Asus EP121 slate (boo hoo..).

The reason why I'm installing it straight up is that I find VMs ungainly for development (I hate booting to an OS then opening a VM which takes half my resources etc etc) so I downloaded the Win8 RTM from here: http://msdn.microsoft.com/en-us/windows/apps/br229516 which is a page which SHOULD have everything we need to do this.

The download was 3.3 Gig and came in ISO format, which is nice and easy to burn to a disc using the native Win 7 disc burner.

I tried to then install from this disc a few times but it had issues with reading the copy I burned so I decided it would be faster and easier to use a USB stick to install anyway.

I Googled for a ISO to USB installer and got this handy little utility which converts your ISOs to bootable USB sticks http://www.joshcellsoftwares.com/2012/06/WinUSBMaker.html

That worked perfectly and a boot from USB gets the Windows installation up and running.

I've used Win8 Dev and Consumer previews before so I knew what I was in for but I was curious to see if I found the metro interface awkward with a keyboard and mouse.. The final answer is No it was fine.

The shortcuts I think you really need to know at the start are:

To switch between desktop and windows 8 interface hit the ole Windows key... easy
If you move the mouse to the bottom left of desktop and RIGHT click... you get a sweet shortcut menu to most of your favorite Windows 7 start menu features like Run, CMD and Control Panel... this is super sweet.
Start typing in the Windows 8 (Metro) interface and it just auto searches (like the search bar in start menu does in Win 7) - this is actually the best thing ever, in fact when IT nerds discover this they'll probably stop whinging about Win8 interface.

I still find it disconcerting that there is no way simple way to see everything you have open and close them (especially in the touch only interface) like the old task bar (yes I know about the left hand menu but it's not easy) this might lead to some crazy number of apps being open at one time (which I hate)

Anyway I digress... lets develop! One other thing I should point out is that MS have made it so Visual Studio for Windows 8 only runs on Windows 8... this is quite silly in my opinion but I 'm super keen to use Blend so I'm not using anything but that latest version! lets move onto the next part of this blog... Installing Visual Studio 2012 express for Windows 8.

Peace

HP ElitePad... finally what I have been waiting for.

There's a lot to like about HP's new ElitePad announced recently, I like the idea of the jackets but the serviceability is a huge deal for tech nerds like me, I am super keen for all the Windows 8 goodness that's going to be hitting the market in the next little while. Its been a long time coming.

Sunday 23 September 2012

There is still no business case for tablets in the Enterprise

iPads and android tablets are getting a lot of attention from IT departments at the moment as they creep slowly into the enterprise, usually by executive order from a marketing executive who demands we be as cool as the next guy, but before you go out and buy a bunch of iPads to put your sales force on I want you to stop and really ask 1 question... why?

The reason I want you to ask this question is because I am yet to see or even hear about a truly compelling business case to put tablets into the enterprise, I would even go so far as to say that people are suffering productivity and financial loss as a result of the incursion of iPads to customer facing staff or executives. To put this in perspective I am a huge advocate of mobility solutions and I know it we'll get there as we push into the new era that it doesn't mean you have a good reason to do it yet and last time I checked you should have a solid business case before implementing any new services.

Lets look at some of the touted reasons for iPads and my thoughts on each point.

We will see an increase productivity

This is probably the least offered and easiest to debunk with sensible thought. Its very unlikely there will ever be a time that it is quicker and easier to create a document or other file on a tablet than it is to use a keyboard and mouse. A person cannot perform any where near as many actions per minute with one hand and therefore you will never get a productivity increase for people filling out forms or creating documents. I suggest if you want to see a productivity increase then look to your forms or software and see how you can build better UI which if done correctly would see your productivity go through the roof even on your old machines.
For those who are considering a move to handwriting recognition which always demos quite well when the salesman does it and theoretically can be done more quickly I suggest you take a careful look at the training costs of have each staff member write a small bible before the tablet will recognize their handwriting to a point where its usable.
Beware data entry elitism in the organisation. I have seen a few times now where slates are brought in as a time saver to senior staff (say doctors or salespeople) but the impracticality of entering data on the tablet means they they are then spending a lot more time filling out the information later or even worse the organisation is hiring new staff to do the data entry for them on the old keyboard and mouse driven systems after the higher staff member has done the easy tablet bit.

I want to make a special note here that staff with more influence in the organisation tend to win when tablets are brought in as it forces IT to deliver a simplified experience to them BUT organisations without great software or architecture will pay dearly in giving them that experience and the cost/benefit never stacks up no matter how much that person earns. The costs associated with re-architecting your internal systems should always benefit the customer or operations staff first to maximize your ROI so beware the selfish executive.

We will increase sales

This is normally just a plain lie made by salespeople to get a tablet device but you may get a benefit from delivering up to date information to them during a presentation... I don't see why this can't be done on their laptop now as the tablet doesn't give them any additional functionality.
The argument that a laptop creates a barrier between you and the customer is a fallacious as one a salesperson today should probably not sit directly opposite their customer anyway and if they do then turning the laptop to the side removes the issue and can actually be used to focus the attention of the prospect.

We will reduce cost because tablets are cheaper than laptops

This is where are a lot of business cases for table devices are won but the practical experience so far is that tablets become an additional device, not a replacement due to the limitations in data entry. If you need to update then in my view the sensible interim solution is in fact to the "old style" laptop tablets (check out the sexy new ultrabook versions coming soon) as you can begin building your software solutions to support the tablet experience without losing the productivity of the laptop.

We will enhance our customer experience

This is absolutely true, you can of course build a great customer experience on a tablet device but this is rooted in having great applications, not the delivery method. Therefore it's another example where you need to re-write your application suite and related processes before implementing these new devices.

Anyway that's enough on this subject for now. I hope you noticed the pattern: In my view the tablet experience is based in the creation of great software and in particular a great UI. If your executive want to go to tablets then tell them you want to start writing applications which will work great on those tablets and require very little data entry first, no-one saw the iPad coming and so there is some catching up to do before we can put them in the field. Otherwise it's a fat waste of cash.

Thursday 20 September 2012

XBMCbuntu let me count the ways...

Since Microsoft decided no-one uses Media Centre and removed it from the standard Windows 8 build (it will be available as an add-on) I thought it would be fitting to talk about the potential alternatives for media player computers.

Now, I was going to go through and install a whole mess of different media players and review them here but basically I put XBMCbuntu on a old Asus laptop and it was so good I never even needed to look at the rest. I love this box.. allow me to elaborate;

First off here's my list of requirements on a media centre and gives a clue as to why I don't just go and buy the excellent Western Digital network media player or the like.

REQUIREMENTS:

Plays everything with minimal codec installation/downloading required,
My wife can use it without hurting me (Intuitive UI)
Stable, never crashes.
Sleep/Wake via my MCE remote so I don't have to get up to turn it on (particularly annoying when you run a laptop as your media box because you need to open the lid),
Runs a SNES emulator for super mariolicious fun from within the interface,
Play/Records the TV stream from my HDHomeRun,
Gets all my album info from the interwebs,
Doesn't require a beastly machine to run it,
Has iTunes DJ type functionality (Party Mode).
I don't need my mouse and keyboard plugged into it constantly.
Remote control from my phone.

OPTIONAL

Torrentz
Rent movies legitimately (like on iTunes)
Receives Airplay from my iPhone
Sound over HDMI (not really required because I plug the audio into an amp anyway)

The reason its such a weird list is because this reflects exactly how we used our existing media box which was Win 7 based, we used iTunes for music and renting movies, uTorrent for Torrents, Media Center for TV recording (which we never used because we had a Pay TV recorder) wzSNES for snes emulation.

The biggest problem was that I couldn't run it from just a remote so I constantly have a keyboard and mouse plugged into the thing which sat on my coffee table and got in the way, the plus side to that is we could surf the web if one of the 800 other machines were in use.

When faced with the prospect of building a completely new IT solution from scratch my mantra is "always, always, always check out where the Linux based open source options are up to." I suggest this is a very prudent thing to do for any solution especially if you don't want to spend big dollars on IT or if you think your requirements are pretty standard. Even if you know only a little about computers Linux distros like Ubuntu are so easy to use you'd be surprised what you can achieve at the attractive cost of zero dollars... and the pre-built appliances on turnkeylinux.org are AMAZING http://www.turnkeylinux.org/blog/turnkey-12... you could literally run an enterprise IT department on those things. Another plus is that you can Google the answer to ANY issue because all the experts are online, unlike a proprietary solution.

So I picked up a copy of XBMCbuntu (its really important not to forget to type the "b" in "buntu") which is XBMC (short for XBox Media Centre) on Ubuntu from here: http://wiki.xbmc.org/index.php?title=XBMCbuntu. It's origins are that some clever nerds decided that we really needed a port of the X-Box Media Centre experience to Windows and Linux but it has morphed slightly into just an awesome open media solution.

So here's the first reason I love this thing... I installed it and it just worked.

Not just worked a little bit but did pretty much everything on that list above without any adjustment Googling or messing around, I'm not going to give you a full tutorial on how I set up my XBMCbuntu, there plenty of that on the website but to make it basically PERFECT here's what I needed to do:

Install it.
Set my music library to to my external HDD and scan the music files into the library, then go into "Library mode."
Install the "Rom Browser" add-on so I could launch zSnes emulation (which is just epic AND downloaded the covers and boxes for my game roms)
Fixed wake on remote issue by specifying my remote hardware ID using this wiki post: http://forum.xbmc.org/showthread.php?tid=134252&pid=1135997#pid1135997
Install Web Admin tool which allows me to control it via my phone.
Setup the HDHomeRun as a video source.

And that was it... God it's such a good media player, the media format support is off the chart. Plus I can run classic super NES games nights with my mates and it cost me nothing and I never need to plug in the keyboard.

Note I didn't even try to set up torrents (which I know for sure can be done easily) or find a video rental service (which I don't know about but hey... torrents right?)

Now I don't care if Windows don't want to give me media centre, Linux FTW again!