Full Circle Magazine FR

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
**In the previous chapter we have seen an introduction to the programming course with Ubuntu Touch. The next step is to prepare the development environment. When programming in any language, an SDK (Software Development Kit) is often used. The SDK consists of a set of tools that processes the source code and generates the executable for the platform that is being used. Ubuntu Touch is not an exception and also has its own SDK.

Applications in GNU / Linux are in repositories. The repository contains a set of applications that can be easily installed. On some occasions, there are applications that are not in the official repositories. For these cases, it is possible to use personal repositories, also known as PPA repositories. The Ubuntu Touch SDK is in a PPA repository that will have to be added to the system in order to be installed. With this limitation, it can be programmed only on distributions that can work with PPA repositories, that is to say, all the distributions that use Debian as a base. If the distribution uses RPM packages, as in the case of OpenSuse or Fedora, alternative measures will have to be taken.**

Dans le précédent chapitre, nous avons vu une présentation du cours de programmation pour Ubuntu Touch. L'étape suivante est de préparer l'environnement de développement. Quand on programme, quel que soit le langage, un SDK (Software Development Kit - Kit de développement de logiciel) est souvent utilisé. Le SDK consiste en un jeu d'outils qui traite le code source et génère un exécutable pour la plateforme qui sera utilisée. Ubuntu Touch n'est pas un exception et a aussi son propre SDK.

Dans GNU/Linux, les applications sont dans des dépôts. Le dépôt contient un ensemble d'applications qui peuvent être facilement installées. Dans certains cas, des applications ne sont pas dans les dépôts officiels. Pour ces cas, il est possible d'utiliser des dépôts personnels, connus aussi comme dépôts PPA. Le SDK d'Ubuntu Touch est dans un dépôt PPA qui doit être ajouté au système de façon à pouvoir l'installer. Avec cette limitation : il ne peut être programmé que sur les distributions qui peuvent fonctionner avec des dépôts PPA, c'est-à-dire, toutes les distributions qui ont Debian comme base. Si une distribution utilise des paquets RPM, comme OpenSuse ou Fedora, des solutions de remplacement devront être prises.

**There are two other ways to do this: create a Live USB with Ubuntu, or use a virtual machine that has Ubuntu installed. The first one is simpler and works reasonably well if the USB memory is fast. The second way is more comfortable since it does not depend on a USB stick, but requires a more powerful computer to run the virtualized operating system. I will not go into how to create a Live USB or virtual machine. Anyone in one of these two cases can ask in the mailing list and I will guide him/her with the most important steps.

My development environment is:
• Ubuntu 16.04 LTS.
• Aquaris E4.5 with OTA-14.
• Aquaris E5 HD with OTA-14.
• Aquaris M10 FHD with OTA-14.

It is possible that in other distributions there are some intermediate steps that need to be done to configure the SDK. If that is the case you can indicate it.**

Il y a deux autres façons de le faire : créer un Live USB avec Ubuntu ou utiliser une machine virtuelle sur laquelle Ubuntu est installé. La première est plus simple et fonctionne relativement bien si la mémoire de la clé USB est rapide. La seconde est plus confortable, car elle ne dépend pas de la clé USB, mais réclame un ordinateur plus puissant pour faire tourner le système d'exploitation virtualisé. Je ne rentrerai pas dans la création d'une Live USB ou d'une machine virtuelle. Dans ces deux cas, écrivez-moi par mail et je vous guiderai dans les étapes les plus importantes.

Mon environnement de développement est ainsi :
• Ubuntu 16.04 LTS.
• Aquaris E4.5 avec OTA-14.
• Aquaris E5 HD avec OTA-14.
• Aquaris M10 FHD avec OTA-14.

Il est possible que, dans d'autres distributions, il y ait quelques étapes intermédiaires à faire pour configurer le SDK. Si c'est le cas, vous pouvez nous les indiquer.

**Installing the Ubuntu Touch SDK

Installing the SDK is very simple and should not take more than a couple of minutes. It is advisable to have the system updated before you start. In the case of Ubuntu, this can be done with the commands:

sudo apt-get update && sudo apt-get upgrade && sudo apt-get dist-upgrade

You use sudo because package installation requires administrator permissions. The first command updates the list of repositories. If there is no error, the second command is executed, which is responsible for updating the applications. Finally, the third command updates some operating system packages that are not updated by default.**

Installer le SDK d'Ubuntu Touch

L'installation du SDK est très simple et ne devrait prendre que quelques minutes. Il est conseillé d'avoir mis à jour le système avant de commencer. Dans le cas d'Ubuntu, ceci peut être fait avec les commandes :

sudo apt-get update && sudo apt-get upgrade && sudo apt-get dist-upgrade

Vous utilisez sudo parce que l'installation des paquets requiert des permissions d'administrateur. La première commande met à jour la liste des dépôts. S'il n'y a pas d'erreur, la seconde commande, qui est responsable de la mise à jour des applications, est exécutée. Enfin, la troisième commande met à jour certains paquets du système d'exploitation qui ne sont pas mis à jour par défaut.

**Add the Ubuntu Touch SDK repository with the command:

sudo add-apt-repository ppa:ubuntu-sdk-team/ppa

The repository information will be displayed. You can continue by pressing the ENTER key.

All repositories have a signature that assures us that the installed packages come from the repository. This signature is added to the system and will be used when repository packages are installed.

After adding a repository, it is necessary to update the information of the packages that it contains. You can do this with the command:

sudo apt-get update

Everything is ready. The last step of this section is to install the Ubuntu Touch SDK.

sudo apt-get install ubuntu-sdk

Although only one package (ubuntu-sdk) is put in the command, all the dependencies of that package are automatically installed, so it works without problems. The installation may take a while depending on the Internet connection. It's a good time to let the computer work and have a good coffee.**

Ajoutez le dépôt du SDK d'Ubuntu Touch avec la commande :

sudo add-apt-repository ppa:ubuntu-sdk-team/ppa

L'information sur le dépôt sera affichée. Vous pouvez continuer en appuyant sur la touche Entrée.

Tous les dépôts ont une signature qui nous assure que les paquets installés viennent de ce dépôt. La signature est ajoutée au système et sera utilisée quand les paquets du dépôt seront installés.

Après avoir ajouté un dépôt, il est nécessaire de mettre à jour l'information sur les paquets qu'il contient. Vous pouvez le faire avec la commande :

sudo apt-get update

Tout est prêt. La dernière étape de cette section est l'installation du SDK d'Ubuntu Touch.

sudo apt-get install ubuntu-sdk

Bien qu'un seul paquet ait été mis dans la commande, toutes les dépendances de ce paquet sont automatiquement installées, pour fonctionner sans problème. L'installation peut prendre un peu de temps suivant la connexion Internet. C'est le moment pour laisser travailler l'ordinateur et prendre un bon café.

**Setting up the Environment

The Ubuntu Touch SDK includes tools to generate applications, and an editor to make programming easier. The tools take the source code of the application and process it. If the target is a computer there is no problem. However, if the target is a device that uses Ubuntu Touch, we are in a different scenario. These devices use the ARM architecture, which is different from the one used by the PC. To generate the executable, you have to use a cross-compiler that runs in a container (LXD in the latest versions of the SDK).

To work with LXD, you have to add the user (that is used on the computer) to the group lxd. 

sudo usermod -a -G lxd user

After writing the command, you have to close the user's session and log in again. You can start working with this small modification. To start, we need to run the ubuntu-sdk-ide application; it can be launched from the desktop start menu, or by pressing ALT + F2 and typing its name. The first time it’s launched, a screen appears asking which lxd has to be configured. Just press ‘Yes’ to generate the default configuration.

If the user is not in the lxd group, the following screen error will appar. In that case, it is sufficient to log out and log in again. When launching, the IDE of Ubuntu Touch should give you no errors.**

Paramétrer l'environnement

Le SDK d'Ubuntu Touch contient des outils pour générer des applications et un éditeur pour faciliter la programmation. Les outils prennent le code source de l'application et le traitent. Si la cible est un ordinateur, il n'y a pas de problème. Cependant, si la cible est un dispositif qui utilise Ubuntu Touch, nous sommes dans un scénario différent. Ces dispositifs utilisent une architecture ARM, qui est différente de celle utilisée sur un PC. Pour générer un exécutable, vous devez utiliser un compilateur croisé (cross-compiler) qui tourne dans un conteneur (LXD dans la dernière version du SDK).

Pour travailler avec LXD, vous devez ajouter l'utilisateur (qui est utilisé sur l'ordinateur) au groupe lxd.

sudo usermod -a -G lxd user

Après avoir exécuté la commande, vous devez fermer la session et vous reconnecter. Avec cette petite modification, vous pouvez commencer à travailler. Pour débuter, nous devons faire tourner l'application ubuntu-sdk-ide ; elle peut être lancée, soit depuis le menu de démarrage du bureau, soit en appuyant sur Alt + F2 et en tapant son nom. À son premier lancement, un écran apparaît demandant quel lxd doit être configuré. Appuyez simplement sur « Oui » (Yes) pour générer la configuration par défaut.

Si l'utilisateur n'est pas dans le groupe lxd, l'écran d'erreur suivant apparaîtra. Dans ce cas, il suffit de se déconnecter et de se reconnecter. Au lancement, l'IDE d'Ubuntu Touch ne devrait vous donner aucune erreur.

**Configuration Wizard

The first screen (shown below) of the wizard is an introduction to Qt Creator. To continue, click the ‘Next’ button. 

Although the course is focused on mobile devices such as phones or tablets, you may also apply the knowledge learned to create desktop applications. Each of these devices has an associated ki – a set of tools which is based on the code that is programmed and generates the necessary files for each device (screen shown bottom).

Click the ‘Create new Kit button’ (shown above). The first option must be selected.

In the list (below), there are several kits to download. Ubuntu Touch is currently based on Vivid so you have to select that option.

Finally (bottom left), write the name of the kit.

When you complete the last step, you return to the initial screen of the kits. Press the ‘Create new Kit’ button again and repeat the process by selecting Ubuntu Device.**

Assistant de configuration

Le premier écran de l'assistant (montré ci-dessous) est une introduction à Qt Creator. Pour continuer, cliquez sur le bouton « Suivant ».

Bien que les cours soient centrés sur les dispositifs mobiles, tels que téléphones ou tablettes, vous pouvez aussi appliquer le savoir appris pour créer des applications de PC de bureau. Chacun de ces dispositifs est associé à un kit, un ensemble d'outils qui est basé sur le code qui est programmé et qui génère les fichiers nécessaires pour chaque dispositif (écran présenté en bas).

Cliquez sur le bouton « Créer un nouveau kit » (montré ci-dessus). La première option doit être sélectionnée.

Dans la liste (ci-dessous), il y a plusieurs kits à télécharger. Ubuntu Touch est actuellement basé sur Vivid ; aussi, vous devez sélectionner cette option.

Enfin, (en bas à gauche), écrivez le nom du kit.

Quand vous avez terminé la dernière étape, vous retournez à l'écran initial des kits. Appuyez à nouveau sur le bouton « Créer un nouveau kit » et répétez le traitement en sélectionnant Ubuntu Device.

**With this kit, there are more options to choose from. Phones or tablets that use Ubuntu Touch work with the armhf architecture. In the list, you have to select a kit that has that architecture. The version of Ubuntu Touch is Vivid, as in the previous case. Finally, you have to choose 686 or x64 depending on whether the computer uses 32 or 64 bits.

After pressing the ‘Next’ button, you must write the Kit name.

At this time it is not necessary to create additional kits (below).

In the last step of the wizard (bottom), you can configure the physical devices and the emulator. There are some problems with the emulator. For now, I recommend not to configure the emulator. Applications can be tested natively on the computer. For this reason, you must uncheck the ‘Create emulator’ box, and click on the ‘Finish’ button.**

Avec ce kit, il y a plus d'options au choix. Les téléphones et tablettes qui utilisent Ubuntu Touch fonctionnent avec l'architecture armhf. Dans la liste, vous devez choisir un kit qui a cette architecture. La version d'Ubuntu Touch est Vivid, comme dans le cas précédent. Enfin, vous devez choisir 686 ou x64 suivant que l'ordinateur est en 32- ou 64-bit.

Après avoir appuyé sur le bouton « Suivant », vous devez écrire le nom du kit.

Pour l'instant, il n'est pas nécessaire de créer des kits supplémentaires (ci-dessous).

À la dernière étape de l'assistant (ci-dessous), vous pouvez configurer les dispositifs physiques et l'émulateur. Il y a quelques problèmes avec l'émulateur. Pour le moment, je ne vous recommande pas de configurer l'émulateur. Les applications peuvent être testées nativement sur l'ordinateur. Pour cette raison, vous devez décocher le champ « Créer un émulateur » et cliquer sur le bouton « Fin ».

**Hello World

In order to keep the good traditions, the first step is to program a minimal application that allows us to check the correct operation of the SDK. The application will run on the computer natively and on a tablet. As you will see, it is quite simple to do it. Kits are updated frequently. If the screen above appears, all the kits must be marked and updated.**

Hello World

Pour garder les bonnes traditions, la première étape est de programmer une application minuscule qui nous permet de vérifier le fonctionnement correct du SDK. L'application tournera nativement sur l'ordinateur et sur une tablette. Comme vous le verrez, c'est assez simple à faire. Les kits sont mis à jour fréquemment. Si l'écran ci-dessus apparaît, tous les kits doivent être cochés et mis à jour.

**Project Creation

Click on the File menu, New file or project. A window (below) will appear with the types of projects that can be used. The user interface is made with QML which is a scripting language oriented to the creation of graphical interfaces. The logic of the application can be done with several languages. JavaScript will be used for now. Select the first option and then click on the ‘Choose’ button.

You must choose the folder in which the projects will be saved. The project name cannot contain spaces.

Applications need basic information: user and maintainer. All other parameters should be left at their defaults. It is important to respect the structure in the Maintainer field so that it allows us to continue.

You have to select the kits that you want to use. By default, the two will be selected in order to run the application on the computer and on the mobile device.

The last screen contains a summary of the wizard steps. Click on the ‘Finish’ button.

The project (shown below) will open automatically.

Running the Application on Your Computer

To run the application you have to press the ‘Play’ button in the lower left part of Qt Creator.**

Création d'un projet

Cliquez sur le menu Fichiers > Nouveau fichier ou projet. Une fenêtre (voir ci-dessous) apparaîtra avec les types de projets qui peuvent être utilisés. L'interface utilisateur est fait en QML qui est un langage de script orienté vers la création d'interfaces graphiques. La déroulé logique de l'application peut être fait dans plusieurs langages. Pour le moment, nous utiliserons Javascript. Sélectionnez la première option et cliquez sur le bouton « Choisir ».

Vous devez choisir le dossier dans lequel les projets seront sauvegardés. Le nom du projet ne peut pas contenir d'espaces.

Les applications ont besoin d'informations de base : l'utilisateur et le mainteneur. Tous les autres paramètres doivent être conservés avec leurs valeurs par défaut. Il est important de respecter la structure dans le champ Mainteneur, car il vous permet de continuer.

Vous devez sélectionner les kits que vous voulez utiliser. Par défaut, les deux seront sélectionnés de façon à faire tourner l'application sur l'ordinateur et sur le dispositif mobile.

Le dernier écran contient un résumé des étapes de l'assistant. Cliquez sur le bouton « Terminer ».

Le projet (montré ci-dessous) s'ouvre automatiquement.

Faire tourner l'application sur votre ordinateur

Pour faire tourner l'application sur votre ordinateur, vous devez appuyer sur le bouton « Démarrer » dans la partie en bas à gauche de Qt Creator.

**Running the Application on a Real Device

Before running the application, it is necessary to configure the device. For testing, I have used an Aquaris M10 FHD tablet with the OTA-14 —although the procedure is the same on the other devices. Leave ubuntu-sdk-ide open and connect the device via USB to the computer. To activate the development options, access the System Settings.

Click on About.

Select Developer Mode. This mode is disabled by default because it allows remote control of the device if it is connected by USB to the computer. Check the box.

After a few seconds, a notification must appear with the connection request of the computer.

You have now completed all the steps on the side of the tablet. In the IDE, you must select the tablet as the compilation target. To do this, click on the button above the Play, and select the device we just configured as the destination.**

Faire tourner l'application sur un vrai dispositif

Avant de lancer l'application, il est nécessaire de configurer le dispositif. Pour les tests, j'ai utilisé l'Aquaris M10 FHD avec l'OTA-14, bien que la procédure soit la même sur les autres dispositifs. Gardez ubuntu-sdk-ide ouvert et connectez le dispositif à votre ordinateur via USB. Pour activer les options de développement, accédez aux Paramètres système.

Cliquez sur À propos.

Sélectionnez le mode Développeur. Ce mode est désactivé par défaut, car il permet un contrôle à distance du dispositif s'il est connecté par USB à l'ordinateur. Cochez la case.

Après quelques secondes, une notification devrait apparaître avec la demande de connexion de l'ordinateur.

Vous avez maintenant terminé toutes les étapes du côté de la tablette. Dans l'IDE, vous devez sélectionner la tablette comme cible de la compilation. Pour ce faire, cliquez sur le bouton au-dessus de Démarrer et sélectionnez comme destination le dispositif que vous venez de configurer.

**A few seconds after pressing the Play button, the application will appear on the device.

The error shown in the above image may appear.

In the sidebar of Qt Creator, you have to click on the ‘Devices’ button. Then click on the device and Kits click on the ‘Remove’ button. Then click on the ‘Create’ button.

Now you have to associate the Kit back to the Project. Click on ‘Projects’ (on the sidebar), ‘Add Kit,’ and select the Kit that appears in the dropdown.

Wait a couple of seconds and select the device as the compilation target. It is important that you try the compilation in both cases. In the next chapter, I will start with the source code and assume that everything works correctly on both the computer and the test device. If you have any problems you can ask on the mailing list.**

Quelques secondes après avoir appuyé sur le bouton Démarrer, l'application apparaîtra sur le dispositif.

L'erreur présentée sur l'image ci-dessus peut apparaître.

Dans la barre latérale de Qt Creator, vous devez cliquer sur le boutons « Dispositifs ». Puis, cliquez sur l'appareil et Kits, et cliquez sur le bouton « Supprimer ». Puis, cliquez sur le bouton « Créer ».

Maintenant, vous devez associer à nouveau le Kit au Projet. Cliquez sur « Projets » (dans la barre latérale), « Ajouter un kit » et sélectionnez le Kit qui apparaît dans la liste déroulante.

Attendez une poignée de secondes et sélectionnez le dispositif comme cible de la compilation. Il est important que vous essayiez la compilation dans les deux cas. Dans le prochain chapitre, je commencerai par le code source en supposant que tout fonctionne correctement, à la fois sur l'ordinateur et sur le dispositif de test. Si vous avez le moindre problème, vous pouvez m'interroger par sur la mailing list.


**Resources
Mailing List: https://launchpad.net/~ubuntu-touch-programming-course

People who have collaborated
Larrea Mikel: revision of the chapter in Spanish.
Cesar Herrera: revision of the English translation.
Joan CiberSheep: revision of the English translation.**

Ressources
Mailing list : https://launchpad.net/~ubuntu-touch-programming-course

Personnes qui ont collaboré :
Larrea Mikel : révision du chapitre en espagnol.
Cesar Herrera : révision de la traduction en anglais.
Joan CiberSheep : révision de la traduction en anglais.