Cordova - Créer une application Android embarquant votre site Web

1 1 1 1 1 1 1 1 1 1 Rating 4.06 (9 Votes)
Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn

Vous avez un site Internet responsive (s'adaptant aux smartphones, tablettes...) et vous souhaitez créer une application Android. C'est assez simple, dans ce tutoriel vous allez apprendre à créer une application Android en moins de 5min et cela ne repose que sur une seule ligne de code "window.open('http://blog.erlem.fr/', '_self', 'location=no');".

Introduction

Si vous avez comme moi un site Web ou blog responsive donc s'adaptant à tout type de support, vous pouvez créer une application Android embarquant votre application Web.

Résultat avec mon blog :

  • Site Internet

166 cordova creer une application android embarquant votre site web 00

  • Application Android sur Smartphone

 166 cordova creer une application android embarquant votre site web 01166 cordova creer une application android embarquant votre site web 02

  • Application Android sur Tablette

166 cordova creer une application android embarquant votre site web 03

Développer l'application

Maintenant que vous avez vu le résultat, commençons à développer. Je suppose que vous avez déjà installé Cordova. Si ce n'est pas le cas, reportez vous au tutoriel Cordova - Construire des applications multiplateformes et à son paragraphe "Installer".

Ensuite nous allons créer l'application, allez dans le répertoire de destination de votre projet. Puis exécutez les lignes de commande ci-dessous :

# Initialiser le projet
cordova create inappbrowser fr.erlem.blog.inappbrowser InAppBrowser

# Aller dans le répertoire
cd inappbrowser

# Ajouter Android
cordova platform add android

# Ajouter le plugin
cordova plugin add org.apache.cordova.inappbrowser

Vous pouvez consulter la documentation du plugin InAppBrowser : http://docs.phonegap.com/en/edge/cordova_inappbrowser_inappbrowser.md.html

Modifier le fichier www/index.html :

vi www/index.html

avec le code ci-dessous (la ligne mis en évidence est la ligne de code principale) :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>Blog.erlem.fr</title>
        <script type="text/javascript">
             window.open('http://blog.erlem.fr/', '_self', 'location=no');
        </script>
    </head>
    <body>
    </body>
</html>

Vous pouvez aussi supprimer les fichiers inutiles :

# Fichier CSS
rm www/css/index.css

# Fichier JS 
rm www/js/index.js

# Fichier IMAGE
rm www/img/logo.png

Tester l'application

Pour tester l'application depuis un émulateur :

# Tester depuis un émulateur Android
cordova emulate android

Depuis votre Smartphone / Tablette :

# Tester depuis un Smarphone / Tablette Android
cordova run android

Conclusion

Comme vous avez pu le constater créer une application Android embarquant votre site ou blog est très facile. Le prochain tutoriel vous guidera dans la publication de votre application sur Google Play.

Autres articles

Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn