Install SDK

11min
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.
Follow the New Parse App tutorial to learn how to create a Parse App at Back4App.
An Ionic project started.
Follow the Getting Started tutorial if you don’t have it set up.
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
2 - Connect 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';
1   import Parse from 'parse';
﻿
UseParse.serverURL atrribute to set up the url for Back4app parse server.
home.ts
1   Parse.serverURL = 'https://parseapi.back4app.com/';
1   Parse.serverURL = 'https://parseapi.back4app.com/';
﻿
UseParse.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");
1   Parse.initialize("YOUR-APP-ID", "YOUR-JS-KEY");
﻿
Find your Application ID and your Client Key
Go to your App Dashboard at Back4App website.
Navigate to app’s settings: Click on Server Settings > Core Settingsblock > Settings.
Return to your Parse.Initialize function and paste your applicationId and javaScriptKey.
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;
1   result: string;
﻿
Next, display that variable on your Home view.
home.html
1   <ion-content padding>
2     <h4>{{result}}</h4>
3   </ion-content>
1   <ion-content padding>
2     <h4>{{result}}</h4>
3   </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     let install = new Parse.Installation();
2
3     install.save(null, {
4       success: (install) => {
5         // Execute any logic that should take place after the object is saved.
6         this.result = 'New object created with objectId: ' + install.id;
7       },
8       error: (install, error) => {
9         // Execute any logic that should take place if the save fails.
10        // error is a Parse.Error with an error code and message.
11        this.result = ('Failed to create new object, with error code:' + error.message.toString());
12     }
13   });
1     let install = new Parse.Installation();
2
3     install.save(null, {
4       success: (install) => {
5         // Execute any logic that should take place after the object is saved.
6         this.result = 'New object created with objectId: ' + install.id;
7       },
8       error: (install, error) => {
9         // Execute any logic that should take place if the save fails.
10        // error is a Parse.Error with an error code and message.
11        this.result = ('Failed to create new object, with error code:' + error.message.toString());
12     }
13   });
﻿
Run your app on your browser.
$ ionic serve
     2. Wait until a new tab opens on your browser.
﻿
In order to see the page in a phone frame, press F12.
3. Login at Back4App Website﻿
4. Find your app and click on Dashboard.
5. Click on Core.
6. Go to Browser.
﻿
If everything works properly, you should find a class named Installation as follows:
﻿
It’s done!
At this point, you have learned how to get started with Ionic apps.
Updated 28 Mar 2024
Did this page help you?
Start from template
User Registration