Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

02_BuildingFirst WebAppwithWolframLanguage

0 (0 Likes / 0 Dislikes)
So. Like in the video, if you go to you can go ahead and see here that we’ve already got a few options ready to go but I’m going to go ahead and select the programming cloud and going to go ahead and log in. So this is the primary interface for the Wolfram Programming Cloud as you guys probably saw in the video. So there’s another video here if you guys want to go ahead and get started again and if you guys also just want to play around with some of the examples, see another fast introduction for programmers etc., or if you just want to go ahead and create a notebook, which is the primary interface for writing Wolfram Language code you can go ahead and do that. I already have a notebook ready to go so I can go ahead and open it here. And as soon as it loads… I’m going to ahead and get started walking you guys through some of this code. Ill just go ahead and get started and I’ll answer questions hopefully along the way but I’ll just try to keep going through and see if this goes alright. So for starters, like I said, I wanted to have a trip planner function. I want to make a trip planner app of sorts. So we’re going to go ahead and declare a function called “TripPlanner” and we’re going to give it three parameters. So namely we’re going to give it “Temperature”, we’re going to give it “WindDirection”, and we’re going to give it “WindSpeed”. The idea of this trip planner is that if you were ultimately going to enter two cities and evaluate them against each other you can see city 1—here’s the temperature, wind direction, wind speed— and city 2—here’s the temperature, wind direction, wind speed. It’s a super simple app but you can see just quickly and just how easily it can get deployed to the Cloud through here. For starters, like I said, we have three parameters—“Temperature”, “WindDirection”, and “WindSpeed”— they’re followed by an underscore to declare that they are parameters and then this is our little notion for this is the start of a function. So now we have a “With” function and essentially what “With” does is you can provide it a variable here and in any instance that it sees “With” the variable somewhere in there it’s going to go ahead and replace that variable definition with its value. So in this case I’m providing its size and I’m saying “100” and specifically I want it provide it so that later on here, which I’ll get to in just a couple seconds, that our images remain a pretty consistent size—about 100—all around. Now I want to start a row and within that row I want to have the following things. So in here I want to have this IconData of air temperature evaluated at temperature, which is our variable, and I want to show that with the image size of “size”. So specifically I can actually go down here, let’s go ahead and show what IconData can do. So let’s provide it “AirTemperature” and let’s give it let’s say “15” and it should come back. So that’s essentially what IconData looks like. If you want to see something else, so let’s see “WindDirection” and you can go ahead and evaluate that using Shift Enter. Bam. There you go—same idea. It goes ahead and interprets this “15” as its input and then adjusts the icon accordingly. We’re going to go ahead and do “Show”, “IconData” for “AirTemperature” with the variable “temperature” and evaluate that image size “size” and now we’re going to delimit each of our things in the row by a comma. So we’re going to have “,” and again “Show”, “IconData”, “WindDirection”, with the wind direction parameter, again evaluate it at “size” and then finally, once again, we’re going to have “Show”, “IconData”, “WindSpeed”, the wind speed parameter, image size as “size”. And for those of you who want to take a look at what that wind speed icon looks like, let’s go ahead and evaluate that. Same idea—instead of having the direction it just put the number in the icon as well. Awesome. Now that we have our initial function definition, we can go ahead and evaluate that and it will be ready for us to use later on. So we’re going to go ahead and evaluate this cell with Shift Enter. And it should have evaluated and to prove that it evaluated we’re going to go ahead in here and type “TripPlanner”. Let’s say our temperature is 80 degrees Celsius—it’s a hot day— wind direction is let’s say 20 and wind speed is 45. I don’t know where you’ll ever get those degrees and that wind speed but oh well. So bam—there you go. And that’s exactly what we wanted. So we wanted to specify and put everything in a row and then display those icons accordingly all in a row together and that’s exactly what we wanted. So now given all of that, we want to actually then go down here and —hold on one second here, I’ll add these in later— so now we actually want to have our overarching trip planner function. Like I said, we want to give it a location, first location and a second location, and then we want to have it display that accordingly. So again, same notation as above, specify its parameters and give it an underscore to ensure that they are parameters and then we’re going to, again, signify the start of a function. Now, we’re going to wrap them in a column. So the idea behind this is that we want to stack –for one city we want all of that data and then for the second city we want all of that data as well. And then we’re going to see here that we’re going to have a distance between two points, which I’ll actually get into right now. Here we’re going to specify a new row within our column and we’re going to provide it the text “the total distance is” as well as this GeoDistance function between location 1 and location 2. We can evaluate here. It takes in two entities, so like in the video we can hit Control Enter and let’s give it “Houston” as one—ooh that’s not where I wanted to go—and let’s say “Chicago”. And let’s give it a second to see what that is. So if I hover over both of these you can see the actual Wolfram Language Code for this ends up being entity of city—specifically, Houston, Texas, United States; similarly for Chicago, entity of city, Chicago, Illinois, United States. So now if we evaluate this, give it a second, there you go. So the distance between Houston and Chicago is 899.246 miles. Let’s get back to up here. So now you know what the GeoDistance function does. And now we’re going to specify again in our columns. We’re going to provide the first thing, if you will, in our trip planner. So we’re going to make a call to our TripPlanner function up here and specifically we’re going to provide it the “WeatherData” call for “location1”, “Temperature”, so that matches up here, and we’re going to then call again “WeatherData” “WindDirection” for “location1”, matches up there, “WeatherData” “location1” “WindSpeed”. And we’re going to call the TripPlanner function around all of that and that is going to render as one entity in a column of itself. And then similarly you can probably imagine for our second column we’re going to go ahead and call “TripPlanner” again and go ahead and provide the exact same things, we’re just going to give it “WeatherData” of “location2”, “temperature” “WeatherData” “location2”, “WindDirection” “WeatherData” “location2”, “WindSpeed” and now that’s all set up just fine. And we can go ahead and wrap that and finish that in our column. So now let me go ahead and evaluate this so that we have the new TripPlanner definition in our code library, if you will. So that seemed to work. Let me get rid of this for now. We can go ahead and call “TripPlanner” again. Let’s go ahead and do “Houston”, “,”, “Chicago”. From this, you should essentially see—or we should essentially see—the output which would be just the total distance and then a grid of these stacked upon each other, like we said here in this column call and by providing it “TripPlanner and then the entity in the column and then this is a new entity in the column as well so we can see how this goes. Give it a second here. So there you go – perfect initializing CityData entities and WeatherData entities because of our WeatherData clause. These tend to be a little bit slow for whatever odd reason—there’s a lot of data that it needs to pull in. It’s doing things. Awesome. So total distance 899.246 miles, like we had seen before, and then it stacks up here with temperature, wind direction, wind speed, temperature, wind direction, wind speed. Awesome. Now, we can end it there but that’s no fun. Let’s actually go ahead and deploy this to the Cloud as a web form and it’s an instant web form that anybody should be able to access and from there they can enter their own inputs and it’ll evaluate accordingly. So we’re going to go ahead and use the “CloudDeploy” function and for those of you guys who maybe haven’t noticed already there is built in autocomplete into the programming cloud so if you start typing “Cloud” it gives you everything that starts with “cloud” but we specifically want to use “CloudDeploy” and again here is autocompleting but we’re going to go ahead and skip through that so we want “FormFunction”, we want a to deploy a form and now we want to give it, say, two parameters. So City1 is a city and City2 is also a city. So we specified our parameters. We want to give a function to evaluate at, so we’re going to ahead and say “TripPlanner” of now hash “City1” hash “City2”, evaluate that. We’re going to close that there for the form and we’re going to close the CloudDeploy as well. So that being said let’s also give it an output to render as, let’s say PNG we want it to render as an image. So let’s deploy this to the Cloud now. Hopefully this works. Awesome. So let’s give it “Houston”, “Chicago”. Remember, as you saw in the video these are Wolfram smart fields aka if you provide it something like “City of Angels” or anything that can identify something as a city it will interpret that properly but if you provide it something like “chicken” it’ll say, “you’re wrong.” So that’s something really nice to have built in to the form —automatic error checking, you know, things like that. So if we submit this—give it a second to evaluate everything and hopefully things went alright… I’m really hoping this goes alright… still loading—and there you go, that’s exactly what we wanted. We can add things to this, such as let’s say boundaries or let’s add a little bit of padding around here, we can make it bigger or whatnot, but for the basic, simple starter project you saw how quick and easy that was. So yeah, I think that would be kind of just the basics of it so hopefully you guys saw just how quick and easy it is to deploy from the Cloud. I think we’re good to go from here for now, so let’s get some feedback. I’ll let Chris Carlson go ahead and introduce the developer panel and once again I wanted to say thank you guys for being here today. We’re going to go ahead and jump into the introductions of everybody and get started with the code review.

Video Details

Duration: 14 minutes and 27 seconds
Language: English
License: Dotsub - Standard License
Genre: None
Views: 5
Posted by: wolfram on Apr 14, 2015

02_BuildingFirst WebAppwithWolframLanguage

Caption and Translate

    Sign In/Register for Dotsub to translate this video.