Node, HTML, JavaScript and Hackathons

hackathon starter project

 

These days creating a new piece of web or mobile software feels a lot like combining already made pieces together. Adding some glue so they do not fall apart, releasing version v1 and repeat the loop many times. Until you are satisfied that nobody cares or that you have actually built something useful.

Agile, lean and other tech product methodologies have thought us to use this process. And ever increasing modular nature of web and back end frameworks make it easy to follow these steps. Many hours are already spent by community of smart people while creating all the reusable modules for your future app.

Good example to illustrate this trend is Hackathon Starter project. Its created for people building web and mobile apps with help of Node.js. As the name suggests it was created as reusable prototype for hackathon projects. In hackathons you usually have ~24 hours to create a somewhat working project. As this template is beefed up with main modules it will save lots of time and will let you concentrate on the specific functionality you want to achieve.

Read More
When HTML5 goes up

html5 up designs

I have recently found a great online gallery of HTML5 web app designs. It has 19 (at the time of this post writing) well designed and free to use web app templates.
They are all responsive, look beautiful on desktop and mobile browsers and do support multiple screen resolutions.

What I most like about this web gallery is that the author has started in 2012 and has grown a lot with every new design he posted! He has also created a www front end framework skelJS which is the powering engine for all these HTML5 designs.

The most recent templates are really worth taking a look at and will for sure give you some inspirations on how to use HTML5 in web projects.

Read More
PhoneGap and WordPress for building mobile applications

Developing HTML5 mobile applications with WordPress

These days many developers are exploring ways to speed up and to simplify mobile application development process. And I see more an more tools created for this reason.

Today I noticed one such tool which takes slightly different approach. It allows you to build mobile applications by using WordPress CMS. Its called Apppreser.
They help you to convert WordPress based HTML sites to a native mobile applications by wrapping them to PhoneGap framework.

The idea is to use WordPress plugins to talk to PhoneGap APIs and this way connect to mobile hardware.

Even if folks from Apppress are charging quite a few bucks for their plugins and implementation the use case is promising. There are plenty of websites powered by WordPress and theoretically it should be possible to make HTML5 mobile applications from them with a little bit of effort.

As for the high price for the service, I’m sure there will soon be open source versions of such plugins available. WordPress developer community is known for creating great open source plugins.

What do you think about such way of creating HTML based mobile apps?

Read More
Great OAuth tutorials for HTML5 applications

OAuth APIs and HTML5

Applications we build are more and more dependent on 3rd party data sources. And as Internet of things continues to grow, this fact becomes even more stronger.

It allows us to create great experiences for the app end users by presenting them data gathered from across the Internets. But at the same time we have to spend more time ensuring that our applications are consuming all this data securely and they only get access to the data they need. OAuth protocol was designed and developed for this exact reason.

Read More
Building AngularJS based native mobile application. Part 2

This is the second part of tutorial for building native mobile application based on AngularJS, HTML5 markup and CSS styles. In the first part you will find how to setup the new project, add routes, controllers, HTML5 views and do simple testing in a standard web browser.

What we are doing in this tutorial?

In this tutorial part we are going to take previously created application and add back navigation button, sliding animations between the views and functionality to retrieve data from web services by using asynchronous HTTP communication. Finally I’ll give some hints how to wrap this application into PhoneGap framework in order to create installable version. Lets get started.

Read More
How to build AngularJS based native mobile application

This is the first part of the tutorial for building native mobile application based on AngularJS framework, HTML5 markup and CSS styles. The second tutorial part can be found by following the link.

I have recently started using AngularJS a JavaScript tool set for building HTML5 applications. As we are covering cross platform mobile application development here on htmlcenter, I decided to write a tutorial and share my experiences while using powerful and quite easy to understand AngularJS MVC structure for developing cross platform mobile applications.

This tutorial is about how to build Angular powered HTML5 mobile application, wrap it up with PhoneGap and distribute as a native mobile app (on several mobile platforms if you wish so). We have split tutorial into 2 parts, just to make it easier for information to sink in. As always, links to the example source code can be found at the end of the tutorial posts.

What we are going to cover?

First, we will briefly explore what is AngularJS (however, this tutorial is not about learning the basics),  we are going to pick Ratchet as a front end framework for our HTML5 mobile application and create MVC structure. Second tutorial part covers how to make our view transitions animated, how AngularJS communicates with web services  and how to wrap up AngularJS application with PhoneGap. Sounds like we have some ground to cover. Lets get started.

Read More
Crossing platforms between iOS and Android. Extending PhoneGap project

One of the main reasons to use hybrid mobile application framework like PhoneGap for development is to maintain you project code base in one programming language, while deploying mobile applications across many mobile platforms. PhoneGap is the wrapper for HTML5 applications to make them run on multiple mobile operating systems as native apps. Applications are written in JavaScript and framework provides API’s to access native mobile device functionality. Developers can even write their own plugins to get any specific native OS functionality they want.

I have recently published 4 piece tutorial about developing PhoneGap based mobile application for Apple iOS platform. In the beginning of that tutorial I promised to use the same application JavaScript code for another mobile app which is created to run on Android powered mobile devices. This post is about doing exactly that. I will share my experience of taking PhoneGap application code from iOS based app and moving it over to the Android platform. Some native elements will have to be changed but we will talk about them once we get there. Now, lets do some work.

Read More
Developing PhoneGap mobile project. Final part

This is the final tutorial part for developing simple PhoneGap based mobile application from the ground up. Earlier in tutorial parts one, two and three we took a closer look at what role PhoneGap hybrid mobile development framework plays in mobile development and how it works. We have created a new project and added several elements of functionality, similar to what most mobile applications out there would have – user interface, HTTP communication, data storage, native controls etc. In this final part I’m going to show you Geolocation API implementation, how to prepare and delay application splash screen and finalize everything with application icon. We’ll be working with the code from the last tutorial part (you can find at the bottom of tutorial part 3). Source code for overall finished PhoneGap application example (including today’s changes) can be found at the bottom of this post. Lets get started!

Read More
Developing PhoneGap mobile project. Part 3

In the part one and part two of this tutorial we have discussed what PhoneGap mobile application framework is, its key components and elements. We have created a new PhoneGap mobile app project for iOS platform and started adding code for most used mobile application components. First such functionality was a communication with remote web services and 3rd party API’s through HTTP protocol by using jQuery library. Our mobile application has got a minimalistic and nice looking design created by using HTML5 markup and CSS styling.

In this part of the tutorial we will be adding data storage functionality and native application controls. Yes, native iOS controls so our PhoneGap based mobile app has a native look and feel native to its users. Such possibility to add native elements to PhoneGap hybrid mobile applications is one of the biggest strengths of this framework.

I’m going to be working with the code from the last tutorial part (you can find it on the bottom of the previous tutorial page). And the link to completed source code of today’s tutorial can be found at the end of tutorial. Lets get started.

First we are going to write a code to store last keyword that was used for search on the mobile device and retrieve it (for refilling search text box) once user launches application next time.

What storage for PhoneGap projects?

Implementing storage in PhoneGap mobile applications

Read More
Developing PhoneGap mobile project. Part 2

In the part one of these series we have checked what PhoneGap mobile application framework is, downloaded its latest version and have created our initial first project for iOS smartphone platform. I have also outlined frame for example mobile app we are going to build and the set of web APIs that we will be using to make this example application somewhat useful for its users.

In this part of the tutorial we will take a closer look to PhoneGap framework structure, its main files and will write code to consume data from the web based APIs. Lets call it slightly advanced “Hello World” example which instead of printing just simple text will display 5 yummy receipts retrieved from external web service.
We will continue working on the code of the initial project created in the part one of this tutorial. You can follow the steps we took last time, they are quite simple.
As we have much more code in this part, the all source code for today’s finished tutorial is located at the bottom of the post. Feel free to download and use it for testing. Now, lets get started.

PhoneGap structure for iOS mobile project

Let’s take a look at the structure and contents of the project created by PhoneGap script. Open the project with XCode (key tool for developing iOS based mobile applications). The structure will look the same as I have pictured below, with the key files for iOS project as well as PhoneGap specific www directory and few configuration files.
For iOS apps main.m objective-c implementation file represents the main loop application is constantly running. From the contents of this file we see that AppDelegate is being referenced as a main controller. Quick view to AppDelegate.m implementation file shows us that it sets some configuration parameters for the mobile project. Cache size, window size, splash screen, default start page for view controller (project default is always index.html) and other properties. The main directory where all application files have to be placed is www and they will be served via special custom view (web view).

AppDelegate.m implementation file for newly created PhoneGap iOS project.

PhoneGap project files for iOS

Read More

Join our team

Do you enjoy technical writing? Care about cross platform mobile apps, HTML5, Javascript and Ninja's? Write for us! We would like to hear from you, get in touch!