Sending a text message (and more) Maxwell Furman Department of MIS Fox School of Business Temple University

Exam 2 Results and Review Last week's challenge review Agenda Exam 2 Results and Review Last week's challenge review In-Class exercise Interacting with external APIs Pro Points Challenge

jQuery selectors $(".content") <div class="content"></div> $("#home") <div id="home"></div> $("div") <div></div>

$(".content").hide() jQuery selectors jQuery Selector Selector Action applies to selected

$(".content").show("#home") jQuery selectors $(".content").hide() $(".content").show("#home") jQuery Selector Selector Action applies to selected This will show all .content divs!

HTML Forms <input type="text"> <input type="text" disabled> <input type="text" required> <input type="email"> <input type="password"> <input type="date"> <input type="text" pattern="...">

Calling functions $("#diameter").val // This is a function! // This is the actual value! $("#diameter").val.trim() // This is an error!

Calling functions var someFunc = function(arg1, arg2) { return arg1 + arg2; } someFunc() someFunc("a", "b") someFunc("b", "a") // These are not the same

Calling functions var someFunc = function(arg1, arg2) { return arg1 + arg2; } someFunc() someFunc("a", "b") someFunc("b", "a") // These are not the same

Calling functions var someFunc = function(arg1, arg2) { return arg1 + arg2; } someFunc() someFunc("a", "b") // "ab" someFunc("b", "a") // "ba" // These are not the same

Finding the average average = total / number of items var total = 0; var items = [.............]; for (var i = 0; i < items.length; i++){ var item = items[i]; total += item.size; } var averageSize = total / items.length;

Finding the average var items = [.............]; for (var i = 0; i < items.length; i++){ var total = 0; // This will reset `total` to zero // over and over var item = items[i]; total += item.size; }

Finding the maximum var biggestSoFar = 0; var items = [.............]; for (var i = 0; i < items.length; i++){ var item = items[i]; if (item.size > biggestSoFar) { biggestSoFar = item.size; } alert("the maximum is " + biggestSoFar)

Let's Review After you specify the grid class, indicate the width of the column in spans. <div class="col-md-10">Some Content here.</div> In bootstrap, the column 12 spans equate to the full width of the viewport. The bootstrap grid system is responsive, and the columns will re-arrange automatically depending on the screen size. A best practice is to make sure that the column widths add up to 12 spans. (There are occasional exceptions to that best practice.) Width in spans

Some sample code for a 3 column layout <div class="container"> <div class="row"> <div class="col-md-4">A</div> <div class="col-md-4">B</div> <div class="col-md-4">C</div> </div> A B C

Next Steps Last Week's Challenge This Week's Challenge

Today we’re going to write code that sends a text message to your phone I don’t know how to do that! Wait, what? Yes, yes you do. What you already know… HTML / CSS JavaScript/jQuery How to get JSON data with $.getJSON What don’t know yet… How to set data with $.post() But we can fix that!

The jQuery post method… This is the callback function that will execute when the Ajax call is a success. The URL to visit $.post(someurl, dataToSend, function(result) { things to do}); The data to send One or more commands. The data in result can be used here! The object returned by the post method.

Conventional use of GET and POST As we’ve already seen, HTTP GET is usually used to retrieve data. We need the jQuery $.post method because HTTP POST operations are used to send data to a system. We will send our text message using POST. Web server HTTP GET method is used to retrieve data Browser JavaScript Engine HTTP POST method is used to send (or create) data Database

What’s the plan? For this class, we have identified an external API that can be used to send a text message. It is called Textbelt. See: https://textbelt.com/ We will make an HTML form that holds these things: The phone number we want to send a message to The text message we want to send A hidden field that holds our textbelt API key A button to initiate the action Initially we will use the free / demo API key that textbelt gives us. We will collect all the data on the form, get it ready, and send it to the API. This is “getting ready” process involves something called called serialization. Once we are satisfied that this works, we will use a real API key.

Data Serialization Data serialization is the process of translating structured data into a format that can be stored or transmitted in one computer environment, and then later reconstructed in another computer environment. What is one format for serialized data that we have already seen? Let’s see some serialized data. (sms_demo.zip) And … don’t forget to try console.log() instead of alert()

What’s the point? API for quotes (misdemo) CDN (jQuery) API for authentication (misdemo) CDN (Bootstrap) API for SMS (textbelt) CDN (other ?) API for … the next thing!

Try it, you’ll like it! Use the $.post method to send the_serialized_data to the textbelt API endpoint: https://textbelt.com/text Type in your cell phone number into the form and a message. Click “Send the text” Once you receive the confirmation message, use the real API key. Be sure to define a call back function that receives a variable called “data” Use console.log(data) to inspect the contents of data as it is returned from the API.