Ionic

Start your Ionic project using a pre built template

Introduction

In this section you learn how to install Parse JavaScript SDK into your Ionic project.

See more about Parse SDK at Parse JavaScript SDK API Reference and Parse open source documentation for JavaScript SDK.

Prerequisites

To complete this tutorial, you will need:

  • An app created at Back4App.
  • An Ionic project started.

Step 1 - Install SDK

Since Ionic packages are managed by npm, all you have to do is to run the following command at your project folder level:

$ npm install parse

Step 2 - Connect your Parse App

Initialize your Parse app

Import Parse in home.ts or in the page you want to make use of:

home.ts

1
import Parse from 'parse';

Use Parse.serverURL atrribute to set up the url for Back4app parse server.

home.ts

1
Parse.serverURL = 'https://parseapi.back4app.com/';

Use Parse.initialize method to set up the authentication token, connecting your page with Back4App servers.

home.ts

1
Parse.initialize("YOUR-APP-ID", "YOUR-JS-KEY");

Find your Application ID and your Client Key

  1. Go to your App Dashboard at Back4App website.
  2. Navigate to app’s settings: Click on Server Settings > Core Settings block > Settings.
  3. Return to your Parse.Initialize function and paste your applicationId and javaScriptKey.

Step 3 - Test your conection

Create a test code

Test your initial setup with the following code which creates an Installation object.

First, go ahead and create a variable to show the result on your app Home page.

home.ts

1
result: string;

Next, display that variable on your Home view.

home.html

1
2
3
<ion-content padding>
  <h4>{{result}}</h4>
</ion-content>

Finally, add the code that instanciates an Installation object and saves it.

Add this piece of code after setting up the communication.

home.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
  let install = new Parse.Installation();

  install.save(null, {
    success: (install) => {
      // Execute any logic that should take place after the object is saved.
      this.result = 'New object created with objectId: ' + install.id;
    },
    error: (install, error) => {
      // Execute any logic that should take place if the save fails.
      // error is a Parse.Error with an error code and message.
      this.result = ('Failed to create new object, with error code:' + error.message.toString());
    }
  });
  1. Run your app on your browser.
$ ionic serve
  1. Wait until a new tab opens on your browser.

    Build app

    In order to see the page in a phone frame, press F12.

  2. Login at Back4App Website.
  3. Find your app and click on Dashboard.
  4. Click on Core.
  5. Go to Browser.

If everything works properly, you should find a class named Installation as follows:

Installation at Back4App Dashboard

It’s done!

At this point, you have learned how to get started with Ionic apps.