Let The Corona Blitz Begin!

Posted: August 17, 2013 in Corona SDK, Hackathon

Hello World,

I love hackathons. These short, intense bursts of rapid application development can certainly test your “metal”. But more importantly, I like participating in these event because they really test my skills as an application developer. Well, the latest of these kind of events is the CoronaBlitz – A Semi-Regular Mini Coding Challenge. This semi-regular event is organized by Andrew Potozniak, an indie developer and founder of TozSoftware.

So What Is The CoronaBlitz?

This is a coding challenge in which you have 4 hours to develop a mobile app using the Corona SDK and any 3rd party tools that may help you along the way. There is no prize money. There are no trip giveaways. Those of us participating do so for the love of coding and learning (and maybe a bit of SWAG and recognition for our work). Unlike many other hackathons this event does not require you to show up at a specific venue. All the coding is done on your own time in a location of your choosing (your office, living room, bed!?). Each coding challenge happens over the course of several days but the organizer trusts that you will spend only 4 hours total coding your app – in one sitting or broken up over the course of the event (is there such a thing as a “Code” among coders?) Each blitz event will have a theme that you should adhere to. This theme for this blitz is Collection.

Time To Enter The Fray

The current blitz started on August 16th and lasts until August 25th and I plan on spreading out my 4 hours over the course of the 9 days. My goal is not to simply “hack” together something within that time but rather to create a working app that can be used as a teaching tool for those wishing to learn the Corona SDK. This means that I will be doing short (30 – 45 minutes) coding sessions focused on one or more specific functionalities or tasks. Afterwards I will post details of my progress here on this blog. In between each of the coding sessions I will plan my next step and gather the resources (images, audio, libraries, etc) I may need to accomplish the next task. In the end I hope to have put together a video tutorial showing you how I built the app and explaining some of the features I have included.

The Discovery Of An Idea

It was very difficult for me to discover the app I will be creating for this blitz. I say “discover” because that’s the best way for me to find with ideas for new projects. I keep my mind open at all times for bits of inspiration from everyday life to the movies I watch to the other apps I see to the many people I interact with. I never know when and where the inspiration may reveal itself. So I keep a log of ideas and inspirations on my cell phone.

It took a few days before the idea for this app revealed itself. I still remember and love playing games like PacMan, Space Invaders, and Asteroids. As I was think about the theme one day I saw a picture of Space Invaders while browsing the net. Couple that with the fact that I am a huge Star Trek fan, I started thinking about the Borg Collective. So why not create a game that combines the simplicity of Space Invaders with the concept of the Borg thereby adhering (as best as I can) to the theme “Collection”. This was born.

“The Return of the Space Invaders: The Collective!”

First I had to come up with a story. The story will help me define the game concept and how it should be played.

The Space Invaders Are Back with a vengeance! Although they look the same they have formed into a collective that acts, behave, and thinks alike. They also learned how to “collect” and assimilate other life forms into their collective thus making their army stronger. You must fight off the attacks of the Space Invaders and prevent them from collecting too many of our citizens for their evil purposes.

Well there you have it. The beginning of a game. So what do I need as far as resources for the game? First I need images. Let me say that I am not a designer. I don’t know how to use Photoshop. However I can do wonders with clip art. I have been using Fireworks for several years (Corel Draw before that). I have a collection of millions of images on CDs and hard drives. So I need to find existing images that I can alter to suit my purposes. I plan on using the same Space Invader alien images from the 70s.

Space Invader Aliens

That will give it a retro look and feel. The background and other images will have a more contemporary look. I will use images of a tank to replace the missile defence. Instead of buildings standing between the aliens and the tanks I will have floating shields. The concept is that earth defenses have advanced enough to create and activate invisible (almost) defense shields that help defend against the attacks. Of course since the alien weapons can not penetrate the defense shields neither can our weapons (Star Trek logic). So the shields will randomly rotate with gaps in-between allowing us to fire through (and the also the aliens). Below the tank will be little people randomly walking back and forth. These are the people you must defend against assimilation. Should one of the alien’s weapons hit a citizen that citizen will be added to the collective with the aliens above. Every addition to their collective increases the level of difficulty. Just as in the original game the aliens will always be advancing downward. Your weapons can only destroy the aliens (sorry, you can’t save any assimilated citizens). Should the alien force breach the shielding, all the citizens will be assimilated and the game is over. Should an alien weapon hit the tank then you have been destroyed, the defensive shields will fail, and all the citizens will be assimilated. You get only one life (just like in real life). Should you destroy all the aliens then you win and get points for all the remaining citizens you were able to save.

I bought some clip art from one of my stock image sources – DepositPhotos.com. I was then able to isolate and save the images as individual files. Then I created a sprite sheet for most of the images (not the background image) using Texture Packer. I found this to be the best and easiest to use sprite sheet generator on the market. Since this is a coding challenge I do not count the work I did to gather and process the images towards the four hours given to us in the Corona Blitz.

I am now ready to start coding. My first set of tasks will be to create the Corona SDk app, setup the application folders, add the various helper libraries I use in many of my projects, create the splash screen, and the instructional screen. This should take less than an hour. Once I am finished I will post details and screenshots about my experience and what was done.

See you in a couple of days!

CIAO

Hello World,

For the past couple of weeks I’ve been having a lot of fun playing around in Kii. No, I’m not talking about the former province in Japan nor am I refering to the Hawaiian deity (actually spelled Ki’i). The Kii that I speak of is a Backend as a Service (known as BaaS) by a company of the same name. What exactly is Kii?
Kii Cloud
The Kii Cloud enables developers to focus on application development and leave the User and Data Management, Analytics, Monetization, and Push Notification services to the Kii Cloud though the use of APIs and SDKs. Kii already provides APIs, Guides, and Sample Code for IOS, Android, and Javascript-based platforms as well as a REST implementation. The Javascript implementation was easy to learn and implement but my desire was to see if I could use the Kii Cloud from within a Corona SDK app. And By Golly … Yes I Can!

In this post I will show you how to sign up for an account on Kii and then show you some sample code you can use in your Corona app.

SignUp

Signing up for a Kii Cloud account easy and you can get started for free! If you haven’t already sign up for an account by going to their site: http://www.kii.com

Create Your First App

After you have successfully signed up for an account you are now ready create your first Kii Cloud app! once you sign into Kii and you will be taken to the Developer Portal in your account. Click on the Create App button to begin the process of creating your first app.

screenshot01

Specify App Properties

A new dialog will appear enabling you to specify your new app properties. You will enter the Kii app name, select United States (unless you live in Japan or China), and select the radio button next to the HTML5 icon.

screenshot03

App Dashboard

Your new Kii app will now appear in your App Dashboard. From here you will be able to see statistics and other related information about your app.

screenshot04

App ID and KEYS

Your new Kii Cloud app will will be assigned several alphanumeric ids and keys. To view those keys click on your new Kii Cloud app from your App Dashboard. Once you have entered your Kii Cloud app screen find and click on the Access Keys button on the top right section of the screen.

screenshot05

Doing this will display a popup showing your App ID, App Key, Client ID, and Client Secret. The only two you need to be concerned with are the App ID and App Key.

screenshot06

Copy and paste those two values into a text editor. You will need them later.

Your Corona SDK App

Now we’re ready to take a look at some of the sample code that will enable you to communicate with your Kii Cloud app.

I found that the easiest and most direct way to interact with the Kii Cloud from a Corona SDK app was to use the RESTful API. The network.request method enabled us to just that.

Here is some Corona (Lua) code used to SignUp a user using the Kii RESTful API

local function userSignUp( obj )
	if (not obj.loginName or not obj.password or not obj.email) then
print("Missing login data")
	else
		local baseURL = "https://api.kii.com/api/apps/"
		local appId = "????????" -- Your AppId
		local appKey = "????????????????????????????????" -- Your AppKey

		local headers = {}
		headers["content-type"]		= "application/vnd.kii.RegistrationRequest+json"
		headers["x-kii-appid"]		= appId
		headers["x-kii-appkey"]		= appKey

		local params = {}
		params.headers = headers
		params.body = value.encode ( obj )

		network.request( _BASEURL .. appId .. "/users", "POST", networkListener,  params)
	end
end

The method above expects one parameter: a Lua table containing keys and values. The key/values that it expects are: loginName, password, and email. Although this Kii API method does not require all three of these values I am validating their existence just for this example.

The base URL used for all your calls to the Kii Cloud (unless you live in Japan or China) is assigned to the baseURL variable.

Remember the App ID and App Key you copied earlier? Now you can copy and pasted those values into your code and assign them to the appId and appKey variables.

If you take a look at the Kii Cloud documentation (http://documentation.kii.com/en/guides/rest/) you will see examples calls to each of their API methods. The REST API documentation shows examples using CURL. CURL is a command line tool used to transfer data to a or from a networked server. You can get more information about CURL here - http://curl.haxx.se/docs/manpage.html.

curl -v -X POST \
-H "content-type:application/vnd.kii.RegistrationRequest+json" \
-H "x-kii-appid:{APP_ID}" \
-H "x-kii-appkey:{APP_KEY}" \
"https://api.kii.com/api/apps/{APP_ID}/users" \
-d '{"loginName":"user_123456", "email":"user@123456.com"}'

We are then able to translate this command line call into a Lua code by assigning the three Headers (the three -H values) to the three Lua variables. Then we assign the headers to a params table variable. The obj parameter (passed into the function) is then stored in the params table variable.

Finally the network.request method is called, passing in the entire URL (a concatenation of the _BASEURL, appId, and the remaining portion of the URL). The network.request method is an asynchronous method. This means that your Corona code will continue to execute until it is notified of the Kii Cloud method completion. This is the purpose of the next argument, networkListener. This is the callback method that is used to handle the response. You can get more information about the network.request method here: http://docs.coronalabs.com/api/library/network/request.html

function networkListener( response )
	if not response.errorCode then
		print("response.access_token: " .. response.access_token)
	else
		print("response.errorCode: " .. response.error_description)
	end
end

Once the Kii Cloud REST API method is completed it will call the networkListener method shown above. An object containing information about the call will be passed into your callback method. In this sample code we are only interested in either the access_token (which is used in many of the subsequent calls) or the errorCode.

Here is a sample call to userSignUp method described above.

userSignUp( {loginName=obj.testUser, password=obj.testPassword, email=obj.testEmail} )

As you see we are able to create a new user in our Kii Cloud app using the simple and straightforward code shown above. In fact I had so much fun working with the Kii Cloud API that I decided to write an entire library containing all the calls to the REST API. Once completed I will release the library into the “developer wild” for anyone to use. Keep your eye on this blog as I will post a link to the library source very soon.

CIAO

Quote  —  Posted: July 21, 2013 in Corona SDK, Kii Cloud
Tags: ,

Hello World,

Memorial weekend just passed (Thanks To All Our Veterans!!) and it was a nice relaxing three day weekend. So what did I do? Go to the beach? See a movie? Go to a parade? Have a cookout? None of the above. I was writing code!

I decided to challenge myself by creating a mobile app from scratch on Memorial day. So I spent the Saturday and Sunday trying to generate an idea for a mobile app that I could do within an 8 hour period. I realized that I have several young nieces and nephews that are starting to use their parent’s mobile devices. So why not create an app that would appeal to them? That’s exactly what I did. I promised myself that I would start Monday morning and stop before Monday at midnight. Here is what I was able to create in a little less than 8 hours (I took some time to participate in a meeting and eat that day):

A cute little game I created from scratch in under 8 hours using the Corona SDK.

As you see it’s a very simple app (relatively speaking) that was created using The Corona SDK by Corona Labs. Why Corona? Well, for me it was a no brainer. After a little more than a year of learning the Corona SDK and the Lua language. I found them to be the fastest and easiest way to create powerful mobile apps – not just games. I still like (and use) Javascript but I now consider the Corona SDK and Lua to be my “go to” tools for building mobile apps. You will be seeing many more Corona SDK-specific posts on this blog!

I hope to complete the app and publish it to the app store sometime in the near future. After all, my nieces and nephews won’t stay young forever. In the meantime I may push the source code onto my Github account. At the very least I may post some of the more interesting snippets of code on this blog.

Until then …

CIAO :)

Hello World,

It’s been a very busy few months for me. New Projects! New Languages! More Hackathons! Yes, you heard that right, Hackathons.

“Hi, My Name Is Theo and I’m A Serial Hackathoner”

In case you’re wondering, “just what is a Hackathon?” I’ll give it to you short and sweet straight from the one resource that knows all (wink):

hackathon (also known as a hack dayhackfest or codefest) is an event in which computer programmers and others involved in software development, including graphic designers, interface designers and project managers, collaborate intensively on software projects.Wikipedia

So there you are … no “black hat” hacking into organizations in order to steal tons of information. In fact it’s quite the opposite. Many large companies run, organize, and sponsor these Hackathons such as:

Microsoft, Facebook, Google, and YES even The White House!

So why am I confessing this here on my blog? During the past (almost) two years I have participated in 7 different Hackathons. Some were as short as 8 hours. Others were as long as 48 hours. During these events I learn a lot about the effectiveness of the languages, libraries, and tools I use and my skills as a software developer. Even the choices I make before and during the event say a lot about the kind of developer I am. I believe that every software developer should participate in a Hackathon or two. I have been asked so many questions by many so many people about my desire to participate in so many of these events. So here my answers to just a couple of those questions:

“What tools do you use when you participate in a Hackathon?”

In my first Hackathon (The BeMyApp AppOlympics in 2012) I used a HTML 5/CSS/Javascript platform called appMobi. It enabled me to quickly create mobile apps that can be deployed on mobile and tablet devices leveraging my Javascript (jQuery, Knockout.js, and more) skills. My team won 1st place in that event and then went on to win the global grand prize. After that I continued to use appMobi in 4 more Hackathons. Some I won. Others I lost – always learning more about myself as a coder and always improving. After a loosing a major Hackathon in Las Vegas I went back to the drawing board and started re-evaluating my toolset. I discovered that my weakest skill is in CSS. So I searched for a tool that would enable me to easily create highly responsive UIs with very little to no CSS coding. I found several but I stumbled upon one that I embraced and use to this very day – The Corona SDK and Lua!

Corona SDK

I dove head long into learning Corona and Lua and entered my first Hackathon using the Corona SDK. It was the TechCruch DisruptNYC.

TechCruch NYC 2013

Not only did it enable me to quickly create a mobile app, I had time to create a second app using Appery.IO (HTML 5/Javascript based). The two work together as one.

Appery.IO

I won the 1st prize of the VISA challenge at that Hackathon. From then on I knew the power and efficiency of the Corona SDK and Lua. Now I include Corona in all my evaluations when new software development projects come along and yes … even Hackathons.

“Got any more Hackathons you plan on entering?”

Well, of course. I am always looking for Hackathons. I liken them to the cooking competition shows on cable TV (I wish someone would create that kind of show for coders). You never know what opportunities will arise from participating in such an event. There are two events in June 2013 I will be joining. One is in our backyard (Rockville, MD) and the other in Washington, DC with the big boys – AngelHack. There is another online Hackathon that runs from May until July that is Corona specific. I am really excited about that on because it involves the Dilbert comic strip characters. Lastly, I can’t wait to get back to Vegas for another chance to win at MoDev’s CEA Hackathon.

AngelHack

Well, that’s it for now. I’ll try to keep you updated on my activities. I hope that I can meet some of you at one of these Hackathons. I have met so many great people already.

CIAO!

A Changing of the Guard!

Posted: February 28, 2013 in appMobi

Hello World,

I have been using the appMobi XDK for over a year now. I found it to be one of the best tools for testing and deploying mobile apps using HTML, CSS, Javascript, and PhoneGap. So you may guess that I was a little concerned when I learned the news. What news? Well, here is a blog post from Intel:

Intel extends HTML5 capabilities

Submitted by jhwolf (Intel) on Fri, 02/22/2013 – 12:12

Developers continue to tell Intel they are looking to HTML5 to help improve time to market and reduce cost for developing and deploying cross-platform apps. At the same time, app developers want to maximize reach to customers and put their apps into multiple stores. Intel is dedicated to delivering software development tools and services that can assist these developers. I am pleased to let you know that Intel recently acquired the developer tools and build system from appMobi. While we’ve changed the names of the tools, the same capabilities will be there for you. You can check these tools out and get started writing your own cross platform apps now by visiting http://software.intel.com/html5 and registering to access the tools. Developers already using the appMobi tools will be able to access their work and files as well. If you weren’t already using appMobi development tools, I invite you to try them out and see if they fit your HTML5 app development needs. You will find no usage or licensing fees for using the tools.

We are also excited to bring many of the engineers who created these tools to Intel. These talented tool engineers complement Intel’s existing HTML5 capabilities and accelerate innovation and delivery of HTML5 tools for cross platform app developers.

I hope you will visit http://software.intel.com/html5 soon to check out the tools and return often to learn about the latest HTML5 developments from Intel.

So what do I think about this? We will see … we will see.

Cheers!

Hello World,

Yes, I know it’s an old joke but the picture shown below reminded me of that jest. Take a look ..

How long does it take to make a mobile app?

Kinvey Backend as a Service

Pretty neat huh? So how does that measure up to your experience as a developer?

And as for the question, “How many Coders does it take to screw in a light bulb?” There have been many answers to that question but I like – “None, that’s a hardware problem”

Until next time (my review for the Tiggzi App Builder is coming up next) …

Keep On Codin’

Cheers!

Hello World,

Well I’ve come to the end of my week long evaluation of Sencha Animator. Overall, I was pleased with what the tool was able to provide. It certainly delivers on what it promises … but no more. During my evaluation period I was able to create an decent prototype of a strategy game I am very fond of – Turn About. It’s based on the old 90′s game called Lights Out. I have created many versions of this game using many different languages including: PowerBuilder, Flash, Flex and Actionscript, Coldfusion, and Javascript. I use it to help me learn a new language or platform and discover its limitations. So first let’s look at the Pros:

PROS

It’s a great tool for creating visually compelling animated pages. I will never consider myself a designer but I can do wonders with clip art and photos. Having the ability to simply choose my images, position them on the canvas, and animate them by dragging, dropping, and updating parameters in the IDE was of great benefit. An animated page that took me two hours to construct (struggling with the CSS) took only 15 minutes in Sencha Animator.

It’s very easy for someone with a Flash animation background to pick it up and run with it. I spent years creating applications in Flash using Actionscript. I am very familiar with the timeline in Flash and was pleased to see it implemented in this tool as well.

If you are a designer with CSS experience then it’s easy to enhance your creation with custom CSS. Sencha Animator allows you to add your own CSS to your project. You can also export your project and it will create the HTML, CSS3, and Javasript source files. The resulting CSS is so clean that understanding and modifying the CSS is very easy.

If you are a developer with Javascript experience then it’s easy to extend the page interactions and behaviors with your own Javascript. I found that I needed to extend the functionality of my page beyond what Sencha Animator could provide. Fortunately the tool provides a way add your own Javascript code.

The product support is great with a decent supply of documentation and tutorials. The documentation for Sencha Animator looked complete. There are several tutorials (with source) on the site that will get you started.

CONS

It has limited functionality if you are an experienced Flash Developer/Designer. The “animation model” (for lack of a better term) used in Sencha Animator is scene-based. What that means is that your animation is grouped into one or more scenes.

All animation is a given scene is played when the scene is entered. The only way to prevent the scene from playing is by using custom Javascript code.

Although you can specify certain objects in the scene to play more than once there is no way to control the animation thru code. Once you are in a scene I found to easy way to start animating an object at a specified point. I had to write custom Javascript code and CSS to make that happen. But I had to be careful because any subsequent exports will overwrite any custom code I may have included.

Nor are you able to receive notifications during animation (such as a callback when the animation reaches 50%). I found a couple of libraries that helped report the frame state during animation but since the timeline is time-based I found it not to be 100% reliable.

OVERALL

Despite its limitations I am still pleased with Sencha Animator. Although I will never use Animator as a primary development tool (and I don’t think Sencha had that in mind as well) it will serve me well as a secondary development tool. I will certainly take advantage of Animator for any projects that require the placement and/or animation of images and objects. I can then include the resulting code into the larger project.

It also serves as an excellent tool to learn CSS transformations and animations by example which, is how I learn best.

WHAT’S NEXT

Next up is Tiggzi! Tiggzi is a “Cloud-based HTML5, jQuery Mobile and Hybrid Mobile App Builder”. I took a look at this tool about a year ago when I was first evaluating tools to use for web-based mobile development. At the time I wasn’t impressed with its features and their subscription prices seem quite high for what they were offering (they do have a limited free plan). When I found appMobi (completely free at the time) my decision was made. Now I will come back to do a full TWO WEEK evaluation of Tiggzi. They seemed to have improved their features (including adding Window 8 support).

I will post the game app I created using Sencha Animator (including source) on a later date. I have two Hackathons and a contest that I am preparing for. If you would like for me to send you the game app just comment on this page.

Until Next Time World,

CIAO