As promised last month, I’ll be covering some more ubuntu phone programming. While preparing for this article, I have looked at most of the tutorials from Ubuntu itself. They are well written, and definitely a good spot to start. I will focus on more general approaches - what app type to use for what purpose, as well as a small example of a web app.
Comme promis le mois dernier, je vais approfondir le sujet de la programmation des téléphones sous Ubuntu. Pour préparer cet article, j'ai consulté la plupart des tutoriels d'Ubuntu même. Ils sont bien écrits et constituent un très bon point de départ. Je vais me concentrer sur une approche plus générale : quel type d'application créer selon l'usage envisagé et un petit exemple d'application Web.
App Types • HTML5 app - this is a full-fledged HTML app. If you’re a web developer and want to create a specific HTML5 app for Ubuntu, you’ll want this. • Webapp - this is the app type you use to open an existing page, in order to run it like an app. • QML - A native app for Ubuntu (written in QML, which is the Qt Meta Language). • Scopes - These can be written in various languages, and combined with APIs.
Les types d'applications
• Application HTML5 : c'est une application HTML à part entière. Si vous êtes développeur Web et si vous voulez créer une application spécifique à Ubuntu en HTML5, c'est ce que vous utiliserez. • Webapp : c'est le type d'application que vous utiliserez pour ouvrir une page existante, de manière à l'exécuter comme une application. • QML : pour une application native sur Ubuntu (écrite en QML, qui est le méta-langage de Qt). • Scopes : ils peuvent être écrits en différents langages et combinés avec des API.
Webapp As an example, I’ll briefly cover how to create a webapp for opening the Full Circle Magazine site. • Create a new Webapp project • Open <appname>.desktop • Edit the exec line to read:Exec=webapp-container –enable-back-forward –store-session-cookies –webappUrlPatterns=https?://fullcirclemagazine.org/* http://fullcirclemagazine.org • Replace <appname>.png with a 128px x 128px icon (eg. the FCM circular logo).
Webapp
En guise d'exemple, je vais rapidement expliquer comment créer une webapp pour accéder au site du magazine Full Circle : • créez un nouveau projet Webapp ; • ouvrez <appname>.desktop ; • éditez la ligne exec ainsi : exec=webapp-container –enable-back-forward –store-session-cookies –webappUrlPatterns=https?://fullcirclemagazine.org/* http://fullcirclemagazine.org • remplacez <appname>.png par une icône de 128 pixels sur 128 pixels (par exemple le logo FCM).
The important step is the third one. Here you indicate the allowed URL patterns - in this case we allow any https or http (https?://) connection to fullcirclemagazine.org, and its subpages (/*). This way, the site can be browsed. It’s possible to supply multiple patterns - for example for subdomains. As you can see - creating a basic webapp is extremely simple. If you want to connect an account, you can either log in via the web interface (as normal) by setting the login page to the default URL (last URL in the Exec line). If you want to use the OnlineAccounts API, you’ll apparently need to use a fully-fledged HTML5 app. If the site you’re connecting to also offers an API, using an HTML5 app (and asking for credentials in settings), you should be able to connect via API as well. See the examples on the Ubuntu page for more details.
L'étape importante est la troisième. Ici, vous indiquez un modèle pour les URL autorisées. Dans notre cas, nous autorisons les connexions http et https (https?://) vers fullcirclemagazine.org et son arborescence interne (/*). Ainsi, le site peut être exploré. Il est possible de spécifier plusieurs modèles d'URL, par exemple pour des sous-domaines.
Comme vous pouvez le voir, créer une webapp basique est extrêmement simple. Si vous voulez vous connecter à un compte, vous pouvez le faire via l'interface du site (comme d'habitude) en définissant la page de connexion comme URL par défaut (la dernière URL de la ligne exec). Si vous voulez utiliser l'API OnlineAccounts, vous devrez, semble-t-il, utiliser une application HTML5 à part entière (implémentée pour demander les informations de connexion) ; vous devriez aussi pouvoir vous connecter avec une API. Voyez les exemples sur la page d'Ubuntu pour plus de détails.
QML App I was planning on also including a QML app example here, but have faced various issues with translations and the make files required for compiling a QML app. Instead, I’m trying to fix the issues, so that I can hopefully cover QML apps in my next article.
Applications QML
J'avais prévu d'inclure ici un exemple d'application QML, mais j'ai rencontré de nombreuses difficultés de traduction et des fichiers make requis pour compiler une application QML. J'essaye de résoudre ces problèmes ; si tout va bien, je traiterai alors des applications QML dans mon prochain article.
Questions for readers Are there any Ubuntu phone apps you can’t live without? Or maybe there’s a particular style of app you’re curious about. Send me an email, and I will see if I can’t include an answer in my next article. In general - is there something you’d like to see more of from me in 2016? All answers can be emailed to: lswest34+fcm@gmail.com. I hope everyone’s had a good year, and thank you for reading C&C!
Questions aux lecteurs
Y a-t-il des applications pour téléphones Ubuntu sans lesquelles vous ne pourriez pas vivre ? Ou y a-t-il une catégorie d'applications qui éveille plus particulièrement votre curiosité ? Envoyez-moi un courriel et j'essaierai de vous répondre dans mon prochain article.
De manière générale, y a-t-il un sujet que vous souhaiteriez voir développé en 2016 ? Toutes vos réponses peuvent être envoyées à lswest34+fcm@gmail.com.
Je vous souhaite à tous une bonne année et je vous remercie d'être un lecteur assidu de C&C !
Further Reading HTML5 apps: https://developer.ubuntu.com/en/apps/html-5/tutorials/ Get started: https://developer.ubuntu.com/en/apps/qml/tutorials/building-your-first-qml-app/ Webapp: https://developer.ubuntu.com/en/web/tutorials/ QML Apps: https://developer.ubuntu.com/en/apps/qml/tutorials/ Scopes: https://developer.ubuntu.com/en/scopes/tutorials/
Lectures complémentaires
Applications HTML5 : https://developer.ubuntu.com/en/apps/html-5/tutorials/ Premiers pas : https://developer.ubuntu.com/en/apps/qml/tutorials/building-your-first-qml-app/ Webapp : https://developer.ubuntu.com/en/web/tutorials/ Applications QML : https://developer.ubuntu.com/en/apps/qml/tutorials/ Scopes : https://developer.ubuntu.com/en/scopes/tutorials/