Message:

Subscribe rss
Blog categories
Spread the love

In this write-up we review a JavaScript application we recently ported to Backendless. The application is an “editable invoice” which automatically saves its data including invoice line items, customer address, your own address, invoice number, etc. It is a good example demonstrating how to work with “related persistent data”, which means you can save a hierarchy or objects containing other objects (the “Invoice” object, contains a collection of “Line Items”). The application also demonstrates the functionality of user registration and login, although we stopped short of connecting the invoices with the user accounts (which would be fairly simple to add).

The Editable Invoice application is an effort by noBackend.org which helps educating the developers about the advantages of BaaS. The vision is to provide a reference implementation with various backends.

backendless editable invoice - JavaScript 'Invoice' App - with BaaS Data Management, User Registration and Login

The source code for the application has been push to our Github account.

Follow the steps below to setup and see the application in action:

  1. Register/login to the Backendless console. An application is created during the registration process or you can create one later at any time.
  2. Select an application once you login to console.
  3. Click the Manage icon. The App Settings screen will open up. The screen contains many useful settings and properties, but for now you will need only the Application ID and the Secret Key for the JavaScript clients.
    backendless app id secret key - JavaScript 'Invoice' App - with BaaS Data Management, User Registration and Login
  4. Keep the browser window open (you will need to copy/paste the ID and the Key from that screen) and open /editable-invoice/backendless/applogic.js in a text editor.
  5. Copy/paste the Application ID and Secret Key into the code on line 1:
  6. There is only one additional configuration step needed before you can run the application. Click the Users icon in the Backendless Console. The “User Properties” screen will open by default. Using this screen you can define the user properties which will be used by the Editable Invoice app. Click the “Add Custom Property” button and add the “login” property.
    adding login property - JavaScript 'Invoice' App - with BaaS Data Management, User Registration and Login
  7. Click “Save”. Make sure to select the “login” property as “Identity” by selecting the radio button for that property. The User Properties screen should look as shown below:
    editable invoice user properties - JavaScript 'Invoice' App - with BaaS Data Management, User Registration and Login
  8. Run the example. You can open the editable-invoice/index.html in a browser directly from the file system. Alternatively, you can deploy the entire application to a web server and load editable-invoice/index.html through a URL.

Try the following once you run the application:

  • Modify the invoice name by changing the main header at the top.
  • Modify the “Your Address” field.
  • Modify the “Your client’s address” field.
  • Add a new item to the invoice – enter item code, description, unit price and quantity. Click the “Add item” button.
  • Reload the application – you should see the invoice you just modified.
  • Check out the Sign Up/Sign In forms.
  • Login to Backendless Console and check the registered users in Data > Users, as well as data stored by the application in the “invoice” and “item” tables – the tables will be created automatically once you start using the example.

Reviewing Code

Below you will find some of the examples of using the Backendless API in the application:

  • Loading all invoices upon the start of the application. (/backendless/applogic.js, lines 3-15)

    Line 5 obtains a reference to the “invoices” data store in Backendless. The returned object provides access to the CRUD (Create, Retrieve, Update, Delete) operations for that table.
    Line 8 (find) sends a request to load all the previously saved invoice objects.
    Lines 10-13 request that the invoice objects returned by Backendless included references to the related “items” objects (an Invoice contains line items or just “items”).
  • Saving/Updating an Invoice. (/backendless/applogic.js, lines 39-62)

    Lines 3-7: check if the invoice has been previously saved. Uses the “condition” parameter where it specifies to search for the invoice by the “id” property.
    Lines 10-19: if the invoice is found (i.e. it has been previously saved), iterate through the items and assign the item’s “objectId”. In this example each “item” has an “id” assigned on the client-side (/shared/js/invoice.js, lines 14 and 28). On top of this, Backendless assigns its own ID to each saved object. That ID is stored in the “objectId” property. It is important to maintain consistency between the objects by correlating the IDs. This block of code accomplishes it for the save operation.
    Line 22: once the IDs are assigned, the entire invoice (with all the items) is saved.
  • Deleting an Invoice. (/backendless/applogic.js, lines 64-68)
  • User Registration. (/backendless/applogic.js, lines 82-93)

    Lines 2-5: Create a Backendless.User object which contains the values for all the user properties defined in step 7 above.
    Lines 6-11: Send a request to Backendless to register the user. The request is asynchronous with the Backendless.Async object handling the callbacks for success and error functions.
  • User Login. (/backendless/applogic.js, lines 94-104)

    Line 2: Send a login request to Backendless. The first argument must be a value for the property defined as “Identity” (see step 7 above).
Posted in Examples, JavaScript
Spread the love

Video broadcasting and streaming is one of the coolest features of Backendless. Our Media Service API enables client-server functionality for working with live and on-demand audio and video content. An application using the Media Service API can broadcast audio and video from the devices cameras and microphone and Backendless automatically handles streaming to other clients as well recording of the content on the server. The API also supports the capability to stream the pre-recorded (on-demand) content managed by the Media Service. Details are available in the documentation.

This post describes how to build an iOS application which can record a video on the server and then subsequently play it back. To start, you will need to create a project in XCode:

  1. Goto File->New->Project
  2. Select Single View Application and click Next button
  3. Enter application name for e.g. SimpleVideoService
  4. Choose iPhone device and click next
  5. Choose a location for your project

Now you have a project with single view. A backendless application must be initialized with an ID and a secret key. It can be done in AppDelegate.m:

The values for the APP_ID and SECRET_KEY variables must be obtained from Backendless Console. Login to the console, create/select your application and click the Manage icon. The default subsection is App Settings:

appsettings - Developing an iOS Video Recorder and Player in 5 minutes

Use the “Copy” buttons to copy the application id value and the secret key for iOS into your code. The copied values must be assigned to the “APP_ID” and “SECRET_KEY” variables accordingly.

Drag and drop view component to your main view:

BaaS video service Screen 1 - Developing an iOS Video Recorder and Player in 5 minutes

Change the background for the view:

BaaS video service Screen 2 - Developing an iOS Video Recorder and Player in 5 minutes

Add buttons to control the video stream:

BaaS video service Screen 3 - Developing an iOS Video Recorder and Player in 5 minutes

Download the Backendless SDK for iOS from http://backendless.com/downloads, unzip it and drag and drop library to your project files:

BaaS video service Screen 4 - Developing an iOS Video Recorder and Player in 5 minutes

Also, you need to add the following standard libraries:

  • AudioToolbox.framework
  • AVFoundation.framework
  • CoreData.framework
  • CoreGraphics.framework
  • CoreMedia.framework
  • CoreVideo.framework
  • Libz.dylib
  • Security.framework

BaaS video service Screen 5 - Developing an iOS Video Recorder and Player in 5 minutes

Open ViewController.m and import backendless and define the constants as shown below:

Declare the following variables:

Open ViewController.h and declare the *preview property to view the picture from the camera and *playbackView to play the recorded video:

The *preview property needs to be associated with a View. In order to do this select the view component and drag and drop New Referencing Outlet to preview.

BaaS video service Screen 6 - Developing an iOS Video Recorder and Player in 5 minutes

This view will be used for the camera. Also we need a view to play the video. Add the “Image View” component and tie it with the *playbackView property.

Now we should create handlers for control the buttons add their signature to ViewController.h:

Add an implementation of the methods in ViewController.m:

Recording Video

On line 3 create an instance of MediaPublishOptions and reference a UI component that will show the video being recorded.

On line 4 we create a publisher. The publisher constructor accepts stream name, a tube name, options and a responder. When the user stops the recording, we check if we are currently publishing a video, then disconnect from the stream and set the publisher and player to nil.

Playing Recorded Video

On line 3 we create an instance of MediaPlaybackOptions and pass in the UI component that will show the recorded video.

On line 4 we create the media player. The constructor accepts a stream name, a tube name, options and the responder. Since the responder is set to self, the ViewController class must implement IMediaStreamerDelegate.

As we implement IMediaStreamerDelegate we should add the following code to handle stream state changes:

 Everything is almost ready, just link the buttons with the handlers:

BaaS video service Screen 7 - Developing an iOS Video Recorder and Player in 5 minutes

Repeat the same for other buttons.

That’s all, enjoy simple smile - Developing an iOS Video Recorder and Player in 5 minutes

You can download the sample code here.

Posted in Examples, iOS
Spread the love

The Backendless API for JavaScript can be used not only from the browser-based JavaScript applications, but also from a Node.js program. Using the API is very straight-forward. The instructions below describe the steps for setting up and running a basic Node.js example with Backendless. The example demonstrates registering a user with your Backendless application. It gathers email address and password and uses the User Registration API call to create an account.

  1. Just like with the browser JavaScript, an application must be identified using the application ID and a secret key. To get the ID and the key, login to the Backendless console, create/select your application and click the Manage icon. The default subsection is App Settings:
    appsettings - Using Backendless API with Node.js
  2. Save the code shown below into a file. Name the file example.js.
  3. Use the “Copy” buttons to copy the application id value and the secret key for JavaScript. The copied values must be assigned to the “appId” and “secretKey” variables accordingly.
  4. Download the Backendless JavaScript library file and save it in the same directory where you created example.js (step 2).
  5. Open a command prompt window and run the example using the following command:
    node example.js

The source code of the example is below (double-click the code to remove the highlighting, or click the <> button to toggle it):

Have fun and please let us know if you run into any problems!

Spread the love

Developing JavaScript applications with a backend-as-a-service platform like Backendless significantly simplifies and speeds up the development process. With the latest release of our SDK for JavaScript, this equally applies to both mobile and browser-based apps as well as Node.js applications. The video below reviews the available APIs and demonstrates sample applications showing the simplicity, ease-of-use and the power of Backendless services. Enjoy!

Posted in JavaScript, Video
Spread the love

js 300x300 - Backendless SDK for JavaScript is updated - now with Node.js supportWe have just updated our JavaScript library enabling API access to the Backendless services. The update includes support for Node.js applications as well as several bug fixes. The SDK is available for download in the downloads section of the website. Additionally, if you develop JS applications, you can always import the latest version of the Backendless JavaScript library using the following URLs:

Please let us know about any problems or if you have any suggestions, post them to the Backendless Community Support site.

Posted in JavaScript
Spread the love

Flex Logo - Backendless SDK for ActionScript (Flex/AIR) is availableOur SDK for ActionScript is now available. Using the SDK developers can build Flex and AIR applications without worrying about any of the server-side tasks. The SDK includes the APIs for all Backendless services, including:

  • Data Service – work with your data at the object level. Store, retrieve, update or delete ActionScript objects as database records.
  • Messaging Service – easily create chat applications, or use the publish/subscribe messaging for instant synchronization and data sharing.
  • Push Notifications – deliver native push notifications to iOS and Android devices. Mobile AIR applications can use the Backendless API to register for notifications.
  • Media Service – easily add video streaming for broadcasting or recording to your mobile or desktop applications.
  • File Service – upload and share files between all users of your application.
  • User Service – add user registration and login logic with a single line of code.

You can download the SDK for ActionScript from the downloads page. The SDK includes several examples demonstrating the API in action. To learn more about Backendless sign up for our weekly webinars. There is one scheduled for tomorrow, it is still not too late to register.

As always, we would love to hear from you. Please share your experiences working with the SDK or post any questions you might have to our community support page.

Posted in ActionScript
Spread the love

Hey guys, we just pushed the first version of the Backendless API docs to our website. The docs are work in progress, you will see there are some holes and missing sections, but rest assured we are actively working on improving the docs. At this point we would like to offer you two sets of the API documentations:

Just like with our service, services, SDKs and examples, we need to hear from you about the docs as well. Please share your feedback with us either by email or through the Support Portal.

Posted in Status
Spread the love

Here’s a brief overview of Backendless which should give you an idea about the service. What do you think? Please post a comment.

Spread the love

now open 300x200 - Backendless Beta is OpenI am very happy to announce that the Beta release of Backendless is available. We invite you to register and try out the service. Getting started with Backendless is very easy:

  1. Download Backendless SDK. We offer five different builds: SDK for iOS, Android, JavaScript, .NET/Windows Phone and ActionScript (Flex/AIR). The SDKs include a library which provides access to the Backendless APIs. Additionally, each SDK includes several examples demonstrating the APIs in action.
  2. Register for a developer account. When you create an account, the service will also create your first application. Each application has its own unique ID and API keys (also known as “secret keys”). Once registered and confirmed your email address, login to the Backendless Console.
  3. Run the examples or build your own app. To run the examples from the SDK, make sure to put the application ID and secret key from your application into the source code of the example. The “getting-started” document included with the SDK provides detailed instructions on how to accomplish this step.

Since this is a Beta, you might run into some glitches and we need to hear from you about anything that might go wrong. Whether it is a bug or an idea for improvement, please share it with us. The best way to communicate your ideas or report bugs is through our Backendless support portal.

We can’t wait to see what kind of applications you will build with our service!

Posted in Status
"mobile application development post image"
Spread the love

This is just a test post. Starting up the engines…

Posted in Uncategorized