How to convert an HTML5 project into a standalone Android application

A WebView is a mobile application that acts like a real-world window to a website. The user however doesn’t see any browser at all. One would ask: “OK! And what good is to have an application when the same website can be opened by just typing its address in the address-line of the browser?” The whole thing may sound like the ultimate nonsense but actually it is very interesting and useful. First of all, it offers to the user a simpler and friendlier way to open a website. That presentation has the advantage to be of a more professional look, since the webpage is opened without having on the screen the menus and the borders of the web-browser. Thus it is not the same like just creating a link-shortcut on the Home Screen of the mobile device. It can also be used, so that a website will be only a part of the functionality of an application, by first displaying to the user a UI navigation’s menu, like it is such an application called VMedia that I created for a friend who runs a web TV-station.

But that what is of more interesting is that a WebView application can encapsulate a local site with all sub-directories, including the ability to execute JavaScript programs.
In other words, such an application can turn a complete HTML5-project into a standalone package ready for uploading to the market, like it is Google Play or the App Store of Apple.

I will describe in this tutorial the case of creating a WebView application for the Android using the SDK, in the shortest way it can be done. It could come along with a whole bunch of other checking mechanisms (like error handling on loading, alert messages, progress bar, etc.) but I will write another tutorial for this reason.

For the lazy ones, there are several free tools (even online) that pick the main directory of an HTML/HTML5 project and produce an APK package from it but …if we always use tools, not knowing how to do it ourselves …then who’s gonna write the tools?

In the following, I will describe how I created a standalone application from an HTML5 game that I developed, called Spaceball. More

Dealing with “Could not find artifact com.oracle:ojdbc6:jar”

Introduction

Chris Georgoulis and I describe solutions to working around the following maven error:

Could not find artifact com.oracle:ojdbc6:jar:11.2.0.4.0 in central (https://repo.maven.apache.org/maven2) -> [Help 1]

Below I describe 3 ways how to handle this but there are also other solutions available. Check reference at the bottom.

If you plan on using your Project as a dependency:

The simplest solution is to manually install the JAR into the local maven repository. Using the example from stackoverflow:

With the maven entry:

<groupId>com.oracle</groupId>
<artifactId>ojdbc14</artifactId>
<version>10.2.0.3.0</version>

Run the following command in the command line:

mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 \
     -Dversion=10.2.0.3.0 -Dpackaging=jar -Dfile=ojdbc.jar -DgeneratePom=true

If you plan on using your Project as a dependency & want the process automated:

Instead of installing the JAR to the repository manually, there’s actually a plugin for that – thanks Chris for the info.

Add the following entry:

<build>
 <plugins>
 <plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-install-plugin</artifactId>
 <inherited>false</inherited>
 <executions>
 <execution>
 <id>install-external</id>
 <phase>clean</phase>
 <configuration>
 <file>${basedir}/lib/ojdbc14.jar</file>
 <repositoryLayout>default</repositoryLayout>
 <groupId>com.oracle</groupId>
 <artifactId>ojdbc14</artifactId>
 <version>10.2.0.3.0</version>
 <packaging>jar</packaging>
 <generatePom>true</generatePom>
 </configuration>
 <goals>
 <goal>install-file</goal>
 </goals>
 </execution>
 </executions>
 </plugin>
 </plugins>
 </build>

If your don’t plan on using your Project as a dependency in another project:

More

Reducing RTMPT disconnects on RED5

RED5RTMPT streams provided by RED5 are notorious for randomly disconnecting.

Chris Georgoulis and I extensively debugged this for a project and were able to reduce the disconnection rate from 90% to 40% for connections that lasted over 5 minutes. This was for a teleconferencing application that required 4 RTMPT streams in total (2 outgoing, 2 incoming) with a maximum buffer of 200ms.

RED5 by default has a maximum of 100 keep-alive requests. On the 100th request the server returns connection-close . By setting the limit to infinite we were able to improve the performance. RTMPT is quite vulnerable to disconnections and closing and reopening the socket connection plays a role.

As described by Chris, please go to /{red5_folder}/conf/jee-container.xml and modify the following element group with the extra <property> tags(this should be at line 21), and then restart red5:

More

Quick Case: Apache Reverse Proxy for Tomcat, Red5, and Websockets, on Redhat Linux

reverse proxyQuick post outlining the steps and config I used to forward 2 different ports to 2 different servers (tomcat and red5), and to enable websockets on a Redhat server running apache 2.4.5 .

Servers/Apps and Ports:

Apache  – port 80
Red5 – port 5081
Tomcat – port 8585

More

Create cross platform HTML5 games – Level 1

Creating games is the most exciting and challenging area of the software development. Once you have created the next hit game of the year, the challenge for your newborn baby is to support as many different platforms as possible since there are thousands of different devices out there. Thus, unless your target is a specific device, like iPhone, Android, Smart watch, Windows PC, Mac, etc. with previously known technical characteristics, then the need of such a wide support could become a real headache.

responsive_spaceballAn approach to this is to re-write the source code (or specific parts of it) for every platform using the SDK and the tools for this platform.

Another approach is to write the game using technologies that come with the promise “write once, run everywhere”. One such very promising technology is HTML5. Orienting your coding habits into this direction, a cross-platform implementation becomes feasible.

In this tutorial I am going to show you how I have used HTML5 to write such a cros-platform game. The reader could easily be confused with the term“HTML5” believing that somehow it is possible to write such complex applications using HTML-tags (something like <game><img src=”….”, …, put some game logic here </game> and …that’s all. NO!).  In fact, HTML5 is 1% HTML and 99% JavaScript. The tutorial assumes that you already have a basic experience with JavaScript programming, or with …programming.

Actually, an HTML5 game (or application) runs inside a browser that supports this level of the markup language. Fortunately, almost every browser on any device of the last half decade can translate HTML5.

You can play a game that I have created with HTML5 and combines all these promises. Just visit from everywhere the link bellow. If you open it from a desktop browser please keep changing the dimensions to experience the effect of responsive resizing in real-time.

http://www.liknongames.com/spaceball

Now, let’s begin with the fun.

More

Tips for beginners: How to align text & content with html & css

Html-cssQuick Example: How to align text & content in CSS

In this post we show how to vertically align your text even if the text is changing its font size dynmically and also how to

align horizontally content (aka divs – otherwise you can do it with span tags) using the old fashioned floats. At the end you can find 

the code in jsFiddle for further practice.

More

Git: How to merge your branch

gitIn this post I will show you four ways to merge your branch with the main branch, which we will call develop, of the project.

1. Merging on develop

git checkout develop

git pull origin develop

git merge yourBranch

This method is the most frequently used. It uses the recursive automatic merging method of Git to merge the changes of your branch upon the main develop branch.

2. Merging with rebase

git checkout yourBranch

git rebase develop

In this method you are applying the develop branch upon yourBranch. If there is a conflict in the process of merging the process stops and you must fix your conflicts manually which may be an advantage some developers. Moreover it does not produce a merge commit message, so it helps to keep the commit history clean.

3. Merging with pull on your branch

git checkout yourBranch

git pull origin yourBranch

git pull origin develop

More

Removing duplicate objects using Underscore for Javascript in Coffeescript

underscore
Below an example to show how to remove duplicate objects from an array using underscore in Coffeescript.

My answer is based on the following stackoverflow q/a: http://stackoverflow.com/a/9923961/1688441

array=  _.uniq(_.collect(initialArray, (x) ->  JSON.stringify x  )).map((v) -> JSON.parse(v))

More

WordPress Revisr Plugin: Connecting with Github

Revisr“Revisr is a Git and WordPress database plugin that allows you to keep track of your web projects in version control. Revisr eliminates redundant interfaces in your workflow and allows you to focus on the task at hand.” – Revisr

That sounds well and good. However, configuration required a few steps and below we document them.
It is needed to install git, create certificates, upload them to github, and also set appropriate permissions.

Steps

            1. Temporarily allow login by the www-data account.
              Open /etc/passwd with nano or vi, and replace :usr/sbin/nologin with :/bin/bash
              See: http://programster.blogspot.gr/2014/05/ubuntu-1404-allow-login-as-www-data-user.html


            2. Install git.
              sudo apt-get install git

            3. Create a certificate for www-data user and set permissions.
              a) Go to www directory and change owners:

              ~/# cd /var/www
              /var/www# chown www-data .
              

              b) Generate a certificate:

              sudo -u www-data ssh-keygen -t rsa
              

              You shouldn’t enter a passphrase and you should see the correct key.


            4. Open the generated certificate and copy the text inside:
              root@server:/var/www/# cd .ssh
              root@server:/var/www/.ssh# cat id_rsa.pub
              ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDOL…etc

            5. Go to Github site and upload the certificate.
              A) See step 4 of https://help.github.com/articles/generating-ssh-keys/
              B) Add your specific key to the github website at: https://github.com/settings/ssh


            6. Test the connection to github:
              sudo -u www-data bash
              ssh -T git@github.com

              You should see:

              Hi username! You've successfully authenticated, but GitHub does not # provide shell access.
              Type "Exit" to exit www-data terminal and type "sudo bash" to start root terminal.
              

              Type:

              exit
              sudo bash

            7. Go to the wordpress directory and set the correct permissions. Reference: http://stackoverflow.com/questions/18352682/correct-file-permissions-for-wordpress

              chown www-data:www-data -R *          # Let apache be owner
              find . -type d -exec chmod 755 {} \;  # Change directory permissions rwxr-xr-x
              find . -type f -exec chmod 644 {} \;  # Change file permissions rw-r--r-

            8. Create a github repository and then connect revisr with this:
              Use the notation for SSH remote URL ( do not use https address).
              Example: in Remote URL enter: git@github.com:developerAccount/project.git


            9. Create a github repository inside the wordpress folder (see here for more info):
              A) Go to your folder and execute

              git init

              B) You should now be able to add and commit files using either the command line or the revisr command panel


            10. Check to see that permissions are correct for your wordpress git repository. You can run ls -lqa to check the owner and check within the .git folder as well. The following commands should be sufficient to set correct ownership to www-data:
              chown www-data:www-data -R .[^.]*
              chown www-data:www-data .
              

The following steps should do it. Post your comments or questions below or send me an e-mail.

How to Build a Simple Game using OpenGL in C

“OpenGL (Open Graphics Library) is a cross-language, multi-platform applicaion
programming interface for rendering2D and 3D vector graphics. The API is typically used to interact with a graphics processor unit (GPU), to achieve hardware accelarated rendering.”

So OpenGL is an open library that let us a draw graphics. In this post we will show how a rookie can build a OpenGLsimple game with OpenGL in a C environment. Specifically this game will feature a spacecraft and we will design and implement each part of it using the primitive types of  OpenGL . Moreover we will build the environment which includes  space, stars , a sun and some planets with the same way. Then we will introduce the way that we can add an animation movement. Finally we will load an asteroid from an object file that will have an orbit towards our spacecraft and the goal will be to avoid the asteroid. More