Create a webapp with "navigation controls" for Ubuntu Phone in 5' and without SDK

Thanks to Oliver Grawet, we have available this template:
    bzr branch lp:~ogra/junk/alternate-webapp-container
for generating something like this in our webapps:
 
Navigation control

Awesome right? Do you want to adapt your webapp to this? It's really easy, fast and useful for the user! Let's go!

Intro:
By example, our app will be this blog, then, the data will be:
    Web: http://thinkonbytes.blogspot.com/
    Title: Less is more than more
    Allowed subdomains: http://thinkonbytes.blogspot.com/*
    Internal webapp name: thinkonbytes
    Developer: costales
We'll work with the Oliver's template now.


Icon:
Overwrite the alternate-webapp-container/icon.png with a new PNG icon with this size: 256x256.



Replace in the files:
alternate-webapp-container/qml/Main.qml:
   applicationName: "thinkonbytes.costales"

alternate-webapp-container/app.desktop:
   Name=Less is more than more
 
alternate-webapp-container/config.js:
    var webappName = "thinkonbytes.costales"
    var webappUrl = "
http://thinkonbytes.blogspot.com/"
    var webappUrlPattern = "
http://thinkonbytes.blogspot.com/*"

alternate-webapp-container/manifest.json:
    {
    "description": "
thinkonbytes webapp",
        "framework": "ubuntu-sdk-14.04",
        "hooks": {
            "
thinkonbytes": {
            "apparmor": "app.json",
            "desktop": "app.desktop"
        }
    },
        "maintainer": "Marcos Costales <marcos.costales@gmail.com>",
        "name": "
thinkonbytes.costales",
        "title": "
thinkonbytes",
        "version": "0.2"
    }



 

Generate the installer .click:
 

cd alternate-webapp-container
click build .



Test it!
Copy it to your phone and in a Terminal install it with this command:

pkcon install-local --allow-untrusted /<path>/<file>.click

Refresh your apps (dropdown the apps scope) and you'll see your new app. Launch it and check all works fine.



Upload to the Store:
Upload the file .click to the Store as you can see here in this web.


It's done :) If you have any doubt, ask in the comments. Cheers!

2 comments:

  1. I was working on a script to automate it : https://github.com/Winael/ubuntu/blob/master/ubuntuphone/webapps/Reboot/alternate-webapp-generator.zip

    There's lots of work to do but it is already something

    ReplyDelete
  2. It is good to have most of these articles around to maintain the regular flow of information.

    Out of Gauge cargoes & Dangerous Goods transportation

    ReplyDelete