Exécution des applications chromées sur un appareil mobile à l'aide de Cordova

Les plats clés

• Les applications Chrome peuvent être exécutées sur des appareils Android et iOS à l'aide d'un ensemble d'outils basé sur Apache Cordova, un framework open-source pour emballer les applications mobiles à l'aide de HTML, CSS et JavaScript. Cordova enveloppe ces applications Web à l'aide du shell natif, permettant une distribution sur Google Play, l'App Store Apple et d'autres magasins.
• Le processus de création d'une application Chrome comprend la création d'un dossier de projet, la définition des paramètres requis dans un fichier manifeste.json, la création d'une fenêtre pour l'application lors du lancement et la configuration d'un appel AJAX pour récupérer des données. Ce processus a été démontré avec la création d'une simple application Twitter Chrome.
• Pour exécuter une application Chrome sur Android, Java JDK 7 ou plus, Android SDK 4.4.2 ou plus, et la fourmi Apache doit être installée sur le système. L'outil de ligne de commande CCA est également requis. Après la configuration de l'environnement, un nouveau projet peut être créé de l'application Chrome existante vers le port à Android en utilisant des commandes spécifiques.

Les applications chromées sont populaires parmi les utilisateurs de Chrome. Et pourquoi pas, ils fournissent une méthode de création d'une «application» portable dans l'environnement familier du navigateur Chrome.

Imaginez la puissance des applications chromées disponibles sur votre smartphone. Nous pouvons maintenant exécuter nos applications Chrome préférées sur Android et iOS à l'aide d'un ensemble d'outils basé sur Apache Cordova.

Cordova est un framework open source pour emballer les applications mobiles à l'aide de HTML, CSS et JavaScript. Cordova enveloppe l'application Web HTML, CSS et JavaScript à l'aide du shell natif et permet la distribution sur Google Play, l'App Store d'Apple et d'autres magasins.

Présentation

Dans ce didacticiel, nous allons créer notre propre application Chrome à l'aide de HTML, CSS et JavaScript et le portons sur l'émulateur Android. L'application que nous créerons sera une application simple pour récupérer les derniers tweets basés sur un hashtag Twitter particulier.

Création de l'application chromée

Nous allons commencer par créer notre application Chrome. Une fois que nous aurons créé l'application Chrome et l'avons testée sur le navigateur Chrome, nous le portons sur Android.

Le code source de ce tutoriel est disponible sur github.

Créez un dossier de projet appelé TwitterChromeApp. À l'intérieur du dossier du projet, créez un fichier manifeste appelé manifeste.json qui sera le fichier de configuration de notre application. À l'intérieur de manifeste.json, nous définirons quelques paramètres requis par l'application Chrome. Les applications Chrome nécessitent Manifest_version pour être 2. Nous allons également définir le nom de l'application, sa version et le chemin d'accès à un script d'arrière-plan à exécuter lors du lancement de l'application. Nous allons récupérer les tweets à partir d'une URL de service externe, nous allons donc également spécifier cela à l'intérieur de ce fichier. Voici à quoi devrait ressembler le manifeste.json:

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

Lorsque l'application Chrome sera lancée, nous afficherons une fenêtre où les tweets de Twitter seront affichés. Les applications Chrome ont un événement appelé Onlaunched que nous utilisons pour créer la fenêtre pour notre application sur le lancement de l'application.

À l'intérieur du dossier du projet TwitterChromeApp, créez un autre dossier appelé Scripts et à l'intérieur, créez le script d'arrière-plan appelé main.js. Ajoutez le code suivant à main.js:

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

À l'intérieur de l'événement onlauné, nous créerons une veuve pour notre application Chrome. Ajoutez le code suivant à main.js:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>  <span>// creating window for app code will be here
</span><span>});</span>

Dans le code ci-dessus, nous avons utilisé l'objet d'écran pour obtenir la largeur et la hauteur de l'écran disponible. Sur la base de la largeur réelle de l'écran, nous définissons les limites extérieures de la nouvelle fenêtre Chrome pour s'afficher correctement.

chrome.app.window.create crée une nouvelle fenêtre en utilisant le HTML dans le fichier index.html.

à l'intérieur du dossier du projet TwitterChromeApp Créez un nouveau fichier appelé index.html comme indiqué ci-dessous:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
    <span>var screenWidth = screen.availWidth;
</span>    <span>var screenHeight = screen.availHeight;
</span>    <span>var width = 500;
</span>    <span>var height = 300;
</span>
    chrome<span>.app.window.create('index.html', {
</span>        <span>id: "tweetAppID",
</span>        <span>outerBounds: {
</span>            <span>width: width,
</span>            <span>height: height,
</span>            <span>left: Math.round((screenWidth - width) / 2),
</span>            <span>top: Math.round((screenHeight - height) / 2)
</span>        <span>}
</span>    <span>});
</span><span>});</span>

Essayez maintenant d'installer l'application Chrome dans votre navigateur Chrome. Ouver à outils -> Extensions (éventuellement Plus d'outils ). Activez le mode développeur à partir de la case à cocher en haut à droite, puis cliquez sur Chargez l'extension déballée et sélectionnez le dossier du projet.

Exécutez l'extension via la fenêtre applications ou Extensions et vous devriez voir ce qui précède:

Ensuite, nous ferons créer un appel ajax qui est déclenché lorsque la fenêtre lance qui récupère les tweets à partir d'une URL de service. Nous utiliserons un service organisé sur Heroku. Le service a quelques limites. Il ne récupère que les tweets avec le hashtag perkytweets , cela suffit pour notre exemple.

Nous utiliserons jQuery pour passer notre appel ajax, alors téléchargez-le dans le dossier Scripts et incluez-le dans index.html, par exemple:

<span><span>
</span><span><span><span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title>></title></span>Chrome Tweet App<span><span></span>></span>
</span><span><span><span></span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tweets !!<span><span></span>></span>
</span>
<span><span><span></span>></span>
</span>
<span><span><span></span>></span></span></span></span></span></span></span></span></span>

Créez maintenant un nouveau fichier appelé script.js dans le dossier scripts et créez l'appel ajax comme indiqué:

<span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/jquery-1.11.1.min.js"</span>></span><span><span></span>></span></span>

Inclure Script.js dans index.html:

<span>$(function() {
</span>    $<span>.ajax({
</span>        <span>type: 'GET',
</span>        <span>url: 'http://twittersearchapi.herokuapp.com/search',
</span>        <span>success: function(response) {
</span>            <span>var resObj = JSON.parse(response);
</span>            <span>console.log(resObj);
</span>        <span>},
</span>        <span>error: function(error) {
</span>            <span>console.log(error);
</span>        <span>}
</span>    <span>});
</span><span>});</span>

OUVERS OUVERT Tools -> Extensions (ou Plus d'outils ) et cliquez sur Recharger pour refléter les modifications. Cliquez ensuite sur l'application pour le relancer. Si vous vérifiez la console Chrome (juste la console normale auquel vous accédez dans Chrome), il devrait montrer la réponse de l'URL de service.

Ensuite, nous afficherons les réponses dans index.html. Nous utiliserons Bootstrap pour styliser la page.

Créez un dossier Styles dans votre dossier de projet et téléchargez les fichiers Bootstrap CSS dans le dossier. Incluez le fichier Bootstrap CSS dans index.html.

<span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/script.js"</span>></span><span><span></span>></span></span>

Incluez un élément UL dans index.html pour afficher les tweets. Voici à quoi il devrait ressembler Index.html maintenant:

<span><span><span><link> href<span>="styles/bootstrap.min.css"</span> rel<span>="stylesheet"</span>></span></span></span>

À l'intérieur du Success AJAX, Rappel dans Scripts.js Incluez le code suivant pour ajouter les éléments obtenus à partir de l'appel de service dans l'UL dans index.html.

<span><span>
</span><span><span><span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title>></title></span>Chrome Tweet App<span><span></span>></span>
</span>    <span><span><span><link> href<span>="styles/bootstrap.min.css"</span> rel<span>="stylesheet"</span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/jquery-1.11.1.min.js"</span>></span><span><span></span>></span> <!-- Check this matches your jQuery version and file name -->
</span>    <span><span><span><script> src<span >="scripts/script.js"</script></span>></span><span><span></span>></span>
</span>
<span><span><span></span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tweets !!<span><span></span>></span>
</span>    <span><span><span><ul> id<span>="ulTweets"</span> class<span>="list-group"</span>></ul></span>
</span>
    <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span>
<span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span>

Recharger et relancer l'application et vous devriez pouvoir voir un écran plein de tweets.

Création d'une application Chrome pour Android

Étant donné que nous exécuterons notre application sur Android, assurez-vous d'avoir Java JDK 7 ou plus, Android SDK 4.4.2 ou plus et APACH ANT installé sur votre système.

Nous aurons également besoin de l'outil de ligne de commande CCA. Vous pouvez l'installer en utilisant

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

Des informations détaillées sur la configuration de votre environnement pour le portage des applications Chrome sur Android et iOS peuvent être trouvées dans les documents officiels.

Une fois que la configuration de notre environnement est terminée, nous créerons un nouveau projet de notre TwitterChromeApp existant à Port vers Android. Exécutez la commande suivante pour créer le projet:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>  <span>// creating window for app code will be here
</span><span>});</span>

Accédez à TwitterAppForAndroid et exécutez la commande suivante pour exécuter le projet dans l'émulateur Android:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
    <span>var screenWidth = screen.availWidth;
</span>    <span>var screenHeight = screen.availHeight;
</span>    <span>var width = 500;
</span>    <span>var height = 300;
</span>
    chrome<span>.app.window.create('index.html', {
</span>        <span>id: "tweetAppID",
</span>        <span>outerBounds: {
</span>            <span>width: width,
</span>            <span>height: height,
</span>            <span>left: Math.round((screenWidth - width) / 2),
</span>            <span>top: Math.round((screenHeight - height) / 2)
</span>        <span>}
</span>    <span>});
</span><span>});</span>

Une fois que l'émulateur sera lancé avec succès, vous devriez voir l'application fonctionner à l'intérieur de l'émulateur.

Conclusion

Dans ce tutoriel, nous avons vu comment créer une application chromée simple et le porter sur la plate-forme Android. De plus amples informations sur l'exécution des applications Chrome sur les appareils mobiles à l'aide d'Apache Cordova peuvent être trouvées dans les documents officiels.

Que pensez-vous de cette option d'application Chrome pour créer une application mobile? Offre-t-il des avantages par rapport à l'utilisation d'une application Web standard HTML, CSS et JavaScript à l'intérieur de Cordova?

Questions fréquemment posées (FAQ) sur l'exécution des applications chromées sur l'appareil mobile à l'aide de Cordova

Comment puis-je installer Cordova sur mon système?

Pour installer Cordova, vous devez faire installer Node.js sur votre système. Une fois Node.js installé, vous pouvez installer Cordova à l'aide de NPM (Node Package Manager) en exécutant la commande NPM Install -g Cordova dans votre borne ou votre invite de commande. L'indicateur -g est utilisé pour installer Cordova globalement sur votre système.

Quelles sont les conditions préalables pour exécuter des applications chromées sur un appareil mobile à l'aide de Cordova?

Avant de pouvoir exécuter des applications chromées sur un mobile Appareil utilisant Cordova, vous devez avoir l'installé suivant sur votre système: Node.js, Cordova, Chrome Apps for Mobile Toolchain et Android SDK ou iOS SDK Selon la plate-forme que vous ciblez.

Comment puis-je convertir mon application Chrome en un projet Cordova?

Pour convertir votre application Chrome en un projet Cordova, vous devez utiliser la commande CCA suivie par la commande Create et le nom de votre projet. Par exemple, CCA crée MyProject. Cela créera un nouveau projet Cordova dans un répertoire nommé MyProject.

Comment puis-je ajouter des plates-formes à mon projet Cordova?

Pour ajouter des plates-formes à votre projet Cordova, vous devez utiliser la plate-forme Cordova Ajouter une commande suivie du nom de la plate-forme. Par exemple, la plate-forme Cordova Ajouter Android ajoutera la plate-forme Android à votre projet.

Comment puis-je construire mon projet Cordova?

Pour créer votre projet Cordova, vous devez utiliser la commande Cordova Build suivi du nom de la plate-forme. Par exemple, Cordova Build Android construira votre projet pour la plate-forme Android.

Comment puis-je exécuter mon projet Cordova sur un appareil?

Pour exécuter votre projet Cordova sur un appareil, vous devez utiliser la commande Cordova Run suivie du nom de la plate-forme. Par exemple, Cordova Exécute Android exécutera votre projet sur un appareil Android.

Comment puis-je déboguer mon projet Cordova?

Pour déboguer votre projet Cordova, vous pouvez utiliser Chrome Devtools. Pour ce faire, vous devez naviguer vers Chrome: // Inspectez dans votre navigateur Chrome et cliquez sur le lien Inspecter sous votre appareil.

Quelles sont les limites de l'exécution des applications Chrome sur un appareil mobile à l'aide de Cordova?

Bien que Cordova vous permette d'exécuter des applications Chrome sur un appareil mobile, il y a certaines limites. Par exemple, toutes les API chromées ne sont pas prises en charge, et il peut y avoir des différences de comportement entre l'application Chrome et l'application Cordova en raison de différences dans les plates-formes sous-jacentes.

Puis-je utiliser des plugins Cordova dans mon application Chrome?

Oui, vous pouvez utiliser les plugins Cordova dans votre application Chrome. Pour ce faire, vous devez ajouter le plugin à votre projet à l'aide de la commande Cordova Plugin Ajouter suivi du nom du plugin.

Comment puis-je mettre à jour mon projet Cordova?

Pour mettre à jour votre Cordova Project, vous pouvez utiliser la commande de mise à jour de la plate-forme Cordova suivie du nom de la plate-forme. Par exemple, la mise à jour de la plate-forme Cordova Android mettra à jour la plate-forme Android dans votre projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!