1. Apps that use data from other websites Many apps use data from other sites and mix them together and dress it up with nice graphics. Some examples are weather apps, clocks, maps, and more... Many websites have what are called API's or Application Programming Interfaces. That just means that they give you a way to get the information using your own program. Once you get the data from them, then you can use it any way that you can. Sometimes, you get the data from multiple sites before mashing up the data (combining it). For instance, you can go to Wendy's to get a list of all their restaurants near you, then go to Google Maps to drop pins for all those places and show them on a map. Weather.com is one of many websites that has a webpage that shows you what the weather is like for your location. You have to go to their website, type in your information to see your weather. Instead, you can get just the data and show it your own way on your smartphone or computer. Many websites require that you register to use their API's to protect themselves and some charge for it. Once you register, you get a key to use in your APIs. The following example has a key but it is a fake one, so you can not use it to test. 2. Mashups - apps that use data from multiple websites Many apps use data from multiple other sites and mix them together and dress it up with nice graphics. For instance, - you may go to Starbucks to get the locations of Starbucks nearby to you, then pass that data to Google to map it. - or you may take a picture of a barcode, send it to a shopping website to get the stores where it is least costly, then go to those sites to get nearby locations and send those to Google maps to map it for you. Making an App Getting Started There is a good introduction on How To Make Your Own Web Mashup in other languages on the ProgrammableWeb site. Otherwise, we will step through making your own in LiveCode. Some interesting articles by doing a Google Search on "How to build a mashup" http://www.digitaldjtips.com/2012/03/how-to-make-a-mashup/ - like a music mixtape http://www.codecademy.com/blog/52-learn-apis-with-codecademy - code academy's course Finding Websites that provide data The easiest way is to do a Google search like "Stock quotes api" or "Yahoo stock api". or whatever that you are looking for You can find websites that provide data at the Programmable Web where there are more than 11,350 API's. You can view them alphabetically, by categories or by favorites. There are also many popular and public websites that provide data and some in the form of RSS feeds. For our example we are going to use data from World Weather Online Basically you will be making a request from a website for data. Then after you get the data, you can use parts of it, put it into a table or display it with graphics.
Weather App - more involved Making a Weather App using worldweatheronline website As an example is a weather site where you can type in your zip code: World Weather Online  After you type in your zip code - your weather is shown  As an alternative, you can get the data yourself and display the weather using graphics  Writing the LiveCode App: 1. create the following: a button "Get Weather" a text entry field "sky" a text entry field "temp" and add labels to identify them  note: I added an extra field "weather" at the bottom so that you can see the data that we get back from the weather website API 2. Add the following code: to the button "Get Weather" put url "http://api.worldweatheronline.com/free/v1/weather.ashx?key=xxxxx&q=20770&num_of_days=3&format=csv" into field "weather" put item 2 of line 9 of field "weather" into field "temp" put item 5 of line 9 of field "weather" into field "sky" end mouseUp notes: This code will NOT work as it is. I 'xxxxx' out my API key. If you want to use this code, you will need to go to http://worldweatheronline.com and signup for a free developer account to get your own Key to use. Either that, or go to http://www.programmableweb.com to find another weather site to use that does not require a signup The first line use the "Put" command with "url" which allows us to access a webpage (the url) from within LiveCode. Whatever it returns is then put into the field "Weather" It is built according to the API. Each API will be different. It is not as hard as it looks. (They often give you many examples that you can use by cutting and pasting them. ) It contains the following info: the website is http://api.worldweatheronline.com/ we are using the free version, which is version 1 - free/v1/ we are asking for the weather - weather.ashx Our key is key=xxxxx Our zip code is q=20770 We want the weather for 3 days - num_of_days=3 We want the data to be comma separated - format=csv (that means each piece of information is separated with a comma) We put the results into the field "weather" so you can see what it looks like. (You will not need it in the final version) The second line picks off the temperature and puts it into our field "temp" The third line picks off the sky and puts it into pour field "sky" 3. Run it and you will see the following. If you read the comments, you will understand why we chose the numbers of the fields to get our info.  The last three lines contain the next 3 days of weather and even the graphics that we can use if we want. Now that you have the data and see how it is given to you, we can remove it from the screen and add other graphics. By adding logic and graphics, you can do apps like these:    Advanced: Other Ways of Getting the Data from the API: In most cases, the website will offer an API (Application Programming Interface) and offer a free developer account to use it. Once you sign up, they give you a key to use to request the data. The line to use will look something like this: http://api.worldweatheronline.com/free/v1/weather.ashx?key=xxxxx&q=20770&num_of_days=3&format=csv" It contains the following info: the website is http://api.worldweatheronline.com/ we are using the free version, which is version 1 - free/v1/ we are asking for the weather - weather.ashx Our key is key=xxxxx (this is a fake key. You put your key in place of the 'xxxxx') Our zip code is q=20770 We want the weather for 3 days - num_of_days=3 We want the data to be comma separated - format=csv (that means each piece of information is separated with a comma) For Yahoo Weather, you would use something like this: "http://weather.yahooapis.com/forecastrss?w=44418&u=c" The data will be returned to you in one of 3 forms: 1. CSV - or comma separated values 2. JSON - JavaScript Object Notation - good link = JSON 3. XML - eXtensible Markup Language - good link = XML You will have to write the code to find and get the data you want. Geocoding - Latitude, Longitude If the website that you are using requires the latitude,longitude, you can get that from Google Map's API. Do a Google search on "Geocoding API" and you will find more information e.g. https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=API_KEY Reading The Data 1. Reading CSV Formatted Data: -------------------------------------------The Data that is returned ---------------------------------------- #The CSV format is in following way:- #First row will always contain the current weather condition. if for any reason we do not have current condition it will have 'Not Available'. #The current weather condition data is laid in the following way:- #observation_time,temp_C,weatherCode,weatherIconUrl,weatherDesc,windspeedMiles,windspeedKmph,winddirDegree,winddir16Point,precipMM,humidity,visibility,pressure,cloudcover # #The weather information is available in following format:- #date,tempMaxC,tempMaxF,tempMinC,tempMinF,windspeedMiles,windspeedKmph,winddirDegree,winddir16Point,weatherCode,weatherIconUrl,weatherDesc,precipMM # 02:26 AM,6,122,http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png,Overcast,4,6,210,SSW,0.2,93,16,1013,100 2014-03-19,7,44,4,38,9,14,130,SE,296,http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0017_cloudy_with_light_rain.png,Light rain,3.2 2014-03-20,13,55,1,34,17,27,283,WNW,113,http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0001_sunny.png,Sunny,0.0 2014-03-21,14,58,6,43,9,15,259,WSW,119,http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0003_white_cloud.png,Cloudy,0.0 -------------------------------------------The Data that is returned ---------------------------------------- This is the code that we will use to get the data we want: put url "http://api.worldweatheronline.com/free/v1/weather.ashx?key=8njy9mweqps3vhuk95mgd2xe&q=20770&format=csv" into field "weather" put item 2 of line 9 of field "weather" into field "temp" put item 5 of line 9 of field "weather" into field "sky" We can get rid of the field "weather" now that we know what the data looks like and use a variable - "x" This is the code that we will use to get the data we want: put url "http://api.worldweatheronline.com/free/v1/weather.ashx?key=8njy9mweqps3vhuk95mgd2xe&q=20770&format=csv" into x put item 2 of line 9 of x into field "temp" put item 5 of line 9 of x into field "sky" 2. Reading JSON Formatted Data: -------------------------------------------The Data that is returned ---------------------------------------- { "data": { "current_condition": [ {"cloudcover": "100", "humidity": "93", "observation_time": "02:27 AM", "precipMM": "0.2", "pressure": "1013", "temp_C": "6", "temp_F": "43", "visibility": "16", "weatherCode": "122", "weatherDesc": [ {"value": "Overcast" } ], "weatherIconUrl": [ {"value": "http:\/\/cdn.worldweatheronline.net\/images\/wsymbols01_png_64\/wsymbol_0004_black_low_cloud.png" } ], "winddir16Point": "SSW", "winddirDegree": "210", "windspeedKmph": "6", "windspeedMiles": "4" } ], "request": [ {"query": "20770", "type": "Zipcode" } ], "weather": [ {"date": "2014-03-19", "precipMM": "3.2", "tempMaxC": "7", "tempMaxF": "44", "tempMinC": "4", "tempMinF": "38", "weatherCode": "296", "weatherDesc": [ {"value": "Light rain" } ], "weatherIconUrl": [ {"value": "http:\/\/cdn.worldweatheronline.net\/images\/wsymbols01_png_64\/wsymbol_0017_cloudy_with_light_rain.png" } ], "winddir16Point": "SE", "winddirDegree": "130", "winddirection": "SE", "windspeedKmph": "14", "windspeedMiles": "9" }, {"date": "2014-03-20", "precipMM": "0.0", "tempMaxC": "13", "tempMaxF": "55", "tempMinC": "1", "tempMinF": "34", "weatherCode": "113", "weatherDesc": [ {"value": "Sunny" } ], "weatherIconUrl": [ {"value": "http:\/\/cdn.worldweatheronline.net\/images\/wsymbols01_png_64\/wsymbol_0001_sunny.png" } ], "winddir16Point": "WNW", "winddirDegree": "283", "winddirection": "WNW", "windspeedKmph": "27", "windspeedMiles": "17" }, {"date": "2014-03-21", "precipMM": "0.0", "tempMaxC": "14", "tempMaxF": "58", "tempMinC": "6", "tempMinF": "43", "weatherCode": "119", "weatherDesc": [ {"value": "Cloudy" } ], "weatherIconUrl": [ {"value": "http:\/\/cdn.worldweatheronline.net\/images\/wsymbols01_png_64\/wsymbol_0003_white_cloud.png" } ], "winddir16Point": "WSW", "winddirDegree": "259", "winddirection": "WSW", "windspeedKmph": "15", "windspeedMiles": "9" } ] }} -------------------------------------------The Data that is returned ---------------------------------------- We can add returns to make it more readable and see it's "tree" structure: (It consists of many - "name:value" pairs) -------------------------------------------The Data made to look nice ---------------------------------------- { "data": { "current_condition": [ {"cloudcover": "100", "humidity": "93", "observation_time": "02:27 AM", "precipMM": "0.2", "pressure": "1013", "temp_C": "6", "temp_F": "43", "visibility": "16", "weatherCode": "122", "weatherDesc": [ {"value": "Overcast" } ], "weatherIconUrl": [ {"value": "http:\/\/cdn.worldweatheronline.net\/images\/wsymbols01_png_64\/wsymbol_0004_black_low_cloud.png" } ], "winddir16Point": "SSW", "winddirDegree": "210", "windspeedKmph": "6", "windspeedMiles": "4" } ], "request": [ {"query": "20770", "type": "Zipcode" } ], "weather": [ {"date": "2014-03-19", "precipMM": "3.2", "tempMaxC": "7", "tempMaxF": "44", "tempMinC": "4", "tempMinF": "38", "weatherCode": "296", "weatherDesc": [ {"value": "Light rain" } ], "weatherIconUrl": [ {"value": "http:\/\/cdn.worldweatheronline.net\/images\/wsymbols01_png64\/wsymbol_0017_cloudy_with_light_rain.png" } ], "winddir16Point": "SE", "winddirDegree": "130", "winddirection": "SE", "windspeedKmph": "14", "windspeedMiles": "9" }, {"date": "2014-03-20", "precipMM": "0.0", ...etc } ] } } -------------------------------------------The Data made to look nice ---------------------------------------- This is the code that we will use to get the data we want: 1. Copy the EasyJSON scripts from EasyJSON into your card script. It puts the JSON data into a liveCode array.
3. Reading XML Formatted Data: This is the data that is returned: -------------------------------------------The Data that is returned ---------------------------------------- <?xml version="1.0" encoding="UTF-8"?><data><request><type>Zipcode</type><query>20770</query></request><current_condition><observation_time>02:28 AM</observation_time><temp_C>6</temp_C><temp_F>43</temp_F><weatherCode>122</weatherCode><weatherIconUrl><![CDATA[http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png]]></weatherIconUrl><weatherDesc><![CDATA[Overcast ]]></weatherDesc><windspeedMiles>4</windspeedMiles><windspeedKmph>6</windspeedKmph><winddirDegree>210</winddirDegree><winddir16Point>SSW</winddir16Point><precipMM>0.2</precipMM><humidity>93</humidity><visibility>16</visibility><pressure>1013</pressure><cloudcover>100</cloudcover></current_condition><weather><date>2014-03-19</date><tempMaxC>7</tempMaxC><tempMaxF>44</tempMaxF><tempMinC>4</tempMinC><tempMinF>38</tempMinF><windspeedMiles>9</windspeedMiles><windspeedKmph>14</windspeedKmph><winddirection>SE</winddirection><winddir16Point>SE</winddir16Point><winddirDegree>130</winddirDegree><weatherCode>296</weatherCode><weatherIconUrl><![CDATA[http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0017_cloudy_with_light_rain.png]]></weatherIconUrl><weatherDesc><![CDATA[Light rain]]></weatherDesc><precipMM>3.2</precipMM></weather><weather><date>2014-03-20</date><tempMaxC>13</tempMaxC><tempMaxF>55</tempMaxF><tempMinC>1</tempMinC><tempMinF>34</tempMinF><windspeedMiles>17</windspeedMiles><windspeedKmph>27</windspeedKmph><winddirection>WNW</winddirection><winddir16Point>WNW</winddir16Point><winddirDegree>283</winddirDegree><weatherCode>113</weatherCode><weatherIconUrl><![CDATA[http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0001_sunny.png]]></weatherIconUrl><weatherDesc><![CDATA[Sunny]]></weatherDesc><precipMM>0.0</precipMM></weather><weather><date>2014-03-21</date><tempMaxC>14</tempMaxC><tempMaxF>58</tempMaxF><tempMinC>6</tempMinC><tempMinF>43</tempMinF><windspeedMiles>9</windspeedMiles><windspeedKmph>15</windspeedKmph><winddirection>WSW</winddirection><winddir16Point>WSW</winddir16Point><winddirDegree>259</winddirDegree><weatherCode>119</weatherCode><weatherIconUrl><![CDATA[http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0003_white_cloud.png]]></weatherIconUrl><weatherDesc><![CDATA[Cloudy ]]></weatherDesc><precipMM>0.0</precipMM></weather></data> -------------------------------------------The Data that is returned ---------------------------------------- We can add returns to make it more readable and see it's "tree" structure: (It looks like HTML tags) -------------------------------------------The Data made to look nice ---------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <data> <request> <type>Zipcode</type> <query>20770</query> </request> <current_condition> <observation_time>02:28 AM</observation_time> <temp_C>6</temp_C> <temp_F>43</temp_F> <weatherCode>122</weatherCode> <weatherIconUrl><![http://cdn.worldweatheronline.net/images/png_64/wsymbol_0004_black_low_cloud.png]></weatherIconUrl> <weatherDesc><Overcast ></weatherDesc> <windspeedMiles>4</windspeedMiles> <windspeedKmph>6</windspeedKmph> <winddirDegree>210</winddirDegree> <winddir16Point>SSW</winddir16Point> <precipMM>0.2</precipMM> <humidity>93</humidity> <visibility>16</visibility> <pressure>1013</pressure> <cloudcover>100</cloudcover>
</current_condition> ... </data> -------------------------------------------The Data made to look nice ---------------------------------------- This is the code that we will use to get the data we want: ( The data and its path that we want is marked in 'Purple' ) put revCreateXMLTree( it, true, true, false) into x put revXMLNodeContents( x, "data/current_condition/weatherDesc") into field "sky" put revXMLNodeContents( x, "data/current_condition/temp_C") into field "temp" note: The WorldWeatheronline.com site changed it's free accounts requiring a few changes which are shown below: corrected code with the new site and key: put url "http://api.worldweatheronline.com/premium/v1/weather.ashx?key=YOURKEY&q=20770&num_of_days=3&format=xml" into weather
We do not need field weather anymore now that we know what it looks like. Either make it not visible or delete it and modify the code to use a variable "x" instead: This is the code that we will use to get the data we want: ( The data and its path that we want is marked in 'Purple' ) put revCreateXMLTree( it, true, true, false) into x put revXMLNodeContents( x, "data/current_condition/weatherDesc") into field "sky" put revXMLNodeContents( x, "data/current_condition/temp_C") into field "temp" note: The WorldWeatheronline.com site changed it's free accounts requiring a few changes which are shown below: corrected code with the new site and key: put url "http://api.worldweatheronline.com/premium/v1/weather.ashx?key=YOURKEY&q=20770&num_of_days=3&format=xml" into x That's all there is to it. It looks complicated but that is just because it is so new to you. Do not be overwhelmed by so much data. Just take your time and try to make it more readable. Then look for the items that you want and pull them off the data \ |
Home >