Vôtre première application avec Nativescript

figure

Dans cet article nous allons voir différentes manières pour générer vôtre première application avec Nativescript. En effet, le framework offre plusieurs manières de démarrer une application mobile natives pour android et ios.

  • Nativescript Sidekick.
  • Nativescript CLI.
  • Nativescript playground.

 

NativeScript Sidekick:

Sidekick est une application desktop disponible pour les trois système d'exploitation Windows, MacOS et Linux téléchargeable gratuitement et qui facilite beaucoup le développement d'applications mobiles.

Il permet de choisir un template de départ pour vôtre application, installer des plugins vérifiés, le débogage de vôtre code en utilisant l'IDE de vôtre choix, la construction de l'application localement ou dans le Cloud, cette dernière fonctionnalité  n'est pas négligeable puisque c'est la seule manière de construire des applications IOS sur une machine windows ou linux.

Vous devez en premier lieux télécharger le logiciel sur le site officiel et l'installer sur vôtre machine.

Nativescript Cli doit être installé aussi sur vôtre ordinateur, vous pouvez le faire en tapant cette commande:

npm install -g nativescript

Je vous invite à voir ce tutoriel pour plus de détails concernant la configuration d'un environnement de développement local.

Démarrer Sidekick et cliquez sur: create App

nativescript sidekick

Ensuite suivez ces étapes:

sidekick étapes
  1. Donner un nom à votre application.
  2. Choisir le chemin pour le dossier où seront logés les fichiers.
  3. Choisir une catégorie de template, un type de projet (Js, Typescript, Angular ou vueJs).
  4. Appuyer sur Create.

Branchez vôtre smartphone ou démarrez l'émulateur virtuel, il sera détecté automatiquement par Sidekick.

sidekick

 

Vous pouvez maintenant bénéficier de toutes les fonctionnalités offertes par Sidekick: modifier les proprités de l'application (La description, l'auteur, la  version ...), installer des plugins vérifiés, ajouter des assets (logo, splash screen..), ouvrir le code dans un IDE, ouvrir le terminal, débogger, ajouter des page et construire (build) son application localement ou dans le Cloud..

NativeScript CLI (Command-Line Interface):

Pour construire une application avec Nativescript CLI, commencer par préparer vôtre environnement de développement.

Apres  avoir installé Nativescript localement, certaines commandes seront disponible sur vôtre terminal;

npm install -g nativescript

Vous pouvez vérifier vôtre configuration avec la commande:

tns doctor

Si aucune erreur n'est détectée, vous pouvez alors générer vôtre application et tapant:

tns create monApplication --template tns-template-blank-ng

tns create monApplication --template tns-template-blank-ng

Cette commande va creer dans le répértoire local une application monApplication en utilisant le template blank avec le  framework Angular.

Plusieurs templates  ou cadres sont disponibles pour démarrer son application, vous pouvez les consulter dans le market.

Ensuite, déplacez vous dans le  répertoire fraichement créé en tapant: 

cd monApplication

Vous pouvez ouvrir le répertoire dans votre IDE pour accéder au code. Pour visual studio code, tapez:

code .
vscode

 

Pour démarrer votre application, vous avez deux choix:

  1. Utiliser la commande tns preview et utliser l'application Nativescript Playground pour Android ou Ios.
  2. La construire en local et l'ouvrir sur votre téléphone branché à la machine ou sur un appareil virtuel.

Vous pouvez tester vos applications sur Genymotion qui permet la  création d'appareils virtuel Android.

genymotion

Ajouter une plateforme android ou Ios ou les deux (si vous êtes sur un Mac) à vôtre projet avec cette commande:

tns platform add android

ou

tns platform add ios

Vérifier que votre appareil virtuel (ou vôtre smartphone branché avec un câble USB) est reconnu:

tns devices

Connected devices & emulators
Searching for devices...
iTunes is not available for this operating system. You will not be able to work with connected iOS devices.
┌───┬─────────────┬──────────┬─────────────────────┬──────────┬───────────┐
│ # │ Device Name │ Platform │ Device Identifier   │ Type     │ Status    │
│ 1 │ Custom      │ Android  │ 192.168.57.101:5555 │ Emulator │ Connected │

Construire vôtre package localement:

tns build android

Enfin, vous pouvez démarrer vôtre application et l'afficher sur vôtre appareil:

tns run android
ns run

Nativescript playground:

Vous pouvez démarrer une application avec l'outil en ligne Playground, ensuite télécharger le code localement et construire l'application, mais les possibilités offertes par rapport au CLI ou au Sidekick sont limités, cet outil est a utiliser pour tester et jouer avec les fonctionnalités de Nativescript.

 

Si vous aimez cet article, vous pouvez faire une donation!

Donner

 

A lire aussi

Nativescript 6.0 est sorti

L'équipe Progress vient d'annoncer la sortie de la version Nativescript 6.0, une sortie très attendue par les développeurs de fait des nouveautés apportées par cette nouvelle version majeure. En…

Démarrer avec Nativescript: Introduction & prérequis

Nativescript est un framework open source pour le développement d'applications mobiles. Il permet de coder de vraies applications Ios, Android et Web à partir d'un seul code javascript de base, ce…

Apprendre Nativescript: Ressources & Tutoriels

Apprendre Nativescript est facile si on est habitué aux technologies de Web. Je vais essayer de regrouper les ressources et tutoriels pour pouvoir développer des applications mobiles natives grâce…