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.
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:
1
import Parse from 'parse';
Use Parse.serverURL
atrribute to set up the url for Back4app parse server.
1
Parse.serverURL = 'https://parseapi.back4app.com/';
Use Parse.initialize
method to set up the authentication token, connecting your page with Back4App servers.
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 Settings
block >Settings
. - Return to your
Parse.Initialize
function and paste yourapplicationId
andjavaScriptKey
.
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.
1
result: string;
Next, display that variable on your Home
view.
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.
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());
}
});
- Run your app on your browser.
$ ionic serve
- Wait until a new tab opens on your browser.
In order to see the page in a phone frame, press
F12
. - Login at Back4App Website.
- Find your app and click on
Dashboard
. - Click on
Core
. - 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.