Developing Apps for Handibot V2 question.

I would like to get some feedback on developing Apps for the new Handibot V2 since it has been out for a little while now. I'm considering the purchase of the Handibot V2 since it is finally available. I had the Handibot V1 Developer Edition but returned it shortly after purchase due to the lack of promised info for developing Apps, etc.

In particular, I would like to know if anyone (general user) outside of Shopbot Tools has developed any Apps just using the info that is provided on github.

I've been looking over the fabmo-example-app on github that is supposed to be the template (I guess) for creating new apps and have revisited javascript and jQuery, etc to better understand how to put together an App but it is still unclear as to what exactly is needed in order to develop and install an App to be used with the Handibot. I haven't done any web development in quit some time so I'm a little rusty with html, css, javascript, jQuery, etc.

I have also looked at fabmo.js and the API documentation on the functions available but think a little more detailed documentation with an example of how a particular function in the API should be used could be provided.

I've reveiwed several of the provided apps and looked at the code in the index.html and other files provided with the examples.

What are the .fma files and how are they created?

I think there needs to be a App Development Guide with general steps on how the App should be developed and installed. In the "Introduction to Handibot Software and Handibot Apps" github file there is mention of a FabMo App Developer website but none of the links in the doc are active. I think this link is just referring to gofabmo.org though.



Edited 1 time(s). Last edit at 10/17/2016 01:22PM by gclayton.

We appreciate your interest! We are working to get more documentation together for App developers. We have a few different types of developers, and sometimes it can be hard to get documentation out the door that caters to each individual interest. Our app developer resources are currently very example and reference heavy, without a lot of plain-language "Getting Started" type narrative to get people like you up and running quickly.

What I'm going to do below is to scratch out a very quick guide that hopefully answers some of your questions, and follow that up with a current list of links to the most interesting docs we have that are relevant to you. After that, I invite you to ask your questions here, where we will do our best to answer them, and hopefully soon, we will codify more and more of this information in our official documentation.

Ok.

Note that in the discussion below, I will refer to apps as "FabMo Apps" - this is because, as you probably know, FabMo is the name of the software system that runs on the Handibot. You may wish to think of them as "Handibot Apps" - here, the terms are interchangable

FabMo App Basics
A FabMo app is a single page web application that is hosted by a FabMo tool. It runs in the users browser inside a software container called the "FabMo Dashboard" and usually communicates back to the tool by way of a javascript library called fabmo.js FabMo apps come bundled in packages called .fma files, which are really just zip files that have their extension changed from .zip to .fma, in order to distinguish them from zip files used for other purposes. Apps use the same web technologies (HTML,CSS,JS,etc) that are seen everywhere else, and can mostly take advantage of the same development tools and strategies that are used by other web platforms.

What's in an App
There are only a few absolutely necessary components of an app:

1. A manifest, called package.json that describes the app
2. An HTML page (usually called index.html) that comprises the main user interface for the app
3. An icon file used to display the app on the dashboard

As mentioned above, you can simply zip up the relevant files, and rename the archive, changing the extension from .zip to .fma and viola! You have an app. These aren't the only files that are needed to create an app that's really useful, though, so you'll probably want at least some of the of the following files too, depending on the needs of your app.

• Additional visual assets, such as CSS stylesheets, images, fonts
• fabmo.js
• Additional third party javascript libraries such as jQuery, moment.js, paper.js, etc.
• Data files and/or documentation relevant to your app

This guide is not meant to be a javascript tutorial. There are plenty of good ones out there, so the choice of third party libraries is left as an exercise for the reader.

Creating an App
Creating an app initially just means creating the files above, and bundling them up in an fma package. Follow the steps below.

1. Create a directory to store all the files in your app
2. Create a package manifest to describe your app, called package.json. There is no formal documentation yet on what to include in the package.json, so the best thing to do at this time, is just copy the one from the example app and modify it to fit your app: [github.com]
3. Create an index.html file, with the content of your app. Again, this isn't a tutorial on HTML or Javascript, though we'll try to provide links to some that we like. Just a basic "Hello World" HTML page will do.
4. Create your icon. Icons are square, PNG format by convention. Usually we go for > 256x256px in size. If you're hard up for inspiration, you can drop the example app's icon in as a stand-in: [github.com]
5. Zip all of the files in your folder up. If you're on Windows, you can do this by selecting all the files and choosing "Send To->Compressed (Zipped) Folder" Make sure you zip up the files not the top level folder that contains your app. Your package.json must be at the top level in the zip archive for the app pacakage to be recognized by fabmo
6. Rename the zip archive, changing the file extension from .zip to .fma

Installing your App
To install your app, simply use the Install Apps... button on the dashboard and browse for your .fma archive. If you want to delete the app you've installed, you can do so from the FabMo configuration page, under "Apps"

Fleshing Things Out
An app with just an HTML page isn't going to do all that much on its own, so you'll pretty quickly want to move into adding functionality to your app. For this, you will want to include fabmo.js, which will allow you to make calls to the tool and to the dashboard. Functions are provided for things like moving the tool around, submitting jobs, notifying the user of events, retrieving tool configuration information and status and more. This is one place where some reference documentation actually exists: [fabmo.github.io]

Testing Your App
Currently, there are two ways to test an app. You can bundle it up in an FMA, install it on the tool, and run it, or you can run the app standalone, away from the tool. fabmo.js is designed so that even if you just open your app up in a browser (by opening your index.html file) it will behave sensibly, even though it doesn't have a connection to a host tool. This is the easiest way to do most of your app development. If you just view your index page in a browser, what you see there is more or less what you'll see when it's running in the dashboard's container environment. If you make API calls, such as those for submitting jobs to the tool, or driving the tool around manually, fabmo.js will try to simulate those behaviors, either by displaying a pop-up indicating what action was taken, or for job submission, downloading the g-code that would have been submitted to the tool if a tool connection was present. For apps that don't require complex back-and-forth interaction with the tool, this is the easiest way to go by far. For more complex apps, you'll have to install on the tool and tinker to get the full debugging experience, although making changes means editing, rebundling and re-installing the app. That workflow is improving, and we expect it to get more streamlined as time goes on. For an example of the behavior of fabmo.js when it is run outside a tool environment, visit any of the examples linked at [gofabmo.org]

Using the Examples
[gofabmo.org] provides a list of demo apps, but doesn't link directly to their source code. Here's a list of links below. If you're not into using git, you can simply download the source as a zip file, by using the "Clone or Download" button on the repository's github page.

Example App Source - A simple example
Touch and Go Source - Point-and-click tool navigation
Hole Cutter Source - Create a simple parametric job
Terrainman Source - More complex parametric job with some third party libraries

Resources
Below is a list of resources for app developers. It's a bit of a smattering, but may provide useful information if you're trying to get your head around how to bring your app online.

• [github.com] The FabMo github organization site. This includes all the repositories under the FabMo umbrella, many of which are apps that may serve as useful examples.
• [fabmo.github.io] This is the homepage for fabmo.js which includes some example API calls, and more importantly, the full, formal API documentation
• [gofabmo.org] This is the general fabmo site, which has a fair amount of information that is not relevant to fabmo app development specifically
• [demo.gofabmo.org] The FabMo demo, which is a relatively recent, running copy of the fabmo dashboard which allows you to test drive the system.

Looking Ahead
As I've said above, we're excited about your interest, and want to continue this discussion. Please do not hesitate to post any questions, comments, or feedback here on this forum. We are working to improve this documentation for everyone and committed to making sure that developers have the resources they need to get their projects moving. We will respond on this forum as quickly as we can!



Edited 1 time(s). Last edit at 10/20/2016 01:09PM by ryansturmer.

Great! Thanks for this detailed info. It does help to put things together. I had looked at most of the sample apps but wasn't getting exactly what needed to be included and where it needed to be placed to be found by the dashboard, etc.

I will keep you posted. Looking forward to playing around with this.

Thanks