This blog post is aimed at showing you how to navigate your data in the SashiDo Dashboard and use the JavaScript SDK to perform the most commonly used operations while building a mobile application.
For this purpose we will be using an already existing set of example data - the Telerik Friends Sample App. If you are not familiar, such an example app can be created by navigating to a new application in Telerik Platform -> Data and clicking the Enable and use sample data button. The respective frontend code is available on GitHub. For simplicity's sake the examples below will be simplified to include only the most relevant bits and pieces of the process.
Vocabulary
Before proceeding, you should know how some of the most common terms, fields and features of Telerik Platform Backend Services translate to Parse Server.
Fields
Additionally all fields casing is transformed from pascal case to lower camel case to conform with the Parse Server and JavaScript conventions. E.g. the field CommentsCount is transformed to commentsCount.
Features
Cloud Code
Dashboard navigation 101
This is how our test application's structure looks like in Telerik Platform:
After migrating it to SashiDo we are presented with the following information in the SashiDo Dashboard:
On the left, you can see your classes and on the right the respective objects, with their relations, images and fields translated to their respective Parse Server alternatives. If you are curious in more details what and how is migrated, and what you would have to do manually, refer to the blog post Checklist for successful migration.
First steps
Alrighty, we have migrated the data, but our web application is still using Telerik Platform. Let's get through the hurdles and differences you might experience while first switching from Everlive's JS SDK to Parse's JS SDK. Each example will build up on top of the previous ones, so keep that in mind.
You can always refer to the Parse Docs where every functionality is explained in details.
Initialization
With Everlive you need to supply your AppID.
const Everlive = require('everlive-sdk');
const everlive = new Everlive('c9o5u3p9j4h9o5bx');
SashiDo requires your AppID, JavaScriptKey and ServerURL. Both can be found in AppSettings -> Security & Keys.
const Parse = require('parse');
Parse.initialize('17joQ7Azu9O1mTKdntp8h3IndS6h4VUDKFbNN5W3');
Parse.javaScriptKey = 'CsgJs1v0Dhw3cpeKmtVZL2PRKUI6dUbDbRQS5U4W';
Parse.serverURL = 'https://pg-app-r1q3oghvrb1q6ys6qev81p5ccp3sj2.scalabl.cloud/1/';
Authentication
The gateway to every application is its login/registration. In our Friends app, only registered users can create new Activities.
Telerik Platform:
const username = 'my_username';
const password = 'super_secret_password';
//register
everlive.users
.register(username, password, {
Email: 'my_email@sashido.io'
})
.then(() => console.log('registered!'));
//login
everlive.authentication
.login(username, password)
.then(() => console.log('logged in!'));
Parse:
const username = 'my_username';
const password = 'super_secret_password';
//register
const user = new Parse.User();
user.set('username', username);
user.set('password', password);
user.set('email', 'my_email@sashido.io');
user.signUp().then(() => console.log('registered!'));
//login
Parse.User.logIn(username, password).then(() => console.log('logged in!'));
Reading Activities
After we are logged into our application it's only natural to read some activities. The activities are something like the posts in your Facebook feed.
Telerik Platform:
const Activities = everlive.data('Activities');
Activities.get()
.then(activities =>
activities.result.map(activity => ({
id: activity.Id,
text: activity.Text
}))
)
.then(activities => console.log(activities));
Parse:
const Activities = Parse.Object.extend('Activities');
const activitiesQuery = new Parse.Query(Activities);
activitiesQuery
.find()
.then(activities =>
activities.map(activity => ({
id: activity.id,
text: activity.get('text')
}))
)
.then(activities => console.log(activities));
Both will print the following:
[
{
id: "334cda51-b336-11e7-b6af-eddd2fe7d355",
text:
"It is finally time for graduation! Good job everyone, we made it."
},
{
id: "334cda52-b336-11e7-b6af-eddd2fe7d355",
text: "The most amazing sunset I have ever seen at Phuket, Thailand"
}
]
Reading the comments for an Activity
In both platforms the comments have a relation. To their respective parent activity.
Here's how we can find the comments for the first activity in Telerik Platform:
const oneQuery = new Everlive.Query();
oneQuery.take(1);
Activities.get(oneQuery)
.then(result => result.result[0])
.then(firstActivity => {
const query = new Everlive.Query();
query.where().eq('ActivityId', firstActivity.Id);
const Comments = everlive.data('Comments');
Comments.get(query)
.then(comments =>
comments.result.map(comment => ({
comment: comment.Comment
}))
)
.then(comments => console.log(comments));
});
And in Parse:
const activitiesQuery = new Parse.Query(Activities);
activitiesQuery.first().then(firstActivity => {
const Comments = Parse.Object.extend('Comments');
const query = new Parse.Query(Comments);
query.equalTo('activityId', firstActivity);
query
.find()
.then(comments =>
comments.map(comment => ({
comment: comment.get('comment')
}))
)
.then(comments => console.log(comments));
});
The result would be:
[
{
id: "3810cb01-b336-11e7-b6af-eddd2fe7d355",
comment: "Thanks :)"
},
{
id: "3810cb00-b336-11e7-b6af-eddd2fe7d355",
comment: "Congratulations!"
}
]
Creating an activity
Let's close the cycle by creating an activity. When creating an activity we need a Picture, Text and UserId of the creator.
For simplicity's sake we will skip the boilerplate code of getting a base64 of the picture we will be uploading. More on the topic you can find in the Parse Docs about files.
Telerik Platform:
const file = {
Filename: 'picture.png',
ContentType: 'image/png',
base64: 'some-base-64'
};
everlive.users.currentUser().then(user => {
return everlive.files
.create(file)
.then(response => {
return Activities.create({
Text: 'new activity!',
UserId: user.Id,
Picture: response.result.Id
});
})
.then(() => console.log('activity saved!'));
});
The difference with Parse is that we have to set the acl so that only our user can edit the activity and anybody, including unregistered users, can read it.
const picture = new Parse.File(
'picture.png',
{ base64: 'some-base-64' },
'image/png'
);
picture
.save()
.then(() => {
const currentUser = Parse.User.current();
const activityACL = new Parse.ACL(currentUser);
activityACL.setPublicReadAccess(true);
const newActivity = new Activities();
newActivity.set('text', 'new activity!');
newActivity.set('picture', picture);
newActivity.set('userId', currentUser);
newActivity.setACL(activityACL);
return newActivity.save();
})
.then(() => console.log('activity saved!'));
Fin
After going through these basic steps, you now know what your data will look like when it is migrated to SashiDo, where to find it, how to query it and how to create more data.
Make sure not to miss on our other blog posts, such as:
- Checklist for successful migration?
- Best practices in structuring SashiDo accounts
- How to start using GitHub with SashiDo
- How to set up iOS push notifications in SashiDo
- Android Push Notifications: How to start using FCM
- Static web hosting with SashiDo
- GitHub integration of Advanced Cloud Code
- Getting started with Background Jobs
- How to set up WebHooks on SashiDo
- Realtime with Parse Server Live Queries
Happy Migration!
Germany
Bulgaria
