Putting a webserver inside a Phone!

The Project SmartBerryBox

This project born during an hackathon at CodeMotion Conference in Rome.
Thanks to this project I won a wonderful BlackBerry Z10.
The idea is showed in the following video:

What does it happens?
It is an HTML5 game running in the browser.. and the phone, a blackberry 10 devalpha device, it is used as a pad/controller.

This project is full of different tecnology:

• a standalone webserver: mongoose runs inside the phone
• the communication between the phone and the browser is made with websockets
• html5, canvas, jaws js, javascript for drawing and moving the game

How?
1. The server is inside the phone and the browser download the html5 game files, at first connection; like a visit of an html page.
2. The browser establish a websocket connection with the web server.
3. Whenever an event from the controller/the phone touchscreen, occur, the phone send with websocket the controller event(left,right,fire pressure) to the html5 game that update the movement of the player ship, on the canvas.

Why?
Your phone can do more and more..
Don't you want to use those CPU Cores for something useful and funny? :)
Smartphones are replacing portable console but they can replace home console, at least for casual gaming!
And this is just Today!
You just need a browser with HTML5 and websocket capability and your phone.
The browser (inside a smartTv for example) became the screen, the phone is the pad.
Your phone is something that it is able to adapt to different context and games,  just changing UI or use different hardware like the accelerometer.

Imagine a multiplayer game context, where every phone is connected each other and it is able to act as a controller: you and your friends playing in front of the tv: a quiz game, a car race, etc.
Cool, isn't it?

All the code I did, run on a BlackBerry 10 device, but since it is full of opensource tecnology it is easy to port the code to Android, maybe IOS.. with Native SDK.
The fundamental part is running mongoose with USE_WEBSOCKET flag.

I don't think windowsphone is able to run it, due to platform limitation: no native c/c++ code..as I know..

I will give all the code to the community in the next days, a blog post will follow and the source code on github also.
Do you like it?

OAuth on getPocket.com with BB10

Introduction
Here it is the description on how to authenticate a BlackBerry10 user in your application, with pocket API.
This tutorial is written for Cascades Developers.
Pocket is a read it later service.
It help user to keep track of new links and read it later, whenever they want.
Pocket have their own API used by over 300  apps.
The authentication process is an OAuth 2.0 variant.
If you have no experience with OAuth check this before continue.
The screenshots and code that follows belongs to a pocket client that I made, called Mnemonia for BlackBerry10, available here.

Initial Setup
Create a new app profile on getpocket.com.
Go to http://getpocket.com/developer/apps/ and register a new application.
Take note somewhere of consumer_key because you will need it soon.

Flow
When you want to authenticate a user, your application have to:

1. Make a request(all request are POST request) for an appCode to pocket.com with a redirect_uri and consumer_key as params and you will receive an appCode to save locally. The redirect_uri will be the url that pocket will invoke after the user have succesfully authorized the application.
2. Open a new browser window to pocket.com with the appCode of point 1 and redirect_uri as parameters.At this point the application ask the user to authenticate and approve the app. If the login is succesfully the browser will be redirect to the redirect_uri link.
3. Finally you can request an access_token and use it for the other operation: add, delete, archive, favourite etc.

Important: point the redirect_uri to a real page like this: where you tell the user that the authentication process is ok and to come back to the application.

Make Post Requests: Cascades's way
The main class for get/post request with QT, it's QNetworkAccessManager (check also this).
You should create in your Class an object QNetworkAccessManager and than connect it to a SLOT function (requestFinished in the example below):

mNetworkAccessManager = new QNetworkAccessManager(this);
connect(mNetworkAccessManager,SIGNAL(finished(QNetworkReply*)),this,SLOT(requestFinished(QNetworkReply*)));

After that all your request with networkAccessManager will finish in methoed requestFinished.

The second things you need is launch the browser, with this call:
navigator_invoke(HTTPSTRINGURL, NULL);

Now we will follow the 3 steps of previous Flow, section but with code:

Step 1: ask the app code.
We have to make a post request and pass our parameters, consumer_key and redirect_uri, in json format.
We create the JSON string manually,



As a result for the first request, requestFinished is called:



Step 2: Launch the Browser
Now that you have the appCode, you can ask authorization to the user:
This is a little function that open a new browser window with the correct parameters.

void YourClassName::launchAuthBrowser() {
    QString authUrl;
    authUrl.append("https://getpocket.com/auth/authorize?request_token=");
    authUrl.append(appCode); // the one retrieved at point 1.
    authUrl.append("&redirect_uri=");
    authUrl.append(YOURREDIRECTURI);
    navigator_invoke(authUrl.toStdString().c_str(), NULL);
}

After this call, a new browser window is presented to the user, asking for their credentials, or to create a new account.
If the authorization went ok, the browser is automatically redirected to YOURREDIRECTURI parameter.

Step 3: Finally the token!
Now your user is back to the app, after have succesfully authorized your app to use his account on pocket.com.



and in the requestFinished methoed I have this code:



The response of this request is a URL: the first value is the Token, the last one is the user username.
This last code is not a good example but just a way to take the parameters data, you should check better if the values you are reading are correct...
You have to check for errors too, watch Step 5 of http://getpocket.com/developer/docs/authentication.

Final consideration
You can save your token in your app/data directory, but you can do better following this link
If you need more assistance or have any critics with this article, write in the comments and let me know :)
.. and if you have the possibility to try Mnemonia, tell me what do you think about it!

BB10: A little survival guide for the newbie developer

Introduction
This guide is made for BB10's developers in particular for Cascades developer with a BB10 device.
These are little advice that I found experimenting with BB10 in these last months.

Log it!
If you want to log something to the console, for better understand how your applications is working you can use qDebug() << "your string"; in c++

 or use console.log on QML

Now to be able to read your log you have to connect to your device with SSH!
To be able to do this, just right click on your usb connected device and select "Launch SSH Session" like in the following image.

After that you have a shell inside the device and you are able to send command directly from the device.
To watch the log produced by your application just type slog2info -w

and for the 2 previouse log:

SSH in device, good not only for logs!

After an ssh connection, you can type some command inside the device for example:

• pwd: print your working directory
• cd: to change your current directory
• cat : print on the console the content of a file
• ls: list the files and directory in your current directory

There are other commands, like in a unix enviroment, not all working but with just these 4 previous command you have a lot of power... and remember: With great power comes great responsibility.

For example? you can watch the content of a produced file from your app; start moving to /accounts/1000/appdata/ and than to your app directory:

Use "cat" on a file:

Renew your debug token, it is just 2 click!

Your debug token will expire.. To create a new one you can write command from your enviroment or use qde (a customized eclipse for bb10) like that:

Right Click on your usb device, than select Blackberry Tools and than Debug Token Details and you have this dialog.

Select your token and then Renew options and .. that's it!

Do you know any other useful tips?
Please write it in the comments!

Simple Setup SDL on Blackberry OS 10 on a Mac

Yes, I'm started to play with BlackBerry OS 10.

Trust me, when I said BBOS10 is an incredible os, with a lot of potential and the main developer tools are also great: I have only positive words for Webworks and Cascades. If you are a developer you should check the developer.blackberry.com website.

Games, Games, Games!

This is a little guide on how to setup SDL to develop with BBOS10 and a Mac.

This guide is intended for a real bb10 device... but you can simply change some step and make the whole works with the simulator.

Let's go with the steps:

1. Download BBOS10 Native Development Kit and install it (and the simulator if you don't have a device)
2. Download the sample/template SDL project that you can find attached, in a answer, on this link http://supportforums.blackberry.com/t5/Native-Development/Problems-getting-SDL-to-work/td-p/1569839 : this  .zip file contains also the 2 library SDL and TouchOverlay (a library for integrate touch on SDL 4 Blackberry). Extract the sample somewhere on your disk.
3. Go on  www.github.com/blackberry/sdl and git clone the project.
4. Launch the BlackBerry Native SDK (point 1), than go on File->Import->Existing project into workspace and in the new window select the root directory of the uncompressed sample at point 2. Press Finish.
5. Now you have to correct some broken link in the project. Right click on the SDLHelloWorld project and press Properties. 
6. In the new window you have to check and correct the following parameters:

check the includes path.. remove the eventually QNX_Target symbol and put an absolute path

add the "m" library to the list

Correct also the library path

Build and Run the project and you should see something like this:

If you would like an updated compiled version of SDL and TouchOverlay check this post: http://www.joshuagranick.com/blog/2012/07/05/nme-adding-the-blackberry-cpp-native-target-in-48-hours/ (very useful) and expecially this link.
Happy coding!

How much can you trust your Android Phone?

Introduction
Android sales has been huge, in the last years.
Surely, one of the key success factors of this platform is the possibility to have a smartphone with thousand of apps available with a starting price of 99$.

A big problem
Its huge user base, makes android a fertile ground in which computer thieves, put their efforts to gain access to:

• user accounts
• private data
• credit card numbers

Let's take the webkit engine: it is used from the browser and from some apps for rendering of webpages.
it is one of the most attacked module on the platform, maybe, because it is easier to find a known bug and obtain access to personal data.
If you have a problem on that components, a lot of apps become a security problem, unless you can update the smartphone.


A platform with no bugs doesn't exist and never exist but, anyone who makes you pay for a phone should guarantee  to have a system repairable and upgradable.


Google can guarantee this, but not Android .. why?

Generally, for my experience the only phones that receive system update, are Nexus phones, made by manufactures for Google.

If you have an Android phone .. you should have Jelly Bean now, lastest version of Android.
That's how it should work...
Is there a system update? and your phone must receive it as soon as possible.

Other phone manufacturers, does not update their software.
After you have bought their phone, they ignore you, they leave you with an insecure system that   compromised with a simple link received from a social network, or scanning a qrcode(link) or by NFC(link).

Most of the problems found on a module like webkit are commons to IOS, because also iphones uses Webkit, but on the Iphone the in-security is limited to people who doesn't want to make a system update.

The problem on IOS are solved in some days. 

The solutions
Here they are some solutions:

• buy a new phone every year to have new software update.....
• buy a nexus phone (new will be available soon)
• use a custom rom: you can flash your phone with a rom made by someone like cyanogenmod  (how can I trust them? I don't know.. but it is opensource and better than a stock buggy rom)
• don't buy an android phone

Keep your apps updated and pay attention to what you install too
This is an article about a security problem on Google Drive and DropBox of some days ago: http://blog.watchfire.com/wfblog/2012/10/old-habits-die-hard.html
If Google and Dropbox have security problems, you can immagine how many other apps can have security problem... so  think before "yes install / accept accept accept/ don't care / yes do what you want with my phone".
And this is another recent article about how apps are generally insecure when handle HTTPS connection (for example when you want to watch your bank account from your phone in a public wifi).

If you have not seen this yet.. watch this android bug and... think that the only android platform not affected.. is jelly bean.

If you are better than facebook engineer..than go ahead with HTML5

Yesterday, M. Zuckerberg talked about HTML5 as a mistake for the facebook iphone and android app.

Exactly:

“When I’m introspective about the last few years I think the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native… because it just wasn’t there. And it’s not that HTML5 is bad. I’m actually, on long-term, really excited about it. One of the things that’s interesting is we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So mobile Web is a big thing for us.”

Quote from http://blog.tobie.me/post/31366970040/when-im-introspective-about-the-last-few-years-i

(maybe people use Web Facebook instead of native version because the previous version was buggy. Changes are hard to made)

I totally agree about HTML5... but I also think that for any app out there, use HTML5 as a one solution for all the mobile platform out there, and as the main platform to build app is a mistake.
I don't have a good opinion of HTML5 on mobile, for many reason:

• it is a growing and evolving tecnology with a not defined standard: there are 2 standards now..
• you lose the link to the hardware and also control, if you need it.
• I don't believe personally to solution/framework that can works everywhere.. You need compromise; compromise means poor integration & bad performance and so a bad user experience.
• Not all the mobile browsers are the same: on android platform, you can find different browser installed, with different rendering engine. Yes you can choose to support only some browser.. but don't you choose HTML5 because it can runs everywhere?
• Javascript performance may differ a lot from a platform to another: means slow speed on some device.
• The time spent improving App/OS integration..cost.
• No store exist yet... and if it exists.. needs a lot of app that are not native (if not why a user should point to the html5 store?)
• it is early: maybe in the future will be the best choice. We don't really know if it will be the best and when.. we know is not now.

It also have good points:

• HTML is a good solution for content rendering: if you need to show rich text, with images as an example.
• Easy to prototype an app.

and I also don't think to be better than all those nerds engineer at facebook.. so...

Platforms matter
As a personal experience IOS and Android have done a lot in terms of HTML5 integration..and they are continuing to do it but it is not enough, at least for now...for an example in these platform you can't access:
- camera and than shoot photos (for example no QrCode sorry)
- PIM
- Media
- .. many others things
I don't have any experience on Windows Phone platform.. so I can't say more about that.

Damn, I want to make an HTML5 app
You have some choices:

• if you don't need hardware integration, your app display contents grabbed from a web service.. you can accept UI compromise..performance...and you will package your app inside a WebKit window of a native app.. ok go ahead with your HTML5 app
• choose a platform with HTML5 capabilities: Firefox Mobile OS and BlackBerry OS 10.

I have saw enough things of Firefox Mobile OS to say it is not ready, not interesting and it is in a evolving state.. and more important.. may have a 0% market impact when you will see a firefox phone.
It's simple early for Firefox Mobile OS. Someone said Tizen? Same story there.

BlackBerry is pushing a lot their new platform BBOS10, but first of all, they are believing in you, as a developer: pushing a lot of support on forums and social network.

They can't make mistakes (who really can?) for the new platform release (2013) and they have a real HTML5 support on BBOS10! Read More here
There is a growing community.. so if you choose to develop for HTML5, it is time to choose BBOS10.

Playing with OAuth 2.0: how does it works?

Recently I have started to play with a new mobile platform.
Tipically the things that I do when I have a new platform to learn are:
- read general documentation of the platform
- try to realize an application from scratch with the new platform

Just because the project that I have in mind use OAuth I had the necessity to understand how it works.
Many portal and website  nowadays use this protocol for users authentication.

The idea is based on soundcloud and its api…
If you search on the site you will find a lot of documentation, also library, for  the most famous mobile platform (android and ios) but not a general way on how OAuth should works and how you, as developer, should handle it.
Results from a search on the web show me detailed complicated explanation or specific platform dependent explanations ( for the specific api or platform)

Talk auth2.0
With auth2.0 applications the security of your accounts improves.
A client with OAuth never ask for your username and password, instead, it ask authorization from the server where your account is.
The server (typically a famous service like Facebook,twitter, gmail…) than ask you to login(if you are not already logged) and ask if you would like to authorize the application.
If the user authorize the application the server send back to the application a token, something like a string of numbers and letters.
The application than will store the token locally and use that token for next api request to the service.
Someone can hack the application and get the saved token (it can expire and be invalidated also by the users) but it doesn't have access to your account… so your account still remain safe!

An image is better than thousands words...

simple uhm?
you connect to the credential page asking to the user to login (if it is not already logged) and than authorize the application.
the server than send back a message with a code.
with that code you can ask for a token...and with the token you can finally make api requests.

In the next post, I will show a specific implementation…based on soundcloud api!