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:
- Register/login to the Backendless console. An application is created during the registration process or you can create one later at any time.
- Select an application once you login to console.
- 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.
- 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.
- 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:
- 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.
Below you will find some of the examples of using the Backendless API in the application:
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”).
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.
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.
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).