Creating Websites and Apps: Elementary Introduction to the Wolfram Language

36	Creating Websites and Apps

The Wolfram Language makes it easy to put anything you create onto the web.

Create some graphics:

GeoGraphics[GeoRange -> All, GeoProjection -> "Albers"]

Publish it to the cloud:

CloudPublish[GeoGraphics[GeoRange -> All, GeoProjection -> "Albers"]]

If you don’t tell it otherwise, CloudPublish will set up a new webpage in the Wolfram Cloud, with a unique address. Anyone in the world who goes to that webpage with their web browser will find your graphics there.

The content you publish to the web doesn’t have to be static graphics; it can be active and dynamic too.

Publish a Manipulate to the web:

CloudPublish[ Manipulate[ Graphics[Table[Circle[{0, 0}, r], {r, min, max}]], {min, 1, 30, 1}, {max, 1, 30, 1}]]

Now you’ll get a webpage with active sliders and so on. You’ll be able to use them in any standard web browser, though because they have to communicate over the internet, they’ll run slower than if they were directly on your computer.

CloudPublish normally works by first doing whatever computation it can, and then putting the result on the web. This means, for example, that CloudPublish[Now] will make a webpage that always just shows the time when it was deployed. If instead you want to make a webpage that gives the current time every time the page is requested, you can do this with CloudPublish[Delayed[Now]].

Use Delayed to make a clock that’s regenerated every time the webpage is requested:

CloudPublish[Delayed[ClockGauge[Now]]]

Now every time you go to the webpage, it’ll regenerate the clock in the Wolfram Cloud, and put a new version onto the webpage.

You can create a “real-time dashboard” by specifying an update interval.

Set up the webpage you create to automatically update itself every 2 seconds:

CloudPublish[Delayed[ClockGauge[Now], UpdateInterval -> 2]]

We’ve talked about making things we can think of as websites. But in the Wolfram Language it’s also easy to make your own form-based web apps.

The basic idea is to set up a FormFunction that defines both the structure of a form, as well the action that’s performed when the form is submitted.

Let’s set up a form with a single field labeled name that expects the name of an animal, and when this is submitted, generates an image of that animal.

Set up a form-based app with a single input field for entering the name of an animal:

CloudPublish[FormFunction[{"name" -> "Animal"}, #name["Image"] &]]

Now if you go to that web address, you’ll see a form:

Submit the form and you’ll get back a picture of a tiger:

You can have your form generate anything, including, for example, an active Manipulate.

Generate a Manipulate from a form:

CloudPublish[ FormFunction[{"name" -> "Animal"}, Manipulate[Rotate[#name["Image"], t], {t, 0, 360 °}] &]]

You can set up a form with any number of fields. For each field you say what type of input it should accept using the same specifications as Interpreter.

Publish a form that accepts two numbers:

CloudPublish[ FormFunction[{"x" -> "Number", "y" -> "Number"}, #x + #y &]]

If you try to give this form an input that isn’t a number, you’ll get an error:

You can have fields that expect strings (“String”) or integers (“Integer”) or dates (“Date”) or hundreds of other kinds of things.

When you ask for “real-world” types of input, like “Animal” or “City”, CloudPublish automatically sets up smart fields in your form, indicated by

, that use natural language understanding to interpret what’s entered in them. But for more-abstract types of input, like numbers, you can for example choose between “Number”, “SemanticNumber” and “ComputedNumber”.

"Number" only allows explicit numbers, like 71. "SemanticNumber" also allows numbers in natural language, like “seventy-one”. "ComputedNumber" also allows numbers that have to be computed, like “20th prime number”.

Allow numbers specified by natural language:

CloudPublish[ FormFunction[{"x" -> "SemanticNumber", "y" -> "SemanticNumber"}, #x + #y &]]

“Seventy-one” works as a semantic number; to find the prime requires a computed number:

If you specify a type of input like “Image”, you’ll get special controls for acquiring the image—like direct access to the camera or photo gallery on a mobile device.

Publish an edge-detection app for images:

CloudPublish[FormFunction[{"photo" -> "Image"}, EdgeDetect[#photo] &]]

On a mobile device, you can get the image from the camera:

36 Creating Websites and Apps