Get Started

Add Back4App to your App project

Introduction

Now that you have created an App at Back4App, the next step to use the backend features is to connect with Back4App servers. You will see how to install the SDK and initialize your App project using the Back4App API and your Keys.

The Open source Parse SDK is available in the main frontend technologies including: JavaScript(ReactJS, React Native, AngularJS, VueSJ, NodeJS), iOS(ObjectiveC/Swift), Android(Java/Kotlin), Flutter, PHP, .NET/Xamarin, Unity, Embedded C. You can also connect using the GraphQL or REST APIs.

In this guide, you will connect and send your first API Call to Back4App using the Parse SDK.

Goal

To Add Back4App to your software project using the Parse SDK.

Prerequisites

To complete this tutorial, you will need:

An application software project environment ready to use.

Find your application keys at Core Settings, go to Server Settings > Core Settings > Settings > App Id and other.

Step 1 - Create your App at Back4App

If you still do not have an App at Back4App please take a look at our guide and see how to create your first Back4App App.

Step 2 - Install Parse SDK

Parse SDK for JavaScript can be used in a large amount of platforms and frameworks. To deal with it, the Parse npm module contains many versions to use in different environments. Below, you can choose 4 possibilities to install the Parse JS SDK:

1. Install the NPM module

Install the Parse NPM module and the AsyncStorage. To do so, run the following command.

$ npm install parse @react-native-async-storage/async-storage --save

Use CocoaPods to add the native RNAsyncStorage to your project:

cd ios & pod-install

2. Install the SDK

_App.js

import AsyncStorage from '@react-native-async-storage/async-storage';
import Parse from 'parse/react-native';

//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);

1. Install the NPM module

We strongly encourage you to use the latest Parse NPM module. To do so, run the following command.

$ npm install parse --save

2. Install the SDK

var Parse = require('parse/node');

Parse.initialize("APP_ID","JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
Parse.serverURL = 'https://parseapi.back4app.com/'

1. Install the NPM module

We strongly encourage you to use the latest Parse NPM module. To do so, run the following command.

$ npm install parse --save

2. Install the SDK

import * as Parse from 'parse';

@Component({ ... })

export class AppComponent {
  ...

  constructor() {
    // Initialize your Parse App Keys
    Parse.initialize("APP_ID","JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
    Parse.serverURL = 'https://parseapi.back4app.com/'
  }
}

1. Load external file in HTML document

After creating your index.html, install Parse SDK direct on it, inside the <head> tag, using the code below.

<!DOCTYPE html>
<html>
<head>
  <title>My First Application</title>
  <script type="text/javascript" src="https://npmcdn.com/parse/dist/parse.min.js"></script>
  <script type="text/javascript" type="text/javascript">
    Parse.initialize("APP_ID","JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
    Parse.serverURL = 'https://parseapi.back4app.com/'
  </script>
</head>
<body>
  <!--
    Your code
  -->
</body>
</html>

Facing any trouble? Feel free to check the complete Install Parse SDK guide to JavaScript projects. Also, feel free to check the official Parse Documentation regarding Parse SDK for JavaScript.

Install the Parse Flutter SDK

Install the latest Parse Flutter SDK in your application. First of all, create a Flutter Project using the following commands:

Create a Flutter Project

flutter create flutter_parse

Check if everything is OK running the application:

cd flutter_parse
flutter run

Installing Flutter plugin for Parse Server

You will add Parse to the project dependencies. Go to pubspec.yaml and add the following:

dependencies:
  parse_server_sdk_flutter: ^latest_version

Setting up Parse SDK

In your Dart Code, clean all main.dart code and start a new one importing the Parse SDK.

_main.dart

import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Facing any trouble? Feel free to check the complete Install Parse SDK guide to Flutter projects. Also, feel free to check the official Parse Documentation regarding Parse SDK for Flutter.

Gradle set up

Go to your Android Studio Project and find the build.gradle (Module:app) file. After that, copy and paste the code snippet right after the dependencies{} tag.

// ... code
dependencies {...}

repositories {
  mavenCentral()
  jcenter()
  maven { url 'https://jitpack.io' }
}

It’s also necessary to look in the android{} tag if the compileSdkVersion of your app is 27 or higher and also if the targetSdkVersion of your app is 27 or higher. If they aren’t, you must change these versions to 27 or higher, otherwise your Parse SDK for Android may not work properly.

Install the Parse Android SDK

To install the latest Parse Android SDK in your application, continue in the build.gradle (Module:app) file and copy and paste the code snippet inside the dependencies{} tag.

android {...}

dependencies {
  // code...
  // Don't forget to change the line below with the latest version of Parse SDK for Android
  implementation "com.github.parse-community.Parse-SDK-Android:parse:latest.version.here"
}

You can find out which is the latest version of Parse SDK for Android at Jitpack Website.

Facing any trouble? Feel free to check the complete Install Parse SDK guide to Android projects. Also, feel free to check the official Parse Documentation regarding Parse SDK for Android.

Install CocoaPods and Import Parse

Xcode can use CocoaPods as dependency manager for Swift and Objective-C Cocoa projects. To install CocoaPods, copy the following code snippet and paste it into your terminal and hit return.

$ sudo gem install cocoapods

You can refer to CocoaPods Getting Started Guide for additional details.

Connect your Parse App

Open your project’s AppDelegate file to set up app’s credentials. Parse SDK for iOS uses these settings to connect to the Back4App servers. At the top of the file you should see a function called didFinishLaunchingWithOptions. Paste the following code snippet inside this function, and make sure it is above the line that says return true.

iOS Swift
iOS Objective-C

At the top of your AppDelegate.swift file make sure to include Parse as a module by using the following code snippet right below import UIKit.

_{AppDelegate.swift}

    import Parse

At the top of your AppDelegate.m file make sure to include Parse as a module by using the following code snippet right below #import "AppDelegate.h".

_{AppDelegate.m}

#import <Parse/Parse.h>

Facing any trouble? Feel free to check the complete Install Parse SDK guide to iOS Swift and iOS ObjC projects. Also, feel free to check the official Parse Documentation regarding Parse SDK for iOS.

You can use different ways to install the Parse SDK for PHP. We will show a couple of them here. Note that the Parse PHP SDK requires PHP 5.4 or newer.

With composer

Create a composer.json file in your projects root folder, containing the following.

{
    "require": {
        "parse/php-sdk" : "1.6.*"
    }
}

Now, you need to run the “composer install” to download and set up the autoloader. After that, you can require it from your PHP script, using the code below.

require 'vendor/autoload.php';

With Git

Go to Parse SDK for PHP page on GitHub and clone it. You can do this by using your favorite GitHub client or via terminal, as shown below.

$ git clone https://github.com/parse-community/parse-php-sdk.git

After that, inside your PHP file, you need to include the autoload.php to automatically load the Parse SDK classes.

Facing any trouble? Feel free to check the official Parse Documentation regarding Parse SDK for PHP.

We need to add some libraries to set up Parse SDK for .NET. We will get them through Nuget Packages. To do so, go to Microsoft Visual Studio and at the Solution Explorer, click on your app’s name and go to Manage NuGet Packages....

Then, click on Browse to search and install the packages parse by Parse and Xamarin.Android.Support.v7.AppCompat by Xamarin Inc.

Facing any trouble? Feel free to check the official Parse Documentation regarding Parse SDK for .NET.

Find this project page at GitHub and clone it. Then, open it on Unity3D.

Facing any trouble? Feel free to check the official Parse Documentation regarding Parse SDK for Unity.

Step 3 - Insert your Keys and initialize Parse SDK

To completely connect your application to Back4App, you need to set up your app keys (After the Login, go to Server Settings > Core Settings > Settings and find your keys) and initialize Parse SDK. To do so, you just need to select the right guide to the technology of your project.

To initialize Parse SDK in your JavaScript project, add the code below in your index.html file, inside <script> tag.

Parse.initialize("APP_ID","JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
Parse.serverURL = 'https://parseapi.back4app.com/'

Facing any trouble? Feel free to check the complete Install Parse SDK guide to JavaScript projects. Also, feel free to check the official Parse Documentation regarding Parse SDK for JavaScript.

After adding the library to your project, let’s now initialize Parse. Go to main.dart, and add the following code:

_main.dart

void main() async {
  final keyApplicationId = 'YOUR_APPLICATION_ID_HERE';
  final keyClientKey = 'YOUR_MASTER_KEY_HERE';
  final keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

}

Inside the strings.xml file, insert the following lines, with your application keys, in order to connect your project to Back4App Database.

_{./app/src/main/res/values/strings.xml}

<resources>
    <string name="back4app_server_url">https://parseapi.back4app.com/</string>
    <!-- Change the following strings as required -->
    <string name="back4app_app_id">APP_ID</string>
    <string name="back4app_client_key">CLIENT_KEY</string>
</resources>

Give Permissions and set up your App

You need to grant permission for your Android app to access the internet network. To do this, add the following code snippet to your AndroidManifest.xml file right after the application tag.

_{./app/src/main/AndroidManifest.xml}

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

Also, inside the application tag, add the following:

_{./app/src/main/AndroidManifest.xml}

<meta-data
  android:name="com.parse.SERVER_URL"
  android:value="@string/back4app_server_url" />
<meta-data
  android:name="com.parse.APPLICATION_ID"
  android:value="@string/back4app_app_id" />
<meta-data
  android:name="com.parse.CLIENT_KEY"
  android:value="@string/back4app_client_key" />

Initialize Parse SDK

Create a Java file called App that extends Application. In this file, use the following line of code to import Parse.

import com.parse.Parse;

Inside App.java onCreate method, right after super.onCreate() call the following code:

Parse.initialize(new Parse.Configuration.Builder(this)
             .applicationId(getString(R.string.back4app_app_id))
             // if defined
             .clientKey(getString(R.string.back4app_client_key))
             .server(getString(R.string.back4app_server_url))
             .build()
);

Don’t forget to define this file in the AndroidManifest.xml. To do so, go to the AndroidManifest.xml file and add the following line of code inside the application tag:
1
android:name=".App"
If the name of the java file that extends Application that you created on the previous step isn’t “App”, don’t forget that the code above should have the correct name of the file (android:name=".name_of_the_file").

Facing any trouble? Feel free to check the complete Install Parse SDK guide to Android projects. Also, feel free to check the official Parse Documentation regarding Parse SDK for Android.

Use the code below inside your project’s AppDelegate file, inside didFinishLaunchingWithOptions function, above the line that says return YES or return true, to initialize Parse SDK.

iOS Swift
iOS Objective-C

_{AppDelegate.swift}

let configuration = ParseClientConfiguration {
  $0.applicationId = "PASTE_YOUR_APPLICATION_ID_HERE"
  $0.clientKey = "PASTE_YOUR_CLIENT_ID_HERE"
  $0.server = "https://parseapi.back4app.com"
}
Parse.initialize(with: configuration)

_{AppDelegate.m}

[Parse initializeWithConfiguration:[ParseClientConfiguration configurationWithBlock:^(id<ParseMutableClientConfiguration> configuration) {
    configuration.applicationId = @"PASTE_YOUR_APPLICATION_ID_HERE";
    configuration.clientKey = @"PASTE_YOUR_CLIENT_ID_HERE";
    configuration.server = @"https://parseapi.back4app.com/";
}]];

Facing any trouble? Feel free to check the complete Install Parse SDK guide to iOS Swift and iOS ObjC projects. Also, feel free to check the official Parse Documentation regarding Parse SDK for iOS.

After installing the Parse SDK for PHP, you can initialize it using the code below.

ParseClient::initialize( $app_id, $rest_key, $master_key);
ParseClient::setServerURL('https://parseapi.back4app.com','/');

Facing any trouble? Feel free to check the official Parse Documentation regarding Parse SDK for PHP.

After waiting for installations to finish, open your strings.xml file and use the following code with your application keys.

_{.../App1/Resources/values/strings.xml}

<resources>
  <string name="back4app_server_url">https://parseapi.back4app.com/</string>
  <!-- Change the following strings as required -->
  <string name="back4app_app_id">APP_ID</string>
  <string name="back4app_dotnet_key">DOTNET_ID</string>
</resources>

Also, in your Main Activity, you need to initialize these keys, using the following code.

ParseClient.Initialize(new ParseClient.Configuration {
  ApplicationId = GetString(Resource.String.back4app_app_id),
  WindowsKey = GetString(Resource.String.back4app_dotnet_key),
  Server = GetString(Resource.String.back4app_server_url)
});

Facing any trouble? Feel free to check the official Parse Documentation regarding Parse SDK for .NET.

You need to add your applicationId and dotNetKey to your project. To do so, click on Back4appDemoSence, find a GameObject that calls Back4appIntialize and paste there your keys, as shown in the image below.

Facing any trouble? Feel free to check the official Parse Documentation regarding Parse SDK for Unity.

Step 4 - Save and Read your first Data Object

To ensure that the connection between your project and Back4App has been established correctly, let’s make a test in which we will save and read an object in Back4App.

Use the code according the Parse SDKyou are using.

//Saving your First Data Object on Back4App
async function saveNewPerson() {
  const Person = Parse.Object.extend("Person");
  const person = new Person();

  person.set("name", "John Snow");
  person.set("age", 27);
  try {
    let result = await person.save()
    alert('New object created with objectId: ' + result.id);
    } catch(error) {
        alert('Failed to create new object, with error code: ' + error.message);
    }
  } 

//Reading your First Data Object from Back4App
async function retrievePerson() {
  const Person = Parse.Object.extend("Person");
  const query = new Parse.Query(Person);
  try {
    const person = await query.get("yGxF7tnuuk");
    const name = person.get("name");
    const age = person.get("age");
  
    alert(`Name: ${name} age: ${age}`);
  } catch (error) {
    alert(`Failed to retrieve the object, with error code: ${error.message}`);
  }
}  

//Saving your First data object on Back4App
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final keyApplicationId = 'YOUR_APPLICATION_ID_HERE';
  final keyClientKey = 'YOUR_MASTER_KEY_HERE';
  final keyParseServerUrl = 'https://parseapi.back4app.com';
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
  final objectId = await savePerson();
  final person = await getPerson(objectId);
  print('Person: ${person.toString()}');
  print('Name: ${person['name']}');
  print('Age: ${person['age']}');
}
Future<String> savePerson() async {
  final person = ParseObject('Person')
    ..set('name', "John Snow")
    ..set('age', 27);
  await person.save();
  return person.objectId;
}

//Reading your First Data Object from Back4App
Future<Map<String, dynamic>> getPerson(String objectId) async {
  QueryBuilder<ParseObject> queryPerson =
  QueryBuilder<ParseObject>(ParseObject('Person'))
    ..whereEqualTo('objectId', objectId);
  final ParseResponse apiResponse = await queryPerson.query();
  if (apiResponse.success && apiResponse.results != null) {
    final name = apiResponse.results.first.get<String>('name');
    final age = apiResponse.results.first.get<String>('age');
    return {'name': name, 'age': age};
  } else {
    return {};
  }
}

ParseObject person = new ParseObject("Person");
person.put("name", "John Snow");
person.put("age", 27);
person.saveInBackground();

iOS Swift
iOS Objective-C

var person = PFObject(className:"Person")
person["name"] = "John Snow"
person["age"] = 27
person.saveInBackground {
  (success: Bool, error: Error?) in
  if (success) {
    // The object has been saved.
  } else {
    // There was a problem, check error.description
  }
}

PFObject *person = [PFObject objectWithClassName:@"Person"];
person[@"name"] = "John Snow";
person[@"age"] = 27;
[person saveInBackgroundWithBlock:^(BOOL succeeded, NSError *error) {
  if (succeeded) {
    // The object has been saved.
  } else {
    // There was a problem, check error.description
  }
}];

//Saving your First Data Object on Back4App
$person = new ParseObject("Person");
$person->set("name", "John Snow");
$person->set("age", 27);

try {
  $person->save();
  echo 'New object created with objectId: ' . $person->getObjectId();
} catch (ParseException $ex) {  
  echo 'Failed to create new object, with error message: ' . $ex->getMessage();
}

//Reading your First Data Object from Back4App
$person = new ParseQuery("Person");

try {
  $object = $person->get("yGxF7tnuuk");
  $name = $object->get("John Snow");
  $age = $object->get(27);
  echo $object-> getObjectId() . " - " . $name . " - " . $age ;
} catch (ParseException $ex) {
  echo 'Failed to retrieve the object, with error message: ' . $ex->getMessage();
}

ParseObject person = new ParseObject("Person");
person["name"] = "John Snow";
person["age"] = 27;
await person.SaveAsync();

ParseObject person = new ParseObject("Person");
person["name"] = "John Snow";
person["age"] = "27";
Task saveTask = person.SaveAsync();

Step 5 - Go to Dashboard and check your Data

After running the code choosed above, you can back to your Dashboard and refresh the browser to see the changes :)

Conclusion

At this guide, you have learned how to install Parse SDK in your project to connect your app with Back4App. We also have described how you can find your app keys.

Create a new App

Read and Write data