Going to the cloud has really expanded my list of options. I never dreamed I would be building Oracle databases and then teaching that technology to my users group (now reorganized from livelyfbug to Codemasters).

 

Oracle makes it easy (http://apex.oracle.com/i/index.html), and Amazon makes it easy (http://aws.amazon.com/). So for pennies you build it online with Oracle and then shoot it up to Amazon for mobile deployment as a restful service using JSON objects.Apex online is free and Amazon has developer accounts for small usage. But be careful, if you check the wrong thing and turn on the service you could be in for a big bill! It happened to me 3 years ago – $100 over the weekend. OOPS!

Pushing excel to a database is really easy using APEX, check out the following tutorial on how it’s done:

http://www.oracle.com/webfolder/technetwork/tutorials/obe/db/apex/r41/apexstart_a/apexstart_a.htm

If you want to learn more, this is the theme for my users group (now Codemasters) on Saturday. Here is a partial agenda:

Place and Time: Scheben Branch Library in Florence, Ky at 9:00 AM in the second floor conference room

Directions:US highway 42 in Union across from Union Kroger

Theme: From Excel to a Database

CMOD: Michael Lively

Speaker 1: James Lively – Code Breaker, Using Flash to Create a HTML5 Animation

Evaluator: Elyse Adams

Speaker 2: Richard White – Code Breaker, Cloud Data Base

Evaluator: Bill Luxon

Syntax of the Day: Cloud

General Evaluator: Chad Wooten

In addition, I will be handing out Codemasters materials and eval sheets.

Saturday we met and reorganized the group under the new name Codemasters and elected offices.

Mike  – President

Chad – VP Membership

Elyse – VP Education

Richard – Sgt of Arms

Bill – Secretary

We established two primary training tracts for new members

CC – Competent Coder

CM – Competent Manager

And we had a couple of project ice breakers, evaluations, Code Topic Master, Syntaxian, and a CM evaluator.

I acted as Code Master of the Day (CMOD) and the theme of the meeting was JIC – Just in time criminals where I described applying LEAN manufacturing principles to privatization of prisons. At the end the CM evaluator told us how the meeting went.

I loved it. It was great fun!

On Saturday (7/28/12) at 9am at Panera Bread on Houston Rd in Florence, we will be having our Flash Builder Users Group. I will cover:

1) Using Codiqa to rapidly build HTML5 apps (http://www.jquerymobile.com/)
2) Creating HTML5 Animations with Adobe Edge (http://labs.adobe.com/technologies/edge/)
3) Injecting pages using Backbone.js for Mobile Apps (releasing a few Youtube videos on this)
4) Developing the Flowers Bread iPad App (distributing the source code)

See you there – Mike

C++ assembly speed for 3D JavaScript Metro Apps

OK…I did not realize this…

This weekend I did a hello world 3d Metro App example for my Users Group where I took threejs brought it into 2012RC and created a Metro App. I immediately got a performance enhancement. So when the 3D app lagged in Firefox, it zipped as a metro app (60 Hz). What happened?

WinRT API

Not only is the WinRT APIs built directly on the Windows Kernel (no jitting, no IL interpretation, nothing happening between your code and the fundamental kernel interfaces that executes commands), but even the layer above which goes into the languages and applications is effectively just middle. There is a mechanism that takes the C++ headers and auto-generates C# and JavaScript headers in a way consistent with those languages. When you compile and execute JavaScript or C# and look at the assembly it’s as if it had been run in C++. There is nothing that would slow you down – WOW! Metro apps are embedded in game technology – full screen, immersive, C++ like, and 60Hz.

Game On!

This further gives you the ability to expose core C++ technology to JavaScript. And if you’ve ever worked with 3D ActionScripting you will realize how significant this really is!

Meeting 6/16/12

Posted: June 14, 2012 in Flash Builder Users Group

This Saturday (6/16/12) at Panera Bread on Houston Rd in Florence Kentucky at 9am, I will be doing Windows 8 and Mobile Interface training. To log in remote use the following Adobe Connect link:

http://meet89007679.adobeconnect.com/geolocation/

In addition to the Windows 8 training, I’ll discuss how you can make money building Metro Apps and I’ll be building a Mobile interface from scratch using JQueryMobile in Visual Studio.

See you there.

Mike

PhoneGap Build

In my last tutorial we built a PhoneGap Mobile UI, and now you’re ready to use PhoneGap Build. PhoneGap Build enables you to build your application for multiple platforms.

What is PhoneGap Build?


PhoneGap Build is a service provided by the makers of PhoneGap that allows you to build your application for multiple platforms without having to have those set ups on your local machine.

image002.png

In our case, we developed our PhoneGap app in Visual Studio in the Windows 7 Phone SDK. Within that PhoneGap App is an App Package. This www folder is the core of the PhoneGap application. Everything else is part of the Windows 7 Phone Shell. We zip that www folder and send it up to PhoneGap Build, PhoneGap Build swaps our setup with other mobile setups, runs those builds over the cloud and gives us access to  various platforms such as IOS, Blackberry, etc…

image003.png

Simply write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more. By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.

So even though PhoneGap itself is free, PhoneGap Build is not and that is how they make their money, but the pricing is reasonable as you can see below:

image004.png

Here’s the work flow you will follow:

  • Write your app using HTML, CSS and JavaScript
  • Upload it to the PhoneGap Build service
  • Get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, Blackberry and more.

You don’t have to use phone gap build to use phone gap. You could set up all the environments locally and do the individual builds for each device yourself. PhoneGap Build relieves the headache of trying to maintain all that code locally.

Here are the specific steps:

  1. Zip-up your www folder in your Visual Studio Windows 7 Phone application developed in the last tutorial. You’ll actually go to where it is on your hard drive and do that.

image006.png

In my case the path was Documents->Visual Studio 2010->Projects->Geolocator->Geolocator

Be careful with your naming, Blackberry doesn’t like folders with the names src, bin, or image and file names with special characters.

2. Create a PhoneGap Build account (at https://build.phonegap.com/)). If you already have an Adobe ID that will work as well.

image008.png

3. Add a new app, after giving your app a name, choose your upload method and click create! It’s that easy.

image010.png

PhoneGap Build builds the various platforms shown below:

image012.png

You can now download these apps and run them on the various platforms. To do that click on Admin (shown above) and download your app!

image013.png

But you’re not ready to go live just yet …you need to sign!

4. At this point you need to sign your apps. Click Admin ->Edit ->Signing and select or add your keys.

For example, for iOS you’ll need the same developers key that you would use to build a regular iOS phone app. To find out more about signing check out the following docs link https://build.phonegap.com/docs. To put your apps in the market they need to be signed!
image015.png

5. Finally, you’ll need to configure your app. You can configure your app by clicking on the details tab and filling out the form below. This info will be used in your app distribution.
image017.png

But not everything you need can always be put in this short form, such as plugins. So in that case you’ll need to use an xml config file.

To find out more go to https://build.phonegap.com/docs/config-xml. Once the config file is completed you need to zip it up in your www file and upload it to PhoneGap Build and build your various platforms. You must ensure that your config.xml file is at the top level of your application (the same level as your index.html file). Otherwise it will not be loaded correctly.

Debugging!

One more cool thing about PhoneGap Build is that you can remotely debug your application from a browser. This service enables users to debug and interactively modify their applications during runtime; this new addition offers similar functionality to those found in Firebug and Google Chrome Inspector, which serve as an indispensable tool to developers working on web based projects. And now debug build provides the same benefits for PhoneGap developers. The learn more about debug mode go to https://build.phonegap.com/docs/phonegap-debug.

This tutorial shows you how to tap into your phone’s sensors by using Phone Gap and HTML5. Here you’ll build a simple Accelerometer and Geo-locator for cross platform deployment. The Visual Studio 10 source file is attached.

What’s Phone Gap?

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript. Phone Gap lets you use a single code base to publish to multiple platforms.

image001.png

What you’ll be doing?

You’ll build your application in HTML and JQueryMobile using the Windows 7 Phone SDK in Visual Studio 10 and the cordova (or phone gap) JavaScript package. Then you’ll zip the www folder and upload it to the Phone Gap Build, here all the major phone applications will be created.

The API’s you’ll be accessing can be found (along with documentation) on the Phone Gap site (http://phonegap.com/) and are: Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, and Storage.

Note: When Adobe purchased nitobi it transferred Phone Gap to Apache Software Foundation and changed the name to Cordova. Cordova like Phone Gap is open source.

Getting Started

1. First download and install the Windows Phone SDK into Visual Studio 10.

http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=27570/

2. Download Cordova (Phone Gap) from phonegap.com

http://phonegap.com/download

image002.png

3. Unzip the download above (phonegap-phonegap-1.7.0-0-g475bfd2.zip) and navigate to

phonegap-phonegap-475bfd2->lib->windows-> CordovaStarter-1.7.0.zip

Note: In this case we choose the windows folder since we are developing using the Windows Phone SDK. But it doesn’t matter, all you are doing is creating an html page for the phone gap wrapper. You could have done the development in another platform.

image003.png

Leave the CordovaStarter-1.7.0.zip as a zip file and copy and paste it into Visual Studio’s Project Templates -> Silverlight for Windows Phone folder


The full path is:


Documents->Visual Studio 2010->Templates-> Project Templates -> Silverlight for Windows Phone

If the Silverlight for Windows Phone folder does not exist go ahead and create it.

4. In Visual Studio 10, create a new project and choose Silverlight for Windows Phone (CordovaStarter). Name it Geolocator and hit OK.

image004.png

A basic phone web structure will be created which contains the cordova JavaScript package and a basic html index page, as shown below in the Solution Explorer:
image005.png
5. Download JQuery (http://jquery.com/) and JQueryMobile (http://jquerymobile.com/) and drag them along with the JQueryMobile images into the www folder (as shown below) and add their references to your html page (see the attached source files).
image006.png

HTML Page References to be added (in your index.html page)

  1.   <link rel=”stylesheet” href=”jquery.mobile-1.0.1.css”/>
  2.  <script src=”jquery-1.7.1.js”></script>
  3.  <script src=”jquery.mobile-1.0.1.js”></script>

Note: Remove the master.css link reference since you are using jquery.mobile-1.0.1.css as your style sheet instead.

You are now ready to start programming in JQueryMobile, but wait there are other JavaScript libraries you can program in. Here are a few other JavaScript alternatives to JQueryMobile (just in case you want a little more chrome): Sensa Touch, JqTouch, KendoUI.

6. In the index.html page, the onDiviceReady method starts up when your device is ready. To it, add two navigator methods watch Acceleration and watch Position. These methods listen for changes to your Accelerometer and Geo-locator sensors and sends them to an onSuccess method as shown below in the code:

  1.  function onDeviceReady() {
  2.            //document.getElementById(“welcomeMsg”).innerHTML += “Cordova is ready! version=” + window.device.cordova;
  3.            console.log(“onDeviceReady. You should see this message in Visual Studio’s output window.”);
  4.            var options = { frequency: 1000 };  // Update every 1 seconds
  5.  navigator.accelerometer.watchAcceleration(onSuccessAccl, onError, options);
  6.  navigator.geolocation.watchPosition(onSuccessGeo, onError, options);
  7.        }



7. Then add the following onSuccess methods for the Accelerometer, Geolocation sensors and error method:

  1.   function onSuccessAccl(a) {
  2.            $(‘#aX’).html(a.x);
  3.            $(‘#aY’).html(a.y);
  4.            $(‘#aZ’).html(a.z);
  5.            $(‘#aTime’).html(a.timestamp);
  6.        };
  7.        function onSuccessGeo(p) {
  8.            $(‘#lat’).html(p.coords.latitude);
  9.            $(‘#lng’).html(p.coords.longitude);
  10.        };
  11. function onError() {
  12.     alert(‘onError!’);
  13. };

8. In the body tag of index.html add some JQueryMobile magic for formatting the data output:

  1. <body>
  2.         <div id=”home” data-role=”page”>
  3.             <div data-role=”header”>
  4.                 <h1>Sensors</h1>
  5.             </div>
  6.             <div data-role=”content”>
  7.                Accelerometer and Geolocation!
  8.                <br />
  9.                <p>Accelerometer Data</p>
  10.                <p id=”aX”></p>
  11.                <p id=”aY”></p>
  12.                <p id=”aZ”></p>
  13.                <p id=”aTime”></p>
  14.                <br />
  15.                <p>Geolocation Data</p>
  16.                <p id=”lat”></p>
  17.                <p id=”lng”></p>
  18.             </div>
  19.             <div data-role=”footer” >
  20.                 <a href=”#dialogpage”>Tech Footer</a>
  21.             </div>
  22.         </div>
  23.     </body>

9. Finally, in the properties folder change the WMAppManifest.xml file by adding a sensors tag as shown below.
image007.png

Test the program by running Ctrl+F5 (Debug-> Start Without Debugging).
The Windows Phone has an Accelerometer simulator that helps you see the data change in 3D as shown below:
image008.png

The Windows Phone has a Location simulator that lets you see the lat long change.

image009.png
10.  Once your program is complete, zip the www folder and send it to Phone Gap Build to make it cross platform…more on that in our next tutorial!