{"id":860,"date":"2016-03-30T16:31:50","date_gmt":"2016-03-30T16:31:50","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=860"},"modified":"2016-03-30T16:31:50","modified_gmt":"2016-03-30T16:31:50","slug":"apps-with-ionic-and-stamplay","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay","title":{"rendered":"Cross-Platform Apps with Ionic and Stamplay"},"content":{"rendered":"

Ionic makes it easier to build a multi-platform mobile app using modern web technologies. Stamplay allows developers to use APIs as building blocks to to rapidly construct scalable, maintainable backend applications.<\/p>\n

By using Stamplay and Ionic together, you can focus on building a unique app, instead of spending time scaling architecture or implementing the same feature two or three times across different platforms.<\/p>\n

To help you get started with Ionic and Stamplay, we\u2019ve put together a starter kit to jumpstart your mobile app development. In this article, we’ll show you how to use the code in this starter kit to build a cross-platform personal to-do app with user registration.
\n<\/p>\n

\"cover\"

What is Stamplay?<\/h3>\n

Stamplay is a Backend as a service that allows you to integrate with third-party APIs using a web-based GUI that allows you to create server side logic and workflows without needing to code anything. Stamplay integrates with many services including Twillio, Slack, Firebase, and Stripe.<\/p>\n

\"Stamplay

Getting Started with Ionic and Stamplay: Set up the Starter Project<\/h3>\n

First, clone Ionic’s GitHub repository or download from GitHub<\/a>:<\/p>\n

git clone https:\/\/github.com\/Stamplay\/stamplay-ionic-starter.git\n<\/code><\/pre>\n
Switch to the new directory:<\/p>\n
cd stamplay-ionic-starter\n<\/code><\/pre>\n
Install Ionic SDK through NPM:<\/p>\n
npm install -g ionic\n<\/code><\/pre>\n
Install Stamplay CLI through NPM<\/p>\n
npm install -g stamplay-cli\n<\/code><\/pre>\n
Install Gulp through NPM<\/p>\n
npm install -g gulp\n<\/code><\/pre>\n
Install dependencies through NPM:<\/p>\n
npm install && gulp install\n<\/code><\/pre>\n
Add\/Update Ionic library files<\/p>\n
ionic lib update\n<\/code><\/pre>\n
Setup Stamplay App<\/h3>\n
To continue, you will need to create a Stamplay account<\/a>. After you have done this, you’ll want to login to the Stamplay Editor<\/a> and create an app.<\/p>\n
\"Create
Back on your machine, you’ll want to initialize Stamplay and enter your Stamplay AppId and APIKey when prompted, which can be found on the Stamplay Editor:<\/p>\n
stamplay init\n<\/code><\/pre>\n
\"stamplay
\"stamplay
Inside www\/index.html<\/code>, we will update Stamplay.init("YOUR APP ID")<\/code> to include our APP ID<\/code>.<\/p>\n
<script>\n  Stamplay.init("test-ionic-app");\n<\/script>\n<\/code><\/pre>\n
Inside the Stamplay Editor, add a new object schema called “task” with the following properties:<\/p>\n
    \n
  • title – string<\/em><\/li>\n
  • body – string<\/em><\/li>\n
  • complete – boolean<\/em><\/li>\n<\/ul>\n
    \"New
    \"Task
    Finally, on your machine, run ionic serve<\/code> to launch your app in the browser. An important detail here is to make sure to use port 8080, or the app will not work.<\/p>\n
    ionic serve --lab -p 8080\n<\/code><\/pre>\n
    Now, the application is set up, and you are ready to begin development.<\/p>\n
    Basic Configuration<\/h3>\n
    Since your development environment is already set up, with your dependencies installed, you can go ahead and open up your www\/js\/app.js<\/code> file, where your application is configured and bootstrapped.<\/p>\n
    <br \/>angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])\n\n.run(function($ionicPlatform, $rootScope, AccountService) {\n\n  AccountService.currentUser()\n    .then(function(user) {\n      $rootScope.user = user;\n    })\n\n  $ionicPlatform.ready(function() {\n    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {\n      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\n      cordova.plugins.Keyboard.disableScroll(true);\n    }\n    if (window.StatusBar) {\n      StatusBar.styleDefault();\n    }\n  });\n\n})\n\n.constant('$ionicLoadingConfig', {\n  template: "<ion-spinner><\/ion-spinner>",\n  hideOnStateChange : false\n})\n\n.config(function($stateProvider, $urlRouterProvider) {\n\n  $stateProvider\n\n    .state('home', {\n      url: '\/',\n      templateUrl: 'templates\/home.html'\n    })\n    .state('login', {\n      url: '\/login',\n      templateUrl: 'templates\/login.html',\n      controller: "AccountController",\n      controllerAs : "account"\n    })\n    .state('signup', {\n      url: '\/signup',\n      templateUrl: 'templates\/signup.html',\n      controller: "AccountController",\n      controllerAs : "account"\n    })\n    .state('tasks', {\n      cache : false,\n      url: '\/tasks',\n      templateUrl: 'templates\/tasks.html',\n      controller: "HomeController",\n      controllerAs : "task"\n    })\n    .state('new', {\n      url: '\/new',\n      templateUrl: 'templates\/new.html',\n      controller: "TaskController",\n      controllerAs : "new"\n    })\n    .state('edit', {\n      url: '\/task\/:id',\n      templateUrl: 'templates\/edit.html',\n      controller: "TaskController",\n      controllerAs : "edit"\n    })\n\n  $urlRouterProvider.otherwise('\/');\n\n});\n<\/code><\/pre>\n
    Up at the top of your app.js<\/code>, inject the $ionicPlatform<\/code>, $rootScope<\/code>, and AccountService<\/code>.<\/p>\n
    The $ionicPlatform<\/code> is used to detect which platform the application is running on and to configure accordingly.<\/p>\n
    We brought in $rootScope<\/code> to set a global value after the AccountService<\/code> fetches the currently logged in user, if one exists.<\/p>\n
    After .run<\/code>, we set up a constant<\/code>, to avoid repeating ourselves throughout the application, when using the $ionicLoading<\/code> service. We’ve taken its configuration provider, $ionicLoadingConfig<\/code> and set defaults, so now every time this service is called in our application, it will have these settings.<\/p>\n
    Last, you have your .config<\/code> block, where your application state is set up.<\/p>\n
    Note: The state tasks<\/code>, options object, has a property cache that is set to false<\/code>. This is because we do not want this state to load possibly stale data when we go to and from. This will cause the controller<\/code> and view<\/code> to re-render each time the state is entered.<\/p>\n
    User Accounts<\/h3>\n
    Integrating local user accounts with Ionic and Stamplay is simple. By default, an API for managing user accounts and roles is set up within Stamplay for your application.<\/p>\n
    In the bootstrapping phase of your application, inside the .run<\/code> block, we’ve already seen a method on the AccountService<\/code>. The currentUser<\/code> method fetches the user who is currently logged in.<\/p>\n
    So in our .run<\/code>, we are checking and setting a user globally if one is logged in. Here is the AccountService<\/code> setup:<\/p>\n
    <br \/>angular.module('starter.services', [])\n.factory('AccountService', ["$q", function($q) {\n  return {\n    currentUser : function() {\n      var def = $q.defer();\n      Stamplay.User.currentUser()\n        .then(function(response) {\n          if(response.user === undefined) {\n            def.resolve(false);\n          } else {\n            def.resolve(response.user);\n          }\n        }, function(error) {\n          def.reject();\n        }\n      )\n      return def.promise;\n    }\n  }\n}])\n<\/code><\/pre>\n
    If a user is logged in, the global value of the $rootScope<\/code> user<\/code> is set to the user data from Stamplay. Otherwise, the value is set to false.<\/p>\n
    It’s important that this is set before the view loads, so the correct blocks of HTML will render to the type of user using the application: either a logged in user or a guest user.<\/p>\n
    The global $rootScope.user<\/code> value will first be used to display options based on if a user is logged in or not. This can be seen on the home.html<\/code> template:<\/p>\n
    <ion-view>\n  <ion-content class="home">\n    <div>\n      <p class="home-title center-align">Create better apps faster<\/p>\n      <p class="home-subtitle center-align">Build complete, secure and scalable backends in your browser piecing together APIs and features as building blocks.<\/p>\n    <\/div>\n    <div class="card">\n      <div class="item item-body center-align">\n        <p class="home-desc">\n          This is a starter kit for <a href="https:\/\/stamplay.com" target="_blank">Stamplay<\/a> using the Ionic framework. It features simple to-do like capabilities, with user accounts.\n        <\/p>\n      <\/div>\n    <\/div>\n    <div ng-hide="user === undefined">\n      <div ng-hide="user">\n        <div>\n          <button ui-sref="login" class="button button-full button-balanced bold">Login<\/button>\n          <button ui-sref="signup" class="button button-full button-positive bold">Signup<\/button>\n        <\/div>\n        <div class="center-align">\n          <b class="or">or<\/b>\n        <\/div>\n        <div>\n          <button ui-sref="tasks" class="button button-full button-dark bold">Continue as Guest<\/button>\n        <\/div>\n      <\/div>\n      <div ng-show="user" ng-controller="AccountController as account">\n        <button ui-sref="tasks" class="button button-full button-dark bold">My Tasks<\/button>\n        <button ng-click="account.logout()" class="button button-full button-stable bold">Logout<\/button>\n      <\/div>\n    <\/div>\n  <\/ion-content>\n<\/ion-view>\n<\/code><\/pre>\n
    Throughout the views, you can use common Angular directives, like ng-hide<\/code>, ng-show<\/code>, and ng-click<\/code>. The ng-show<\/code> and ng-hide<\/code> are quite simple. The block on which these attributes are will show or hide, depending on the truthiness of the value it is assigned.<\/p>\n
    For example, if ng-show<\/code> is set to ng-show="true"<\/code>, that block will render into view. However, if it is false, that block will be hidden.<\/p>\n
    Vice-versa, ng-hide<\/code> will hide a block or elements if the value set to it is true<\/code>, although it doesn’t have to be true<\/code>, just not a falsey value, such as null or 0.<\/p>\n
    In the above code, you are using the ng-hide<\/code> directive to hide both blocks of options with a containing element, until the $rootScope.user<\/code> variable is defined, regardless of whether is truthy or falsey.<\/p>\n
    After the $rootScope.user<\/code> variable is defined, the two child blocks with these directives will either show or hide, and in this case, only one will be display at a time.<\/p>\n
    If the $rootScope.user<\/code> is not populated with user data and set to false<\/code>, then the first block of options to Login<\/strong>, Signup<\/strong>, or Continue As A Guest<\/strong> will be displayed.<\/p>\n
    Otherwise, a user is logged in, and we will display the block with the option to Logout<\/strong> or go to My Tasks<\/strong>.<\/p>\n
    The login<\/code>, signup<\/code>, and home<\/code> states share the AccountController<\/code>. This controller has three main methods:<\/p>\n
    angular.module('starter.controllers', [])\n.controller('AccountController', ["AccountService", "$state", "$rootScope", "$ionicLoading", "$ionicPopup",\n  function(AccountService, $state, $rootScope, $ionicLoading, $ionicPopup) {\n\n  var vm = this;\n\n  var errorHandler = function(options) {\n    var errorAlert = $ionicPopup.alert({\n      title: options.title,\n      okType : 'button-assertive',\n      okText : "Try Again"\n    });\n  }\n\n  vm.login = function() {\n    $ionicLoading.show();\n    Stamplay.User.login(vm.user)\n    .then(function(user) {\n      $rootScope.user = user;\n      $state.go("tasks");\n    }, function(error) {\n      $ionicLoading.hide();\n      errorHandler({\n        title : "<h4 class='center-align'>Incorrect Username or Password<\/h4>"\n      })\n    })\n  }\n\n  vm.signup = function() {\n    $ionicLoading.show();\n    Stamplay.User.signup(vm.user)\n    .then(function(user) {\n      $rootScope.user = user;\n      $state.go("tasks");\n    }, function(error) {\n      errorHandler({\n        title : "<h4 class='center-align'>A Valid Email and Password is Required<\/h4>"\n      })\n      $ionicLoading.hide();\n    })\n  }\n\n  vm.logout = function() {\n    $ionicLoading.show();\n    var jwt = window.location.origin + "-jwt";\n    window.localStorage.removeItem(jwt);\n    AccountService.currentUser()\n    .then(function(user) {\n      $rootScope.user = user;\n      $ionicLoading.hide();\n    }, function(error) {\n      console.error(error);\n      $ionicLoading.hide();\n    })\n  }\n}])\n<\/code><\/pre>\n
    Login<\/h3>\n
    The login<\/code> method is used within the login<\/code> state. The view for your login<\/code> state includes a basic form that takes in a username and password. See login.html<\/code> below:<\/p>\n
    <ion-view>\n  <ion-content>\n    <h1 class="account-title center-align">Login<\/h1>\n\n    <div class="list">\n      <label class="item item-input">\n        <input type="text" placeholder="Email" ng-model="account.user.email">\n      <\/label>\n      <label class="item item-input">\n        <input type="text" placeholder="Password" ng-model="account.user.password">\n      <\/label>\n    <\/div>\n\n    <button class="button button-balanced button-full" ng-click="account.login()">Submit<\/button>\n  <\/ion-content>\n<\/ion-view>\n<\/code><\/pre>\n
    Once submitted, the Stamplay SDK sends the email<\/code> and password<\/code> to Stamplay to authenticate a user and grants a JSON Web Token<\/strong> if successful.<\/p>\n
    This is stored in localStorage<\/code> under the key hostname-jwt<\/code>.<\/p>\n
    Signup<\/h3>\n
    The signup<\/code> method is used within the signup<\/code> state of our application. The view for your signup<\/code> state is a basic form similar to your login<\/code> state view.<\/p>\n
    <ion-view>\n  <ion-content>\n    <h1 class="account-title center-align">Signup<\/h1>\n\n    <div class="list">\n      <label class="item item-input">\n        <input type="text" placeholder="Email" ng-model="account.user.email">\n      <\/label>\n      <label class="item item-input">\n        <input type="text" placeholder="Password" ng-model="account.user.password">\n      <\/label>\n    <\/div>\n\n    <button class="button button-positive button-full" ng-click="account.signup()">Submit<\/button>\n  <\/ion-content>\n<\/ion-view>\n<\/code><\/pre>\n
    On submission, the new account credentials are sent to Stamplay, an account is created, and a JSON Web Token<\/strong> is granted.<\/p>\n
    Again, this is stored in localStorage<\/code> under the key hostname-jwt<\/code>.<\/p>\n
    Logout<\/h3>\n
    The logout<\/code> method is used within home.html<\/code>. This option is only displayed when a user is logged in. When the method is called, the JSON Web Token<\/strong> is removed from localStorage<\/code>, the AccountService<\/code> then fetches the current user, and the value of $rootScope.user<\/code> is set again.<\/p>\n
    You can see this at the bottom of AccountController<\/code>.<\/p>\n
    Tasks<\/h3>\n
    The task<\/code> state is accessible through the home<\/code> state. Either option, Continue As A Guest<\/strong> or My Tasks<\/strong> on the home<\/code> view, will navigate to the tasks<\/code> state the same way.<\/p>\n
    Fetching tasks<\/h3>\n
    The HomeController<\/code>, connected to the tasks<\/code> state, triggers a vm.fetch<\/code> method on load.<\/p>\n
    This is done through an ng-init<\/code> directive inside the tasks.html<\/code> template. (See below)<\/p>\n
    <ion-view>\n  <ion-nav-bar align-title="center" class="bar-light">\n    <ion-nav-back-button><\/ion-nav-back-button>\n    <ion-nav-title>\n      TASKS {{ '(' + task.tasks.length + ')' }}\n    <\/ion-nav-title>\n    <ion-nav-buttons side="right">\n      <a class="button button-icon icon ion-plus-circled" ui-sref="new"><\/a>\n    <\/ion-nav-buttons>\n  <\/ion-nav-bar>\n  <ion-content ng-init="task.fetch()">\n    <h1 class="account-title center-align">\n      <div ng-if="user">\n        Your Tasks\n      <\/div>\n      <div ng-if="!user && task.tasks !== undefined">\n       Community Tasks\n      <\/div>\n    <\/h1>\n    <ion-list can-swipe="true">\n      <ion-item ng-repeat="item in task.tasks" ng-class="{ 'active' : item.id === task.active }">\n        <div class="row">\n          <div class="col col-20" style="display: flex;justify-content: flex-end;align-items: center;">\n            <button class="button button-clear" style="font-size:2rem !important" ng-click="task.setStatus(item)">\n              <i class="ion ion-checkmark-circled" ng-class="{ 'balanced' : item.complete }"><\/i>\n            <\/button>\n          <\/div>\n          <div class="col col-80" on-tap="task.setActive(item._id)">\n            <h2>{{ item.title }}<\/h2>\n            <p>{{ item.body }}<\/p>\n            <label class="dark">\n              {{ item.dt_create | date : "short"}}\n            <\/label>\n        <\/div>\n      <\/div>\n      <ion-option-button class="button-energized ion-edit"\n      ui-sref="edit({ id : item._id })"><\/ion-option-button>\n      <ion-option-button class="button-assertive ion-trash-a"\n      ng-click="task.deleteTask(item._id)"><\/ion-option-button>\n      <\/ion-item>\n    <\/ion-list>\n    <div class="card" ng-show="task.tasks.length === 0">\n      <div class="item item-body center-align">\n        <h2 class="dark">\n          Umm..it's empty in here..\n        <\/h2>\n        <h2 class="dark">Try adding a task by clicking the <i class="ion-plus-circled dark"><\/i>\n        icon in the top right corner.<\/h2>\n      <\/div>\n    <\/div>\n  <\/ion-content>\n<\/ion-view>\n<\/code><\/pre>\n
    If the value of $rootscope.user<\/code> is false<\/code>, the TaskService<\/code> will execute the method to retrieve all the tasks<\/code> that do not have an owner (see getGuestTasks<\/code> method on the TaskService<\/code>).<\/p>\n
    Otherwise, the TaskService<\/code> executes the method, getUserTasks<\/code>, and fetches all the tasks that the currently logged in user has created. The HomeController<\/code> and TaskService<\/code> can be seen below.<\/p>\n
    <br \/>.controller('HomeController', ["TaskService", "$ionicLoading", "$rootScope", "$state", function(TaskService,  $ionicLoading, $rootScope, $state) {\n  var vm = this;\n\n  var findIndex = function(id) {\n    return vm.tasks.map(function(task) {\n      return task._id;\n    }).indexOf(id);\n  }\n\n  \/\/ Display loading indicator onload\n  $ionicLoading.show();\n\n  \/\/ Fetch Tasks\n  vm.fetch = function() {\n    if(!$rootScope.user) {\n      \/\/ Get all tasks for guests.\n      TaskService.getGuestTasks()\n      .then(\n        function(response) {\n          var tasks = response.data;\n          vm.tasks = [];\n          tasks.forEach(function(item, idx, array) {\n            item.dt_create = new Date(item.dt_create).getTime();\n            vm.tasks.push(array[idx]);\n          });\n          $ionicLoading.hide();\n        }, function(error) {\n          $ionicLoading.hide();\n        })\n      } else {\n        \/\/ Get only the user signed in tasks.\n        TaskService.getUsersTasks()\n        .then(\n          function(response) {\n            var tasks = response.data;\n            vm.tasks = [];\n            tasks.forEach(function(item, idx, array) {\n              item.dt_create = new Date(item.dt_create).getTime();\n              vm.tasks.push(array[idx]);\n            });\n            $ionicLoading.hide();\n          }, function(error) {\n            $ionicLoading.hide();\n          })\n        }\n      }\n\n      \/\/ Mark Complete a task.\n      vm.deleteTask = function(id) {\n        $ionicLoading.show();\n        vm.tasks.splice(findIndex(id), 1);\n        TaskService.deleteTask(id)\n        .then(function() {\n          $ionicLoading.hide();\n        }, function(error) {\n          $ionicLoading.hide();\n        })\n      }\n\n      vm.setStatus = function(task) {\n        task.complete = task.complete ? !task.complete : true;\n        TaskService.patchTask(task)\n        .then(function(task) {\n        }, function(error) {\n        })\n      }\n}])\n<\/code><\/pre>\n
    Task Service<\/h3>\n
    The TaskService<\/code> contains the logic to manipulate the application data regarding tasks. This service is shared between most states in which you are dealing with task data.<\/p>\n
    .factory('TaskService', ["$rootScope", "$q", function($rootScope, $q) {\n\n  return {\n    getGuestTasks : function(query) {\n      var deffered = $q.defer();\n      Stamplay.Query("object", "task")\n      .notExists("owner")\n      .exec()\n      .then(function(response) {\n        deffered.resolve(response)\n      }, function(error) {\n        deffered.reject(err);\n      })\n      return deffered.promise;\n    },\n\n    getUsersTasks : function(query) {\n      var deffered = $q.defer();\n\n      Stamplay.Object("task")\n      .findByCurrentUser(["owner"])\n      .then(function(response) {\n        deffered.resolve(response)\n      }, function(err) {\n        deffered.reject(err);\n      })\n      return deffered.promise;\n    },\n\n    getTask : function(id) {\n        var deffered = $q.defer();\n        Stamplay.Object("task").get({ _id : id })\n        .then(function(response) {\n          deffered.resolve(response)\n        }, function(error) {\n          deffered.reject(err);\n        })\n        return deffered.promise;\n    },\n\n    addNew : function(task) {\n      var deffered = $q.defer();\n\n      Stamplay.Object("task").save(task)\n      .then(function(response) {\n        deffered.resolve(response)\n      }, function(err) {\n        deffered.reject(err);\n      })\n      return deffered.promise\n    },\n    deleteTask : function(id) {\n      var deffered = $q.defer();\n      Stamplay.Object("task").remove(id)\n      .then(function(response) {\n        deffered.resolve(response)\n      }, function(err) {\n        deffered.reject(err);\n      })\n      return deffered.promise;\n    },\n    updateTask : function(task) {\n      var deffered = $q.defer();\n      Stamplay.Object("task").update(task._id, task)\n      .then(function(response) {\n        deffered.resolve(response)\n      }, function(err) {\n        deffered.reject(err);\n      })\n      return deffered.promise;\n    },\n    patchTask : function(task) {\n      var deffered = $q.defer();\n      Stamplay.Object("task").patch(task._id, { complete: task.complete})\n      .then(function(response) {\n        deffered.resolve(response)\n      }, function(err) {\n        deffered.reject(err);\n      })\n      return deffered.promise;\n    }\n\n  }\n}]);\n<\/code><\/pre>\n
    Deleting Tasks<\/h3>\n
    To delete a Task, slide the item to the left, and select the delete<\/code> option from the two revealed.<\/p>\n
    This will trigger the TaskService<\/code> method to remove a record from Stamplay by its _id<\/code> passed to it.<\/p>\n
    After its success, simply splice<\/code> the record from the array of Tasks that still exist in your state memory.<\/p>\n
    The TaskService<\/code> deleteTask<\/code> method takes an id<\/code> and uses the Stamplay.Object("task").remove()<\/code> method to delete the record from Stamplay.<\/p>\n
    Marking Tasks Complete<\/h3>\n
    Marking Tasks complete\/incomplete is done by simply updating the record’s complete<\/code> field. You can assign it to the opposite of what the current value is every time the checkmark button is selected.<\/p>\n
    Starting with a falsey value will allow you to mark it complete, and if you wish to mark it incomplete, you can use the same method to accomplish this. The method inside of your HomeController<\/code> that you can use to do this is vm.setStatus<\/code>.<\/p>\n
    The TaskService<\/code> patchTask<\/code> method takes an task<\/code> and uses the patch()<\/code> method to partially update the record from Stamplay. Here, you only update the complete<\/code> field on the record. Use the Stamplay.Object("task").patch()<\/code> method to accomplish this.<\/p>\n
    Updating A Task<\/h3>\n
    After the initial tasks are loaded, from here, the methods to create, update, and delete tasks are the same across guest and user accounts.<\/p>\n
    The methods pertaining to updating the content of a task and creating a new task are, however, in a separate state, and will be attached to the TaskController<\/code> (See below) between both states.<\/p>\n
    .controller('TaskController', ["TaskService", "$ionicLoading", "$rootScope", "$state", "$stateParams", function(TaskService,  $ionicLoading, $rootScope, $state, $stateParams) {\n  var vm = this;\n\n  if($stateParams.id) {\n    $ionicLoading.show();\n    TaskService.getTask($stateParams.id)\n      .then(function(task) {\n        $ionicLoading.hide();\n        vm.task = task.data[0];\n      }, function(err) {\n        $ionicLoading.hide();\n        console.error(err);\n      })\n  }\n\n  \/\/ Add a task.\n  vm.add = function() {\n    $ionicLoading.show();\n    TaskService.addNew(vm.task)\n    .then(function(task) {\n      $ionicLoading.hide();\n      $state.go("tasks", {}, { reload: true });\n    }, function(error) {\n      $ionicLoading.hide();\n    })\n  }\n\n  vm.save = function() {\n    $ionicLoading.show();\n    TaskService.updateTask(vm.task)\n    .then(function(task) {\n      $ionicLoading.hide();\n      $state.go("tasks", {}, { reload: true });\n    }, function(error) {\n      $ionicLoading.hide();\n    })\n  }\n\n}])\n<\/code><\/pre>\n
    To update a task, you must slide the task to the left, after which two actions will be revealed: edit<\/code> and delete<\/code>.<\/p>\n
    Once you select edit<\/code>, you will be taken to the edit<\/code> state, where the fields will be populated with the existing data from the task you selected.<\/p>\n
    This is just simple data-binding to a view-model that on the click of submit will trigger the TaskService<\/code> method, updateTask()<\/code>, which calls the Stamplay.Object("task").update()<\/code> method on the SDK to update the whole record.<\/p>\n
    Creating New Tasks<\/h3>\n
    To create a new task, select the plus icon in the top right corner, and navigate to the new<\/code> state, where you may submit a new record to Stamplay.<\/p>\n
    This is also very basic, just data-binding to a view-model and, on the click of the submit button, executing the TaskService<\/code> method to create a new record in Stamplay.<\/p>\n
    To save new data to Stamplay, we simply use the Stamplay.Object("task").save()<\/code>, and pass in a valid model as the first parameter as seen in our TaskService<\/code>.<\/p>\n
    Conclusion<\/h2>\n
    Using Ionic, this starter kit, and the Stamplay backend, you now have a fully functioning task application, without a single line of backend code! You can use Ionic and Stamplay to quickly build great mobile apps and integrate with a variety of well known APIs.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Ionic makes it easier to build a multi-platform mobile app using modern web technologies. Stamplay allows developers to use APIs as building blocks to to rapidly construct scalable, maintainable backend applications. By using Stamplay and Ionic together, you can focus on building a unique app, instead of spending time scaling architecture or implementing the same […]<\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-860","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"\nCross-Platform Apps with Ionic and Stamplay - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cross-Platform Apps with Ionic and Stamplay\" \/>\n<meta property=\"og:description\" content=\"Ionic makes it easier to build a multi-platform mobile app using modern web technologies. Stamplay allows developers to use APIs as building blocks to to rapidly construct scalable, maintainable backend applications. By using Stamplay and Ionic together, you can focus on building a unique app, instead of spending time scaling architecture or implementing the same […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-30T16:31:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg\" \/>\n<meta name=\"author\" content=\"Isaiah Grey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@isaiahgrey93\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isaiah Grey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay\"},\"author\":{\"name\":\"Isaiah Grey\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/b33eb628e8885d5e55686f31655e379f\"},\"headline\":\"Cross-Platform Apps with Ionic and Stamplay\",\"datePublished\":\"2016-03-30T16:31:50+00:00\",\"dateModified\":\"2016-03-30T16:31:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay\"},\"wordCount\":1620,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay\",\"url\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay\",\"name\":\"Cross-Platform Apps with Ionic and Stamplay - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg\",\"datePublished\":\"2016-03-30T16:31:50+00:00\",\"dateModified\":\"2016-03-30T16:31:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg\",\"width\":1124,\"height\":595},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cross-Platform Apps with Ionic and Stamplay\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/b33eb628e8885d5e55686f31655e379f\",\"name\":\"Isaiah Grey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/66953dc0ade94a39db784f185b3bdf808c23025ce78cee46f4f252e4906bfad3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/66953dc0ade94a39db784f185b3bdf808c23025ce78cee46f4f252e4906bfad3?s=96&d=mm&r=g\",\"caption\":\"Isaiah Grey\"},\"sameAs\":[\"https:\/\/x.com\/isaiahgrey93\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/isaiah\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cross-Platform Apps with Ionic and Stamplay - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay","og_locale":"en_US","og_type":"article","og_title":"Cross-Platform Apps with Ionic and Stamplay","og_description":"Ionic makes it easier to build a multi-platform mobile app using modern web technologies. Stamplay allows developers to use APIs as building blocks to to rapidly construct scalable, maintainable backend applications. By using Stamplay and Ionic together, you can focus on building a unique app, instead of spending time scaling architecture or implementing the same […]","og_url":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay","og_site_name":"Ionic Blog","article_published_time":"2016-03-30T16:31:50+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg"}],"author":"Isaiah Grey","twitter_card":"summary_large_image","twitter_creator":"@isaiahgrey93","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Isaiah Grey","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay"},"author":{"name":"Isaiah Grey","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/b33eb628e8885d5e55686f31655e379f"},"headline":"Cross-Platform Apps with Ionic and Stamplay","datePublished":"2016-03-30T16:31:50+00:00","dateModified":"2016-03-30T16:31:50+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay"},"wordCount":1620,"commentCount":4,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg","keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay","url":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay","name":"Cross-Platform Apps with Ionic and Stamplay - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg","datePublished":"2016-03-30T16:31:50+00:00","dateModified":"2016-03-30T16:31:50+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic_cover.jpg","width":1124,"height":595},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/apps-with-ionic-and-stamplay#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Cross-Platform Apps with Ionic and Stamplay"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/b33eb628e8885d5e55686f31655e379f","name":"Isaiah Grey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/66953dc0ade94a39db784f185b3bdf808c23025ce78cee46f4f252e4906bfad3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/66953dc0ade94a39db784f185b3bdf808c23025ce78cee46f4f252e4906bfad3?s=96&d=mm&r=g","caption":"Isaiah Grey"},"sameAs":["https:\/\/x.com\/isaiahgrey93"],"url":"https:\/\/ionic.io\/blog\/author\/isaiah"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=860"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/860\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}