Статьи

Используйте Parse Core в ваших мобильных приложениях Ionic Framework

Июль 22, 2017

Настало время поговорить о другом варианте облачного хранения данных для  Ionic Framework . Ранее я показал, как использовать  API-интерфейс Dropbox Datastore ,  Firebase и  PouchDB  для удаленного хранения информации.

На этот раз я собираюсь обсудить, как хранить данные с помощью  Parse , компании Facebook, и получать данные из облака.

Давайте начнем с создания нового проекта Ionic для работы с:

ionic start ParseProject blank
cd ParseProject
ionic platform add android
ionic platform add ios

Помните, что если вы не используете Mac, вы не можете добавлять и собирать для платформы iOS.

Чтобы использовать Parse Core в нашем проекте, нам нужно создать приложение на панели инструментов Parse и  загрузить JavaScript SDK . На данный момент, я собираюсь предположить, что вы сделали оба.

Сохраните файл parse-1.3.5.min.js (или любой последний) в каталоге www / js в корне вашего проекта Ionic Framework. Внутри вашего файла www / index.html обязательно включите библиотеку Parse между вашими  <head> тегами следующим образом:

<script src="js/parse-1.3.5.min.js"></script>

Помните, ваша версия Parse может отличаться от моей.

На данный момент я не смог найти хороших  упаковщиков AngularJS  , поэтому мы собираемся пойти в старую школу с простым JavaScript, чтобы выполнить работу.

Внутри  $ionicPlatform.ready() метода вашего файла www / js / app.js добавьте следующую строку кода:

Parse.initialize("APP_ID_HERE", "JAVASCRIPT_ID_HERE");

Parse Core теперь можно использовать на протяжении всего проекта. Создайте новый контроллер в файле app.js и сделайте так, чтобы он выглядел примерно так:

example.controller("ExampleController", function($scope) {

    $scope.savePerson = function(firstname, lastname) {
        var PeopleObject = Parse.Object.extend("PeopleObject");
        var person = new PeopleObject();
        person.set("firstname", firstname);
        person.set("lastname", lastname);
        person.save(null, {});
    };

});

Как видно из приведенного выше кода, мы будем создавать новый объект person и сохранять в нем имя и фамилию. Эта информация сохраняется непосредственно в облаке Parse.

Прежде чем мы начнем играть с нашим приложением, давайте добавим еще одну функцию в контроллер. На этот раз давайте добавим,  $scope.getPeople кто будет отвечать за выбор данных из Parse:

$scope.getPeople = function(params) {
    var PeopleObject = Parse.Object.extend("PeopleObject");
    var query = new Parse.Query(PeopleObject);
    if(params !== undefined) {
        if(params.lastname !== undefined) {
            query.equalTo("lastname", params.lastname);
        }
        if(params.firstname !== undefined) {
            query.equalTo("firstname", params.lastname);
        }
    }
    query.find({
        success: function(results) {
            alert("Successfully retrieved " + results.length + " people!");
            for (var i = 0; i < results.length; i++) {
                var object = results[i];
                console.log(object.id + ' - ' + object.get("firstname") + " " + object.get("lastname"));
            }
        },
        error: function(error) {
            alert("Error: " + error.code + " " + error.message);
        }
    });
};

Большая часть этого была взята непосредственно из  официальной документации Parse . Вы можете видеть, что мы готовим нашу  PeopleObject и проверяем, были ли переданы какие-либо параметры в функцию. Если параметры были переданы, мы будем использовать их как условия запроса. Если вы знакомы с SQL, это больше похоже на  where предложение в запросе. Затем мы собираемся найти все записи на основе наших критериев и распечатать их на консоли.

Теперь давайте сделаем простой интерфейс, чтобы пойти с этим. В вашем файле www / index.html добавьте следующий код к своим  <ion-content>тегам при их замене:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="savePerson('Nic', 'Raboy')">Save Nic Raboy</button>
    <button class="button" ng-click="savePerson('Maria', 'Campos')">Save Maria Campos</button>
    <button class="button" ng-click="savePerson('Bruce', 'Raboy')">Save Bruce Raboy</button>
    <button class="button" ng-click="getPeople()">Print All People</button>
    <button class="button" ng-click="getPeople({lastname: 'Raboy'})">Print All Raboys</button>
</ion-content>

Обратите внимание, что у нас нет большой глубины нашего дизайна. У нас просто есть три кнопки для вставки данных в Parse и две кнопки для запроса данных из Parse.

В Parse JavaScript SDK есть значительно больше, например, хранение файлов или интеграция с Facebook. Я хотел строго придерживаться хранения данных, чтобы дополнить мои другие учебники по этой теме. Всегда приятно иметь варианты при принятии решения о хранении данных.

Видео-версию этой статьи можно увидеть ниже.

36
Share: