Share
Benvenuti alla terza parte dell'autenticazione utente con Titanium. Titanium è un cross-compiler open source che ti permette di scrivere applicazioni per iPhone e Android (presto anche per il blackberry!) Usando Javascript. Useremo PHP come linguaggio di codice lato server e il mio database sarà MySQL. Per questo esempio, sto usando MAMP per svilupparlo localmente. Nella terza parte, copriremo l'aggiunta di una nuova finestra e il passaggio dei risultati del database ad esso quando un utente accede utilizzando eventi personalizzati. Questa nuova finestra rappresenterà la tua interfaccia "connesso". Se non l'hai già letto, ti consiglio vivamente di iniziare con la prima parte.
Nella prima parte abbiamo creato il database e aggiunto un utente. Abbiamo quindi creato la nostra interfaccia di accesso creando un gruppo di schede, una scheda e una finestra. Abbiamo quindi dato il nostro pulsante di accesso alcune azioni. Il nostro file PHP ha interrogato il nostro database e dopo un login riuscito ha restituito il nostro nome e la nostra email. Se l'accesso non è riuscito, abbiamo restituito una stringa indicando semplicemente nome utente e / o password non validi. Nella parte 2 abbiamo creato una nuova scheda sulla schermata principale. Questa scheda ha cambiato la nostra vista in una vista "crea account" che ha permesso a un utente di registrarsi. Nella terza parte creeremo una nuova finestra quando l'utente si collega e passa alcuni dei dati dell'utente. Questa finestra è in definitiva la tua interfaccia "connesso".
Consente di aprire login.js e scorrere fino al nostro metodo loginReq.onload (). Consente di eliminare l'avviso attualmente disponibile al momento dell'accesso e sostituirlo con questo:
Accentsconagua
loginReq.onload = function () var json = this.responseText; var response = JSON.parse (json); if (response.logged == true) username.blur (); password.blur (); Ti.App.fireEvent ('grantEntrance', nome: response.name, email: response.email); win.close (); else alert (response.message); ; Quindi quello che abbiamo fatto qui è stato sostituire il nostro avviso con un evento che "spariamo". Attiviamo un evento chiamato "grantEntrance" poiché l'accesso ha avuto esito positivo. Stiamo anche passando due oggetti: nome ed email. Abbiamo impostato l'oggetto nome uguale a qualunque sia stato l'input dell'utente quando hanno creato il loro account (queste informazioni sono restituite dal nostro file post_auth.php). Lo stesso vale per la loro e-mail. Abbiamo anche chiamato il metodo blur () per rimuovere il cursore da uno dei campi di testo. Finalmente, chiudiamo la finestra di login.
Non compilare ancora solo perché non ti accorgerai di nulla se lo fai. Per procedere, dobbiamo aggiungere un listener di eventi. Lo faremo nei prossimi due passaggi.
Apri app.js. Vogliamo creare una nuova finestra e una nuova scheda. Nelle esercitazioni precedenti abbiamo aggiunto subito le schede usando il metodo addTab (). In questo caso, non lo aggiungeremo subito. Ho chiamato la mia finestra "Logged In" "main". Aggiungi semplicemente la nuova finestra e la scheda sotto la nostra linea tabgroup in app.js:
Titanium.UI.setBackgroundColor ( '# fff'); var tabGroup = Titanium.UI.createTabGroup (); var main = Titanium.UI.createWindow (); var mainTab = Titanium.UI.createTab (); var login = Titanium.UI.createWindow (title: 'User Authentication Demo', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", finestra: login); var account = Titanium.UI.createWindow (title: 'New Account', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'New Account', window: account); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
La tua app.js dovrebbe ora riflettere quanto sopra. Ancora, non compilare come non si vede nulla. Successivamente compileremo, promettiamo!
In login.js abbiamo "licenziato" il nostro evento "grantEntrance". Vogliamo creare un listener di eventi per ascoltare quell'evento. Aggiungi questo alla fine del nostro file app.js:
Ti.App.addEventListener ('grantEntrance', function (event) main.tabBarHidden = true; main.title = 'Welcome' + event.name; main.url = 'main_windows / main.js'; main.name = event .name; main.email = event.email; mainTab.window = main; tabGroup.addTab (mainTab); tabGroup.removeTab (loginTab); tabGroup.removeTab (accountTab);); Quindi, a questo punto, imposteremo alcune proprietà sulla nostra finestra 'principale'. Innanzitutto, nascondi la barra delle schede in basso poiché non abbiamo più bisogno della scheda di accesso e account. Abbiamo impostato il titolo in alto per dire "Welcome Ronnie Swietek" (o qualsiasi altro nome che hai inserito quando hai creato l'account). Impostiamo la proprietà URL per utilizzare il file main.js. Creiamo due proprietà denominate nome ed e-mail in modo che possiamo chiamarle in qualsiasi momento nella nostra interfaccia "Connesso". Abbiamo impostato la proprietà della finestra mainTab sulla nostra finestra, main. Infine, aggiungiamo finalmente la nostra scheda e rimuoviamo il loginTab e l'accountTab poiché non sono più necessari.
Prima di compilare, assicurati di aver creato un file main.js e di salvarlo nella cartella main_windows. Ora puoi andare avanti e compilare. Quando compili e accedi, dovresti vedere una schermata vuota ad eccezione del titolo in alto che dovrebbe contenere il tuo nome.
Quando accedi, dovresti vedere l'oggetto che abbiamo creato visualizzato nella console in titanio. La mia console in titanio dice questo quando accedo:
email = "[email protected]"; name = "Ronnie Swietek";
Apri main.js. In questo momento dovrebbe essere vuoto, ma andare avanti e inserire, salvare e compilare:
var win = Titanium.UI.currentWindow; var msg = Titanium.UI.createLabel (text: "Accesso effettuato con successo. Al momento del login abbiamo inviato il tuo indirizzo email e il tuo nome. Puoi passare tutti i tipi di dati semplicemente creando oggetti sulla tua finestra. \ n \ La tua email è: \ n "+ win.email +" \ n \ n il tuo nome è: \ n "+ win.name, in alto: 10, a sinistra: 10, larghezza: 300, altezza:" auto "); win.add (msg);
Quando accedi, dovresti vedere il testo che abbiamo impostato sulla nostra etichetta. Abbiamo anche avuto accesso agli oggetti che abbiamo creato tramite "win.objectName". Nel nostro caso, win.name e win.email
Nella parte 3 di questa serie abbiamo appreso gli eventi personalizzati e il passaggio dei dati a Windows. Le possibilità sono infinite a questo punto. Spetta a te creare qualcosa di eccezionale con le tue conoscenze di autenticazione degli utenti. Spero davvero che ti sia piaciuto prendere questi tutorial tanto quanto mi è piaciuto farli. Ci vediamo di nuovo in futuro!
