APIs, Forms and Web Applications in the Wolfram Cloud

Chad Knutson
Applications Developer
Technical Services
Wolfram Research

Motivation

Sharing content with others .

Content

Functions

Interactive GUIs

Create a web application.

Provide computation for a web/mobile application.

Sharing Content on the Internet

Simple Webpages

Static content: text, images, graphics.

Example HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1> My webpage </h1>

<p> I wrote this webpage in 2 minutes </p>

</body>
</html>

Modern Webpages/Applications

Dynamic content, responds to user inputs, custom advertising.

Facebook, Gmail, ...

Games

Requires HTML, JavaScript (or frameworks built on JavaScript, like AngularJS, React, Vue).

The Wolfram Cloud™

APIs, forms, Wolfram Notebook(s)™.

Content can be generated exclusively with the Wolfram Language™.

Notebooks as Webpages in the Wolfram Cloud

Static Webpage

nb = CreateDocument[{TextCell["Wolfram U Web Applications Web Page","Title"],TextCell["Welcome to this WolframU course"], TextCell["Plot of Sinc function (sin(x)/x)"],ExpressionCell[Plot[Sinc[x],{x,-3 Pi, 3 Pi}]]}]

CloudConnect["chadk@wolfram.com"]

Super function CloudDeploy for sharing in the Wolfram Cloud:

CloudDeploy[nb, CloudObject["WolframU/firstnotebook.nb"], Permissions->"Public"]

Wolfram Language code for styling/creating content is beyond the scope of this course.

Much of the functionality of Mathematica® notebooks is currently supported by the Wolfram Cloud.

Interactive Webpage

manip=Manipulate[Column[{Image[ColorReplace[, RGBColor[{250,220,201}/255]->col, 0.03],ImageSize->500],Style["I am this mad today!", {30,Bold,col}]}],{{col, Red,"Anger scale"},Reverse@NestList[Lighter, Red, 4]}]

CloudDeploy[manip,CloudObject["WolframU/manip.nb"],Permissions->"Public"]

APIFunction

Analogous to Function

f=Function[x, x^2]

f[3]

APIFunction Inputs

?APIFunction

“name”:  the parameter name for an input

"x"
“name”
“city”
“building_number”

“type”: shorthand for Interpreter function:

$InterpreterTypes // Short

Common input types

Number, string:

inpt = "22.4";
Interpreter["Number"][inpt]  // InputForm

inpt = "12";
Interpreter["Integer"][inpt] // Head

inpt = "hello";
Interpreter["String"][inpt] // Head

JSON:

Interpreter["RawJSON"]["{\"a\":3, \"b\": 4}"]

Image:

Interpreter["Image"][ExportString[RandomImage[],"PNG"]]

Many, many more:

Interpreter["HeldMathExpression"]["sin(t)^(4+3)"]

ReleaseHold@%

Functions in APIFunction

api = APIFunction[{"x"->"Integer"},#x^2&]

api[<|"x"->10|>]

api[<|"x"->1.5|>]

api2 = APIFunction["name"->"String", StringJoin["Hello ", #name, "!"]&]

api2[<|"name"->"World"|>]

api3 = APIFunction["building_number"->"Number", getBldgData[#["building_number"]]&]

Does not have to be a pure function: data can be loaded and saved at run time

Definitions for any symbols used in the function are automatically saved along with the API

Output Formats

Common values are “WL”, “JSON”, “PNG”, “CloudCDF”.

ExportForm

In Mathematica, output is always in the Wolfram Language, regardless of the specified format:

api = APIFunction["x"->"Number", <|"in"->#x, "out"->#x^2|>&, "JSON"];
api[<|"x"->3|>]

co=CloudDeploy[api,CloudObject["WolframU/jsonapi"]]

Hyperlink@URLBuild[co,{"x"->4}]

URLRead[HTTPRequest[co, <|"Query"->{"x"->4}|>]]["Body"]

FormFunction

Input structure is similar to APIFunction.

Web Interface for Accepting User Inputs

Support for styling, adding features to webpage.

Example: Survey

data = {};
CloudSave[data,CloudObject["WolframU/surveydata"]];

form = FormFunction[{"name"->"String", "date"->{"Jul 14","Jul 21","Jul 28"}},
Module[{data, prefdates},
data = Get[CloudObject["WolframU/surveydata"]]; 
 AppendTo[data, <|"name"->#name, "date"->#date|>]; 
CloudSave[data, CloudObject["WolframU/surveydata"]]; 
 prefdates = Labeled[Count[#date &/@ data, #],#]&/@{"Jul 14","Jul 21","Jul 28"};
BarChart[prefdates] ]&, 
"PNG", 
AppearanceRules-><|"Title" -> "What date works best for the party?"|>
];

CloudDeploy[form, CloudObject["WolframU/survey"],Permissions->"Public"]

data = CloudGet@CloudObject["WolframU/surveydata"];
 prefdates = Labeled[Count[#date &/@ data, #],#]&/@{"Jul 14","Jul 21","Jul 28"};
BarChart[prefdates]

Wolfram Example: ImageIdentify

https://www.imageidentify.com

How would you code the functionality of this page using FormFunction?

More Sophisticated Forms Supported

Advanced Web Form Creation

Ask Function

Wolfram Cloud Security

The Wolfram Cloud uses an OAuth-based system. Soon, Wolfram will have code for Java, Python, and perhaps others to authenticate.

Permissions

Option to CloudDeploy.

For APIs and forms, "Read", "Write",  "Execute".

“Public”

No authentication required.

“Private”

Only owner can access; must be logged into the Wolfram Cloud:

CloudDeploy[APIFunction[{}, Now&], CloudObject["WolframU/permissions"],Permissions->"Private"]

Specific Users

CloudDeploy[APIFunction[{}, Now&], CloudObject["WolframU/permissions"],Permissions->{{"jan@wolfram.com", "joe@wolfram.com"}->{"Execute"}}]

PermissionsGroup

CreatePermissionsGroup["teamX", {"jan@wolfram.com", "joe@wolfram.com"}]

SetPermissions[CloudObject["WolframU/permissions"], PermissionsGroup["teamX"]->{"Read","Execute"}]

PermissionsKey

Intermediate level of security; key-value pair must be passed to the Wolfram Cloud in order to view/evaluate:

CloudDeploy[APIFunction[{}, DateString[Now,"ISODateTime"]&], CloudObject["WolframU/permissionskey"],Permissions->{PermissionsKey["secretkey"]->"Execute"}]

URLRead[HTTPRequest[First@CloudObject["WolframU/permissionskey"], <|"Query"->{"_key"->"secretkey"}|>]]["Body"]

URLRead[HTTPRequest[First@CloudObject["WolframU/permissionskey"], <|"Query"->{"_key"->"wrongKey"}|>]]["Body"] // ImportString[#,"HTML"]&

Notebooks Have Additional Interaction Specs

For notebooks:

"Edit": allow editing of the notebook document
"Save": allow saving of notebook
"CellEdit": edit content in existing cells
"CellCreate": create new cells
"CellDelete": delete existing cells
"Evaluate": evaluate code in cells
"Interact": allow interactions with content (e.g. via the Computable Document Format™)

Calling Wolfram Cloud APIs from a Web Application

Call APIs with Server-Side Code or JavaScript

If authentication is required, server-side code (Java, .NET, Go, PHP, ...) should perform the authentication.

iframe

Useful for notebooks and interactives

Or, host Full Applications in the Wolfram Cloud

HTML, CSS, JavaScript all supported

Data storage in the Wolfram Cloud or the Wolfram Data Drop™

APIs hosted in the Wolfram Cloud

Example: User uploads data and selects settings to create a 3D plot

Build a Web Application with the Wolfram Language

Example: Create a Blog, by Jan Poeschko

Git repo

Steps to create your own blog in the Wolfram Cloud

Note: these steps can be done in either desktop Mathematica or the Wolfram Cloud.

1. Evaluate the repo’s package.
2. Write posts in Wolfram Notebook with file names set to specified format.
3. Upload notebook to the Wolfram Cloud to the “Content” folder of blog.
4. Evaluate the following code:

Uploaded notebooks:

sources=Sort[CloudObjects[sourceDir]]

deploy[]

Visit the blog:

Further exploring: what could be done to improve the blog?

Conclusion

The Wolfram Cloud supports multiple architectures for web applications.

APIFunction and FormFunction allow for (almost) any Wolfram Language evaluation via HTTP request.

Standalone notebooks with and without interactivity can be used as webpages.

Notebooks can be bundled and linked to create a full web application created solely by the Wolfram Language.

Resources

http://www.wolfram.com/wolfram-one

http://www.wolfram.com/development-platform/?source=nav

Try the Wolfram Cloud at
https://develop.open.wolframcloud.com/app

Thank You