Starter-Vorlage – Ionic Framework-Anwendung mit Parse-Integration

Überblick

Diese Beispielanwendung wird als Starter bereitgestellt, um Ihre zu erhalten Ionisches Gerüst und Parse-Anwendung problemlos einsatzbereit. Der größte Aufwand bei diesen Anwendungen besteht darin, die Anmeldung und Kontoerstellung herauszufinden … Diese Vorlage löst das für Sie mit einem Muster, das dann für eine vollständige Anwendung verwendet werden kann; Dies ist kein Wegwerf-Tutorial.

Wir haben die Vorlagen, Controller und Dienste in einem Format getrennt, das für Ihre endgültige Lösung nachhaltig ist.

Parse-Konfiguration in der Starter-App einrichten

Siehe die Website Parse.com für Einstieg.

Die kritischen Informationen, die nach der Konfiguration Ihrer Anwendung benötigt werden, sind die applicationId und die javascriptKey die für den Konfigurationsabschnitt der ionischen Anwendung benötigt werden

Konfigurationsbildschirm für Anwendung parsen

Legen Sie mit den Werten aus der Parse-Konsole die Eigenschaften im unten gezeigten Abschnitt der app.js-Datei fest

    .value('ParseConfiguration', {
        applicationId: "SET-THIS-USING-PARSE-APPLICATION-ID",
        javascriptKey: "SET-THIS-USING-PARSE-JAVASCRIPT-KEY"
    })
}

Starter-App-Projektstruktur

Die Starter-App ist eine auf zwei Registerkarten basierende App mit einem Anmeldebildschirm und einem Kontoerstellungsbildschirm. Die Anwendung erstellt Parse-Benutzer für Sie, nachdem sie ordnungsgemäß konfiguriert wurde.

Die erste Registerkarte ist als Listenansicht eingerichtet, in der ein Detailbildschirm angezeigt wird, wenn ein Benutzer auf ein Element in der Liste klickt. Die ui-router-Routen sind bereits für dieses Anwendungsverhalten konfiguriert.

Listenansicht

https://s3.amazonaws.com/f.cl.ly/items/2O3N3c1W1O3m1O3n2Z0R/Image%202015-03-22%20at%2010.26.29%20PM.png

Detailansicht

https://s3.amazonaws.com/f.cl.ly/items/0l3E2j2q3w1G0v2y3E2y/Image%202015-03-22%20at%2010.26.37%20PM.png

Die zweite Registerkarte in diesem Setup ist ein “Einstellungsbildschirm”, der das Benutzerobjekt von Parse weitergibt, wenn der Benutzer die Registerkarte auswählt.

Anwendungseinstellungsansicht

https://s3.amazonaws.com/f.cl.ly/items/3D081H1416050g0d352e/Image%202015-03-22%20at%2010.30.08%20PM.png

Die Dateistruktur ist so, dass alle benutzerspezifischen Funktionen enthalten sind www/js/user/controllers.js für Controller u www/js/user/services.js für Dienstleistungen & Fabriken. Die zugehörigen Ansichten sind in www/templates/user/login.html und www/templates/user/signup.html.

UI-Router und Resolve

Wir stellen sicher, dass der Benutzer bei der Anwendung angemeldet ist, indem wir den abstrakten Zustand verwenden tabverwendet dieser Zustand resolveFunktionalität ab ui-router um festzustellen, ob das Parse-Benutzerobjekt durch einen Aufruf verfügbar ist UserService.init(). Wenn das Promise erfolgreich aufgelöst wird, haben wir ein Benutzerobjekt und die Anwendung kann fortfahren.

Klicken Sie hier, um weitere Informationen zu ui-router, Auflösung und abstrakten Zuständen zu erhalten

// setup an abstract state for the tabs directive, check for a user
// object here is the resolve, if there is no user then redirect the
// user back to login state on the changeStateError
.state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html",
    resolve: {
        user: function (UserService) {
            var value = UserService.init();
            return value;
        }
    }
})

Wenn die UserService.init() Die Funktion kann nicht erfolgreich aufgelöst werden, sie gibt den Fehler zurück noUser. Wann immer die ui-router nicht richtig leitet, wird ein Fehler generiert noUser.

Wir hören auf die $stateChangeError und ob es das tatsächlich ist noUser Fehler, dann leiten wir mit dem zum Anmeldebildschirm weiter app-login Staat von ui-router.

Seit der tab Zustand ist abstract alle untergeordneten Zustände von müssen auch den übergeordneten Zustand erfolgreich aufgelöst haben, dies stellt sicher, dass der Benutzer angemeldet ist, bevor irgendein Zustand der Anwendung ausgeführt wird

$rootScope.$on('$stateChangeError',
   function (event, toState, toParams, fromState, fromParams, error) {

     var errorMsg = error && (error.debug || error.message || error);
     console.log('$stateChangeError ' + errorMsg);

     // if the error is "noUser" the go to login state
     if (error && error.error === "noUser") {
        $state.go('app-login', {});
     }
});

Parse-Dienst im Ionic Framework

Es war mir wichtig, die Parse-Funktionalität nicht wie so viele andere Tutorials direkt in den Controller zu integrieren, da dies keine bewährte Methode ist. Aber sobald Sie in den Dienst einsteigen, werden Sie feststellen, dass der Dienst nur eine Hülle um das Spezifische ist Javascript-API parsen Anrufe.

/**
 * www/js/user/services.js
 *
 * Create a user in Parse, returns Promise
 *
 * @param _userParams
 * @returns {Promise}
 */
createUser: function (_userParams) {
    var user = new Parse.User();
    user.set("username", _userParams.email);
    user.set("password", _userParams.password);
    user.set("email", _userParams.email);
    user.set("first_name", _userParams.first_name);
    user.set("last_name", _userParams.last_name);

    // should return a promise
    return user.signUp(null, {});
},

Das Anmelden eines Benutzers ist noch einfacher

/**
 * www/js/user/services.js
 * 
 * @param _user
 * @param _password
 * @returns {Promise}
 */
login: function (_user, _password) {
    return Parse.User.logIn(_user, _password);
},

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *