Viewers: in countries Watching now:
Learn how to build dynamic jQuery Mobile web applications that read data from services like Flickr, YouTube, WordPress, and Twitter, in this course with Ray Villalobos. Ray shows you how to display photos, videos, and even Tweets on your sites using jQuery Mobile and these popular APIs. He also shows how to export information from a WordPress blog using a JSON-based plugin and create a new jQuery Mobile project using that data. Along the way, he covers the new features in jQuery Mobile 1.4 such as changes to templates, filterable lists, icons, and buttons.
The difference between just building a mobile webpage and the web application we're going to be building is that our web app will get information and assemble itself from data sources. It means that we're going to have to get some information. And in this video I'll start by discussing the JSON format and show you how to get data out of a word press blog ,so JSON is a format for sharing data. It's really nothing more than a text file written in a certain way. So you can see a quick example right here. We have some information that has name and value pairs.
So for example we have this name field right here. And it's in quotes, that makes it in the JSON format. And then we have a value my name right here Ray Villalobos. And then we have a position attribute with a value of Staff Author and then we have something that is an array of element or a list of elements, and that is placed within these brackets right here, and then each of the list items is separated by commas. So that's a quick example of how a JSON looks, but it actually can get a lot more complicated because each one of these name value pairs can have different types of information.
You can access information in the JSON format from a variety of sources. And, although I'm going to show you how to do this in WordPress. You can get information from a PHP script in the JSON format. Or you can read a feed from many other different services, like YouTube, Twitter, and Flickr. And that makes it a great format for sharing information from a variety of sources. Once you get that information into your web application, you can use that data to build pages. But the first thing we need is some kind of information and if you're going to need information from a website you're going to need to have that data transferred from whatever your site is using into the the JSON format.
So, the plugin that I like to use is called the JSON API plugin. And you can check it out at this page. Now, it's very easy to use and if you click right here on this other note section, you can see the complete documentation. It has a very complicated and very full featured API. But basically what you do is you call your website URL and then you can add parameters like? JSON equals one and it will output the information in your blog in the JSON format.
And you can also say hey just get me the recent posts Or include other parameters like anything that's tagged with the slug banana, et cetera, et cetera. This can get very complicated, but let's go ahead and show you how you can install this on your WordPress blog. So here I am in my blog. I'm going to go to the admin section, so I'll do my blog's name, and then admin. And it may ask you to log in with your credentials, but I've been in my blog recently, so it just takes me straight to my admin page.
Now from here, you want to go to the plugins section. And from here, you want to add a new plugin. Now in here you want to search for JSON API and click on search plugins. And then click on install now. You may have to put in the credentials for your website. Once it downloads the information,you want to click on this, Activate Plugin button right here. Now that the JSON API plugin has been installed, we can use it to call our website. So if you remember, to call our website and get the JSON data, all I have to do is do iviewsource,and then question mark JSON equals one.
Then I'm going to switch over to another web application. So this web application is called the JSON editor online And what you can do here is you can paste a raw JSON file so I'm going to grab this and delete it. And paste the information I got from the JSON API plug in. And once it's in there I can click on some of these buttons. Actually, I'm going to click on this one right here. And it will convert the data so it's at least a little bit more readable. Now what's even better is that I can hit this button and it's going to convert it into an object that is easier to read.
So we just took all this information, that is even though a little bit better organized still a little bit messy And it organized it in a way that I can easily look at and expand a little better. So from here you can see, okay, you're going to get back some sort of object. And this object is going to have a few different name and value pairs. So for example we get, status okay, count five, which tells us how many things we got back. And then, some other information. Like how many pages are in our blog.
And how many articles are in the blog, as well. Now, the interesting piece of info is this posts right here. So, we're getting five posts back from our JSON feed. We can open that up and see an array of different elements. If we open any one of these up. you'll see some additional information. So this JSON editor online is a really good visualizer that allows us to see the structure of our data. And once we start working with JSON and inputting that data using jQuery.
We're going to be able to create pages using this information.
There are currently no FAQs about jQuery Mobile Web Applications.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.