Application mobile: Comment créer une application Android avec JavaScript (Tutoriel de l’application JavaScript Android)

Nous sommes de retour avec une autre démo d’application Android. Cette fois, nous adoptons une approche différente pour créer une application Android avec JavaScript.

Étant le langage de programmation de facto pour le Web, JavaScript a connu une croissance considérable au fil des ans, en particulier dans les applications frontales basées sur un navigateur. Grâce aux progrès des environnements d’exécution et des outils, il est désormais possible de retirer JavaScript du navigateur et de l’utiliser d’autres manières. Dans cet article de blog, nous vous montrons comment créer une application Android à l’aide de JavaScript et des technologies Web associées, sans utiliser d’environnement natif basé sur Java ou Kotlin. Nous vous montrons également comment intégrer une API à de telles applications Android en tirant parti de la puissance du marché des API de RapidAPI.

Afficher la liste des meilleures API JavaScript

Pouvons-nous utiliser JavaScript pour Android ?

Oui bien sûr!

L’écosystème Android prend en charge le concept d’applications hybrides, qui est un wrapper sur la plate-forme native. Il imite l’interface utilisateur, l’UX et toutes sortes d’interactions matérielles et réseau, tout comme vous utiliseriez une application Android native.

De nombreux frameworks proposent un wrapper hybride pour Android. Les Cadre ionique est le plus populaire parmi la communauté des développeurs. Il exploite le plug-in Cordova WebView, qui est un navigateur semblable à un skin sur l’interface utilisateur Android native.

Utiliser le framework Ionic pour créer des applications Android avec Javascript

Le framework ionic fonctionne avec Angular, React ainsi que JavaScript vanille ou Vue, pour lier l’application. Ionic 5 est la dernière version du framework. La prise en charge de React, JavaScript et Vue a été ajoutée dans la version 4. Cependant, la prise en charge de JavaScript et Vue n’est toujours pas suffisamment stable pour créer des applications de qualité production. Par conséquent, au moment d’écrire ces lignes, il est recommandé d’utiliser Angular avec Ionic 5.

En utilisant le langage TypeScript, un sur-ensemble de JavaScript, vous pouvez créer une application Ionic sur Angular, qui s’exécute comme une application Android hybride à l’aide du plugin WebView.

Le framework Ionic agit comme le ciment entre la plate-forme Android, Angular et Cordova. L’application hybride résultante est aussi agréable qu’une application native. Un utilisateur régulier ne serait jamais en mesure de faire la différence.

Le seul inconvénient est que ces applications ne sont pas aussi performantes que les applications natives. De plus, ces applications ne peuvent pas contrôler avec précision le matériel sous-jacent en cas de besoin de performances améliorées par le matériel.

Création de la couche d’interface utilisateur pour l’application hybride ionique

Le framework Ionic propose un ensemble de Composants de l’interface utilisateur que vous pouvez utiliser pour créer l’interface utilisateur de l’application.

Comme vous utilisez des balises HTML pour créer l’interface utilisateur du navigateur, Ionic propose des balises personnalisées de haut niveau pour créer les éléments de l’interface utilisateur de l’application.

Voici comment vous pouvez créer un écran d’application pour afficher une petite information sur une carte.

Vue de la carte du cadre ionique

En utilisant le tag, vous pouvez construire cet écran comme suit.


      
        Application mobile: Comment créer une application Android avec JavaScript (Tutoriel de l'application JavaScript Android)
        
          Destination
          Madison, WI
        
        
          Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
        
      
    

De cette façon, Ionic fournit une bibliothèque complète d’interfaces utilisateur spécifiques éléments personnalisés pour créer des écrans d’interface utilisateur pour les applications.

Passer des appels API à partir de l’application Ionic Hybrid

Si vous utilisez Angular comme framework de base, il est facile de passer un appel API.

Angular fournit une bibliothèque cliente HTTP pour TypeScript qui exploite le Client HTTP classer.

Cette classe fournit toutes les méthodes HTTP, y compris les plus courantes, Publier() et avoir() pour appeler des requêtes API à partir d’une URL. Voici comment vous pouvez définir un module pour effectuer un appel API rapide en utilisant Client HTTP et quelques classes d’aide.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HTTPService {
  // inject the HttpClient in the constructor
  constructor(private http:HttpClient) { }
  get(): Observable {
    
    let getUrl = "https://http://example.com/;
       
    return this.http.get(getUrl,{responseType:'blob'});
  }
}

En important ce module dans une application Angular, vous pouvez appeler la fonction avoir( ). Il renverra le corps HTML du domaine example.com sous forme de blob de texte.

Comment créer une application Android avec JavaScript (pour la génération de code QR)

Les codes QR reçoivent beaucoup d’amour de la part de personnes du monde entier. Tout le monde aime scanner un code QR. Les entreprises et les marques souhaitent les utiliser pour diriger les clients vers les URL de leur site Web.

Alors, que diriez-vous de créer une application Android qui vous permet de générer instantanément un code QR à partir d’une URL. Avant même de vous poser des questions sur les détails de la génération du code QR, rappelons-nous que le marché des API de RapidAPI dispose de nombreuses API pour vous aider.

Choisir une API de génération de code QR

Rendez-vous sur la RapidAPI page d’accueil pour rechercher des API de code QR.

Recherche sur la page d'accueil RapidAPI

Vous pouvez trouver de nombreuses API de code QR répertoriées sur le marché.

API de génération de code QR

Il existe une grande variété de choix d’API pour générer des codes QR personnalisés, avec des images, des logos et des combinaisons de couleurs ainsi que diverses options pour accéder au code généré.

Choisissons un générateur de code QR simple pour l’application Android que nous voulons créer.

Nous avons fait un choix aléatoire pour choisir l’API QRickit QR Code QReator. C’est une API simple et facile à utiliser sans aucune option de personnalisation.

Sélection d'API de code QR

Suivez les étapes ci-dessous pour commencer avec cette API.

Comment accéder à l’API

1. Inscrivez-vous pour un compte RapidAPI

Pour accéder à n’importe quelle API, vous devez d’abord créer un compte développeur RapidAPI gratuit. Avec ce compte, vous obtenez une clé API universelle pour accéder à toutes les API hébergées dans RapidAPI.

RapidAPI est le plus grand marché d’API au monde, avec plus de 10 000 API et une communauté de plus de 1 000 000 de développeurs. Notre objectif est d’aider les développeurs à trouver et à se connecter aux API pour les aider à créer des applications étonnantes.

2. Accédez à l’API QReator QR Code QReator

Une fois connecté, connectez-vous à votre compte RapidAPI et visitez la console API ici.

Console d'API de génération de code QR

3. Abonnez-vous à l’API QRickit

Une fois dans la console API, cliquez sur l’onglet « Tarification » pour accéder au plan tarifaire.

L’API QRickit QR Code QReator propose un plan freemium qui vous permet de passer 100 appels API en un mois.

Abonnez-vous à ce plan et vous êtes prêt à l’essayer.

4. Testez l’API QRickit

Si vous revenez à l’onglet « Endpoints », vous pouvez accéder aux points de terminaison de l’API et aux paramètres.

Demande d'API QRickit

Saisissez le nom de domaine « example.com » dans la zone de texte à côté du paramètre‘. Déclenchez l’API. Si vous voyez un code d’état de 200, l’appel d’API a réussi.

L’image réelle du code QR est envoyée en tant que réponse blob par l’API, qui peut ne pas être visible sur le navigateur. Cependant, lorsque vous créez l’application Android, vous la capturez et l’affichez sous forme d’image.

Créons l’application avec Ionic Framework

Nous allons maintenant écrire le code de l’application Android. Pour créer cette application à l’aide du framework Ionic, vous devez configurer des outils.

Tout d’abord, voici quelques conditions préalables pour les plates-formes et les SDK qui doivent être satisfaites avant de continuer.

Conditions préalables

    1. Installer Android Studio: Il s’agit de l’environnement de développement Android. Vous devez avoir le Android Studio version 3.0 ou supérieure, installée sur votre ordinateur de développement.
    2. Installer le SDK Java: Toutes les applications Android exploitent la plate-forme Java. Vous devez installer le JDK à partir du site officiel d’Oracle.
    3. Installer le SDK Android: Il s’agit du SDK de la plate-forme Android. Vous devez avoir le dernier SDK Android (de préférence Android 10.0) installé via Android Studio.
    4. Installez Node.js et NPM : NPM est l’outil de gestion de packages pour tous les packages Angular et Ionic ainsi que les bibliothèques TypeScript. Il est disponible dans le package Node.js. Vous pouvez installer Node.js à partir du Page Officielle.
    5. Installer angulaire : Suivez ceci guide officiel pour configurer votre environnement Angular local.
    6. Installer Ionique: Installez la CLI ionique à partir de cet officiel Documents ioniques. Suivez uniquement la section jusqu’à l’installation de l’Ionic CLI.

Remarque : le code présenté dans cet article a été testé avec les versions suivantes des plates-formes/SDK sous Windows 10.

Android Studio : 3.5.3

Java 1.8.0.241

SDK Android : Android 10.0

Node.js/NPM : 10.16.3/6.13.7

CLI angulaire : 9.1.11

Ionic CLI : 5.4.16

Vous devez également vous assurer que les chemins système pour Android SDK, Java, Node, NPM, Angular CLI et Ionic CLI sont correctement définis pour les appeler directement.

Commençons le développement maintenant. Suivez les étapes ci-dessous pour configurer un nouveau projet Ionic et créer le code de l’application Android.

Avant de commencer, assurez-vous qu’un terminal de ligne de commande est en cours d’exécution et qu’un éditeur de code est ouvert.

Étape 1 : Créer un nouveau projet Ionic

Sur le terminal, créez un nouveau dossier de projet, puis, à l’intérieur du dossier, créez un nouveau projet Ionic à l’aide de l’Ionic CLI.

qrcode de démarrage ionique vierge

Cela créera un nouveau projet vierge appelé « qrcode ». Il crée automatiquement le dossier principal du projet nommé « qrcode » et les sous-dossiers qu’il contient.

Étape 2 : ajouter un nouveau service HTTP au projet

Pour déclencher les appels d’API de l’application vers l’API QRickit, nous définissons un nouveau service. Appelez la commande suivante à l’aide de l’Ionic CLI.

service de génération ionique HTTP

Un service est un module complémentaire, utilisé comme bibliothèque dans le code. Il exerce une responsabilité bien définie. Dans ce cas, il s’agit des appels d’API d’invocation. Vous définirez la logique à l’intérieur de ce module dans quelques instants.

Étape 3 : Ajoutez l’interface utilisateur et le code d’interaction

Cette application n’a qu’un seul écran. Il affiche une zone de texte pour accepter le nom de domaine et un bouton de soumission pour déclencher l’appel de l’API QRickit. Sous le bouton se trouve une zone d’affichage qui affiche le code QR généré.

Écran de l'application du générateur de code QR

Ouvrir le fichier home.page.html sous qrcode/src/app/home/ pour définir l’interface utilisateur comme suit. Vous pouvez écraser le contenu par défaut généré dans le cadre de la création du projet.


  
    
      QR Code Generator
    
  



  
Enter the URL
Get QR code
{{resultUrlString}} QR Code
Application mobile: Comment créer une application Android avec JavaScript (Tutoriel de l'application JavaScript Android)
ERROR! {{errorMessage}}

et définit les wrappers de niveau supérieur pour héberger les éléments de l’interface utilisateur.

L’interface utilisateur est structurée d’une manière HTML typique en utilisant

éléments contenant à la fois des éléments personnalisés spécifiques à Ionic, ainsi que des éléments HTML standard. Ceci comprend , , , , de même que

et Mots clés.

Maintenant, ouvrez le fichier page d’accueil.scss et remplacez le contenu par défaut par celui-ci.

#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}

Il s’agit des éléments CSS standard que vous définissez pour styliser les composants de l’interface utilisateur. La chose la plus notable ici est .Chargement en cours classer. Il définit l’animation de chargement à afficher en attendant la réponse de l’API.

Maintenant, ouvrez le fichier page d’accueil.ts et remplacez le contenu par défaut comme suit.

import { Component, ViewChild , ElementRef} from '@angular/core';
import { HTTPService } from '../http.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  loading:boolean;
  showResult:boolean;
  showError:boolean;
  imageUrl="";
  errorMessage="";
  urlString="";
  resultUrlString="";

  @ViewChild('qrCodeImage') image: ElementRef
  constructor(public  httpService : HTTPService ) {
    this.loading = false;
    this.showResult = false;
    this.showError = false;
  }
  // This validates the url string to be in proper format
  validURL(urlStr) {
    console.log("validating url")
    var regex = /^(?:(?!(?:10|127)(?:.d{1,3}){3})(?!(?:169.254|192.168)(?:.d{1,3}){2})(?!172.(?:1[6-9]|2d|3[0-1])(?:.d{1,3}){2})(?:[1-9]d?|1dd|2[01]d|22[0-3])(?:.(?:1?d{1,2}|2[0-4]d|25[0-5])){2}(?:.(?:[1-9]d?|1dd|2[0-4]d|25[0-4]))|(?:(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)(?:.(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)*(?:.(?:[a-zu00a1-uffff]{2,})))(?::d{2,5})?(?:/S*)?$/;
    console.log(regex.test(urlStr))
    if(regex.test(urlStr)){
      return true;
    } else{
      return false;
    }
  }

  getQRCode(){
    this.showError=false;
    this.showResult=false;
    this.loading = true;
    if(this.validURL(this.urlString)){
      console.log("valid url")
      // saving the string for result display
      this.resultUrlString =this.urlString;
      // call the http service which in turn calls the RapidAPI
      this.httpService.get(this.urlString).subscribe(response=>{
        // on receiving response disable the loading 
        this.loading=false;
        // clear the input string
        this.urlString="";
        // create a local url for the recieved image and assign it to the source of image element for display
        this.image.nativeElement.src = window.URL.createObjectURL(response);
      });
      // display the result url
      this.showResult=true;
    }else {
      // on error disable the loading symbol
      this.loading = false;
      // set the error message
      this.errorMessage = "Please enter valid url in the format www.yourdomain.com";
      // clear input string
      this.urlString="";
      // display the error message
      this.showError = true;
    }
    
  }
}

Ce code est en TypeScript. Il définit la logique métier de l’interface utilisateur. Le seul point d’interaction pour cette application est la pression sur le bouton pour appeler l’API QRcikit et afficher le code QR généré.

Les getQRCode( ) la fonction gère cela. Vous pouvez suivre les commentaires dans le code pour comprendre le flux.

Cela utilise également le service HTTP pour l’appel de l’API. Vous aborderez cette fonction à l’étape suivante.

Étape 4 : Ajoutez le code pour le service HTTP

Ouvrir le fichier http.service.ts sous /qrcode/src/app path et remplacez le contenu existant par ce code.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HTTPService {
  // inject the HttpClient in the constructor
  constructor(private http:HttpClient) { }
  get(url:String): Observable {
    
    let getUrl = "https://qrickit-qr-code-qreator.p.rapidapi.com/api/qrickit.php?d="+url;
    // create headers and set host and api key (obtained from RapidApi)
    const header = new HttpHeaders({'x-rapidapi-host':'qrickit-qr-code-qreator.p.rapidapi.com',
                  'x-rapidapi-key':''});
    // result is in the form of image in blob
    return this.http.get(getUrl,{headers:header,responseType:'blob'});
  }
}

Avant d’enregistrer le fichier, assurez-vous de remplacer l’espace réservé avec la clé réelle générée pour vous lors de la création du compte.

Ce service définit un avoir( ) appel qui encapsule la méthode HTTP GET pour impliquer l’API QRickit. La réponse de l’API est renvoyée sous la forme d’un blob, qui correspond aux données d’image en base64.

Étape 5 : Enregistrement du service HTTP avec l’application

Vous avez défini le service HTTP, mais il utilise l’Angular Client HTTP module, qui doit être importé dans le projet afin que d’autres modules puissent l’utiliser.

Ouvrir le fichier app.module.ts fichier sous qrcode/application. Ajoutez l’instruction d’importation suivante sous toutes les autres instructions d’importation.

Import . . . . 
import { HttpClientModule } from '@angular/common/http';

De plus, ajoutez le HttpClientModule pour les importations sous le bloc @NgModule.

imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule],

Avec cette étape, le codage est terminé.

Étape 6 : générez des artefacts Android

Pour générer une application Android à partir de ce projet Ionic, vous devrez ajouter des artefacts spécifiques à Android.

Tout d’abord, vous devez vous assurer que le environnement de construction pour Android est correctement configuré.

Ouvrez maintenant le config.xml fichier sous QR Code chemin et modifiez la valeur du tag à QRCodeGen. Le contenu de cette balise sera le nom de l’application qui s’installe sur le téléphone Android.

Après cela, passez au terminal où vous avez créé le projet Ionic. Assurez-vous que vous êtes sous le chemin « qrcode » et exécutez les commandes suivantes.

1. Ajoutez la plate-forme Android au projet Ionic.

plate-forme ionique cordova ajouter android

2. Créez l’application Android

ionique cordova construire android

Remarque : ces commandes prendront un certain temps à s’exécuter, entre 5 et 10 minutes. Si vous rencontrez des erreurs dues à l’indisponibilité des dépendances, veuillez suivre les messages d’erreur pour installer les dépendances et réexécuter la commande.

À la fin de l’étape de construction, vous verrez le nouveau fichier Android .apk sous le qrcode/plateformes/android/app/build/outputs/apk/debug chemin.

Étape 7 : Testez l’application Android

Pour tester l’application, vous pouvez utiliser l’émulateur Android fourni par défaut avec Android Studio.

Lancez le studio Android. À l’invite de l’écran d’accueil, choisissez l’option d’ouverture d’un projet existant et accédez au « QR Code » dossier de projet. Cela ouvrira l’IDE Android Studio et affichera le « QR Code » structure des dossiers.

Remarque : Android Studio est utilisé pour lancer l’émulateur uniquement. Nous n’allons pas l’utiliser pour créer l’application.

Lancez maintenant le gestionnaire AVD à partir de la barre d’outils supérieure et vous verrez la liste des périphériques virtuels disponibles.

Écran du gestionnaire AVD

Double-cliquez sur le périphérique virtuel pour le lancer. Il faudra quelques minutes pour démarrer et afficher l’écran Android.

Écran par défaut de l'émulateur

Maintenant, faites glisser et déposez le .apk fichier sur la fenêtre de l’émulateur. Cette action installera l’application sur l’appareil émulateur. Il créera une icône d’application avec le nom QRCodeGen, selon le nom que vous avez défini dans le config.xml déposer.

Une fois installée, accédez à l’application, lancez-la et vous êtes prêt à la tester.

Capture d'écran de génération de QRCode

Voila !

Vous venez de créer une application Android avec JavaScript sans utiliser aucun des outils de développement Android natifs.

Et après?

Si vous êtes un développeur Web, vous serez plus familiarisé avec HTML CSS et JavaScript au lieu de Java ou Kotlin. Par conséquent, cette approche est le meilleur moyen de créer une application Android sans vous perfectionner.

Vous devriez maintenant avoir une bonne idée de la façon de créer une application Android avec Ionic. C’est un framework fiable, et avec une API fiable du marché RapidAPI, vous pouvez faire des merveilles avec les applications Android hybrides.

Alors, que voulez-vous construire ?

Partagez vos pensées et vos questions dans les commentaires ci-dessous. Nous reviendrons bientôt avec une autre démo passionnante autour d’Android.

Comment créer des applications Android avec JavaScript ?

L’environnement de développement préféré pour l’application Android est Kotlin ou Java, il n’y a donc aucun moyen direct de créer une application Android à l’aide de JavaScript. Cependant, à l’aide d’un framework, il est possible d’ajouter un wrapper sur l’interface Android native. Le framework Ionic est l’un des frameworks les plus anciens et les plus populaires qui exploite plusieurs frameworks Web pour fournir ce wrapper. Outre la prise en charge de JavaScript vanille, qui est toujours en version bêta, vous pouvez utiliser Ionic avec Angular et React pour créer un wrapper hybride sur Android.

Comment générer un QR code ?

Les codes QR peuvent être utilisés pour encoder des informations utiles allant des URL de sites Web, des informations de contact ainsi que d’autres informations. Le moyen idéal pour générer un code QR est via une API. Vous pouvez effectuer une recherche dans le catalogue RapidAPI pour choisir l’une des nombreuses API de génération de code QR.

Existe-t-il une API pour générer un code QR ?

Oui. Vous pouvez générer n’importe quel code QR représentant une URL, de données arbitraires à l’aide d’une API de génération de code QR. Le code QR généré est disponible via une image renvoyée dans le cadre de la réponse de l’API. Vous pouvez effectuer une recherche dans le catalogue RapidAPI pour choisir parmi de nombreuses API de génération de code QR qui fournissent des options personnalisées pour décorer les images de code QR ainsi que plusieurs formats pour renvoyer l’image de code QR générée.

Afficher la liste des meilleures API JavaScript

#Comment #créer #une #application #Android #avec #JavaScript #Tutoriel #lapplication #JavaScript #Android