Code a Podcast Player App in React with AG Grid - How to Build Application Tutorial Part 1

in this video we're going to create a simple podcast player using a g grid we're going to give it the url for the podcast we're going to parse the xml file to get all the title names and mp3 names and we're going to show an audio player in the grid in order to let us play any episode that we want if you want to jump ahead and look at the source code that's all at github.com a g dash grid slash react dash data dash grid and it's in the podcast player folder there are some prerequisites we're going to need to have node.js installed and i'm going to use visual studio code as my main editor and i'm going to do all this from scratch so some parts may be sped up well the first thing we're going to do is we're going to npx create react app and i'll say the podcast player and this will set up the basic structure for the project because it will take a little bit of time will fast forward now let's cd into the folder and we're going to install ag grid and i'm going to use edgy grid community here which is free to use and you can then see the features that come for free with ag grid and we're also going to build this in react so i'll install a g grid react wrapper which is the react user interface for a g grid and we'll just fast forward through this install process as well okay so now we have everything installed i'm just going to load that project into visual studio code even though at this point there's no code in there we'll just open up the project okay now we're ready to get started let me open up the terminal in the visual studio code i'll just make sure i'm running bash there there we go all right let's see what we've got in here create react app has created an app.js for us and what i have in mind is that we will have a heading that says podcast player and a couple of controls to let us define the input feed and buttons to load the feed and then we'll have a grid and that will basically display the title and the date of the podcast and it will have a some sort of control to let me play the mp3 for the podcast that's my basic design that i'm going to have and to keep it simple i'm going to put most of it in a control so i'll have my h1 which will be the podcast player and i'm just going to have a react control here called the podcast grid and i'll need to give that an rss feed we'll figure that out in just a second and i'm going to give it a height 500 pixels and i'm going to give that width and i'll make the width 100 of the screen so that's nice and simple and then we'll close that off now i haven't created this component yet so we'll do that in just a second now i thought for the rss feed what i'd do is i'd use the web brush podcast and the feed for that is there so if i copy link address paste the feed in there we can see that this is actually an xml formatted file so i'll have to write some xml parsing but i won't worry about that yet i'll just put in the feed so i'm hard coding this so when the podcast player renders we'll have a feed ready to go so let's do an npm start here to have the application running in the background good so i have started my application and we can see that the podcast grid component hasn't been created yet because we haven't started writing that so i'm going to start writing that now so in source i'll just create my new file for the podcast grid and initially this would just be boilerplate code to compile and render a simple grid with test data so i'll need to import react and from react i'll have the use effect and use state and i will import a g grid react which is the ui this educator provided for react and we'll import some css styling as well and i'll want styles and we'll have the edgy grid css and i'll bring in a theme and we'll use the alpine theme so i'll want my podcast to be a component here so export as a function the podcast grid now i need to pass in the props so that we can access them in here and this will just be a very quick render at the moment just to get something working so i'll say we want a div with our class name of a g theme alpine and i'll style this to have the correct width and height so i want height to be the props we passed in and the width again to be the props that we've passed in and within this div i'll want to render an ag grid react which is the 80 grid component so that should give us a grid on the screen hopefully if i've done that right let me save that and of course we need to import that so let's import the podcast grid from dot slash podcast grid save that compiling and there we go so i've got a podcast player heading and my grid and my grid is saying loading because we haven't given it any data so that's a good start now if anything failed at this point i would check my react installation i would check that i'd imported the ag grid dependencies i might even follow one of the tutorials on the ag grid site so in the getting started guide in the documentation or possibly one of the getting started guides on the blog so in the react section there's a whole bunch of getting started guides we've got getting started guides for using hooks and classes and again these just walk you through the basic process for starting up a project but we have now created a basic podcast grid component that we're going to now populate to read from an rss file so much of the work that we're going to do now is going to be based in the podcast grid js file so let me just format this a little bit okay so most of our code will be in here i'm going to take my design and the grid part of my design is basically this so let's start by having the grid display three columns title date and playable or something similar so i'm going to create some column definitions which is going to define how the grid is going to render some data now this is basically an array of objects and each of the objects is going to have a header name so i think let's make this the episode title and we'll have a field that it will bring in the information from called title so at this point i'm just defining what the column is going to look like but i'm not going to pass in any data yet so let's have another object for header name this will be the published date and this will map onto a field in the data called uh pub date and then finally let's have a header name called episode and this will map onto a field called mp3 all right let me format this and quickly review the code to make sure it's going to work so all the header names are correct doesn't there's any syntax errors there okay so i've got a bunch of column defs so what i do now is i add that into the grid and this is a grid property so i'll add in the column depths and this will take it from the value that we've set up and if i save this the app should refresh and there we can see we've got the episode title the publish date and and the episode itself all we really have to do now is populate data in there so to do that i will hard code some data in initially just to get the state working because the data that we're going to load in is going to come from the m state in the component so set rule data and initially let's just use some hard-coded values just to make sure that we're rendering this correctly and we've got everything set up so the hard-coded values again are going to be an array and we know what the fields are we've got a field called title and this will map on to the episode title column and we're going to have a pub date and that's going to be an actual date to allow sorting and things to happen later and we'll have an mp3 value which will be a url so i'm just going to hard code in something that looks like a url well is a url it just won't have anything in the back of it my podcast slash episode mp3 because i'm expecting that to be an mp3 file and the title will be my episode so if i save this hopefully that will render in the grid and we can then concentrate on adding some actual data so what was the mistake that i made there oops use state again so that's why i made the mistake in the import at the top now that i have data i need to actually set that into my grid which again i can do down here as a grid property and we'll pass in row data equals the row data from the state and there we go so i've got my hard-coded data values in there i can see that i've set up a grid so once i can read in data from an rss feed that should be rendering fine in my grid what i'm doing is i'm approaching this in tiny little incremental steps to de-risk any technical issues that i might face i should make sure that i save this student app.js just in case i made mistakes in there which i haven't so now we've got a set of hard-coded data in the raw data for the state we've created some column definitions this maps onto our title our pub date in our mp3 and we've got basic grid and the grid is being populated by the state so we can change that quite easily and the column definitions that we've added here in code so the next thing i'm going to want to do is get rid of this hard-coded data and pass in some data from the rss feed from the podcast now the podcast that we're using is the webrush podcast which is a javascript podcast and if i put this rss feed in here we can see that it's an xml file now rss is a standard format so there is a specification for it i can read that in order to understand more about it but what i'm going to focus on is simply parsing the rss feed that is associated with a podcast so looking through this i can see that the information i want to pull out is contained in these item elements which is the container for a title that we'll want to render on screen a description which we won't use yet but that might be useful later on for searching and filtering we've got the pub date and here is the enclosure which contains the mp3 file so if i can get the item containers and i can then pull out the title and display we should be good to go now xml can often seem a little bit hard to work with but with javascript we do have some built-in functionality to help us so if i in here create a parser for my xml and i'm going to use a built-in parser with javascript which because we're running in a browser and the browser knows how to handle html it knows also how to handle xml so we're going to use the dom parser and then i'll say that the data is the parser and this will parse from string and we'll pass in an rss feed i'm just making the assumption that we can get the rss feed and this is in format text xml so let's put this in a fetch so i'm going to want to fetch from the rss feed then having fetched it i want to deal with the response and from the response i'm going to want the text of the message so you can see that the text that comes back when we hit this is an xml file then i'm going to want to take that string and basically pass it into this code that i've just written here so the string is this rss feed so i'm fetching the rss we'd be passing as props getting the response and getting the text of that response creating a parser and parsing the text response that came in as xml then i will want to get the list of items which i can do very simply now because i can use the standard dom manipulation and interrogation methods so i can query selector all and get all the items so that will return all the item elements and because we are using react i want this as an effect and i'll want to run this code when the rss feed value changes for our component so what i really want to do now is take my item list and pass it into the grid so for each of the items in here so i've got item list for each and that will give me an element and for that element i want to let's create an array and i'll put all the information in this array so i will want in items to add an object and the object will contain the fields that we're looking for so it will have the title the title is coming from the title in the xml and i want the inner html for that and we want the pub date and that will be a new date which is taken from the query selector for update and let's get the text content for that and we'll also want the mp3 which is coming from the query selector for the enclosure so there's the title with the inner html we want the enclosure and then i'll need to get the url attribute from that so enclosure and we'll get the attribute for the url and that should be it so let's have a look we've got our use effect which is doing a fetch to get a response where we take the text then process that text as a string by building up a parser parsing that string as xml then running a bunch of query selectors on it to find all the items in here there's one item two three so we'll get all the items then for each of the items we're going to build an array containing the title and the pub date which we're going to convert into a date and the mp3 information that comes from the enclosure in the url attribute so the only other thing to do then is for that array that we just created i need to set the row data to be that array of items so if i save this there we can see that the grid has refreshed to include all the title information the date and the episode so let me get rid of my hard-coded data in here because i don't need that anymore refreshed pulled in the information again so that's good we have managed to pull in the information from the rss feed parsing it although it's xml wasn't that hard because we're using the window dom parser that is built in to javascript when we're working in a browser so we can see that it would be quite nice to format some of these fields and we clearly need to do something about rendering the mp3 because just having text doesn't help us we're going to need to have some sort of audio player in here but let's start by using some very simple edgy grid functionality to format some of these fields so for the episode title it would be quite good to wrap the text so i'll use the wrap text attribute then it would be good to have the height of that field set automatically so that i don't have to worry about formatting it and i think what we probably want to do is set the width so i'm going to set this as a flexible width value so that this will take up proportionally two parts of this which currently is half the grid and just in case let's make this resizable for the user so that they can adjust this themselves so now we've got this resizing functionality in there and it's a little bit easier for people to see what's going on so for the publish date i think it'd be quite useful if we could sort this grid to see the data so i'll make this sortable because it's a date we can sort quite easily so if i make that sortable now when i come in here i can sort to go back to the first episode see that quite easily and then the last episode so we've got sorting for sorting for free here pretty much and there we can see the results of the auto height and the word wrap and let's make the episode itself flex to be to there oops what did i do oh there we go comma there we go so if i make that a little bit wider as we'd expect then we can see that we've got the published date in here which is sortable i could later on bring in a formatter here so that i'm not seeing the time but with the grid set out like that that's just fine so we've got the data in the next thing i guess is to try and allow us to hear the episodes so edgy grid allows us to create fairly simple cell renderers to represent whatever data we want on the screen so i'm going to create a simple cell renderer to render the mp3 here as an html5 audio player and the simplest way to do that in my code is to just have in the mp3 itself a cell renderer and that's going to take some parameters from the grid so that i know what the url is going to be and this will just render the text that we put in here so i'm going to have an audio html5 with controls and i do not want it to pre-load because then the entire grid would be loading in all the mp3 files i don't want that i only want it to load in the mp3 file when the user clicks play so we'll style this a little bit to allow it to fit into the the row height so height to m and we'll vertical i'll align this in the middle so for that audio control i will now need to set the source and the source is going to be the value that is coming in from the params so that's the params value because that's currently what we've stored in the data and this is of type audio slash impact if i save that then as if by magic we now have the episodes rendered in an audio html5 which should allow us to start playing that information so i've got now a very basic podcast player with a g grid doing the heavy lifting by loading in the rss feed directly into the grid for raw data we've got sorting for essentially free by changing one of the fields here i've got resizable information that's being formatted and we're rendering it on the grid in an audio player using a cell renderer so great i've got my basic podcast player so currently we're hard coded to just have the webrush podcast which is great but ideally i would like to configure it for anything else so what i'm going to do is i'm going to mend this to have an input field where i can just add the rss feed url and we'll bring it in from there and then we'll call part one of this podcast player done and in part two we'll add more features and filtering and things like that so let's make an input field what we currently have is the rss feed hard coded in as a property on the grid in the app.js so the simplest thing i could do that would work is to add an input field in the app.js to let's type in an rss field so to do that i'm going to add some state into here so let's import react and use state remember to spell it correctly this time and we're going to bring that in from react so now i can add state into this app component const rss feed and we'll set the rss feed and this will use state for the value that we currently have hard coded here so i'm still hard coding it but i'm setting it by state to make it a little bit easier to amend and so my props set up here should use the rss feed so there should be no change to the app good and what we want to do is add an input now i could make this a separate component but i'm just going to put this directly in here so we'll add a div and i'll have a label and that be for my rss feed url input that i'm going to add and that will be rss feed url so my label will need an input that's going to be type text with an id to match the label which is rss feed url and i'll give a name for the rss feed url and let's set some styling up so width will be 80 and i'm going to use a default value here which means that this is going to be an unmanaged by react component which means the user can amend this without us having to write much code and react so it's basically just going to be a very simple input field on the page which is initially set by the value from the state which the user can amend but when they click a button then it will set the state so let's handle load feed click in this load feed button so now i better write this handle load feed click so const handle load feed click is a function and it will get the input rss feed value from the unmanaged field we'll use the id to get it which is the rss feed url and we'll get the value and then we'll set the rss feed to that value so this is the fastest way i can think of for adding an input field onto the screen let's reduce the size a little bit where i could type in any other podcast url and we can load it into the app so let me just quickly get a podcast url so there's a url pasted in for the evil tester show load feed i can see that we have or i have used the area value rather than the value and i can see that rather than setting a style which i should have done i set the wood directly so let's set the width fire the style then that should format better there we go so now i have styled the input field to be eighty percent and i'm using the value so now when i click the load feed button it should work so there it goes now i've got the evil test to show url in there and let me switch back to the web brush podcast and there we go so that i can load any feed in there this isn't the most robust application obviously if we type in a an invalid feed it's not going to detect it and we're limited by the browser itself so that all the feeds we're using have to be cores compatible the cross origin resource sharing has to be configured on the other side to allow me to fetch the data from a browser if the course is not set then we won't be able to access that feed from the browser and we'll see a course error in the dev console however this currently is a perfectly valid podcast player that allows us to type in the rss feed from a podcast load the feed and play the episodes so before i move on one thing i should really do is fix the test because i've not really added any tests in here we do have a test and currently it's broken because i've changed the heading and haven't reflected that in the test so let me amend the test here to match our current app so let me call this the header element and we'll just test that the h1 is telling us that this is the podcast player so now if i stop this i should be able to npm test and we'll have a working application so if i wanted to i could check this into github now and it would work just fine and we'll call this part one of the tutorial and the next tutorial will make the feed management a little bit easier we'll had add some filters we'll start to use the description so that we can search on values in the description and just make this a little bit more robust find lights will add some pagination in there make the user interface a little bit easier so join me in part two where we continue to build the podcast player and we're using ag grid community edition which is completely free and we're using the react ui to build it in react you can find out more information at agrid.com

Channel: ag-Grid

Views: 241

Keywords: ag-grid, javascript data grid, react data grid, angular data grid, ag grid, javascript datagrid, parse xml with javascript, read rss feed with javascript, fetch html with react, create custom react control, custom react controller, ag grid react, ag grid react tutorial, ag grid cell renderer, react data grid tutorial, ag grid pagination

Id: 2TDIWOubvp0

Length: 28min 25sec (1705 seconds)

Published: Mon Oct 11 2021