Cum să implementați o aplicație pe focul de foc cu un cli unghiular

angular CLI este o interfață de linie de comandă pentru unghiular și una dintre cele mai simple modalități de a începe aplicația dvs. Unghiular CLI are avantajul de a vă permite să vă concentrați pe codul dvs., fără a fi nevoie să vă faceți griji cu privire la structura aplicației dvs., deoarece toate fișierele necesare sunt generate pentru dvs.

Este foarte ușor să creați gata- a făcut aplicații cu CLI unghiulară. În plus, FireBase vă permite să utilizați rapid aplicații. În plus, FireBase are multe caracteristici și un pachet gratuit care vă permite să experimentați platforma fără a fi legați de un pachet plătit.

Planul liber are următoarele caracteristici:

  • Test A / B
  • Analitic
  • Indexarea aplicațiilor
  • Autentificare
  • Cloud Messaging
  • Analiza coliziunii
  • Prompt
  • Performanțe de urmărire
  • predicții

Condiții preliminare

Pentru a rula cli unghiular, tu Trebuie să fi instalat node.js 6.9 și npm 3 sau mai mare în sistemul dvs. Dacă nu ați instalat node.js, vizitați site-ul NODE.JS pentru a găsi instrucțiuni pe instalarea NODE.JS pe sistemul dvs. de operare.

Trebuie să aveți, de asemenea, o înțelegere de bază a următoarelor următori:

  • Programare orientată pe obiect
  • JavaScript sau TipsCript

Instalarea unghiului CLI

Instalare unghiulară CLI este la fel de simplă AS:

npm install -g @ angular / cli

Comanda de mai sus instalează cea mai recentă versiune a unghiului. Pentru a valida instalarea cu succes a CLI unghiular, începeți pur și simplu următoarea comandă:

ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | | / _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | _ | | | (_ | | | | ___ | | ___ | | / _ / \ _ \ _ | | _ | __, | \ __, | __, _ | _ | _ | _, _ | _ | \ ____ | _____ | ___ | | ___ / CLI angulaire: 6.0.8 nœud: 10.7.0 OS: linux x64 angulaire:… Version du package ------------------- ----------------------------------- @ angular-devkit / architect 0.6.8 @ angular-devkit / core 0.6.8 @ angular-devkit / schémas 0.6.8 @ schémas / angulaire 0.6.8 @ schémas / mise à jour 0.6.8 rxjs 6.2.2 dactylographié 2.7.2 

Crearea unei aplicații unghiulare

acum pe care ați instalat Unghiular CLI, putem începe dezvoltarea aplicației noastre. În acest tutorial, nu vom detalia componentele unui proiect CLI unghiular, deoarece acest articol se concentrează asupra implementării Firebase.

Pentru a crea o aplicație nouă, pur și simplu începe ng new , unde înlocuiți nom_du_projet cu numele aplicației dvs.

ng new bucketlist

acest lucru Creați toate fișierele necesare pentru a începe. După cum puteți vedea, CLI unghiulară a creat multe fișiere pe care le-ați creat în versiunile anterioare, adică unghiular V1 ..

Lansați aplicația dvs.

pentru a vizualiza aplicația dvs. în browser , navigați la dosarul proiectului și rulați ng -serve. Această comandă este utilizată pentru a servi o aplicație la nivel local.

cd bucketlist ng -serve

acum, du-te la http: // localhost: 4200 / pentru a vedea cererea dvs. în acțiune . Toate modificările pe care le faceți la aplicația dvs. sunt reîncărcate în browserul dvs., deci nu trebuie să continuați să rulați aplicația.

implementare

acum că am creat aplicația noastră, este timp pentru ao implementa. Vom urma următorii pași:

  • Creați un proiect de foc
  • Instalați unelte de foc Firebase
  • Construct pentru producție
  • Implementați Firebase

Crearea unei aplicații de foc de foc

Pentru a începe, trebuie să aveți un cont de foc de cont. Dacă nu aveți unul, creați un cont gratuit acum.

pe tabloul de bord Firebase, creați un nou proiect, după cum se arată mai jos. Îi poți da pur și simplu același nume ca și aplicația dvs. unghiulară. Acest lucru va facilita lucrurile, mai ales dacă aveți o mulțime de proiecte pe tabloul de bord Firebase ..

Instalați instrumentele de control al focului de foc

Firebase facilitează configurația cazăriei, deoarece vă oferă toți pașii care urmează să urmeze. Pentru a instala instrumentele de control al focului, pur și simplu rulați:

npm install -g firebase-tools

Notă: Trebuie să fiți în directorul proiectului dvs. când executați această comandă astfel încât instrumentele instalate În proiectul dvs.

Autentificați Firebase

Conectați-vă la FireBase.

connexion firebase

Răspuns da la promptul interactiv.

? Autoriser Firebase à collecter des informations anonymes sur l’utilisation de la CLI et les rapports d’erreur? Oui Visitez cette URL sur n'importe quel appareil pour vous connecter: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20penid%20+ .googleapis.com% 2Fauth% 2Fcloudplatformprojects.readonly% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% %Fauth% 2%% 2%% 3%%%%%%%%%%% également aussi % 3A% 2F% 2Flocalhost% 3A9005 En attente d'authentification… 

Următorul, Instrumentul FireBase CLI va deschide un browser în care vi se va cere să permiteți autentificarea Firebase prin Google Mail ..

Dacă autentificarea reușește, în browserul dvs. apare următoarea interfață la http: // localhost: 9005 //// p>

Inițializați proiectul

Următorul pas este să inițializați proiectul dvs. de pompieri. Acest lucru va lega aplicația dvs. unghiulară locală la aplicația Firebase pe care tocmai ați creat-o. Pentru aceasta, pur și simplu lansare:

firebase init 

Alegeți găzduirea ca o caracteristică pe care doriți să o configurați pentru proiect, deoarece suntem interesați numai de cazare de foc de foc ..

######## #### ######## ######## ####### ### ###### ##### ### ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ### ##### ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## # ######## ## ## ###### ######## Vous êtes sur le point d'initialiser une base Firebase projet dans ce répertoire: / home / vaatiesther / Desktop / bucketlist? Quelles fonctionnalités CLI de Firebase souhaitez-vous configurer pour ce dossier? Appuyez sur Espace pour sélectionner les fonctionnalités, puis sur Entrée pour confirmer vos choix. Base de données: déployer Firebas e Règles de base de données en temps réel, hébergement: configurer et déployer des sites d'hébergement Firebase === Configuration du projet Associons tout d'abord ce répertoire de projet à un projet Firebase. Vous pouvez créer plusieurs alias de projet en exécutant firebase use --add, mais pour l'instant, nous allons simplement configurer un projet par défaut. ? Sélectionnez un projet Firebase par défaut pour ce répertoire: Bucketlist (bucketlist-7 2e57) === Configuration de la base de données Les règles de base de données Firebase Realtime vous permettent de définir la manière dont vos données doivent être structurées et le moment où elles peuvent être lues et écrites. ? Quel fichier doit être utilisé pour les règles de base de données? database.rules.json ✔ Les règles de base de données pour bucketlist-72e57 ont été téléchargées sur database.rules.json. Les futures modifications apportées à database.rules.json mettront à jour les règles de base de données lorsque vous exécuterez firebase deploy. === Configuration de l'hébergement Votre répertoire public est le dossier (par rapport à votre répertoire de projet) qui contiendra les ressources d'hébergement à télécharger avec firebase deploy. Si vous avez un processus de génération pour vos actifs, utilisez le répertoire de sortie de votre génération. ? Que voulez-vous utiliser comme répertoire public? Publique ? Configurer comme une application d'une seule page (réécrire toutes les URL dans /index.html)? Oui ✔ Écrit public / index.html i Écriture des informations de configuration sur firebase.json… i Écriture des informations de projet sur .firebaserc… ✔ Initialisation de Firebase terminée!

Această comandă va crea două fișiere:

  • .Firebaser
  • . Firebase .json

Aceste două fișiere conțin configurații de firebase și informații importante despre aplicația dvs.

Fișierul JSON ar trebui să arate astfel:

"hosting": "public": "public", "ignorer": , "réécrit": [ "source": "**", "destination": "/index.html" 

Clădire pentru producție

Unghiular CLI oferă comanda ng build --prod care lansează o construcție de producție. Această comandă creează un dosar dist care conține toate fișierele pentru a servi aplicația. Acest proces este important pentru a face aplicația mai ușoară și mai rapidă la încărcarea paginilor web. Pentru a face acest lucru, publicați doar:

ng build --prod

Implementați aplicația!

Dacă ați urmat toate pașii până la prezent, localnicii noștri Aplicația unghiulară este acum legată de FireBase și puteți transfera cu ușurință fișierele ca și cu Git. Pur și simplu rulați comanda firebase deploy pentru a implementa aplicația dvs.

firebase deploy === Déploiement sur 'bucketlist-72e57'… déploiement de la base de données, hébergement de la base de données: vérification de la syntaxe des règles… ✔ base de données: syntaxe des règles pour la base de données bucketlist-72e57 est valide i hébergement: préparation du répertoire public pour le téléchargement… ✔ hébergement: 1 fichiers chargés avec succès dans la base de données: libération des règles… ✔ base de données: règles de la base de données bucketlist-72e57 publiées avec succès ✔ déploiement complet! 

Aplicația dvs. este acum implementată și o puteți vedea prin lansarea următoarei comenzi.

firebase open hosting: site

Concluzie

După cum ați văzut, este foarte ușor să începeți cu FireBase, deoarece este nevoie de foarte puțină configurație pentru a găzdui aplicația dvs. Și este nevoie de mult mai puțin timp decât înființarea de cazare tradițională! Unghiul este un cadru excelent pentru dezvoltarea aplicațiilor. A evoluat într-adevăr de-a lungul anilor și fiecare actualizare este însoțită de caracteristici mai avansate și de remedii de bug-uri ..

Pentru mai multe informații, vizitați site-ul oficial unghiular și focus și explorați posibilitățile. Utilizarea în comun a acestor două tehnologii ..

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *