Erste Praxiserfahrungen mit Backend as a Service

Seite 5: Beispiel mit Parse

Ein BaaS-Komplettbeispiel mit Parse

<!doctype html>

<head>
  <meta charset="utf-8">

  <title>My Parse App</title>
  <meta name="description" content="My Parse App">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/styles.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
         libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.parsecdn.com/js/
         parse-1.2.18.min.js"></script>
</head>

<body>

  <div id="main">
    <h1>You're ready to use Parse!</h1>

    <p>Read the documentation and start building your JavaScript app:</p>

    <ul>
      <li><a href="https://www.parse.com/docs/js_guide">Parse 
               JavaScript Guide</a>
      </li>
      <li><a href="https://www.parse.com/docs/js">Parse 
               JavaScript API Documentation</a>
      </li>
    </ul>

    <div style="display:none" class="error">
      Looks like there was a problem saving the test object. Make 
      sure you've set your application ID and javascript key correctly
      in the call to <code>Parse.initialize</code> in this file.
    </div>

    <div style="display:none" class="success">
      <p>We've also just created your first object using the 
               following code:</p>

      <code>
          var TestObject = Parse.Object.extend("TestObject");<br/>
          var testObject = new TestObject();<br/>
          testObject.save({foo: "bar"});
        </code>
    </div>
  </div>

  <script type="text/javascript">
    Parse.initialize("BXjsVq7x0xLzW45wcnwyIz4GJwJTeU0X6bfVKuwt", 
               "T5HXV7bhlBbZSD8s6nmX3eA3LdCbZVIOR7nU4Rsi");

    var TestObject = Parse.Object.extend("TestObject");
    var testObject = new TestObject();
    testObject.save({
      foo: "bar"
    }, {
      success: function (object) {
        $(".success").show();
      },
      error: function (model, error) {
        $(".error").show();
      }
    });

    function store() {
      // Simple syntax to create a new subclass of Parse.Object.
      var Person = Parse.Object.extend("Person");

      // Create a new instance of that class.
      var person = new Person();

      person.set("vorname", 'Max');
      person.set("nachname", "Mustermann");
      person.set("alter", 35);

      person.save(null, {
        success: function (person) {
          // Execute any logic that should take place after the object
          // is saved.
          console.log('New object created with objectId: ' + person.id);
        },
        error: function (person, error) {
          // Execute any logic that should take place if the save fails.
          // error is a Parse.Error with an error code and description.
          console.log('Failed to create new object, with error code: ' +
                error.description);
        }
      });

    }

    function fetch() {
      var Person = Parse.Object.extend("Person");
      var query = new Parse.Query(Person);
      query.get("7S6znzmHNw", {
        success: function (person) {
          console.log("Person:" + JSON.stringify(person));
        },
        error: function (object, error) {
          // The object was not retrieved successfully.
          // error is a Parse.Error with an error code and description.
          console.log("Error:" + JSON.stringify(error) + " on " +
                JSON.stringify(object));
        }
      });
    }

    function query(vorname) {
      var Person = Parse.Object.extend("Person");
      var query = new Parse.Query(Person);
      query.equalTo("vorname", vorname);
      query.find({
        success: function (results) {
          console.log("Successfully retrieved " + results.length +
                " scores.");
          // Do something with the returned Parse.Object values
          for (var i = 0; i < results.length; i++) {
            var object = results[i];
            console.log(object.id + ' - ' + object.get('vorname'));
          }
        },
        error: function (error) {
          console.log("Error: " + error.code + " " + error.message);
        }
      });
    }
  </script>
</body>

</html>