Introduction au développement d'applications Smart Watch avec Tizen

Ce que vous allez créer

Devenir un développeur d'applications de surveillance intelligente est une excellente idée, mais que se passe-t-il si vous êtes un développeur HTML? Serez-vous capable de réaliser votre rêve sans passer à une plate-forme complètement différente? Devez-vous abandonner toutes vos compétences en HTML et tout recommencer? Ne t'inquiète pas. Tizen vient à votre secours.

Tizen est un système d'exploitation de la famille Linux, ciblant une gamme d'appareils allant des smartphones aux montres intelligentes, etc. Bien que Tizen soit un projet de la Linux Foundation, il est guidé par la Tizen Association, dont les membres comprennent Samsung, Intel et d’autres sociétés bien connues du secteur des technologies..

Dans ce didacticiel, je vais vous montrer comment installer et configurer Tizen SDK for Wearable et développer une application de surveillance intelligente avec l'EDI. Commençons.

1. Installation et configuration du SDK

Étape 1: Tizen SDK ou Tizen SDK pour Wearable?

Actuellement, deux types de SDK sont disponibles, Tizen SDK et Tizen SDK for Wearable. Étant donné que ce tutoriel concerne le développement d'une application autonome de surveillance intelligente, vous avez besoin du kit de développement logiciel Tizen SDK for Wearable..

Vous pouvez le télécharger sur le site Web de Tizen Developers. Vous devez télécharger un fichier approprié gestionnaire d'installation qui correspond à votre système d'exploitation et à votre version. Si vous préférez une installation hors ligne à une installation en ligne, vous devez télécharger un Image du SDK aussi. Si votre système d'exploitation est Windows 8 ou Windows 8.1, vous pouvez télécharger les fichiers d'installation classés sous Windows 7. Ils fonctionneront parfaitement sous Windows 8 et 8.1..

Étape 2: Exigences

Reportez-vous aux instructions détaillées de Tizen pour en savoir plus sur la configuration matérielle et logicielle requise par votre ordinateur..

Vous pouvez installer le SDK même si votre ordinateur ne répond pas à ces exigences matérielles. Toutefois, si vous le faites, l'émulateur de montre intelligente sera lent, ce qui entraînera des tests d'applications médiocres. Visitez la documentation pour plus de détails. Il explique comment activer Technologie virtuelle (VT) dans votre BIOS et Prévention de l'exécution des données sous Windows.

Étape 3: Installation du SDK

  1. Exécuter le gestionnaire d'installation vous avez téléchargé plus tôt. Ceci est un fichier .exe avec un nom de fichier comme tizen-wearable-sdk-2.2.159_windows64.exe, en fonction du système d'exploitation et de la version..
  2. Cliquez sur Avancée aller à l'écran suivant.
  3. Dans cet écran, cochez la case Image du SDK bouton radio et accédez au fichier zip contenant l’image SDK appropriée. Notez que je suppose que vous préférez une installation hors connexion et que vous avez déjà téléchargé l’image SDK nécessaire sur votre ordinateur de développement..
  4. Sélectionnez le Image du SDK zip et cliquez sur Ouvrir dans la boite de dialogue.
  5. Un Extraire une image SDK le message apparaîtra. Cliquez sur D'accord après avoir terminé l'extraction.
  6. Cliquez sur Suivant et le Accord de licence la fenêtre apparaîtra.
  7. Acceptez la licence et cliquez Suivant.
  8. le fenêtre de configuration apparaîtra ensuite. Je recommande de laisser toutes les cases cochées et de cliquer sur Suivant.
  9. Enfin, lorsque le gestionnaire d'installation demande un emplacement pour l’installation, indiquez votre choix en sélectionnant un chemin et en cliquant sur Installer.
  10. Si vous avez déjà configuré votre BIOS correctement, Gestionnaire d'exécution matérielle accélérée Intel (Intel HAXM) sera également installé automatiquement au cours de ce processus. Si ce n’est pas le cas, quittez le processus d’installation et configurez le BIOS afin qu’il permette à Intel HAXMétre installé.
  11. N'oubliez pas d'activer Prévention de l'exécution des données si votre système d'exploitation est Windows. Reprendre l'installation.

Si vous le souhaitez, vous pouvez installer Intel HAXM séparément. Une fois l'installation terminée, redémarrez votre ordinateur.

Étape 4: Configuration de l'EDI

  1. Accédez au dossier dans lequel vous avez installé le SDK et accédez au répertoire. ide sous-dossier. Exécuter le fichier exécutable nommé IDE.
  2. Au bout de quelques minutes, une fenêtre apparaît, vous demandant un emplacement pour la espace de travail pour enregistrer les applications que vous développez. Spécifiez un chemin de votre choix pour l'emplacement et cliquez sur D'accord. Après la configuration, l'IDE devrait apparaître.

Étape 5: Caractéristiques de l'EDI

Sur le volet gauche de l'IDE, il y a deux fenêtres, Explorateur de projet et Connexion explorer. le Explorateur de projet affiche les projets créés par l'utilisateur. le Connexion explorer répertorie les périphériques connectés actuellement disponibles, les instances d'émulateur ou les périphériques distants.

Étape 6: Création d'une instance d'émulateur

  1. dans le Connexion explorer, clique sur le Gestionnaire d'émulateur icône, le bouton bleu le plus à gauche.
  2. Cliquez sur Oui dans le Contrôle de compte d'utilisateur fenêtre qui apparaît. Cela amènera le Gestionnaire d'émulateur la fenêtre.
  3. Cliquez sur Ajouter un nouveau et donnez un nom à l'instance de l'émulateur.
  4. Quand vous cliquez Confirmer, la nouvelle instance d'émulateur sera créée. Cliquez sur le bouton bleu avec une flèche dans l'icône de l'émulateur pour lancer l'émulateur..

Il faudra un certain temps pour lancer l'émulateur. Vous devriez voir une fenêtre avec un écran de démarrage similaire à la capture d'écran ci-dessous lorsqu'elle est opérationnelle. L’instance de l’émulateur doit apparaître comme une entrée dans Connexion explorer.

Faites glisser votre doigt du haut vers le bas, au centre de l’écran de démarrage, pour accéder à l’écran affichant les applications installées sur le périphérique ou l’émulateur. Puisque vous n'avez encore installé aucune application, seul le Réglages l'icône est affichée.

Vous pouvez revenir à l'écran précédent ou quitter une application en faisant glisser votre doigt du haut au milieu de l'écran..

2. Développer une application de bande dessinée simple

Dans cet exemple, nous allons créer une application simple pour afficher une bande dessinée. Regardons chaque étape à tour de rôle.

Étape 1: Créer un nouveau projet

Créons un nouveau projet dans l'EDI.

  1. Aller à Fichier> Nouveau> Projet Web portable Tizen.
  2. Dans la fenêtre qui apparaît, sélectionnez Basic> Application de base et mettre le Nom du projet à myapp.
  3. Cochez la Utiliser l'emplacement par défaut case à cocher ou naviguez vers un autre emplacement de votre choix, puis cliquez sur terminer.
  4. Votre nouveau projet, myapp, devrait apparaître dans le Explorateur de projet.
  5. Cliquez sur la petite flèche à gauche de myapp élargir la structure du projet.
  6. Vous devriez voir un index.htmldéposer un css sous-dossier, un js sous-dossier et quelques autres fichiers et dossiers.

HTML, CSS et JavaScript constituent la base de la programmation sur la plateforme Tizen. Si vous êtes un assistant HTML, vous n'avez pas besoin d'apprendre un nouveau langage de programmation pour écrire des applications sur la plateforme Tizen. Vous pouvez utiliser vos compétences HTML, CSS et JavaScript existantes.

Étape 2: Ajout de fichiers, d’actifs et de ressources

Nous devons d’abord ajouter deux sous-dossiers au myapp projet, bande dessinée et images. Pour ce faire, cliquez avec le bouton droit sur le myapp dossier de projet dans l'EDI et sélectionnez Nouveau> Dossier. Les sous-dossiers doivent apparaître dans le dossier développé. myappdossier dans l'IDE.

Téléchargez les fichiers sources de ce projet à partir de GitHub et accédez au images sous-dossier, qui contient un certain nombre de fichiers png. Copiez les fichiers png sur le images sous-dossier que vous avez créé il y a un moment.

Vous pouvez coller des fichiers sur le images sous-dossier dans le Explorateur de projet fenêtre en faisant un clic droit sur le sous-dossier et en sélectionnant Coller du menu contextuel.

Ensuite, créez neuf fichiers HTML avec les noms de fichier suivants dans le dossier bande dessinée sous-dossier en faisant un clic droit sur le bande dessinée sous-dossier et en sélectionnant Nouveau> Fichier. Assurez-vous d'inclure le .html extension pour les fichiers.

  • page1.html
  • page2.html
  • page9.html

Vous devriez maintenant avoir neuf fichiers HTML dans le bande dessinée sous-dossier.

Étape 3: Ajout de code

Modifions maintenant le code dans index.html. Ce fichier est le point d’entrée de votre application. Double-cliquez index.html ouvrir le fichier dans l'EDI. Changer le contenu de la </code> tag à <code><title>2e course. Ensuite, changez le contenu de la balise avec les éléments suivants:

 
Page de Couverture
<<>>

Tout ce que nous avons fait, c'est ajouter une image à la page et deux boutons pour naviguer vers les autres pages, car notre bande dessinée aura dix pages. Une fois ces modifications apportées, enregistrez le fichier en sélectionnant Fichier> Enregistrer du menu.

Si vous êtes novice en HTML et CSS, Tuts + propose une vaste collection d'excellents tutoriels qui vous aideront à maîtriser les bases du développement Web..

Ensuite, double-cliquez style.css dans le css sous-dossier et modifier son contenu comme indiqué ci-dessous.

* font-family: Verdana, Lucida Sans, Arial, Helvetica, sans serif;  body margin: 0px auto; couleur de fond: # 0a3003;  img margin: 0; rembourrage: 0; bordure: 0; largeur: 100%; hauteur: auto; bloc de visualisation; float: gauche;  .btn display: inline-block; rembourrage: 15px 4% 15px 4%; marge gauche: 1%; marge droite: 1%; marge supérieure: 5px; marge inférieure: 5px; taille de police: 30px; text-align: center; alignement vertical: milieu; bordure: 0; couleur: #ffffff; couleur de fond: # 4b4237; largeur: 40%; hauteur: 80px; texte-décoration: aucun; 

Nous avons ajouté des styles pour le corps, les images et les menus de navigation. Une fois les modifications apportées, enregistrez le fichier..

De même, ajoutez du code à tous les autres fichiers HTML que vous avez créés. le style.css déposer dans le css Le sous-dossier doit être lié de manière externe à tous ces fichiers HTML. Si vous êtes certain de cette étape, téléchargez les fichiers sources à partir de GitHub et examinez les sources pour plus de précisions..

Étape 4: Test de l'application

Pour tester votre application, sélectionnez le myapp dossier du projet et, dans le menu, choisissez Projet> Projet de construction pour construire le projet. Assurez-vous que l'instance de l'émulateur est opérationnelle.

Faites un clic droit sur le myapp dossier et sélectionnez Exécuter en tant que> Application Web portable Tizen pour exécuter le projet dans l'émulateur. Utilisez les boutons fléchés de l'interface utilisateur pour accéder à la page suivante ou précédente. Faites glisser votre doigt depuis le haut de l'écran pour quitter l'application..

Conclusion

Dans ce didacticiel, nous avons créé une application de bande dessinée simple avec le SDK Tizen pour Wearable et l'avons exécutée sur l'émulateur de montre intelligente fourni avec l'EDI. Le vrai plaisir commence lorsque vous êtes prêt à l’installer et à l’exécuter sur un périphérique physique.

Vous trouverez de nombreuses informations supplémentaires sur les sites Web de Samsung et de Tizen Developers. Qu'est-ce que tu attends?