To do app integrata con Firebase



Partenza

Ecco un esempio di app: todo integrata con un data base firebase , scaricabile
La app e' stata creata con il comando CLI:

  • Ionic start impegni blank

Index.html nella cartella www

In questo file viene inserito il codice:

<input type="text" placeholder="entra i tuoi impegni" ng-model="post.message>
<button class="button button-small" ng-click="addPost()">
Aggiungi
</button>

.........

<ion-list>
<ion-item ng-repeat="post in posts">
{{post.message}}
<ion-option-button class="button-assertive" ng-click="delete($index)">
cancella
</ion-option-button>

Dove:

  • ng-app: campo di applicazione della app
  • ng-controller: campo di applicazione del controller
  • ng-model: e' la direttiva angular per catturare il valore dell’input post.message
  • ng-repeat: per iterare tutti gli elementi presenti nell’array posts
  • {{post.message}}: istruzione angular per visualizzare il contenuto all’interno di post (post.message)

  • ion-item , ion-list : equivalente del comando ul , li in html
  • ion-option-button: bottone per cancellare il post

Nel codice sono state inserite 2 funzioni java script, che verranno definite nel controller del file app.js:

  • addPost(): funzione che serve ad aggiungere al data base il post scritto nell’ input
  • delete($index): funzione che al click cancella il post che viene identificato con $index

Firebase

Inizializzazione

Firebase e' un servizio on line che permette di salvare e sincronizzare i dati elaborati da applicazioni web e mobile. Si tratta di un database NoSQL e si accede con account google .
Dopo aver effettuato il login, si accede alla CONSOLE e si CREA UN PROGETTO .



Andando in DATABASE > Inizia si puo' seguire cosa succede nel database.

Per inserirlo nella app per IONIC occorre utilizzare il pulsante, Aggiungi Firebase all'applicazione web




Firebase fornira’ del codice da utilizzare nella app di Ionic :

var config = {
apiKey: ’.........’,
authDomain: ” — ”,
databaseURL: "..........",
storageBucket: ".........",
messagingSenderId: "........"
};
firebase.initializeApp(config);

Dove le chiavi sono quelle personalizzate di Firebase.
da non dimenticare che nel file index.html dovranno essere indicati:

                   
                         

<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js">< /script >
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js" ></script>

Da notare angularfire.min.js studiato da Angular per questo componente .

Continua a leggere: Integrazione di Firebase nella APP