Backbench Features and UI workflow

Last updated 3 months ago

This section highlights Backbench amazing features and UI workflow.

Sign Up/Sign In

The first thing you need to do to get started with Backbench is Sign Up for a free Account or Sign In if you are already registered.

Sign Up

You can register with Backbench by selecting Sign Up on our Home Page.

To create an account

  1. Sign Up by entering your email and a username.

  2. Click Sign up or hit Enter.

  3. Check the verification mail sent to your email and set the password.

Sign In

You can log into your account if you already have an account. Simply choose between the method you used for registration.

Sign In with your password, select your account type, and you'll be redirected to your Account Dashboard!

Account Home Page

Account Home Page shows the status of your entire account activities.

It has four major divisions:

  • The left panel has three action items namely, Home (Backbench landing page), My Bench, and Shared with me.

  • The center panel lets you keep track of key system metrics based on a calendar setting. It shows your total API invocation count, Memory usages, and Passed and Failed requests with intuitive detailings.

  • The right panel highlights your team's account activities from all your benches (your apps).

  • Select Profile button in the left of the top menu bar to visit Settings or to Logout.

My Bench

A bench is much like a project that brings together modules, endpoints, memory, schedules, graphs, and logs in one place. You can create as many benches as you want, and they all remain isolated letting you try new ideas fast. Once signed in, you will find all benches owned by you in My Bench section.

To create a bench

  1. Select My Bench on the left panel.

  2. Select +, in the upper right corner of the top menu bar.

  3. Name your bench, choose your preferred programming language, bench type, bench description and select CREATE.

Select the right corner of the bench to view bench details, to share your bench with other collaborators, to view bench key, or to delete a bench.

Note: Only a private bench can be shared with other collaborators, a Public bench is available only for BBLANG, and bench key is only required for Node.js applications.

Share

Share with Backbench is an amazing feature that lets you do more than just share your benches with any other Backbench developer. You can grant someone with Read/Write access permission to change files on your bench in real-time, or just let them view the files without any other rights using Read access permission.

To share your bench on Backbench, simply click the right Dropdown on a bench you'd like to share and select Share. You'll be prompted to enter Email/Username of the user you'd like to collaborate with.

In the Email/Username field, you can enter the email or username of the user that you want to share your bench with. You can also set permissions for that share. Permissions are located below and allow you to choose what limitations will your friend have while working on your bench. You can choose between "Read", "Read/Write", and "Admin".

If you're worried about the sanctity of your code after grant access to other developers, fear not. You can always take a look at a bench teams activities to view changes made to your bench over time. The Share can be removed by selecting the "Remove" icon from share menu.

Bench Dashboard

Account Home Page shows the status of your entire app activities.

It has three major divisions:

  • The left panel contains access to the set programming tools namely, Modules, Environment Variables, Endpoints, Memory. File Manager, Schedules, Graphs, and Logs.

  • The center panel shows your runtime log with Status, time, Request, run duration, and appropriate error message.

  • The right panel highlights your team's bench activities.

Modules

A module lets you express business logic in the form of functions that can be used anywhere in the platform from handling HTTP requests to generating data for graphs. You can create as many modules as you want, and move functions from one module to another as you wish.

To create a new module

  1. Select Modules on the left panel.

  2. Select +, in the upper right corner.

  3. Name your module, for example, say “hello.js” and select CREATE or hit Enter.

You will be taken to the editor automatically. Select Edit, in the upper right corner to write your program and select Save. You can update the module by selecting the folder to open the editor. Select the right corner of the module to rename, or to delete.

Note: Please use appropriate module file extension while using Node.js.

Debugging Utility

(Only for NodeJS)

A small utility to provide preliminary run-time errors. We have integrated this to third party JSHINT ( http://jshint.com/). It's a customized version of JSHINT where globals like console, require, exports are disabled.

To debug a program

  1. Go to editor, to edit a module.

  2. Select bug, in the upper right corner.

Env. Variables

This is where all your environment variables show up.

To add an Environment variable

  1. Select Environment Variables on the left panel.

  2. Select +, in the upper right corner.

  3. Name your key, and click on ADD.

Delete by selecting the Delete icon.

Endpoints

Backbench provides a fully functional HTTPS endpoint that is suitable for publishing internet-scale APIs and writing custom workflows on the internet, like cloud automation, orchestration, DevOps, continuous delivery, and deployment. Every bench contains a single HTTPS endpoint address by default as https://<username>-<benchname>beta-bench..backbench.io, which is displayed on the top bar.

You can respond to HTTP requests by setting up a handler, providing a path pattern and the function to invoke. Whenever a HTTP request matching the path is made, the corresponding handler function is invoked with the request information as argument. When multiple handlers are registered for the same path, the first one to match is selected.

To create a new handler

  1. Select Endpoints on the left panel.

  2. Select +, in the upper right corner.

  3. Set a Path, click on the field under the tag Handler and select the module function to be assigned, and click on CREATE.

Once the handlers have been assigned, you can make a request by clicking on the HTTP endpoint which is displayed on the top bar. To use the endpoint enter the path set by you at the end of the endpoint: https://<username>-<benchname>.beta-bench.backbench.io/<pathname>

Configuration

You can optionally enable the CORS setting that automatically adds the Access-Control-Allow-Origin header for accessing your API from the browser. Also, you can enable Static File Hosting to access static files through your endpoint.

Custom Domain

Backbench supports setting up Custom Domain setting. You just have to add a CNAME/ALIAS to backbench app.

Then you have to

  1. Select Edit, in the right corner.

  2. Enter your domain, and click on SET.

If it doesn't work, please check our CNAME Support guide in Troubleshoot section.

Memory

A production scale fully managed key-value store (No-SQL database) that requires absolutely no configuration and is fully programmable, making it easy to store and access data in your application. All you need to do is use the “bb:mem” module.

Select Memory on the left panel to view the data you have stored on your bench. Use our pre-programmed APIs for BBLANG and Node.js.

File Manager

Backbench File Manager lets you host a static website for a domain you own or use it for images, PDF’s, and other un-rendered content. Static web pages can contain client-side technologies such as HTML, CSS, and JavaScript.

To use File Manager select +, in the upper right corner to create a File, Folder, or to upload a file.

Select the right corner of the Folder to Rename, or to Delete.

Select the right corner of the File to Rename, Edit, Download, or to Delete.

Note: Please select Enable Static File Hosting at Endpoints page to make use of File Manager.

Import from Github: Backench has added this feature to static file manager. Now you can be able to import files from github directly to backbench and host them.

Schedules

Backbench provides you the ability to run tasks at a certain time or in a recurring fashion, ideal for setting up custom marketing campaigns and building custom workflows.

To create a new schedule

  1. Select Schedules on the left panel.

  2. Select +, in the upper right corner.

  3. Give Schedule a name, click on the field under the tag Target and select the function to be triggered.

  4. Click on the field under the tag Recurrence and Select one of the recurring fashion Hourly, Daily, Weekly, or Monthly.

  5. Now click on create to activate the schedule.

Once the module function has been assigned and the job is scheduled, You can schedule multiple tasks by selecting the + icon and delete by selecting the Delete icon.

Graphs

Backbench lets you visualize just about anything happening in your entire application from app downloads, page visits to custom system level metrics by providing powerful visualizations with programmable data sources that run in the context of your application.

Backbench uses Google Charts to render your charts and expects the return value of the data source function to be in their DataTable format (https://developers.google.com/chart/interactive/docs/datatables_dataviews)

To create a new Graph

  1. Select Graphs on the left panel.

  2. Select +, in the upper right corner.

  3. Give a graph name.

  4. Select the module function to be assigned to the Data Source field.

  5. Select a graph type. For example, Line, Bar, Pie, Column, etc, and select CREATE.

Once the graph is created, you can see the graph changing in real-time, get insight, and act accordingly to improve customer experience, enhance business processes, and gain a competitive edge. Click the Dropdown on your graph to Zoom, Reload, Edit, Download, or Delete your Graph.

Logs

Backbench also provides a fully featured logging system that helps you gain a better understanding of the flow of your application. It helps you manage complexity and allows you to rapidly develop and debug your internet application.

To create a new Log

  1. Use the function bb:log to log values at any time.

  2. Select Logs on the left panel to view logs.

Once you run your code, check the logging page for information such as Date and time at which the module function was accessed, the module function name for which the log has been generated and the logged message. You can select the top right Dropdown menu to Download or Delete your Logs.

Shared with Me

Once signed in, you will find all benches shared by others with you in "Shared with me" section.

Also, here you can check who shared a bench with you and the permission scope under Shared with me.

Settings

To access your Account Details or Billing Information, go to the top menu bar, select profile button, and click on Settings.

Account Details

You can see your Profile details, Billing details, and Account Information here.

To edit Users Profile click on the Edit Profile button under the profile pic and save new changes for Name, Phone number, Website, Organisation, your Public Email, and Billing Address.

Change Password

To change the account password, scroll down and click on the Change Password field to provide your old and new passwords and select update to successfully change the password.

Account Information

It highlights the account type you have with Backbench, you can upgrade your Backbench account by selecting upgrade button.

To delete an account with Backbench, click on Delete on the bottom right.

Account Billing Page

To access your monthly account bills, click on Billing information in Settings.

Billing information highlights your free and used resources with any additional cost that might occur. To view month wise bills click on the Dropdown under the Billing Information tab and select a month you wish to view or download the bill for.