a
a
Weather:
city not found
HomeBitcoinComment convertir un site Web en une application Android à partir de zéro

Comment convertir un site Web en une application Android à partir de zéro

Photo de profil de l'auteur

@somawatvinayVinay Somawat

Informatique et ingénierie, NIT Warangal

Dans ce tutoriel, nous allons apprendre Comment convertir un site Web en application Android à l’aide d’Android Studio.

Si vous ne savez encore rien sur Android Studio, ne vous inquiétez pas.
Nous allons tout recommencer à zéro.

Voici à quoi ressemble le site Web:

Et l’application Android, que nous avons développée avec Android Studio, ressemble à ceci:

Avant de commencer:

REMARQUE: Si vous avez téléchargé Android Studio et déjà installé sur votre système, vous pouvez ignorer la partie et aller directement à la partie codage.

Autrement
Téléchargez Android Studio:

Google fournit Android Studio pour les plates-formes Windows, Mac OS X et Linux. Vous pouvez télécharger ce logiciel depuis la page d’accueil d’Android Studio.

Avant de télécharger Android Studio, assurez-vous que votre plate-forme répond à l’une des exigences suivantes:
Système d’exploitation Windows
Microsoft Windows 7/8/10 (32 bits ou 64 bits)
Au moins 2 Go de RAM, 8 Go de RAM recommandés
Minimum 2 Go d’espace disque disponible, 4 Go recommandés (500 Mo pour l’IDE + 1,5 Go pour le SDK Android et l’image du système d’émulation)
Résolution d’écran minimale 1280 x 800
Pour émulateur accéléré: système d’exploitation 64 bits et processeur Intel avec prise en charge des fonctionnalités Intel VT-x, Intel EM64T (Intel 64) et Execute Disable (XD) Bit

Mac OS
Mac OS X 10.8.5 ou version ultérieure, jusqu’à 10.11.4 (El Capitan)
Au moins 2 Go de RAM, 8 Go de RAM recommandés
Minimum 2 Go d’espace disque disponible, 4 Go recommandés (500 Mo pour l’IDE + 1,5 Go pour le SDK Android et l’image du système d’émulation)
Résolution d’écran minimale 1280 x 800
JDK 6

Système d’exploitation Linux
Bureau GNOME ou KDE
: Testé sur Ubuntu 12.04, Precise Pangolin (distribution 64 bits capable d’exécuter des applications 32 bits)
Distribution 64 bits capable d’exécuter des applications 32 bits
Bibliothèque GNU C (glibc) 2.11 ou version ultérieure
Au moins 2 Go de RAM, 8 Go de RAM recommandés
Minimum 2 Go d’espace disque disponible, 4 Go recommandés (500 Mo pour l’IDE + 1,5 Go pour le SDK Android et l’image du système d’émulation)
Résolution d’écran minimale 1280 x 800
JDK 8
Pour un émulateur accéléré: processeur Intel avec prise en charge des fonctionnalités Intel VT-x, Intel EM64T (Intel 64) et Execute Disable (XD) Bit ou processeur AMD avec prise en charge de la virtualisation AMD (AMD-V)

Installation d’Android Studio sur Windows 8.1 64 bits

Figure 1. Configuration d’Android Studio
Figure 2. Voulez-vous installer Android SDK et AVD?
Figure 3. Acceptez le contrat de licence pour continuer l’installation
Figure 4. Définissez les emplacements d’installation pour Android Studio et Android SDK
Figure 5. Créer un nouveau raccourci pour Android Studio

Pour terminer l’installation, laissez la case Lancer Android Studio cochée et cliquez sur Terminer.

Figure 6. Laissez la case à cocher Lancer Android Studio cochée pour exécuter ce logiciel

Exécuter Android Studio

Android Studio présente un écran de démarrage lorsqu’il commence à fonctionner:

Si vous êtes comme moi et que vous n’avez pas de version précédemment installée, vous pouvez simplement conserver la valeur par défaut et cliquer sur OK.

Figure 9. Validez la configuration de votre SDK Android et de votre environnement de développement

Lorsque vous cliquez sur Suivant, l’assistant d’installation vous invite à sélectionner un type d’installation pour les composants du SDK. Pour l’instant, je vous recommande de conserver le paramètre par défaut standard.

Figure 10. Choisissez un type d’installation
Figure 11. Vérifiez les paramètres

L’assistant téléchargera et décompressera divers composants. Cliquez sur Afficher les détails si vous souhaitez afficher plus d’informations sur les archives téléchargées et leur contenu.

Figure 12. L’assistant télécharge et décompresse les composants Android Studio

Vos options sont de supporter l’émulateur lent ou d’utiliser un appareil Android pour accélérer le développement. Je discuterai de cette dernière option plus tard dans le didacticiel.

Enfin, cliquez sur Terminer pour terminer l’assistant. Vous devriez voir la boîte de dialogue Bienvenue dans Android Studio:

Figure 14. Bienvenue dans Android Studio

Vous avez installé et configuré Android Studio et créé un projet pour votre première application mobile Android Studio; vous êtes maintenant prêt à créer votre application Android. Dans Android Studio, cela signifie remplir votre nouveau projet avec du code source Java et des fichiers de ressources.

Votre première application mobile Android Studio

Démarrer un nouveau projet

D’après notre configuration jusqu’à présent, vous devriez toujours avoir Android Studio en cours d’exécution avec la boîte de dialogue Bienvenue dans Android Studio. À partir de là, cliquez sur Démarrer un nouveau projet Android Studio. Android Studio répondra avec la boîte de dialogue Créer un nouveau projet illustrée dans la figure.

Figure 15. Créer un nouveau projet
Figure 16. Sélectionnez les catégories d’appareils cibles

Cliquez sur Suivant et vous aurez la possibilité de choisir un modèle pour l’activité principale de votre application. Pour l’instant, nous allons continuer avec une activité vide. Sélectionnez ce modèle et cliquez sur Suivant.

Ensuite, vous allez personnaliser l’activité:

se connecter à W2A comme nom commercial e principale comme nom de mise en page et cliquez sur Terminer pour terminer cette étape. Android Studio répondra qu’il crée le projet, puis il vous amènera à l’espace de travail du projet.

Figure 19. Espace de travail Android Studio

La fenêtre du projet est organisée dans une arborescence dont les branches principales sont les scripts App et Gradle. La branche App est en outre organisée en sous-branches manifest, java et res:

  • manifeste stocke AndroidManifest.xml, qui est un fichier XML décrivant la structure d’une application Android. Ce fichier enregistre également les paramètres d’autorisation (le cas échéant) et d’autres détails de l’application.
  • Java stocke les fichiers source Java d’une application selon une hiérarchie de packages, qui dans cet exemple est ca.javajeff.w2a.
  • res stocke les fichiers de ressources d’une application, qui sont organisés en sous-branches, mises en page, mipmaps et valeurs pouvant être dessinés:
  • dessinable– Un emplacement initialement vide pour stocker les graphiques d’une application
  • disposition: un emplacement contenant les fichiers de mise en page d’une application; initialement, main.xml (le fichier de mise en page de la tâche principale) est stocké ici
  • mipmap– Un emplacement contenant divers fichiers ic_launcher.png qui stockent les icônes de l’écran du lanceur de différentes résolutions
  • valeurs: un emplacement contenant colors.xml, dimens.xml, strings.xml et styles.xml

La branche Scripts Gradle identifie divers fichiers .gradle (tels que build.gradle) et .properties (tels que local.properties) qui sont utilisés par le système de construction basé sur Gradle.

Maintenant, la partie de codage va commencer …

Ajoutez une WebView à votre entreprise comme indiqué dans l’image ci-dessous.

layout/activity_main.xml

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:tools=”http://schemas.android.com/tools" android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”
>
<WebView
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@+id/webView”
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true”
android:layout_alignParentTop=”true”
android:layout_alignParentRight=”true”
android:layout_alignParentEnd=”true”
/>
</RelativeLayout>
src/main/AndroidManifest.xml
<?xml version=”1.0" encoding=”utf-8"?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android" package=”com.vinaysomawat.careerhigh”
android:installLocation=”auto”>
<uses-permission android:name=”android.permission.INTERNET”/>
<application
android:allowBackup=”true”
android:icon=”@mipmap/faviconcircular”
android:label=”@string/app_name”
android:roundIcon=”@mipmap/faviconcircular”
android:supportsRtl=”true”
android:theme=”@style/AppTheme”>
<activity android:name=”.SplashActivity” android:theme=”@style/SplashTheme”>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />
<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
<activity android:name=”.MainActivity” />
</application>
</manifest>

MainActivity.java

package com.vinaysomawat.careerhigh;
/**
* Created by Vinay Somawat on 10-01-2019.
*/
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends ActionBarActivity {
private WebView mywebview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mywebview = (WebView)findViewById(R.id.webView);
WebSettings webSettings = mywebview.getSettings();
webSettings.setJavaScriptEnabled(true);
mywebview.loadUrl(“https://careerhigh.in");
mywebview.setWebViewClient(new WebViewClient());
}
@Override
public void onBackPressed(){
if(mywebview.canGoBack()) {
mywebview.goBack();
} else
{
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item){
int id = item.getItemId();
if(id == R.id.action_settings){
return true;
}
return super.onOptionsItemSelected(item);
}
}

menu/menu_main.xml

<menu xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
xmlns:tools=”http://schemas.android.com/tools" tools:context=”.MainActivity”
>
<item android:id=”@+id/action_settings” android:title=”@string/action_settings”
android:orderInCategory=”100" app:showAsAction=”never”
/>
</menu>

values/styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="TextAppearance.AppCompat.Widget.ActionBar.Title" parent="android:TextAppearance">
<item name="android:textColor">@color/titlecolour</item>
<item name="android:textSize">30sp</item>
</style>

</resources>

values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">CareerHigh</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>

</resources>

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#000000</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="titlecolour">#398bb7</color>
</resources>

Ajouter une activité de lancement à l’application: (Ça a l’air sympa)

Démarrer l’entreprise

SplashActivity.java

package com.vinaysomawat.careerhigh;

/**
* Created by Vinay Somawat on 10-01-2019.
*/
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}

Et ajoutez du code values/styles.xml

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/background</item>
</style>

créer un drawable/background.xml fichier:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorPrimary" />

<item>
<bitmap android:src="@drawable/logo2"
android:gravity="center"
/>

</item>
</layer-list>

assurez-vous d’ajouter un fichier image d’exemple pour drawable dossier à afficher dans l’activité de lancement.

PRODUCTION:

Maintenant, lancez votre application Android et vous verrez le résultat suivant

Enfin, votre première application Android est créée.

Si tu es coincé quelque part

Téléchargez le code source

Ou utilisez la commande suivante:

command-line

Et partagez votre application Android avec vos amis.

Est-ce que j’ai fait quelque chose de mal? Mentionnez-le dans les commentaires. Je voudrais m’améliorer.
Si vous avez appris une chose ou deux, applaudissez 👏 aussi souvent que possible pour montrer votre soutien!
Bonjour tout le monde, je suis Vinay Somawat. Un développeur créatif et un concepteur logique. Pouvez-vous me trouver sur Linkedin ou me suivre sur GitHub ou peut-être me suivre sur Twitter? Si c’est trop social pour vous, veuillez envoyer un e-mail à vinaysomawat40@gmail.com si vous souhaitez parler technique avec moi.

Bonne journée!

Marque

Inscrivez-vous à Hacker Noon

Créez votre compte gratuit pour débloquer votre expérience de lecture personnalisée.

https://hackernoon.com/how-to-convert-a-website-into-an-android-app-from-scratch-de19c84a5801

No comments

leave a comment