Message:

Monthly Archives

June, 2013

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.

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.
  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.
  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:
  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

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:

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:

Change the background for the view:

Add buttons to control the video stream:

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

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

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.

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:

Repeat the same for other buttons.

That’s all, enjoy :)

You can download the sample code here.

Posted in Examples, iOS