Twitter API JavaScript Node Exercise | Laurence Svekis | Skillshare

Twitter API JavaScript Node Exercise

Laurence Svekis, Web technology Instructor

Twitter API JavaScript Node Exercise

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 10m)
    • 1. PromoTwitterAPIcourse

    • 2. 0 Course Twitter API introduction

    • 3. 1 Course Development Environment

    • 4. 2 Setup Local Server Nodejs NPM

    • 5. 3 Get Packages NPM

    • 6. 4 Setup Twitter Developer App

    • 7. 5 Output TWeet Object as JSON

    • 8. 6 Setup Index Frontend Code

    • 9. 7 Output Tweet Data

    • 10. 8 Style and look Nice

    • 11. 9 Post a Tweet from index page

    • 12. 10 Source Code Review

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Twitter API JavaScript Node Exercise

Explore the Twitter Developer API connect from your local machine. Use AJAX JavaScript and Node to setup twitter search

Perfect course for beginners to explore the MASSIVE twitter API

This course will teach you how to setup a local server, connect the Twitter API and return data to output into your web page.

Its amazing how much information is available on Twitter, connecting the API is easy and can provide real world working experience with JSON AJAX and APIs. Twitter has a HUGE amount of data within each Tweet Object, getting to know the Twitter API and working with it can provide students with first hand experience that can be used in any number of real world applications. If you can navigate and output data from this API others are going to be a snap.

Step by step training - includes everything you need to setup and develop a mini application. You can then use this as a starting point to explore and extend your skills with the endless possibilities.

NO WASTED TIME - Core focus is AJAX, JavaScript, JSON and node express server.

You will be amazed at how quickly and easily you can be setup to query the API and start retrieving data. Great for beginners and developers of all skill levels.

Source code is also included so you can copy and paste the exercise application.

Friendly helpful guidance is always available in the Q&A section. Do you have a question help is not far away.

Taught by an instructor with many years of web development experience, ready to help you learn.

What are you waiting for, nothing to lose take the first step and start having some fun with the Twitter API!!!!

Meet Your Teacher

Teacher Profile Image

Laurence Svekis

Web technology Instructor


Web Design and Web Development Course Author - Teaching over 700,000 students Globally both in person and online.   

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990,... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. PromoTwitterAPIcourse: welcome to our Twitter e P. I practice exercise where we're going to be building out a twitter ap I connection from scratch using Ajax and JavaScript and node in order, set up a server search the Twitter API. I returned back data and output that data into our Web pages. Twitter a P I is perfect toe. Learn more and explore about massive Jason Files and AP eyes. It's got a lot of content, and each tweet object contains a lot of information that you can sift through and then output that content within your Web pages. It will teach you how to set up a local server, connect to the Twitter a p I and return that data and output it into your Web page. It's amazing how much information is available within the Twitter, a p I, and connecting to that MPP I is really easy to do, and you can connect provide real world working experience with Jason Ajax and a P I. This course is step by step and will provide you all of the resources and information to set this up on your own local machine. So what are you waiting for? You've got nothing to lose. Take the first step and start having some fun with the massive Twitter AP I Let's get started. 2. 0 Course Twitter API introduction: hi and welcome to our Twitter exercise course where we're gonna be building out a connection to the Twitter ap I My name is Lawrence, and I'm so excited to have the opportunity to present this course to you today. So within this course, I'm going to be showing you how to build out this application from scratch where we can actually post to our Twitter account. So Twitter connection course we do post and we see we get our response data there. That means that it was created and posted. We get the whole tweet object being sent back to us, and I'm gonna just minimize this and refresh my Twitter account and you can see that actually posted it directly into my Twitter account. And this is my testing account where I'm able to post and play around with. And of course, it is a live account, but I'm not really using it. And I do advise as well that you do set up your own testing account, you on developer testing account so that you're not sending a bunch of meaningless tweets. Unless, of course, you are sending meeting full tweets within the application out to your life Twitter feed. The other thing that we created within this course as well is the building to search on Twitter so we can search a number of tweets. We get responded back, all of the tweets. So see, we can clear this out and we get all of this tweet information showing up so we can click through here. And this is the entire tweet object. And there's a lot of information and data contained within every tweet object. We've got things like the tweet information we've got the i. D of the tweet object. We also have the user information retweet, and there's just a ton of information to go through. And you could really have some fun with this exploring what's available within the Twitter , a p I. And that's why the Twitter a P I is ideal for developers that are looking to try out and work with really large Jason objects because, as you can see, there's just so much information that's being returned back for each tweet object. Let me refresh this page and again, we're gonna try test and you can see that within each tweet object, you can go down multiple levels And there's just data upon data upon data for each tweet and thinking. Obviously use this data because it's within an object format and bring it into your JavaScript pages and as well, there's routes that were gonna be setting up. So it's gonna be pulling out all of this tweet information depending on the search terms of the search term is just right here, and we get all of this information being pulled through into our application. We're also gonna be setting up back end. So this is where all the magic is gonna happen, where we were going to be using express twit body parts, sir. And then we've created two different routes that returned back all of that Twitter information and make all of the magic happen. So all of the source code is also included. To build out your own version of this application, try it out, explore the different code and see what you can make happen. Connecting to the twitter a p I 3. 1 Course Development Environment: that's going to be a quick lesson on my development environment, the tools that are going to be using in order to develop out the upcoming lessons. So, first of all, I've got a few things open on my computer right now. I've got brackets, So this is the text editor that I'm gonna be using within the upcoming lessons. I've also got a terminal open. So this is on a Mac right now, and I've opened up a terminal. It comes with a default terminal. And if you're on a Windows machine, you can as well open up a terminal on their by typing in command. I've got my local host open in the browser, so we don't have anything happening there yet. And there's a number of other resources that we're gonna be also making use of within the course. So this is brackets. This is where brackets is located, brackets io. That browser that I'm gonna be using within the course is going to be chrome and chrome comes with developer tools. So if you click anywhere on a Web page open web page, you can click, inspect, and this opens up this developer consul, and you've got console information. Their network informations weaken crx HR and fetch requests as well as you can get more information and details about all the different content and the different elements within the Web page. The other resource that we're gonna be be King Yusof is node, so no one is available at no Js dot org's. So if you don't already have it installed, Goto go ahead and go over to know J s dot org's and install the version for your current operating system and download that and once you have that installed note actually comes with NPM, said Snowed package manager. And we've got several different packages that were also could be making use of through the upcoming lessons and last but not least and what packages? Obviously we're making use of his twit. So this is available gives us the ability to connect to the Twitter a p I, and in order to connect to the Twitter AP I you're gonna need a Twitter developer account. So if you don't already have one, you can go over to develop her dot twitter dot com. Apply for a developer account log in, set up if you don't already have a Twitter account. You need to set up a Twitter account and then go in and sign up for a developer account. And this is only way that you're able to get, actually all the keys and tokens that you're gonna need for the upcoming lessons. So once you've signed up for a developer account, you can go over to aps dot twitter dot com and open up your interface. And this is the application management dashboard where you can create brand new APS, and that's what we're going to be doing in the upcoming lessons. So once you have all of that set up, you're ready to go. And next lesson we're gonna get started and start creating some code that's coming up next . 4. 2 Setup Local Server Nodejs NPM: in this lesson. We're gonna be setting up our local machine. So go ahead, open up here. Terminal. I've got mine open over here on the right hand side. And I've also got my editor open to the default directory. If you don't already have a directory you can dio make and I'm going to just call the directory that I'm working out of Tweet. So m k directory tweet already got that? So go ahead and change directory. Go into that directory, tweet and see that right now it's empty. So we need to create a few things and p m i n i t. So what n p n I n I t will do is it's going to initiate the node package manager, and it's gonna ask us a bunch of questions here. So package name so tweet. This fine version is fine. Description would just leave that and empty entry point index dot Js test command. No. Get repository. No keywords, no author, no license. And of course, you can customize thes as needed. So this was just for the purposes of this lesson. So I'm just doing a really quick creation of the package dot Jason. And once everything is OK, we can just hit. OK? And it will create package dot Jason. So you see that over here on the left hand side within that editor folder, that package dot Jason and this is the contents of package, not Jason, actually. So now we're ready to continue to build this out, and the other thing that we need is we've seven mean entry points. That's index dot gs. So it's going and create that. So again, on a Mac, it's touch index dot gs, and that will create a blank file called Indexed eight gs or whatever you've named it. So now we've got our entry point. We've got our Jason package set up, and we're also going to now set up a few packages that are available from N p n. So one of the packages that I really like to use is no admin. What no admin does is it allows us. So do NPM install node one. So this is going to save us a little bit of work where we have to constantly restart every time we update our index dot Js file. So once you install that, you can launch your index dot gs using node mourn. We're also gonna have to install Express. That's the next thing that we're gonna install. So once node Maan is set and ready that we can do an in deck node mon index dot Js and that will launch index dot gs. So whatever changes we make here, it will restart the server whenever we make changes and see that. So just type in here restart so that we can actually see that every time it's restarting. You see that once I made some changes to my index dot gs and saved it, we get a clean restart and we're back up and running once again with our index file. So this is saved us some trouble because typically you'd have to go over to your terminal and constantly run note indexed RGs every time you make changes so it come become, come become a little bit of a hassle. So it's always good to have these really cool packages that help you develop in more focus on the court. So next thing that we wanted to install is we want to install express, So open up another window for this and we're installing Express so expresses super popular . We can see there over four million users have downloaded it and installed it. And it's really the quick and easy way to set up a server so you can simply grab the code that's available on Express and paste it on indexed RGs. And we'll see that right now. We're gonna throw an error because we haven't installed express yet. Let's go ahead and install it. So, control, See, in order to break out of our node mon npm, install Express that's gonna install Express. And then once we start our node mon back up, we're going to see that when wherever we go to port 3000 or whatever port we've set up here that we're going to see Hello world being output there. So let's start that up. Nordmann index dot Js. So start that back up a browser and refresh it and there we go. So we've got our server up and running. So it's Azizi. Is that to create that with express? And there's a number of the things that we still need to set up here. So I want to create a new folder you can do that make directory and we're gonna make a directory called Public. And then we're gonna navigate into public and touch index stop HTML. So what this is going to do is this is going to create an index dot html page so blank index dot html page sitting within public and with express. We also have the option to set up a static file. And if you want more information on what you can do with express and there's a ton of stuff you can do, one of the things that we wanted to do is set up a static wrote. So that's middleware, and you can see that within the get organization. So if we go to get Hub Express Js and then we could go to express and you can see there is a ton of different examples that are available here. So they have that same one that we've already copied that minimalist to get up and running , and you can see here that there is a bunch of examples here that you can simply copy and paste. So the one that we're looking for is we want to actually have static roots that's available so that gives us that. Hello text. And if we go to index dot Js, you can see here that they've linked to a public folder and you can also bring in joint and you can bring in that public folder with in that way as well. So it is to simply copy this one and minimize this. Go back to our index dot gs and instead of get so it's now going to go over to the public file and we can create our index dot html Save that. So no bond Index touch ass. So we go, So we're up and running, so we do need to go back into our index dot Js file. And so we've got path there, so we need to specify path. So it's set that up. It's a variable path equals require path and restart that. So now whenever we go to our index dot h, whenever we see whenever we restart our application at Port 3000 we see that we're no longer using the route were using that index dot html page. So that's what we want set up. So go ahead and set this up on your system installed express link to that static path, and the next lesson we're going to continue to build this out and add in a few more packages that we're gonna need to make use of and upcoming lessons. 5. 3 Get Packages NPM: Okay, we're almost there. We need a few more middleware packages in order to complete our environment. So the other one that we need is body part, sir. What body part sir does is it allows us to essentially send content to the body. So if we're sending information from the front end, we can pick it up within the body. So it's going and install that as well. So I make sure that I'm in the rate directory and it's NPM install body. Pariser and we are going to need this. And you do need this every time you're sending form content over so that you can pick up content from the front end and make use of it. Also, Jason is gives you the ability to parse Jason requests as well. So content type. Jason is a lot of really cool things and very useful package as well. You can see almost four million people have downloaded it and then special for this project . We're going to be using a package called Twit and this is NPM install twit. So it's not as popular. There's 9000 downloads, installs of it, but this is the one that we're going to use in order to connect to our Twitter ap, I was going to be a quick and easy way to connect to Twitter from node install. And then we're gonna just bring both body part sir and twit into our projects that set that up as well. I'm gonna update thes vars to be const and just do a little bit of update of the court. So another one that we installed. So we did install Body Person. So that will be require and body parts, sir. The packages actually with a dash in it. So don't forget that that's what the dosh That's not all one word, Const and other one that we wanted to install is twit, so require every time you install those packages, make sure that you bring them in and you require them into your applications that you can make use of them. So there we go. So we've got all of that installed and we're actually ready to build out the rest of our application. There is some middleware that we wanted to add in. So the mini middleware and it's gonna become useful later on as we progress the lessons. But Let's just set that up for now. So we wanted to app use and body part, sir, G sciences leads us to parse that Jason content up use and again body part, sir. And we're gonna u R l and code. So this allows us to grab you are l encoded content and save that already to move onto the next step where we could actually start creating some routes for our app. So it's set those up first, get So this is express And the first wrote that we want to get is let's get all of our tweets so set up a route tweets and we'll enter in some parameters as well. So tweets search so that we can search the twitter a p I and return back some response data and we're going to get search us a parameter. So for now, we're just gonna Consul, log out whatever the value of request parameters, search is gonna be and will respond back now with some G son so response. And we use Jason. So we're turning back a response within a Jason format status and you can enter in a message here. We're gonna be updating this leader. So there you go. So we are ready to try this out. So if we actually go to and remember, this is gonna be get parameters so we can search for whatever term that we want to search. And of course, we need to start up and let's close that one off. We'll start up the server. Let's try that again. So now whenever we go to that route, we see that we get test passed in. So that's the request parameter search that's being passed in there, so able to grab that and pick that up. And then we're returning back that static message of success right now. So we're not doing anything with the Twitter AP I as of yet. So it's coming up in the next steps where we're gonna be connecting our twitter a p I and setting all of that up. So it's all coming up next 6. 4 Setup Twitter Developer App: this lesson, we're gonna be logging into our Twitter developer account, and I'm gonna show you a little bit more information where you can find out more about what's available within the Twitter search. AP I So there's a lot of different endpoints, and the one that we're gonna be using is the search AP I end point and you can see that the path is tweets dot Jason que from and NASA or NASA. So basically, it's certain this is the search term after the Q. And these are the tweet objects that get returned. And there's a ton of information here. And I always like to think of Twitter as one of those really massive Jason AP eyes each tweet object. It contains just a ton of information. And if you can get comfortable and get used to using the Twitter object and getting data from here than any other AP, I should be a piece of cake because there's just so much information. There's multiple levels here that it can go down on and on and on s so there's a lot of information contained in every single tweet object, and they've got even more information available within the tweets, So search tweets standard search A p. I s. So again, this is the wrote that you need to know. And also, this is why we need tohave our authentication. Because if you try to go to that wrote even if you're going from your web application, you need to authenticate. And this is why we need to use node because we need to authenticate in the back end because you don't want your keys and your tokens visible. So let's go over and let me show you all the really amazing parameters and information you can get back. But you've got requests you can do in 15 minute window, 100 needy Jason requests through an authorised app. You could do 450 every 15 minutes. That's a lot of requests, and that will definitely keep you busy with tons and tons of data. So the first parameter is thank you. So this is for the query whatever search term were acquiring. And then they've got some other parameters that you can search within that search term as well. So you've got the geo code. So these are all optional. The only one that's actually required is the query you need to know maximum 500 characters . There are some limits to that, but this is the initial query of the term that you're trying to search Twitter for, so you can look at particular geo location so ever. Users are located in within a given radius, such the geo code, so latitude, longitude coordinates also language, so you could do various languages. So if you only want tweets within a specific language, you can do that. There's also locale, so language or locale based. So I don't use a lot of these, the only one that I really use. I'll use the query, obviously, of course, and also the count. So if I don't want to return back to many, we've got a maximum of 100. And if you don't set that, then you're automatically going to get 15 and you can set up to 100. So that's again a lot of data that you're coming back, and I always advise if you're just starting out, just take one of those tweet objects and really looked through it. Get familiar with it. Also, another one that I used very commonly is since I D. So if I'm making ah bunch of different requests, I pick up the last idea, especially if I'm storing it a database. So pick up the last I d that I have within the data that I've already pulled. And then I just do sense. And that allows me to pick up from the previous tweets that I've already put pulled into and stored into my database, the max I. D. So this is another one that you can set some parameters and include entities, so I don't really use those ones. So basically, the sense idea is the most important for me because it allows me to make multiple queries and pick up from where I picked where I last left off the last i d. So this is an example of the response and as said, there's just so much information. So it is going to go into Jason Validator and this sigh. This is just another way that once you get this tweet object back to make it more readable , toe open and close the various objects because there's so many different levels here. To get comfortable with this and be able to pull back and get access to the data that you're actually looking for. It can get fairly complex. There you go. So once you clean it up and, yeah, sometimes there are copying it over. But if you did have it as a string value it be a lot cleaner and easier to bring that in. Esso. I've simply copied and pasted out that example one. And you can see that when you've got an actual Jason Lint, you can actually read through this a little bit easier. So let's say, for instance, we see that everything is under statuses and we see that we've got multiple statuses. So all of the tweet object information is contained under statuses. And then when you open up those statuses, you've got a bunch of levels that you could go down as well. So there's common ones are obviously the text. So this is the tweet information, the string I D. So this is if you want a link out to it, so I d underscores string. Or you can use the numeric value also created at, So it's another important one. There's also you are else, so you've got the ability to grab the different you URLs. So, by default, Twitter will shorten the URL eso in order to grab that expanded u R L. Then you need to grab that. You can grab that within the tweet object. So it's got the shortened one as well assed extended one. That's another important one toe look at. There's some metadata here, and another important one, of course, is the user. So you want to get that user information and this goes multiple levels deep, a swell so user. So they've got the name screen name than they have entities. Location is another one that we'll go multiple levels deep. And then you've got some typical data here for that information Geo as well, Favorited. So just a ton of information and definitely worth checking out and going through. So once you have all of that set up and also make sure that you do have your Twitter account and you've got developer access to your Twitter account, and once you do have that, you can go to Twitter, APS, and then all you have to do is create a brand new app. So I'm gonna call it Twitter Tester course, and then here we just need a description. This could be anything. It doesn't really matter. Also, you need a website so valid, called back girl, because I'm doing it locally. Local won't work, so you could just put a website in there and it's actually not gonna matter. You can put whatever website you want in their asses, long as it's a valid URL. They're fine with it. And if you have a website, obviously you can put your website in there. Eso once you've entered in and I need to make sure that the name is unique. So once we're set up, then what we get is we get he's and access tokens. So these are what you're after in order to make the Twitter application work. So we've got also we need to generate a token because we're gonna need token access and also the consumer keys. So the consumer keys are what gives us the ability to do to dio requests into the twitter a p i to do search and then the access tokens. If we want a post on the use or act on the user's behalf that counts behalf that we're going to need these as well. So if we wanted to make use of posting that, we definitely need to get these access tokens. So once you set all of that up, let's go back into our package here and the one that we wanted to use. So I want to make use of this where it's got the consumer key token access token and time out. So copy those ones out. Go into your index dot Js and I'm also going to do constant for this one. So here we need to enter in our consumer keys. So it's open up that, and I'm gonna open it on the side here because we need to copy and paste in that information. So consumer key is the 1st 1 So go ahead and enter that one in next. And of course, this keys are very long, so usually better if you copy and paste them, so trying to write them out next access token. So grab that access talking and make sure that when your copy and pasting, you get the whole key. Also, you're removing any spaces. That and I like to keep that time out in there that you don't continues to try to keep requesting so last. Let's just clean that up and we can minimize this snow. And we've got our post and we've got the search. So search is the one that we're after that we want to actually get all of that tweet information. So let's do that in here. And we can update our search to our request parameters. And there's that count. So we know we've got a bunch of options here. So the query account. And if you wanted those other ones, you could enter those ones in as well. Let me make this big. And that's the problem there. That it's Ah, it's going over to the next line. So let's make sure what's double check and make sure that our keys are right, so great. So it looks like it worked. We went over to our Earl, and we see that we locked out all of the Twitter data within our within our consul. That's all the Twitter information. We searched 100 of them, so it may change an update that, and we'll update that to be five. For now, there's a hundreds, an awful large number, and let's test that again. So do note so refresh. And again we got a ton of information that came in here and you can see that the source who got Twitter information and it's exactly as the tweet object that we were looking at. So now it's just a matter of grabbing the information we want, and I'll show you how to do that coming up next. 7. 5 Output TWeet Object as JSON: welcome back. And in this lesson, we are gonna complete what we started last time where we were out putting content as Jason and all we need to do so It's open up. Our editor make it a little bit bigger here. And we saw that were console logging out all of that data so we can take that data that's being returned back from our request to the Twitter, a p I. And we'll just remove it out of the consul and simply output it as response Jason Data. So now whenever we go over to the web page, we're not actually gonna see just that one. We're going to see all of that. All of those tweet objects within a Jason format being output. And that's actually what we want whenever we make our requests. And I also want to introduce you to a tool postman. So postman gives us the ability actually to do to test out our various roots where we can post we can get eso get post this available postman dot com. So what we wanted to do is simply do a get request over to this road and we'll see that we get this response. It's nice in a Jason format and also gives you the ability to have it in a nice, pretty out output. So again, it's a lot easier to read through all those statuses and those responses when it's really nice, readable format like this within Jason. And we wanted to create another route where we can actually post to it and send a data, and this will actually post to our Twitter account. And that's also available. So let's set that up as well. And this is post statuses update so we can copy some of what we've done in this earlier wrote and just paste that in instead of tweets, said Do comment. So that's going to give us the ability to have a route where we can send a comment over to Twitter, and I'm gonna just overwrite those clean this up a bit. Is that body parts? Er so first, all its console log out and we'll do request body and Comet, so we're going to grab the comment information as body content within the request, and then that's the same thing that we're gonna output to our Twitter account and always be careful because this is gonna be alive. So whenever you tweet something here, it's actually going to go out to your Twitter account as well. We'll get returned back as Jason, the same as we see the whole tweet being started and sent through. So let's go over to our Twitter account and go back to just a regular Twitter account. I know not. Not a whole lot happening here. Send use postman to try out and send our comment over. So Post and make sure that we get that wrote proper so comment and then within the comment within body, we need some values that we want to send, and there we don't actually need the one value. We just need that comment value. So the key is comment that we're sending through. And here is the message that we're posting posted from, and before we try that we're just going to make sure that we're posting instead of using get as the road to make sure that everything is working properly. Let's open up our Twitter account. This is the Twitter profile that's attached to that developer account. So put that on screen, and then we're going to use postman to send tweet over. So it's open up, postman. Make sure that we have all the parameters there set. So we're posting and then this is the road that we're posting to. We've got parameters of the key is comment posted poem postman sets the value that we're sending over. We're also gonna be grabbing that and placing it out into the console So when it gets sent So now we're ready to hit, send and see what happens. So there we go. So we were actually able to send through our tweet object and we see that we've got that one new tweet eso It came in so right away that the tweet went live we went through and we routed it through Twitter, using our application sending over to our roots. And we can see what we posted the posted message there as well Eso again, Let's try that out. Another message, another message and hit send again. And we posted another message on Twitter. So it's is easy is that to post content to Twitter, we've got all of our rights set up. Everything looks like it's working properly, So we're next. We're ready to start using our front end code and send information to these various roots. So all of that is coming up 8. 6 Setup Index Frontend Code: the previous lesson we saw that we can send tweets from our local machine, and we can also get all of the tweet information depending on the search term. So we're all ready to set up our front end code. So we've got all of her wrote set up Our index dot gs is all set up and ready to go. I'm gonna remove that last console there. And now let's open up index dot html so we don't have a whole lot happening here. Well, first of all, let's create an index dot html file. So an index template and we'll call it tweet objects from note Go ahead and save that. Clean that up a bit. So I need to have something some way to interact with our A p i to send our a p r request. So it's set up in input and no, we that we can pick up a search term as well. So type text and give it an I. D. So I'm gonna call it search and then value so we could have a default value. You could just keep it as blank and then also let's side in a button given i d of get tweets, so clicking this button will allow us to search tweets. So let's see what that looks like. So I got her input field there. We could have Ah, placeholder. As also, placeholder looks a lot better. It's a place holder. Search term Go back refresh. So I need to enter in a search term click the search tweets button and, of course, doesn't do anything yet. Women brought in our JavaScript yet. Eso we're gonna be searching and what we're going to be doing is we're actually going to be going over to this route and picking up all of that search information and then retrieving that back as data using our Ajax request. So setting up script and then at the bottom of the script. So it's to const documents we can do get element by i d. Because it's they all have ideas there, So just do search. So I grabbed that one and now let's set up the button. So this is our search button called Get tweets and documents and get this one by I D as well was setting up both of those. We need to add an event listener to get tweets. So add event listener and we're gonna listen for click on that. And when it does get clicked, we'll create a function called Get all tweets. So it's set up that function. So this function, we're gonna call, get all tweets, and we're gonna pick up that search information from within this function. So first of all, let's grab const Earl. So grab the URL of where, where? Sending our where. Our road iss were actions sending her requests to. So make sure that it's in line with the route that we set up within index dot gs. So make sure that we are sending it to tweets, and we see that we're looking for a parameter there. So this is where we can add in that search value. Remember, we set the variable search, Teoh the contents of this element, and then all we're just doing is grabbing the value, so that should give us the actual wrote that we want to go to and will use fetch. So fetch you, Earl, then function. And we look for a response. And first of all, let's return that response as Jason. So all we're doing this returning that response as Jason. And then what do we want to do with that content? And we're grabbing all of that information as data, so we got some options of what we want to do. But for now, let's just output it within the consul just to make sure that we're actually grabbing our data. And then we can worry about what we're going to do and how we're gonna output that afterwards. And then, lastly, let's set up our catch. So this is a catch. In order to catch any errors that might happen. And then we can do something with those errors. And for now, we'll just console log the errors as well. So what? Do it, Jason and string, if I so that we can get a string version of any of the errors that get output. So that looks pretty good. So let's ah, open up our browser and try that it. So let's see, We get a search term, what type and test and go into our consul and we see that we're getting returned back This object. So we've got search meta data. This is the search query that we search for the count of five. And since I d. S, we didn't enter any of those. We've got the refresh your l next results, so we can also make use of these as well. So if we wanted to to do a page Nation, we could just do next results. And we're always returning back that next result path that we can query into Ah, and then we've got our statuses. So these are actually the tweets that various tweets that were returned we see that we want to return back five. So we've got five back within our console and again, just a ton of information there that we can make use of. So next. What we need to do is find a way to output this data really nice and neatly within our index page. So it's come up in the next lesson. So go ahead and set this up. Make sure that all of your roots air working before you go ahead and try with the front end . You can use postman in order to ensure that your roots are working properly. And as long as you're able to retrieve information and post information, that's all you need to make sure that your routes are working and then you're ready to finish off the project with the index the front end index page, where you can create all of that functionality between the different elements and finish off that Ajax where we're gonna be actually making you send out putting that content into the page. So let's side. Before we conclude this lesson, let's set up somewhere to output or tweets to. So just create a new ordered list. And I'm gonna set up a const called Output and Documents. And this is also get element my i d. And of course, you can use query, selector or whatever way you want in order to make those selections of those elements. So coming up next, we're show you how you can put that content all of that data onto your Web page that's coming up 9. 7 Output Tweet Data: in the previous lesson, we saw how we can set up and search various terms and have a response sent back from our Twitter search. So we've got various objects and we've got the status is coming in and all of the tweets are under statuses. So we're ready to build out the next part of our application. And that's gonna be a function in order to handle the outputs of the tweets. So function output tweets grab that data because we're doing that within that fetch object answered a console log. Let's take that data and we're gonna put that and we're also gonna break this down as well because we only want to get the statuses. So let's keep that as statuses. And let's make sure that everything is still working properly so well, output our data. So it's refresh type in a term search. So we go, so we get it as an array. We're gonna re length there and array of different tweet objects that's coming in. Let's plan out how we want out. Put them onto our page so it's clear out what we have within output. So we call that to just blank. There and I know we don't have anything and it put yet. But if we're doing multiple searches, then we want always clear out what's already existing before we try to add to that and data we can use for for each cause. We're gonna loop through all the items function. So grab in the item. We can also grab the index as we loop through. So let we'll create a hyperlink out to each one of the links. So let hyper and this is where we can set up our link. I'm going to use the back ticks template ing format so h rough. And then the address is http. Yes, Colin ford slash ford slash twitter dot com For it slash i for it slash web I know this is fairly long, but status and then this is where we can specify a status I d that we want to use. And we know that we're already passing all of that information out. So it's two item, so item is where we're looping through. So it's gonna contain that entire object, and we could do item I D. And under court underscores string to get that value I put there and we're gonna close that off and target. So we opened it up on a new page, so Target is blank. And then let's use the template again. So item text. This is gonna be the actual whole tweet. And let's so for now, let's just append. So do output upend to repent, child, and we'll add in hyper in there. Let's try the suit refresh test. And let's also make sure so as we looped through Consul Lago each item so we actually get some type of output. There we go. So we get all of the's items here and let's ah, let's see, Maybe so. You've got it as item and there's the I D string to make sure that we got that proper. So it looks good. We are able to grab those so it's finished this up and we're gonna actually create elements here. So when I create different list items, so do list item. So it's document create element, and the element that we want to create is a list item. And then also let's create a span so let and document creates elements. And this one's a span as well. So I create one of those and then within the span, let's add an update our inner HTML. So this is gonna be the contents of that span. So use the back ticks again, and this should actually be curly bracket. So because we're calling over to our variable hyper and a little bit of HTML so item, user and dot name because we had to go to levels down for this one. So if you look at the way that this tweet object works is that we've got all of this information here eso you go down all the way to user. And then if we want to get the user's name, whoever actually tweeted it, we just go to their name, which is sitting here. So that's one level down. So user and then name. That's where I got the user name. And let's close this off by small. So we've built that into the span, and then let's do one more thing here that we need to upend child to the list item and then we're gonna hand that list item to that output. So update this safe. So there you go. So we get all of that content, gets listed out, we could make this bigger. Of course, eso these air the five different tweets. And if we click one of these tweets, we see that we open up that tweet object so we can really usually click and link to any one of these tweets. And, of course, every time we search, I know test is obviously a very well included term within certain within text. So we've got test there, and so on test. It's a number of places. So there were those who were able to search Twitter for various terms. Let's clean up our code saved that. And next, let's make this look a little bit nicer so that it's not looking like a bunch of list items , and we can also extend amount of tweets that were getting back as well, so we could include it to 10 or 15 or whatever we want. So go ahead and try this out for yourself. And as long as you've got the routes, then putting it within HTML is fairly straightforward. And sometimes, depending on what content you want to access, you have to go down and navigate through multiple levels until you can get the right Clinton. But it's all right there. And there is a thana content. There really is a lot of information here. And if you can navigate this one, all of the other Jason AP idea should be fairly straightforward and easy once you get the hang of this one. 10. 8 Style and look Nice: all right. And welcome back in this lesson, we are gonna look at making our front look a little bit more presentable. So earlier we saw that we set up in the last lesson that we can search. We got of the tweet objects we deposited into on a new ordered list using a function output tweets or passing that data. And then we built it what we want it to look like within our HTML. So over here I've added in some styling so that I didn't want to spend too much time on styling within this course. So I've simply added in some default styling. And as you can see, whatever we search, everything's working properly and we've got this hover effect. We've got all the tweets, separated it with the line, and we can click and open up those tweet objects. So it's styled it a little bit better, so we put some output styling there. I put the list items added in the hyperlinks, the hover over the hyperlinks and then also the different colors on the spans were including information from the user name. And of course, we've got a whole bunch of information that we can output. So whatever you want to output, feel free to add into your tweet that you're displaying. You could do like a retweet count Retweeted. There's a lot of really great stuff here that you could add in and really make your tweets look really nice and neat. So it's sad and one more thing will added the Retweet count. It's always good practice, so I go by what you've got within your console and then go down and you can see that there's all this information. So these objects, so you just need to navigate to the right part of the object that you want to use, so make it bigger again, and I do test so you can see that now we've got, ah, heart with the retweets. This one's got 14 00 and so on, so you can really easily add in more information and really customize this to get a really nice look and feel within your output content. So go ahead and try the search for yourself. Style it for yourself and up next, we're gonna add in the post from our front end, sending posts to our Twitter account. So it's coming up next 11. 9 Post a Tweet from index page: in the earlier lessons, we saw how we can use that route where we can get all of that tweet information. We can search it, return not back, and then I'll put that within our page. And of course you can style it and get any of the information that you want in orderto output on your page. Now, the next one that we're going to do. And in this lesson we're going to go through how we can post a tweet. And this is gonna be a little bit different because typically, you probably don't want users to come in on your Web page and be able to post tweets. So that's just something to keep in mind that you might not want all of this functionality , but it's already built out within a route, so I'll show you how to hook data. Let's give it an I D. And this is gonna be the new message, given a number of rows. Four roses good and close off that text area. And also let's ah, line break and do a button here. So this button is going to be a submit button for the form, and there's so many really cool things you could do within this AP I see you can retweet certain tweets, and there's just a bunch of really cool things within the twit. AP I So we've got the get a list of the ideas that follow so you can get a whole list there , Um, and just a ton retweet. So here's you can retweet different tweets, depending on their i. D. You can destroy a T tweet with the whatever I D. So if you don't want to get rid of a particular tweet, you can get rid of that. Ah, here's another. If you're looking for Twitter users with a slug of funny so you could take a look at different Twitter users, I hear you could actually upload media. So if you want to upload media such as images, you can do that here as well. That's another really cool feature upload I've on MP four file and just really there's so many different routes here that you can release the click create in order to output different tweet values within your page. There's just a ton of stuff that you can do and let's open up this bigger. So you set up our submit. So put on event Lister on that as well. We'll put it on the whole form. And let's add our event listener for that. So adding an event listener and we're also going to do the same thing. So this time we're listening for the submit of the form and we'll call it add comment. So it's gonna be the function that we're gonna invoke, and we already have the routes set up, So this part is relatively straightforward. So add comment is the function and we'll do this post using JavaScript X h r. So event, because we gotta prevent that the default from firing off. So event to grab that event object use, prevent default. So the JavaScript prevent default method in order to prevent the default. And we're gonna grab that comment. New tweet comment. So this is gonna be the brand new tweet comment that we want to output, and we'll keep that within a Jason format. So you send it to the back end within a Jason format as well and documents we can put that full path, get element by I D. And we want to grab out the value of this element and the element that we're getting. So this is gonna be the new message. So whatever contents are there were going to simply send within this object. And next, let's also will console logged at it so we can see what we're actually sending. And then lastly, let's finish off our Ajax with our http requests. So Accenture so create a brain. You actually char object. Do new xml. Http. Request object so you can use fetch as well. You could use the x h r http, request for this one as well. Because we're just doing I get here eso either one. I'm just trying Teoh Private provide some variety because depending on what you want to work with. So there's a few different examples of different methods that you can do this. So doing a post. So make sure that you get the wrote in that it matches with what your route hiss so asynchronous is true. And save that and just always double check. So it is comment. Make sure that it is the same one, and that's not really the most important part that we just want to make sure that where we've got that correct, right? And then we can send Well, do Jason String if I Because we've got new comment within new tweet comment. So we're gonna string if I that you tweet comment when we send it through. And also let's update our headers because since we're sending it within a Jason format, let's update our headers. So we're posting X h r. So we need to set some request headers. We need to specify the content type is that their quest knows what to expect. So this one's a little bit long. Its application ford slash Jason and character set equals utf Dash eight to make sure that we get that right character set that we're setting within the headers. And also we're gonna be retrieving back our response text. So let's use on ready state change. We'll have a function on ready state change and will look to see if ECs h r ready state is not equal to for or ex HR. Status is not equal to 200. Either one of these is not true. Then all we need to do is return. That will break the function there. Once we do the return, I know I've care, See? Probably see different ways of writing this. So there's a number of different options, and for now, we're not going to do anything with the returned X h r response. We just have put in the console, and I'll leave that up to U S so you can take it from here and do as needed with that ex HR response. So maybe you want to tell the user, Thank you for your post or whatever information you want to try out. So let's take a quick look at this before we try that out. So remember again that this is posting life to Twitter, and this should actually be equals. Utf eight. Let's see that and try the same. So refresh. And now we're ready to test our post to Twitter Twitter and send that post and the real so we see that we get that post has been created. Let's open up Twitter and there we go. So there's our post that we just sent over. Test our Twitter. There's our post, and we can send another post to Twitter. Post that, and you'll see that once again we get a response. So we get that whole response text, and that's that tweet object. So then, of course, you can make use of this. You can I get that I d if you're tracking that and this number of things that you can do with this as well. So let's refresh And there we go. So we've got our other one there as well. Send another post to Twitter, that's all working so good and try the suit for yourself. Send dies some posts. And remember, this is life going Teoh your Twitter account and also search Twitter that's coming in through as well. You can play around with this and make some updates, Adjustments to the code as needed. So next we're going to do a quick overview of the code, and I'm gonna leave it up to you to extend this application and build upon it. 12. 10 Source Code Review: great job and congratulations on making it this far. Now we're going to do a quick overview of what we've done in the earlier lessons. So we started it by creating our index dot gs. We brought in a bunch of different packages predominately express and twit and body parses . So these were the three core packages that we needed to bring in. In order to make our functionality within our application, we used twit and got our developer keys from our eight Twitter a p I, and got those keys placed them the consumer keys, the access tokens into twit so that we can establish our connection and authenticate our application. So basically, what's gonna happen here is that twit acts as that account that's attached to the developer account. So are doing these access tokens. We're acting as that user within the application, and then the consumer keys give us the ability to search within the twitter. AP I we had some middle where we added in. So this was from express so that we can set up our default local directory. So it's our static directory within public. We had a folder called Public, and then our index file, which was a front page file within her application. That's static file is the index file, which whenever we go to local host 3000 we actually see being displayed as our main index page. We also included Body Part, sir. So this was so that we could parse through content that's being submitted so we could do You are Ln Coated and Jason content. And then we had a couple of routes that we set up. The first wrote that we set up was to search for different tweets and what's doing as it's getting the search parameters or whatever the value parameter there for search. And it's going and connecting to the twit object and then making a search within Twitter. So it's got all those authentication keys, and that's all done in the background. What it does were able to set a few parameters weaken due account. We can set the term that we're searching the query value and then we get a response data and that data were simply out putting in a Jason format into our route so that it could be made so we could make use of it within our application next we had a post where we can actually post our comments to our Twitter feed. And this is again using twit where we do statuses update and we stand the information that we want to update. So its status and we're sending over the comment and we're getting that from the post the body comment information. Also, we set up our index so ahead of some styling here to make her tweets look a little bit nicer. We had a form where we could get a Nen put message and then post it to Twitter. So trigger that event, invoking a bunch of functions that sent Ajax requests to the back end routes of our node server. We also had an input for the search term where we could search for different terms. And then we had an output area. So something where we're actually putting all of that data that's being retrieved from our routes set up a bunch of variables here to contain the objects the element objects. Then we have our two event listeners for submit and click, and this is where we have our functions where all the magic happens. So if we're adding a comment. And in this instance, we used regular http request object in JavaScript. So nothing fancy there. We can actually get rid of our console logs as well. Posting it. We had to make sure that we're setting the content type as Jason formatted because we're sending it over as a Jason format and when we're string defying it. So we're taking that object information from that input and sending it to our back end wrote. So that's over to comment, and that's where picking that up and then all we're doing with the response text. So what it does is it actually responds with that tweet object is the same one that we're getting down here, and all we're doing with it right now is we're helping in the console, and you can always take this and do a whole lot more. With that, you can get the I D and a bunch of information that's contained within the tweet object. Next, we had a function where we were using our fetch in order to connect to our route, return back that content as Jason Data and then sending that over to a function in order to process it and put it on the front end could get rid off these once the console logs. And first we we built out located several different elements. We got information contained within that response data from Twitter and we're getting the I . D String. We're getting the actual tweet informations that's item text. And then we were getting retweet count as well as the user name. And we also saw there is just a ton of information, so you can really customize this as needed. And we see that whenever we open up our consul here, we see there is just really just a whole bunch of information that's contained within these tweet objects so you can make use of it, have some fun with it, and I would put it within your Web page. And there's just a really a lot of data, and it's a really good practice exercise to go through this data and output it within your front end code because there are multiple levels here, and going through them will get you really familiar how to work with these large Jason objects that are multiple levels deep. So what we're doing simply out putting whatever we're searching for and out putting these tweets. So So you've got a number of tweets and then we're also linking out to those tweets so we can click and open those tweets up. So we got two pieces of functionality within our application. We can post weaken search, and we know that within twit, there's a whole bunch more that we can do. So now it's up to you. You can explore and build upon what we've created within the earlier lessons and extend functionality. Extend what you're out putting for the different tweets, update the search functionality, and also try out some of the different options within twit that you can post and connect to your Twitter account. And just also remember that this is also live within your Twitter account. So make sure that you're not posting too many things that you don't want visible. And as you can see, I'm just using a test account, and it's always a good idea when you're practicing to use a test account. But this is also gonna be your developer account, so always keep that in. Mind us well, that whatever account you've set up, the application under this is also gonna be the count that you could make use of. And it's also gonna be the one that you're gonna be using to post two. So keep that in mind when you are building out your applications, so have some fun with it. Try it. A source code is also included, so you can build upon and extend the functionality that we've produced within the lessons of this course.