Assemblage d’applications web

Rechercher

Dernière mise à jour le 1 mai 2021

Assemblage d’applications web sous forme d’applications mobiles natives (CS 5.5)

L’intégration de Dreamweaver à jQuery Mobile et PhoneGap permet de créer et d’assembler des applications web en vue d’un déploiement sur des appareils Android™ et iOS. Dreamweaver utilise les SDK PhoneGap pour créer le pack (fichier .apk pour Android/.xcodeproj pour iPhone/iPad).

Lorsque vous avez assemblé une application mobile avec Dreamweaver, vous pouvez la visualiser dans un émulateur d’appareil ou la déployer sur votre appareil.

Remarque :

l’application mobile que vous assemblez avec Dreamweaver est exclusivement destinée à des fins de débogage. L’application s’exécute dans les émulateurs Android et iOS, ou sur votre appareil mobile personnel si vous effectuez le transfert, mais vous ne pouvez pas envoyer les applications mobiles de débogage aux magasins en ligne Apple et Android. Pour pouvoir envoyer des applications iOS ou Android, vous devez en outre les signer en dehors de Dreamweaver. Pour plus d’informations sur l’envoi d’applications aux magasins en ligne Apple et Android, consultez la documentation d’Android ou le guide d’utilisateur du programme sur le portail Apple iOS Provisioning Portal . (Avant de pouvoir accéder au portail Apple iOS Provisioning Portal, vous devez vous inscrire aux programmes Apple Developer Program [gratuit] et iOS Developer Program [redevance annuelle] .)

Création d’une application web à l’aide de la page de démarrage

Vous pouvez utiliser n’importe quelle page de démarrage pour créer votre application web. Toutefois, si votre application web, déployée en tant qu’application mobile, accède à des fonctionnalités natives sur les appareils mobiles, utilisez la page jQuery Mobile (PhoneGap).

La page de démarrage jQuery Mobile (PhoneGap) contient le fichier phonegap.js en plus des autres fichiers jQuery Mobile. Le fichier phonegap.js contient les API requises pour travailler avec les fonctionnalités mobiles natives telles que GPS, accéléromètre, appareil photo, etc.

Sélectionnez Fichier > Nouveau.
Choisissez Exemple de page > Démarrage mobile > jQuery Mobile (PhoneGap).
Cliquez sur Créer.
Dans le panneau Insertion (Fenêtre > Insérer), sélectionnez jQuery Mobile. Les composants que vous pouvez ajouter à l’application web s’affichent.
En mode Création, placez le curseur à l’endroit où insérer le composant, puis cliquez sur le composant dans le panneau Insertion. Dans la boîte de dialogue qui s’affiche, personnalisez les composants à l’aide des options.

Remarque :

pour modifier le fichier PhoneGap.js, vous devez configurer le cadre applicatif et les paramètres de l’application. Pour plus d’informations, consultez les rubriques sur la création de packs d’applications.

Affichez un aperçu de la page en mode En direct. Certaines des classes CSS ne sont appliquées que dans le mode En direct.

Configuration requise pour l’assemblage d’applications

Avant de pouvoir assembler une application, vérifiez que votre configuration système respecte une des suivantes.

Mac OS - iOS

Mac OS X Snow Leopard version 10.6 .x ou ultérieure
Xcode 3.2 .x avec le SDK iOS (instructions d’installation ci-dessous)

Mac OS - Android

Mac OS X 10.5.8 ou version ultérieure (x86 uniquement)
SDK Android (instructions d’installation ci-dessous)

Windows - iOS

iOS est uniquement disponible pour les utilisateurs d’un ordinateur Apple

Windows - Android

Windows XP (32 bits), Vista (32 bits ou 64 bits), ou Windows 7 (32 bits ou 64 bits)
SDK Android (instructions d’installation ci-dessous)

Création d’un pack d’application (Windows)

Pour plus d’informations sur la création d’une application web, y compris des exemples de fichiers, consultez ce tutoriel sur le Pôle de développement Dreamweaver.

Ouvrez l’application web à convertir en application mobile. Assurez-vous que votre application web est configurée en tant que site sous Dreamweaver et que la taille de votre site est inférieure à 25 Mo.

Remarque :

assurez-vous que l’application contient uniquement des fichiers HTML5, CSS et JavaScript.
Choisissez Site > Applications mobiles > Configurer le cadre applicatif.
Cliquez sur Easy Install pour installer le SDK Android.

Remarque :

si l’installation simplifiée échoue, consultez la note technique 90408.
Choisissez l’endroit où installer les fichiers du SDK, puis cliquez sur Sélectionner. Une fois l’installation terminée, cliquez sur Enregistrer.
Choisissez Site > Applications mobiles > Paramètres de l’application.
Dans la zone Bundle ID, entrez le nom du pack à l’aide des informations de la boîte de dialogue.
Donnez un nom à l’application et indiquez le nom de la personne qui l’a conçue.
Spécifiez éventuellement les éléments suivants :
1. Dans le champ PNG de l’icône de l’application, spécifiez un fichier PNG à utiliser comme icône de l’application. Le cas échéant, Dreamweaver redimensionne l’icône à la taille standard.
2. Définissez un chemin cible pour le pack.
3. Pour télécharger et installer les plus récents composants SDK de Google, cliquez sur Gérer les AVD. Utilisez le SDK Android et AVD Manager pour mettre à jour le SDK Android. Pour plus d’informations sur l’utilisation du gestionnaire, consultez la page http://developer.android.com/sdk/adding-components.html.
  
  Remarque :
  
  lorsque vous cliquez sur Enregistrer, le fichier phonegap.js est copié à la racine du site.
Effectuez l’une des opérations suivantes :
- Si vous déployez directement votre application sur un appareil, choisissez Site > Applications mobiles > Créer. Sélectionnez une plate-forme/un appareil pour la génération.
- Si vous souhaitez voir comment l’application se présente dans un émulateur avant de la générer, choisissez Site > Applications mobiles > Créer et émuler.

Création d’un pack d’application (Mac OS)

Pour obtenir un tutoriel sur la création d’une application web, y compris des exemples de fichiers, consultez cet article du Pôle de développement Dreamweaver.

Ouvrez l’application web à convertir en application mobile. Assurez-vous que votre application web est configurée en tant que site sous Dreamweaver et que la taille de votre site est inférieure à 25 Mo.

Remarque :

assurez-vous que l’application contient uniquement des fichiers HTML5, CSS et JavaScript.
Choisissez Site > Applications mobiles > Configurer le cadre applicatif.
Installez le kit de développement pour iOS ou Android en fonction de vos besoins :
- Cliquez sur le lien Apple iOS Dev Center pour télécharger et installer les SDK xcode et iOS. Par défaut, l’application est installée dans le répertoire <numéro_version>/developer du système d’exploitation.
  
  Connectez-vous au Dev Center à l’aide de votre ID Apple. L’inscription est gratuite. Créez un compte si vous n’êtes pas enregistré.
Remarque :

vous pouvez utiliser le pack SDK téléchargé depuis l’Apple Dev Center à des fins de test. Toutefois, pour charger votre application dans l’Apple Store, vous devez vous inscrire en tant que développeur Apple après avoir payé la redevance requise.
- Cliquez sur Easy Install pour installer le SDK Android.
Remarque :

si l’installation simplifiée échoue, consultez la note technique 90408.
Cliquez sur Enregistrer.
Choisissez Site > Applications mobiles > Paramètres de l’application.
Dans la zone Bundle ID, entrez le nom du pack à l’aide des informations de la boîte de dialogue.
Donnez un nom à l’application et indiquez le nom de la personne qui l’a conçue.
Si vous le souhaitez, procédez comme suit :
- (Android) Dans le champ PNG de l’icône de l’application, spécifiez un fichier PNG à utiliser comme icône de l’application. Dreamweaver redimensionne l’icône à la taille standard si vous ne l’avez pas déjà fait.
- (Mac® OS 10.6.x) Dans le champ PNG de l’écran de démarrage, spécifiez un fichier PNG à utiliser comme icône de l’application iOS. Dreamweaver redimensionne l’icône à la taille standard si vous ne l’avez pas déjà fait.
- (Mac OS 10.6.x) Sélectionnez une version de l’appareil iPhone/iPod touch/iPad pour lequel vous créez le pack.
- Définissez un chemin cible différent pour le pack.
Remarque :

lorsque vous cliquez sur Enregistrer, le fichier phonegap.js est copié à la racine du site.
Effectuez l’une des opérations suivantes :
- Si vous déployez directement votre application sur un appareil, choisissez Site > Applications mobiles > Créer. Sélectionnez une plate-forme/un appareil pour la génération.
- Si vous souhaitez voir comment l’application se présente dans un émulateur avant de la générer, choisissez Site > Applications mobiles > Créer et émuler.