Je vous souhaite la bienvenue à mon premier post sur DZone. Celui-ci sera sur la création d'une application Android à partir d'un site Web statique. Ne perdons pas de temps et commençons à coder!
Tout d'abord, vous devez créer un nouveau projet Android. Je ne veux pas aller trop loin dans cette partie si vous avez besoin d'aide sur la façon de le faire s'il vous plaît chercher le site de support de Google concernant les projets android. Après le projet est fait, il est temps de changer quelques choses. Parce que nous travaillons sur un jeu appelé Daggers & Sorcery, je vais l'utiliser comme un exemple dans cet article. Tout d'abord, je veux en faire une application plein écran. Après cela, je souhaite ajouter une nouvelle WebView à notre activité principale.
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
Cette WebView contient tout le contenu de l'application.
Après avoir ajouté le WebView, j'ai créé un dossier d'actifs et copié les éléments du jeu. Heureusement, notre jeu a beaucoup d'actifs statiques et de cette façon, l'application sera en mesure de charger ces actifs à partir du dossier actifs au lieu du web afin que la charge du site sera plus rapide et nous utiliserons moins de bande passante trop. Nous avons eu la chance de séparer complètement les actifs statiques du jeu du backend afin que nous puissions facilement les réutiliser pour l'application mobile. Je vais écrire un article complet sur cette configuration plus tard.
Après la mise en place des actifs, nous pouvons enfin passer au codage. J'ai créé des méthodes d'arbre dans la méthode onCreate de ma principale activité.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setupGlobalCookieStorage();
setupContentContainer();
setupWebView();
}
La première méthode setupGlobalCookieStorage est responsable de la configuration du stockage des cookies pour notre application. Cela est nécessaire car nous aurons un formulaire de connexion dans l'application et sans gestion des cookies appropriée, il ne fonctionnerait pas.
private void setupGlobalCookieStorage() {
CookieManager.setAcceptFileSchemeCookies(true);
CookieManager.getInstance().setAcceptCookie(true);
}
SetAcceptFileSchemeCookies n'est requis que lorsque vous envisagez de charger vos fichiers statiques à partir d'un fichier. Il est désactivé par défaut car il présente un risque pour la sécurité. File: Les URL peuvent référencer le code JavaScript et ce code JavaScript peut définir des cookies, ce que d'autre fichier: code JS (même si à partir d'un fichier différent) peut accéder, en raison de leur être considérés comme la "même origine". Toutefois, cela ne sera pas un problème tant que vous ne synchronisez pas les cookies ou que quelqu'un ne manipule pas votre application.
La méthode suivante setupContentContainer est responsable de la configuration de WebView comme contenu principal de notre application et de la transformer en application plein écran.
private void setupContentContainer() {
setContentView(R.layout.activity_web_view);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
Le setupWebView configurera le WebView, notre composant principal.
private void setupWebView() {
final WebView webView = locateIndexWebView();
setupWebViewCookieStorage(webView);
setupWebViewSettings(webView);
setupWebViewContent(webView);
}
private WebView locateIndexWebView() {
return (WebView) findViewById(R.id.webview);
}
private void setupWebViewCookieStorage(final WebView webView) {
if (Build.VERSION.SDK_INT >= 21) {
CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
}
}
private void setupWebViewSettings(final WebView webView) {
final WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setSupportZoom(false);
}
private void setupWebViewContent(final WebView webView) {
webView.loadDataWithBaseURL("file:///android_asset/", getIndexHtml(), "text/html", "utf-8", "about:blank");
}
private String getIndexHtml() {
final InputStream is = getResources().openRawResource(R.raw.index);
try {
return IOUtils.toString(is);
} catch (IOException e) {
Log.e("IndexHtmlLoader", "Failed to load the index html.", e);
throw new RuntimeException("Failed to load the index html.");
} finally {
IOUtils.closeQuietly(is);
}
}
C'est un tas de code alors laissez-moi vous expliquer. J'ai divisé setupWebView en méthodes séparées d'arbre parce qu'il a commencé à être un peu confus. Je pourrais même diviser ce code en plusieurs classes, mais parce que je n'ai jamais mis en place un cadre DI dans android, j'essaie d'éviter cette étape aussi longtemps que possible. (Probablement je devrais ajouter un après avoir terminé ce tutoriel :))
La méthode locateIndexWebView localisera notre WebView.
SetupWebViewCookieStorage configurera CookieManager pour accepter les cookies de la 3ème partie.
private void setupWebViewCookieStorage(final WebView webView) {
if (Build.VERSION.SDK_INT >= 21) {
CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
}
}
C'était nécessaire pour nous parce que notre application a deux domaines. L'un sert à servir les actifs de l'interface (www.daggersandsorcery.com) tandis que l'autre est utilisé pour le serveur backend (api.daggersandsorcery.com). Dans l'application, c'est un peu plus difficile car le domaine du frontend sera remplacé par file :. Si votre site utilise un seul domaine, vous n'avez pas besoin de le configurer. (Attention toutefois! Si vous utilisez google analytics ou des scripts similaires, vous devrez définir setAcceptThirdPartyCookies sur true sinon ils ne fonctionneront pas.)
Dans setupWebViewSettings, nous configurons les paramètres de WebView.
private void setupWebViewSettings(final WebView webView) {
final WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setSupportZoom(false);
}
We do some very basic stuff like enabling javascript and the dom-storage and disabling zoom (to make it more app-like).
In setupWebViewContent we load the content of the WebView. Note that this is done after setting up everything.
private void setupWebViewContent(final WebView webView) {
webView.loadDataWithBaseURL("file:///android_asset/", getIndexHtml(), "text/html", "utf-8", "about:blank");
}
Nous utilisons loadDataWithBaseURL car nous voulons charger nos propres actifs statiques à partir du répertoire d'assets. Vous pouvez simplement utiliser loadData si vous voulez charger une ressource / site Web depuis Internet. Le premier argument configure l'URL de base du site rendu. Cela configurera où charger tous les actifs / ressources relatifs. Parce que nous avons ajouté tous les fichiers image / js / CSS etc dans le répertoire d'actifs (pour réduire l'utilisation de la bande passante et la vitesse de chargement), il est nécessaire de configurer le répertoire d'actifs comme base. Le getIndexHtml charge le contenu de l'index HTML et le place dans le second argument. Si votre code d'index est suffisamment petit, vous pouvez le placer directement dans la source java. Dans notre cas, l'index HTML est généré dynamiquement par webpack après chaque mise à jour frontend, donc il est intégré à l'application dans un fichier. Les autres arguments sont le type mime, le codage et l'URL historique.
La seule chose qui nous reste maintenant est de donner la permission à l'application d'utiliser Internet. Cela peut être fait dans le fichier AndroidManifest.xml en collant une entrée uses-permission à la fin du XML:
<uses-permission android:name="android.permission.INTERNET" />
Si vous configurez tout correctement votre application rendra votre site au démarrage. Cette configuration est très bonne quand vous ne voulez pas investir trop de temps supplémentaire dans votre application mobile et cela vous permet de doubler votre productivité frontend. Chaque fois que vous fixez une chose liée mobile dans votre site Web il sera fixé dans votre application mobile aussi et vice versa.
Le code source complet de l'application finale est disponible dans mon référentiel GitHub.
Amusez-vous et gardez le codage! ......