Share
Benvenuti alla parte 2 delle nostre 3 serie di parti sull'autenticazione utente con Titanium Mobile. Titanium è un cross-converter open source che ti permette di scrivere applicazioni per iPhone e Android (presto anche per il blackberry!) Usando Javascript. Non è richiesto nessun obiettivo-C! Useremo PHP come codice lato server e il mio database sarà MySQL. Per questo esempio, sto usando MAMP per svilupparlo localmente. Consiglio vivamente di seguire la prima parte di questa serie prima di continuare, se non l'hai già fatto. Tuttavia, puoi in alternativa scaricare il sorgente dalla parte 1, creare la tabella del database e configurare le connessioni del database PHP da solo prima di saltare a questo tutorial se desideri.
Nella parte 1, abbiamo impostato il database per la nostra app 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, una volta effettuato il login, ha restituito il nostro nome e la nostra email. Se l'autenticazione di accesso non è riuscita, abbiamo restituito una stringa che indica semplicemente nome utente e / o password non validi. Nella parte 2, creeremo una nuova scheda sulla schermata principale che consente a un utente di creare un nuovo account e quindi effettuare il login.
Apri app.js e crea la finestra e la scheda dell'account sotto lo script della scheda di accesso. Nota anche che ho rimosso la proprietà tabBarHidden nella finestra di login che abbiamo fatto nella parte 1. La rimozione di tale proprietà ci consente di vedere le schede nella parte inferiore del telefono. Abbiamo anche aggiunto l'accountTab al gruppo di schede.
Titanium.UI.setBackgroundColor ( '# fff'); var tabGroup = Titanium.UI.createTabGroup (); 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 proprietà URL nella variabile account dice al compilatore di usare account.js come nostra finestra. Se salti questa parte, il titanio genererà un brutto errore rosso nell'emulatore. Dopo aver compilato con successo, lo schermo dovrebbe apparire come questo:
Tradizionalmente, si vedrebbe la barra delle schede in basso con le icone. Bene, con Titanium, anche questo è semplicissimo! Basta usare la proprietà dell'icona in ogni scheda. Per esempio:
var accountTab = Titanium.UI.createTab (title: 'New Account', icona: 'images / account_icon.png', window: account);
Crea un nuovo file e chiamalo account.js e salvalo nella cartella Resources / main_windows. Questo è lo stesso posto in cui abbiamo salvato il nostro file login.js nella parte 1.
var win = Titanium.UI.currentWindow; / * * Interfaccia * / var scrollView = Titanium.UI.createScrollView (contentWidth: 'auto', contentHeight: 'auto', in alto: 0, showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false); win.add (ScrollView); var nomeutente = Titanium.UI.createTextField (color: '# 336699', inizio: 10, sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Nome utente', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (nome utente); var password1 = Titanium.UI.createTextField (color: '# 336699', inizio: 60, a sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Password', passwordMask: true, keyboardType: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (password1); var password2 = Titanium.UI.createTextField (color: '# 336699', inizio: 110, a sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Password Again', passwordMask: true, keyboardType: Titanium.UI. KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (password2); var names = Titanium.UI.createTextField (color: '# 336699', inizio: 160, a sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Nome', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (nomi); var email = Titanium.UI.createTextField (color: '# 336699', inizio: 210, a sinistra: 10, larghezza: 300, altezza: 40, hintText: 'email', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (e-mail); var createBtn = Titanium.UI.createButton (title: 'Crea account', in alto: 260, larghezza: 130, altezza: 35, borderRadius: 1, tipo di carattere: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14); scrollView.add (createBtn);
Ok, questo blocco di codice dall'aspetto mediocre è davvero super facile da capire, eppure fa così tanto per noi. Solo guardando i nostri nomi variabili, è abbastanza facile decifrare cosa sta succedendo qui. Abbiamo creato 5 campi:
Abbiamo anche creato il nostro pulsante 'crea account'.
Noterai anche la var in alto chiamata scrollView. L'aggiunta di oggetti a una vista di scorrimento consente di scorrere la vista in modo che quando la tastiera scorre, non si sovrapponga ai nostri campi di testo.
Vai avanti e compilare. Dopo aver compilato con successo, lo schermo dovrebbe apparire come questo dopo essere passato alla scheda dell'account. Il pulsante Crea account non fa ancora nulla, ma gioca con la selezione dei campi di testo e guarda come funziona la visualizzazione a scorrimento.
Ora dobbiamo creare un listener di eventi sul nostro pulsante, quindi quando fanno clic su "crea account", invia i dati e anche alcune convalide.
Accentsconagua
var testresults; function checkemail (emailAddress) var str = emailAddress; var filter = / ^ ([A-Za-z0-9 _ \ - \.]) + \ @ ([A-Za-z0-9 _ \ - \.]) + \. ([A-Za-z] 2,4) $ /; if (filter.test (str)) testresults = true; else testresults = false; return (testresults); ; var createReq = Titanium.Network.createHTTPClient (); createReq.onload = function () if (this.responseText == "Insert failed" || this.responseText == "Quel nome utente o email esiste già)) createBtn.enabled = true; createBtn.opacity = 1; alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', messaggio: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('click', function (e) win.tabGroup.setActiveTab (0);); ; createBtn.addEventListener ('click', function (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Le tue password non corrispondono"); else if (! checkemail (email.value)) alert ("Inserisci un indirizzo email valido"); else alert ("Tutto sembra buono, quindi invia i dati"); else avviso ("Tutti i campi sono obbligatori");); Partendo dall'alto, il metodo checkEmail () è una semplice funzione che utilizza l'espressione regolare per verificare se l'e-mail che l'utente immette è il formato corretto. Abbiamo creato un nuovo HTTPClient che verrà utilizzato per inviare i nostri dati al nostro file PHP.
Nell'evento click, prima controlliamo se alcuni campi sono vuoti. Se lo sono, avvisali dicendo "Tutti i campi sono obbligatori". Il prossimo controllo è vedere se i due campi password sono gli stessi. Se non lo sono, avvisali dicendo "Le tue password non corrispondono". Il nostro controllo finale è per verificare se l'indirizzo e-mail è valido. Se non lo è, avvisali dicendo "Inserisci un indirizzo email valido".
Una volta che il modulo è stato convalidato, avviserà "Tutto sembra a posto, quindi invia i dati". Vai avanti e compila e prova a inviare il modulo senza valori, password non corrispondenti e un'email non valida. Dopo aver inviato un modulo valido, visualizzerai l'avviso seguente:
Vai avanti ed elimina la riga "Tutto sembra buono, quindi invia i dati". Dobbiamo sostituirlo con i metodi open () e send ().
createBtn.addEventListener ('click', function (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Le tue password non corrispondono"); else if (! checkemail (email.value)) alert ("Inserisci un indirizzo email valido"); else createBtn.enabled = false; createBtn.opacity = 0.3; createReq.open ("POST", "http: // localhost: 8888 / post_register.php"); var params = nome utente: nomeutente.valore, password: Ti .Utils.md5HexDigest (password1.value), nomi: nomi.valore, email: email.value; createReq.send (params); else avviso ("Tutti i campi sono obbligatori");); Quindi, sostituendo quella linea, disabilitiamo il nostro pulsante 'crea account' e impostiamo l'opacità al 30%. Quindi prendiamo il HTTPClient che abbiamo creato e chiamiamo il metodo open () su di esso. Sta indicando un file PHP che faremo nel prossimo passo. Quindi creiamo un oggetto params per contenere tutti i dati del modulo. Si noti che sto eseguendo una crittografia MD5 sul campo della password. Il passaggio finale è chiamare il metodo send () e passarlo al nostro oggetto params.
Questo file sarà il file PHP a cui la nostra app parla quando si preme il pulsante 'crea account'. Il nome deve riflettere il nome nel nostro metodo createReq.open () nel passaggio precedente. Ho chiamato il mio post_register.php. Sostituisci le mie impostazioni mysql_connect e mysql_select_db con le tue impostazioni di connessione.
0) echo "Questo nome utente o email esiste già"; else $ insert = "INSERISCI NEGLI utenti (nome utente, password, nome, email) VALORI ('". $ username. "', '". $ password. "', '". $ nomi. "', '" . $ email. "')"; $ query = mysql_query ($ insert); if ($ query) echo "Grazie per esserti registrato. Ora puoi effettuare il login."; else echo "Insert failed"; ?> Quindi qui ci colleghiamo al nostro database e selezioniamo il database chiamato 'test' (il nome cambierà a seconda del nome del database, ovviamente). Puoi vedere le nostre variabili $ _POST riflettere i nomi che abbiamo impostato nell'oggetto params nel nostro ultimo passaggio. Quella parte è cruciale. Vediamo quindi se il nome utente o l'indirizzo e-mail che hanno inserito esiste già. In caso contrario, inserire i dati nel database. Ok, non compilare ancora! Faremo il prossimo passo, lo prometto.
Va bene su account.js. Lascia fare qualche trattamento dati per quando il nostro PHP restituisce qualcosa. Inserisci questo codice sotto var createReq e sopra il nostro evento click:
createReq.onload = function () if (this.responseText == "Insert failed" || this.responseText == "Quel nome utente o email esiste già") win.remove (overlay); alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', messaggio: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('click', function (e) win.tabGroup.setActiveTab (0);); ; Quindi, quando PHP restituisce qualcosa, se "this.responseText" è uguale a "Insert failed" OPPURE "Quel nome utente o email esiste già," rimuovi la finestra di overlay (in modo che possano reinserire le informazioni e inviare) e avvisali con "questo .responseText'.
Al termine della registrazione, avvisali con "Grazie per la registrazione. Ora puoi effettuare il login" (definito nel nostro file post_register.php). Aggiungiamo anche un listener di eventi al pulsante OK, quindi quando si fa clic su di esso, automaticamente ci porta alla schermata di accesso.
Se l'avviso che ritorna è un messaggio confuso su mysql_connect e / o accesso negato, allora devi controllare le tue impostazioni di connessione mysql in PHP.
Nella parte 2 di questa serie, abbiamo aggiunto finestre a schede che è possibile passare da una all'altra. Abbiamo quindi creato un nuovo modulo in cui un utente può inserire dati e inviarlo. Al momento dell'invio abbiamo fatto qualche convalida del modulo e poi il nostro PHP ha restituito un messaggio in base a se i dati erano in uso e, in caso contrario, l'abbiamo inserito con successo. Spero ti sia piaciuto leggere questo tutorial in mini serie tanto quanto mi è piaciuto scriverlo!
