Cet article est un article miroir de traduction automatique, veuillez cliquer ici pour accéder à l’article original.

Vue: 14239|Répondre: 0

[ionique] Ionic Android App Development (1) : Guide pour débutants

[Copié le lien]
Publié sur 19/06/2018 15:07:03 | | | |
1. Installation en environnement ionique

Le développement ionique dépend de l’environnement Nodejs, donc il faut installer Nodejs avant le développement. Télécharger et installer :La connexion hyperlientérée est visible.
Une fois l’installation terminée, ouvrez PowerShell et entrez les commandes nœuds -v et npm -v pour vérifier que l’installation est réussie, et si le numéro de version est retourné, cela signifie que c’est un succès.
Exécuter dans la ligne de commande PowerShell :

Cela consiste à installer Cordova et Ionic via le gestionnaire de paquets npm, -g signifie installation globale, et après installation globale, vous pouvez utiliser les commandes cordova et ionic dans n’importe quel dossier de PowerShell.

Vous pourriez rencontrer l’erreur suivante :

Installer des tutoriels Ionic et Cordova
https://www.itsvse.com/thread-4841-1-1.html
(Source : Architect_Programmer)

2. Créer un projet ionique

Le site officiel d’Ionic propose trois modèles de projets, des onglets et des menus secondaires, veuillez consulter :La connexion hyperlientérée est visible.



Nous créons notre application à l’aide du modèle tabs, ouvrons le CD PowerShell dans le répertoire développement, et exécutons :

où myApp est le nom de notre projet

Comme montré ci-dessous :


C:\project\android>ionic start myApp tabs
√ Création du répertoire .\myApp - c’est fait !
√ Téléchargement et extraction des onglets de départ - c’est fait !

? Souhaitez-vous intégrer votre nouvelle application avec Cordova pour cibler iOS et Android natifs ? Oui
√ Personnaliser ionic.config.json et package.json – c’est fait !
> intégrations ioniques permettent le cordoue --silencieux
√ Téléchargement de Cordova d’intégration - terminé !
√ Copier les fichiers d’intégration vers le projet - c’est fait !
[OK] Ajout de l’intégration Cordova !

L’installation des dépendances peut prendre plusieurs minutes.

  * IONIC DEVAPP *

Accélérez le développement avec Ionic DevApp, notre application mobile rapide de test sur appareil

  - Tester sur iOS et Android sans SDK natifs
  - LiveReload pour des mises à jour instantanées de style et JS

️--> Installer DevApp :La connexion hyperlientérée est visible.    <--

> npm i
× Commande en cours - échec !
[ERREUR]

        >node-sass@4.9.0install C :\project\android\myApp\node_modules\node-sass
        > scripts de nœuds/install.js

        Téléchargement binaire depuisLa connexion hyperlientérée est visible.
        Téléchargement terminé
        Enregistrement binaire sur C :\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node
        Mise en cache binaire vers C :\Users\itsvse_pc\AppData\Roaming\npm-cache\node-sass\4.9.0\win32-x64-57_binding.node

        >uglifyjs-webpack-plugin@0.4.6postinstall C :\project\android\myApp\node_modules\uglifyjs-webpack-plugin
        > lib/post_install.js nœud


        >node-sass@4.9.0postinstall C :\project\android\myApp\node_modules\node-sass
        > scripts/build.js

        Binaire trouvé sur C :\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node
        Test binaire
        Le binaire est correct
        npm ERR ! path C :\project\android\myApp\node_modules\fsevents\node_modules
        npm ERR ! code EPERM
        npm ERR ! errno -4048
        npm ERR ! syscall lstat
        npm ERR ! Erreur : EPERM : exploitation non autorisée, lstat
        'C :\project\android\monApp node_modules\\fsevents\node_modules'
        npm ERR !  { Erreur : EPERM : opération non autorisée, lstat
        'C :\project\android\monApp node_modules\\fsevents\node_modules'
        npm ERR !   pile : « Erreur : EPERM : opération non autorisée, lstat
        \'C :\\project\\android\\myApp\\\node_modules\\fsevents\\\node_modules'',
        npm ERR !   errno : -4048,
        npm ERR !   code : 'EPERM',
        npm ERR !   syscall : 'lstat',
        npm ERR !   path : 'C :\\project\\android\\myApp\\\node_modules\\fsevents\\node_modules' }
        npm ERR !
        npm ERR ! Veuillez essayer de relancer cette commande en tant que root/Administrator.

        npm ERR ! Un journal complet de cette exécution se trouve dans :
        npm ERR !     C :\Users\itsvse_pc\AppData\Roaming\npm-cache\_logs\2018-06-19T06_52_38_238Z-debug.log

Erreur survenue,La solution est d’exécuter cmd en tant qu’administrateur, puis d’exécuter à nouveau la commande ci-dessus!!



Utilisez le CD pour entrer notre projet, puis exécutez la commande suivante pour lancer le service navigateur :

Une fois l’exécution terminée, Ionic nous aide automatiquement à ouvrir notre navigateur par défaut et à aller directement à la page de l’application. Lorsque le navigateur ouvre la page, Ionic a activé le mode livereload pour nous, après l’avoir ouverte, nous modifions le fichier sous www et le sauvegardons, Ionic notifiera le navigateur de rafraîchir la page via le websocket,Nous n’avons pas besoin de rafraîchir la page manuellement à chaque modification, et a grandement amélioré notre efficacité au travail.

Comme montré ci-dessous :






Précédent:Installer des tutoriels Ionic et Cordova
Prochain:La différence entre la version JAVA 8u171 et 8u172
Démenti:
Tous les logiciels, supports de programmation ou articles publiés par Code Farmer Network sont uniquement destinés à l’apprentissage et à la recherche ; Le contenu ci-dessus ne doit pas être utilisé à des fins commerciales ou illégales, sinon les utilisateurs assumeront toutes les conséquences. Les informations sur ce site proviennent d’Internet, et les litiges de droits d’auteur n’ont rien à voir avec ce site. Vous devez supprimer complètement le contenu ci-dessus de votre ordinateur dans les 24 heures suivant le téléchargement. Si vous aimez le programme, merci de soutenir un logiciel authentique, d’acheter l’immatriculation et d’obtenir de meilleurs services authentiques. En cas d’infraction, veuillez nous contacter par e-mail.

Mail To:help@itsvse.com