newer QA Mike Sheldon

    UBPorts Webapp

    • bumblehead
    • /blog
    • 2017-07-10

    Ubports is a mobile operating system that does not collect personal data. It looks beautiful and is easy to use :). My favorite.

    Here, I'll share what's needed to package and install an html/js app as a "click" package for Ubports. Download this little demo app and follow along to create a .click package with it.

    It does not use electron or node-webkit, but uses a web container provided by the Ubports system.

    Get started

    scrounge

    First, download or clone the app and visit it with a shell. Use npm to install and run it locally and to see it in your browser.

    $ npm install
    $ npm start # after express starts, use a browser to visit http://localhost:3000/
    

    It runs! You should see a scripted alert box. Most webapps are developed around a local service such as this, where changes can be seen in the browser.

    Make a .click package!

    scrounge

    Now you're ready to make a .click package. Call the included makeclick.sh script. This script can be customised along with the boilerplate files found in ./platform/click.

    $ bash ./makeclick.sh
    [...] generate .click: ubports-little-webapp-1.0.0
    [...] clean sources
    [...] write sources
    [...] write manifest version
    [...] write click
    Now executing: click-review ./ubports-little-webapp_1.0.0_all.click
    ./ubports-little-webapp_1.0.0_all.click: pass
    Successfully built package in './ubports-little-webapp_1.0.0_all.click'.
    

    Test a .click package!

    One of the best ways to test your .click package is to install it on a device.
    Install adb if you haven't done that already, then turn on your device and usb-connect it. Be sure "Developer mode" is enabled (System Settings > About > Developer mode).

    $ adb push ubports-little-webapp_1.0.0_all.click /tmp # copy to the device
    $ adb shell # enter the device
    $ pkcon install-local --allow-untrusted /tmp/ubports-little-webapp_1.0.0_all.click # install
    Installing files              [=========================]
    Finished                      [=========================]
    Installing files              [=========================]
    Testing changes               [=========================]
    Starting                      [=========================]
    Finished                      [=========================]
    Installed       ubports-little-webapp-1.0.0.all
    

    Refresh your homescreen and click the ubports icon to start the app!

    scrounge

    Credit:

    scrounge

    tags software