Crea una aplicación para Ubuntu Phone en 5 minutos

¿Qué es una aplicación webapp?
Un contenedor que cargará una web dentro, aparentando ser una aplicación, teniendo su propio lanzador.

Algunos consejos:

  • Adapta una web útil y con vista móvil.
  • Algunas web usan un subdominio, tipo https://m.allrecipes.com, otras leen el User Agent del navegador (en Ubuntu Phone es “Ubuntu like Android”), otras leen el ancho de la pantalla… Así que prueba antes de adaptarla ;)
  • Busca si ya existe.

¿Qué necesitas?

  • Una web con vista móvil, puede ser tuya o no.
  • Ubuntu SDK.
  • Estaría bien dar un vistazo también al tutorial oficial :)

Instala el 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` `` 
```  
  
**Ejemplo**  
Vamos a crear una webapp para Github.com.  
Busca y lanza el SDK:  

[![](https://4.bp.blogspot.com/-QUhiZFpCMY4/VRUWSiMu2TI/AAAAAAAAEek/anxNOh0qg-o/s1600/1.png)](https://4.bp.blogspot.com/-QUhiZFpCMY4/VRUWSiMu2TI/AAAAAAAAEek/anxNOh0qg-o/s1600/1.png)

La primera vez te preguntará de crear un Kit, crea uno para armhf, Framework-14.10

  

[![](https://4.bp.blogspot.com/-9SvVxv3FiXE/VRUWShpzsiI/AAAAAAAAEeg/ZVrSwzZEpGc/s1600/2.png)](https://4.bp.blogspot.com/-9SvVxv3FiXE/VRUWShpzsiI/AAAAAAAAEeg/ZVrSwzZEpGc/s1600/2.png)

Aquí no hace falta que crees un emulador. Puedes dar a Finalizar tal cual ves la captura de pantalla

  
  
  

[![](https://2.bp.blogspot.com/-5zx__m5Ceoo/VPWjFghgfEI/AAAAAAAAEUA/aKQrN4l54IY/s1600/1.png)](https://2.bp.blogspot.com/-5zx__m5Ceoo/VPWjFghgfEI/AAAAAAAAEUA/aKQrN4l54IY/s1600/1.png)

Pulsa en New Project

  

[![](https://2.bp.blogspot.com/-l2QU1nb42_U/VPWjJ1-yljI/AAAAAAAAEU8/oRWUOYicmjo/s1600/2.png)](https://2.bp.blogspot.com/-l2QU1nb42_U/VPWjJ1-yljI/AAAAAAAAEU8/oRWUOYicmjo/s1600/2.png)

Selecciona Web App

  

[![](https://4.bp.blogspot.com/-OrNsQ9ityuk/VPWjKlfMlrI/AAAAAAAAEVQ/WnWTze_OG14/s1600/3.png)](https://4.bp.blogspot.com/-OrNsQ9ityuk/VPWjKlfMlrI/AAAAAAAAEVQ/WnWTze_OG14/s1600/3.png)

Rellena el nombre y directorio

  

[![](https://3.bp.blogspot.com/-dqzapOIJefg/VPWjK3zxvuI/AAAAAAAAEVM/sA3WguxX_tQ/s1600/4.png)](https://3.bp.blogspot.com/-dqzapOIJefg/VPWjK3zxvuI/AAAAAAAAEVM/sA3WguxX_tQ/s1600/4.png)

Rellena tu nombre y el nombre de la aplicación

  

[![](https://3.bp.blogspot.com/-kDUrMGIZ16s/VPWjLgFeh5I/AAAAAAAAEVY/H3r6Xl16PYg/s1600/5.png)](https://3.bp.blogspot.com/-kDUrMGIZ16s/VPWjLgFeh5I/AAAAAAAAEVY/H3r6Xl16PYg/s1600/5.png)

Yo escojo el Kit que instalé, 14.10 para armhf

  

[![](https://1.bp.blogspot.com/-ovFGzf-p9Po/VPWjMCaWHyI/AAAAAAAAEVc/W0osslL2HTE/s1600/6.png)](https://1.bp.blogspot.com/-ovFGzf-p9Po/VPWjMCaWHyI/AAAAAAAAEVc/W0osslL2HTE/s1600/6.png)

Pulsa en finalizar

  

[![](https://1.bp.blogspot.com/-Esh689czQIo/VPWjMllOi9I/AAAAAAAAEVk/a5YwSzJ_lrU/s1600/7.png)](https://1.bp.blogspot.com/-Esh689czQIo/VPWjMllOi9I/AAAAAAAAEVk/a5YwSzJ_lrU/s1600/7.png)

Para una web normal, dejamos estos 3 módulos

  

[![](https://1.bp.blogspot.com/-pS2sYJMLcZQ/VPWjM-EtNpI/AAAAAAAAEVo/JvbLfvQk3Rw/s1600/8.png)](https://1.bp.blogspot.com/-pS2sYJMLcZQ/VPWjM-EtNpI/AAAAAAAAEVo/JvbLfvQk3Rw/s1600/8.png)

Te recomiendo usar la Wikipedia para buscar la descripción para tu webapp

  

[![](https://1.bp.blogspot.com/-hwl8SrbOXaU/VPmqgxnPuyI/AAAAAAAAEWw/V1g78Ppv-WU/s1600/9.png)](https://1.bp.blogspot.com/-hwl8SrbOXaU/VPmqgxnPuyI/AAAAAAAAEWw/V1g78Ppv-WU/s1600/9.png)

**Truco**: Si una web da problemas puedes cambiar el user agent al que tu quieras. Ejecuta "webapp-container --help" en una Terminal en Ubuntu Desktop 14.10+ para ver todas las opciones disponibles. La línea Exec la tengo con un Enter para que se vea, pero debe de estar todo en una sóla línea. Te recomiendo quitar la opción "--enable-back-forward" que autorellena si la web tiene un menú de navegación

  

  

[![](https://1.bp.blogspot.com/-SYX8vSYH9Vo/VPWjF8Aa0cI/AAAAAAAAEUE/KSbAEMNTzKs/s1600/10.png)](https://1.bp.blogspot.com/-SYX8vSYH9Vo/VPWjF8Aa0cI/AAAAAAAAEUE/KSbAEMNTzKs/s1600/10.png)

Busca un icono

  

[![](https://4.bp.blogspot.com/-SBKg8E4G8HA/VPWjGNKuRnI/AAAAAAAAEUM/gAwGtB8VsdQ/s1600/11.png)](https://4.bp.blogspot.com/-SBKg8E4G8HA/VPWjGNKuRnI/AAAAAAAAEUM/gAwGtB8VsdQ/s1600/11.png)

Y establece su tamaño a 256x256 px y .png (Puedes hacerlo con GIMP)

  

[![](https://2.bp.blogspot.com/-GTOpaL8C934/VPWjGaSQRiI/AAAAAAAAEUQ/kfPdTHBJchc/s1600/13.png)](https://2.bp.blogspot.com/-GTOpaL8C934/VPWjGaSQRiI/AAAAAAAAEUQ/kfPdTHBJchc/s1600/13.png)

Rellena el manifiesto

  

[![](https://2.bp.blogspot.com/-RA9EtG5lMY0/VPWjOMzqDXI/AAAAAAAAEWA/oCBcLKZ29Xg/s1600/14.png)](https://2.bp.blogspot.com/-RA9EtG5lMY0/VPWjOMzqDXI/AAAAAAAAEWA/oCBcLKZ29Xg/s1600/14.png)

**Truco**: ¡No lo ejecutes! Te crearía un módulo 'debug' que no te permitirá hacerle el Build. Tras completarlo, sólo dale a Build and validate click package

  

[![](https://3.bp.blogspot.com/-HUq-RQSug-c/VPWjHKBBEmI/AAAAAAAAEUc/azt_RSZ5p2k/s1600/15.png)](https://3.bp.blogspot.com/-HUq-RQSug-c/VPWjHKBBEmI/AAAAAAAAEUc/azt_RSZ5p2k/s1600/15.png)

Se creará una carpeta en el mismo directorio dónde creaste el proyecto. Sólo queda subirlo :)

  

[![](https://3.bp.blogspot.com/-MZZv92kUTp4/VPWjHVk7DJI/AAAAAAAAEUg/Xzr_SsiKBL4/s1600/16.png)](https://myapps.developer.ubuntu.com/dev/click-apps/)

[Vamos a esta URL y pulsamos en Phone > New application](https://myapps.developer.ubuntu.com/dev/click-apps/)

  

[![](https://1.bp.blogspot.com/-JUqXB23kgqc/VPWjIDmGzQI/AAAAAAAAEUw/ABwWq4kPFkI/s1600/17.png)](https://1.bp.blogspot.com/-JUqXB23kgqc/VPWjIDmGzQI/AAAAAAAAEUw/ABwWq4kPFkI/s1600/17.png)

Escoge el paquete .click que se creó al pulsar en "Build". Rellena los datos que te piden en Inglés, esto es importante, porque si todos lo rellenamos en nuestro idioma, al final nadie entenderá para que vale una aplicación por su título o descripción. Una vez envíado tradúcelo al Español desde el apartado de "Translate" para que aparezca en Español a quien use el móvil en Español ;)

  
  

[![](https://1.bp.blogspot.com/-I7fSMPW6TcQ/VPWjJA0iZrI/AAAAAAAAEU0/CF_ttuz9nUM/s1600/19.png)](https://1.bp.blogspot.com/-I7fSMPW6TcQ/VPWjJA0iZrI/AAAAAAAAEU0/CF_ttuz9nUM/s1600/19.png)

Verás tu nuevo proyecto como "Draft"

  

[![](https://4.bp.blogspot.com/-XgvKV72Vz44/VPWjKSt5ZNI/AAAAAAAAEVA/2l4XMtYZoDE/s1600/20.png)](https://4.bp.blogspot.com/-XgvKV72Vz44/VPWjKSt5ZNI/AAAAAAAAEVA/2l4XMtYZoDE/s1600/20.png)

Pulsa en Submit for review y luego en Publish

Tu webapp aparecerá en el tienda en el acto, aunque sólo la verás en el acto desde un móvil con Ubuntu Phone, en la [tienda](https://appstore.bhdouglass.com/apps) de la web tardará 1 día en aparecer [Link](https://open-store.io/) :)  
  
¿Ha sido fácil, no? Pues [también puedes crear el paquete .click desde una web](https://developer.ubuntu.com/webapp-generator/) :O en sólo 1'. Luego tendrás que subirlo como hemos hecho con el creado con el SDK.  
El SDK tiene la ventaja de poder establecer qué módulos queremos, por ejemplo, el de location es muy útil para que una web pueda situarse geográficamente.  
  
Cualquier duda, deja un comentario.