Explore the latest version of An Elementary Introduction to the Wolfram Language »
36Creating Websites and Apps
The Wolfram Language makes it easy to put anything you create onto the web.
In[1]:=
Click for copyable input
Out[1]=
In[2]:=
Click for copyable input
Out[2]=
If you dont tell it otherwise, CloudDeploy will set up a new webpage, with a unique address. If you go to that webpage, youll find your graphics there.
In[3]:=
Click for copyable input
Out[3]=
In[4]:=
Click for copyable input
Out[4]=
In[5]:=
Click for copyable input
Out[5]=
CloudDeploy normally works by first doing whatever computation it can, and then putting the result on the web. This means, for example, that CloudDeploy[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 CloudDeploy[Delayed[Now]].
Use Delayed to make a clock thats regenerated every time the webpage is requested:
In[6]:=
Click for copyable input
Out[6]=
In[7]:=
Click for copyable input
Out[7]=
The basic idea is to set up a FormFunction that defines both the structure of the form, and the action thats performed when the form is submitted.
In[8]:=
Click for copyable input
Out[8]=
Now if you go to that web address, youll see a form:
Submit the form and youll get back a picture of a tiger:
Generate a Manipulate from a form:
In[9]:=
Click for copyable input
Out[9]=
Deploy a form that accepts two numbers:
In[10]:=
Click for copyable input
Out[10]=
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", CloudDeploy automatically sets up smart fields in your form, indicated by , that use natural language understanding to interpret whats 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:
In[11]:=
Click for copyable input
Out[11]=
Seventy-one works as a semantic number; to find the prime requires a computed number:
If you specify a type of input like "Image", youll get special controls for acquiring the imagelike direct access to the camera or photo gallery on a mobile device.
In[12]:=
Click for copyable input
Out[12]=
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 resultlike, for example, Wolfram|Alpha or a search engine would.
In[13]:=
Click for copyable input
Out[13]=
You can change the field and submit again to get a new result:
36.1Deploy a map of your current location to the web. »
Sample expected output:
Out[]=
36.2Deploy to the web a map that shows the current inferred location of the user. »
Sample expected output:
Out[]=
36.3Create a website that displays a new random number up to 1000 at size 100 every time it is visited. »
Sample expected output:
Out[]=
36.4Deploy a form on the web that takes a number x and returns x^x»
Sample expected output:
Out[]=
36.5Deploy a form on the web that takes numbers x and y and computes x^y»
Sample expected output:
Out[]=
36.6Deploy 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[]=
36.7Deploy a form page on the web that takes a string and repeatedly gives a reversed version at size 50. »
Sample expected output:
Out[]=
36.8Deploy a form page on the web that takes an integer n and repeatedly generates a picture of a polygon with random color and n sides. »
Sample expected output:
Out[]=
36.9Deploy 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[]=
+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[]=
+36.2Deploy 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[]=
Theyre 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.
Just ask for the format using ExportForm (or by giving the format inside FormFunction). Popular formats include GIF, PNG, JPEG, SVG, PDF and HTMLFragment. (Note that form in ExportForm refers to a form or type of output, not a form to fill in.)
Use EmbedCode to generate the necessary HTML.
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.
Use Restricted. For example, Restricted["Number", {0, 10}] specifies a number between 0 and 10. Restricted["Location", Plain] specifies a location in Italy.
To start with, use options like FormTheme. 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.
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, youll probably want to use AskFunction instead of FormFunction.)
In the cloud . Or in practice: on computers at centralized locations around the world.
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.
 
Download Notebook Version
es