Lab 2: Web Services

1) Chat

Using the what you learned in course 11 continue the chat app you started in laboratory 10. For this you have an api at http://api.my-sandbox.co/chat/chat.php When you call get on it you will receive all the messages When you send via post the variables username and msg to it, it will add a message to the chat. For visibility show only last 5-10 messages. Each message is separated by “\n”

In order to fetch the messages you need to use the ajax get method from jquery and replace the \n with <br> in order to display them

$.get('http://api.my-sandbox.co/chat/chat.php', function(msgs){
  msgs = msgs.split("\n").slice(-5).join("<br>");
  //display msgs in some container
})

The split method applied on a string splits the string into an array of strings using the given separator. The slice method is used to select certain elements of an array , here the last 5. The join method applied on an array returns of string generated by concatenating the elements of the array of delimiting them by the given separator.

In order to send a message you will need to use the post ajax call:

$.post('http://api.my-sandbox.co/chat/chat.php',{username:"some user name", msg:"the contents of the msg"}, function(result){
  //code to run when msg sent successfully 
})

In order to make the chat from the last laboratory to work, all you need to do is code the chatSend method to post the latest message to the server as shown above and retrieve the messages every second by calling the get method shown above every 1000 ms with the help of an interval (setInterval).

Your chatSend method should now look like this:

chatSend:function(){
  $.post('http://api.my-sandbox.co/chat/chat.php',
         {username:$("#username").val(), msg:$("#msg").val()}
  );
}

2) Newsfeed

Continue the newsfeed you started in laboratory 10. Implement support for reading the whole article bu showing it on a new page and support for liking articles and display the number of likes.

For this you will have an api at:

http://api.my-sandbox.co/news/get.php used to fetch latest news and http://api.my-sandbox.co/news/get.php?id=PRIMARY_KEY_OF_ARTICLE to fetch the full article

and for likes

GET http://api.my-sandbox.co/news/like.php with with id set in order to get the number of likes for an article

GET http://api.my-sandbox.co/news/like.php with with id and uuid set in order to get if you liked or not an article

POST http://api.my-sandbox.co/news/like.php with a JSON

{
  method:"like",
  uuid:"phone-uuid",
  pk:"article-pk"
}

in order to like an article

POST http://api.my-sandbox.co/news/like.php with a JSON

{
  method:"unlike",
  uuid:"phone-uuid",
  pk:"article-pk"
}

in order to dislike an article.

To get the uuid of the phone just access device.uuid The device plugin must be installed (it should be installed in your apps by default but you will have to move the config.xml from the root folder in the www folder)

Fetching of news is identical to fetching the text in exercise one. This is also true for fetching the like count with or without id.

I order to set JSON encoded messages though you will need to use JSON.stringify method like in the following example:

var json_object = { method:"like", uuid:device.uuid, pk:1 }
$.post(URL,JSON.stringify(json_object), function(response){ //post respone action });

3) Comunicate with webservers from your boards

Depending on what you made your boards try to make the phone communicate with the webserver from the boards.

iot2016/labs/02.txt · Last modified: 2017/06/10 17:59 (external edit)
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0