How to create a webapp for Ubuntu Phone in 5'

What's a webapp? 
A container that will load a web inside and it'll appear one application.


My advice
  • Get an useful and common web with a mobile view.
  • Some webs are using a subdomain for the mobile web as m.web.com. Other are reading the User Agent, then they will work with Ubuntu, because the User Agent is "Ubuntu like Android".
  • Search if it exists before.
  • Use Ubuntu 14.10 (or the last stable release in the future).


What do you need? 

Install the SDK:
sudo add-apt-repository ppa:ubuntu-sdk-team/ppa
sudo apt-get update && sudo apt-get install ubuntu-sdk
sudo apt-get update && sudo apt-get dist-upgrade  

Search and launch the SDK:

Click in New Project

Choose Web App

Fill the name and path

Fill your name and app name

I choose 14.10 for ARM

I'll click in Finish

For a normal web, leave this 3 policy groups

Get a description Comment for your webapp. I'd recommend you the Wikipedia

Tip: You can play with the User Agent too. Run "webapp-container --help" in an Ubuntu Desktop 14.10+ shell for see all available options

Get an icon

Set icon to 256x256 px and .png (You can do it with GIMP)

Fill your manifest

Tip: Don't run it! It'll create a 'debug' module and it'll not validate it. Just Build your project

A folder was created with your click package. We need to upload then :)

Go to this URL and click in Phone > New application

Choose your click package and click Upload (If you are getting an error, go to "Phones". It's probably that the package was uploaded)


You will see your new project as Draft

Click on your new project and click in Submit for review. Click in publish after that
Your webapp will appear in the Store now :)

6 comments:

  1. Hi Marcos,

    Thx for this helpfull tutorial.

    Unfortunatelly, on my bq, I just have few options listed by webapp-container --help command. Do you know how to modify UA ?

    Cheers,

    ReplyDelete
  2. Hi Vincent |o/

    I updated the post. You have to run
    webapp-container --help
    into a Ubuntu 14.10+ desktop ;) It'll give you the Canonical Browser parameters.

    A hug!

    ReplyDelete
  3. Thank you for your explanations !
    I just published two apps (Le Figaro and Fondation Robert Schuman). This is great.
    However they sometimes work, sometimes not, which is a little mysterious to me, I reckon.

    ReplyDelete
  4. +Arthur: Yes, I found 2 problems:
    - If you play before to build, a flag "debug" will not allow to build the package.
    - In the uploading, an error appears sometimes, but the package is uploading.
    I think they are bugs, the SDK & Store in the first times :)
    Best regards!

    ReplyDelete
  5. Thank you very much for your insights, Marcos! Maybe I should have been more specific: I didn't run the apps at all on my desktop. In fact, my apps sometimes do not launch correctly on my Nexus 5 phone. It is not clear if it is my fault or whether I should report a bug somewhere.

    ReplyDelete
  6. Hi Arthur! I don't know about to run them in the Desktop. I just tried in the mobile :)

    I tried your Le Figaro and it's jumping outside the webapp to the browser when I click in a news.

    I think you'd use:
    1. The --webappUrlPatterns=https?://*figaro*
    2. Disabled the back button too.

    Best regards!

    ReplyDelete