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

2. 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

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

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

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

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

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

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

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

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

11. 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;

12. 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; }

13. 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)

14. 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

15. 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

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

17. 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!

18. 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.

19. 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

20. 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:
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.

21. 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()

22. 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!

23. Try it, you’ll like it!
Use the $.post method to send the_serialized_data to the textbelt API endpoint:
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.