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:

FormFunction lets you set up “one-shot” forms. You fill in a form, press Submit, then get a result. If you want to get another result, you have to go back to the form, and then submit it again. FormPage lets you set up pages that always include the form along with the result—like, for example, Wolfram|Alpha or a search engine would.

Create a form page that shows a map of a city:

CloudPublish[FormPage[{"city" -> "City"}, GeoGraphics[#city] &]]

You can change the field and submit again to get a new result:

Vocabulary

CloudPublish[expr]		publish to the cloud
Delayed[expr]		computation delayed until it is requested
FormFunction[form,function]		representation of a deployable form
FormPage[form,function]		representation of a deployable form+result page

Exercises

Check your answers in the Wolfram Cloud

36.1Create a website that displays a new random number up to 1000 at size 100 every time it is visited. »

Sample expected output:

Out[]=

Answer & check your solution

36.2Publish a form on the web that takes a number x and returns x^x. »

Sample expected output:

Out[]=

Answer & check your solution

36.3Publish a form on the web that takes numbers x and y and computes x^y. »

Sample expected output:

Out[]=

Answer & check your solution

36.4Publish a form on the web that takes the topic of a Wikipedia page and gives a word cloud for the page. »

Sample expected output:

Out[]=

Answer & check your solution

36.5Publish a form page on the web that takes a string and repeatedly gives a reversed version at size 50. »

Sample expected output:

Out[]=

Answer & check your solution

36.6Publish a form page on the web that takes an integer n and repeatedly generates a picture of a polygon with a random color and n sides. »

Sample expected output:

Out[]=

Answer & check your solution

36.7Publish a form page that takes a location and a number n and repeatedly gives a map of the n nearest volcanoes to the location. »

Sample expected output:

Out[]=

Answer & check your solution

+36.1Create a website that displays a random red regular polygon with between 3 and 8 sides every time it is visited. »

Sample expected output:

Out[]=

Answer & check your solution

+36.2Publish a form on the web that takes numbers x and y given in English (e.g. “eight”) and computes x^y. »

Sample expected output:

Out[]=

Answer & check your solution

Q&A

Who can see material I publish with CloudPublish?

It’s on the open web, so anyone. If you want to restrict it, you can use CloudDeploy, which lets you deploy material just for yourself or for other specified categories of users.

Is what I publish accessible on a mobile device?

Yes, so long as your device can access the web. You’ll be able to do slightly more if you use the Wolfram Cloud app. For example, in that case you can specify a custom “app” icon using the IconRules option of CloudPublish.

Why are the web addresses so long?

They’re UUIDs (universally unique identifiers) that are long enough that with overwhelming probability no two identical ones will ever be created in the history of the universe. You can get a short URL using URLShorten.

How do I publish to the cloud in a particular format?

Just ask for the format using ExportForm (or by giving the format inside FormFunction). Popular formats include “GIF”, “PNG”, “JPEG”, “SVG”, “PDF” and “HTML”. (Note that “form” in ExportForm refers to a “form or type of output”, not a “form to fill in”.)

How can I embed a webpage generated by CloudPublish?

Use EmbedCode to generate the necessary HTML that you can paste into the source of the webpage you are constructing. You can either set up an iframe or generate JavaScript to use the Wolfram Notebook Embedder to more deeply integrate into your webpage.

How do I specify a label for a field in a form?

Just say e.g. {"s", "Enter a string here"} "String". By default, the label shown for a field is just the name you use for the variable corresponding to the field. You can use any label you want for a field, including graphics, etc.

How do I specify initial or default values for a field in a form?

Say e.g. "n""Integer"100.

How do I restrict the values that can be entered in a particular field of a form?

Use Restricted. For example, Restricted["Number", {0, 10}] specifies a number between 0 and 10. Restricted["Location",Plain

] specifies a location in Italy.

How do I specify the look of a form?

To start with, use options like PageTheme. For more control, you can put a FormObject inside a FormFunction, and give very detailed instructions. You can include any headers or text or styling that can appear in a notebook.

Can forms have checkboxes, sliders, etc.?

Yes. They can use the same controls as Manipulate, including checkboxes, radio buttons, popup menus, sliders, color pickers, etc.

Can I make extensible and multipage forms?

Yes. Field specifications can include constructs like RepeatingElement and CompoundElement. And forms can consist of lists of pages, including ones that are generated on the fly. (If the logic gets sufficiently complicated, you’ll probably want to use AskFunction instead of FormFunction.)

When I publish to the cloud, where are the computations actually done?

In the cloud ☺. Or in practice: on computers at centralized locations around the world.

What about APIs?

APIFunction works very much like FormFunction, except it creates a web API that you can call by giving parameters in a URL query. EmbedCode lets you take an APIFunction, and generate code to call the API from many external programming languages and environments.

Can I publish whole notebooks to the cloud?

Yes! In the cloud, just use the Publish button; on the desktop use the File > Publish to Cloud... menu item.

Tech Notes

Hyperlink["url"] or Hyperlink[label, "url"] represents a hyperlink to publish on the web. The label can be anything, including an image. GalleryView lets you make an array of hyperlinks.
Published 3D graphics are by default rotatable and zoomable.
AutoRefreshed makes a webpage be automatically refreshed on a schedule, so it’s ready if you ask for it.
If you use CloudDeploy, you can give detailed permissions for who can access what you deploy, and what they can do with it. Setting $Permissions specifies a default choice of permissions.

More to Explore

Guide to Creating Websites and Apps in the Wolfram Language »

Next Section

More Learning

Tech Support

Educational Programs for Adults

Educational Programs for Youth

Events

Wolfram Initiatives

Educational Resources

Hobbies & Projects

Wolfram Solutions

Wolfram Solutions For Education

Get Started

Grow Your Skills

Work with Us

Read

Educational Programs for Adults

Educational Programs for Youth

Events

36 Creating Websites and Apps