GraphQL + WordPress (P4D3) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with Jessie and let me know if you can see the the video and everything all right if I'm actually moving because something's wrong with my preview and it's frozen so I don't know if it's just me or if it's happening for everybody so I'm just gonna wait a few seconds just to get confirmation as to whether or not my video okay cool video must be cool I figured it was me cuz I can't play any YouTube videos right now on my computer I probably just need to restart my browser that's happened before not frequently but it has happened let's see so today I've decided to be really ambitious and I'm gonna try to set up graph QL to work with WordPress and I've never done that before I've never worked with graph QL at all before so but I know I want to learn how to do it so we're gonna we're gonna try it out I've done a little bit of research about this earlier today but most of my time has been taken up working on the catechetical Institute website that was project one that we did just minor updates though and some just some basic things so I figured that wasn't really worth putting on a stream alright I got a lot of people in the live chat so I'm gonna say hi before we start coding hey everybody okay cowboy says there might be audio interference okay let me know okay Evo actually has a graph QL API prototype so yeah definitely I'd love to have that link so send it I mean you can't really post links in the live chat but you can direct message me on Twitter or whatever social media you're on that you want to message me on that's cool let's see alright let's get started a couple of like a couple of things Oh for the last two streams I've forgot to thank some people who have submitted pool requests this past week so I'm just gonna do it right now so I don't forget because I'm pretty sure I will forget again if I try to put it off so I'm pretty sure I have those up here yeah okay cool so I'm not gonna spend a lot of time going over those you definitely can check them out yourself and this isn't a private repo so this is the Resource Center project too so we have okay we had to for some reason I thought we had more pool requests but we have to let me refresh just to be sure I'm not missing one all right there we go we have three that's what I thought okay so Matt did some fix some warnings we'll just click into it briefly so obviously you can read this if you want and check out what's changed but I had when I had implemented Google Analytics I had a lot of repetitive the Annette function for Google Analytics was just I put it how to put in every component so the way I did it was not the best way in terms of you know trying not to repeat myself a lot so Matt clean that up which is awesome so also found a spot where I had basically had two functions doing the exact same thing right next to each other didn't even realize it so he cleaned that up for me as well and then Sebastian had to pull requests so there was some stuff going on with our forms and just some warnings and things that got cleaned up and also he noted some some UI things in Firefox which I didn't I I did very minimal testing in Firefox I I can't even remember how much testing I didn't Firefox it's it's entirely possible that I just didn't test it at all so anyway they found some stuff in Firefox and fix that so really nice little bit of CSS cleanup and finally this is some really cool stuff so on Android added in some information basically to to let Android know how to display it how to display the app so I wonder it's going to be hard to see this so I'm gonna try it out anyway let me see the screen so up in actually let me let me make this but you trying to make this bigger for a minute you see if I can there we go alright so right here we have our icon for the Resource Center and I'm gonna throw this into airplane mode so it's an airplane mode right now I don't know if you can see the airplane but I'm gonna click it we get this screen I have the glares kind of rough on here so I don't know if you'll be able to see it let me go to a darker screen maybe to cut the glare but anyway big lit yeah there's really bad but this is the resource center it works like right now I clicked on the logos page and we're completely offline which is awesome so I don't know that anybody here at the University will ever even try that out because I mean we have any people at the university that still want us to like mail them things like on paper and have no interest in using the Internet at all or computers so I don't know how many people who appreciate that but I definitely appreciate it also if you go they're in Chrome the bar at the top now is the Franciscan green color so anyway that was just that was really cool I am I checked that I was showing people I showed I should the guy that works in the office next to me and I went home and showed my wife and because I was I was super excited about it so all right so anyway thank you Matt thanks Sebastian those were awesome pool requests I appreciate that and now now we're gonna get started with with some graph QL so let me go let's see we're gonna start with this I'm gonna go over to where we have our code for this project but we're probably not gonna put that much yeah we're probably you're not gonna do that much with with this code today what we're gonna be doing is you know trying to set up our WordPress to work with graph QL let's let me get my Pomodoro clock going so I'm gonna do 25 minutes of coding and then after that I'll take a five-minute break I'll go over the questions in the live chat then we'll do another 25-minute session and we'll do at least two 25-minute sessions after that we'll see how it's going maybe we do some more coding or maybe we'll just do a question and an answer but at least probably get in about an hour and our code okay all right so what I'm from what I've looked up so far and if anybody has experience with this put it in the live chat I'll try to keep an eye on the live chat to see if anybody's putting in some advice for that but from what I've seen so far a few other people have worked on this so we may not have to do this from scratch it's entirely possible that we could just pull something from github that'll get us started so oops I didn't even start my time all right so I'm gonna pull over some of the projects on github that I've been looking at I'll pull it over under this screen just so you all can see what I'm thinking about using so these are our two really different approaches and they're not let's see so this one is act actually actively maintained this one not so much but I know that it's probably hard to see everything the way I have these windows up but I'll just kind of briefly describe what what's going on with these this is more like configuring like an entire separate server to to run graph QL and then it's going to pull data directly from the my sequel database using I believe they're using sequel eyes to help with that okay so this one seems like it's a little bit more involved this project seems to be more like a wordpress plugin I haven't had time to read through all of it but that's the impression that I got from a little bit that I did read so it seems like of the two the one on the left here this what's it called WP graph QL would probably be the one that's that's a bit more simple to work with so I don't know let's let me give everyone just a minute or so I want to know what you all think if any of you have used either of these before if you have any any advice for me or if there's something else out there that I'm not aware of that I should check out so we'll give it a minute depending on on what said in the live chat I may go with something else but otherwise I think I'll probably try this one out first because it's more up to date and it seems seems like it'll be the quicker of the two so while I'm waiting for the delay and the responses I'm just going to explain briefly why I want to go with graph QL and WordPress so for this project in particular we already have a lot of data in WordPress that I want to bring in so that's why I'm doing WordPress I don't want to migrate any of that data the people that are in charge of putting that data in are already trained on how to do it in WordPress so I don't want to mess up their workflow having said that we've worked with the WordPress API in the past and it definitely works it works well but graph QL because it will enable us to in one API call hit all the end points that we need get all the data that we need and only the data that we need I think it would be a lot more efficient to do it that way so that's why I want to switch to graph QL the other reason is as I mentioned you know right away in the stream I really want to learn how to work with it on how to use it I've talked before about all these smaller projects contributing to the larger project which is redesigning the main university website and one of the things that I do would like to use for that website is graph QL because I don't want to have to have a lot of different API calls happening for every single page so this is gonna you know work up to that so do we absolutely need graph queue up for this project no we don't but if I don't have it then this project would basically be pretty much the same as what we had done for for project one so I'd hate to just have a repeat of that we would have a few different things but I think this would be better you know be better for me for learning and then you know better for you all I think just to have some exposure to graph QL if you don't already all right so enough time has gone by that I'm the delay is is dealt with now so I'm gonna check the live chat and then we'll be started okay okay so Arielle says it seems like the one on the left is mostly PHP and the one on the right is JavaScript yeah that was the impression that I got I'm I'm a little bit nervous about that so this one is mostly PHP and for this we're getting yeah JavaScript I'm a little nervous about that because I'm definitely better at JavaScript that I am with with PHP so here's what we'll do I'm gonna scroll through just the basic setup options and if a lot of it is confusing to me then we'll just move on and maybe go with this because well I think this one will be faster to set up if it's all in PHP and things that I don't understand it probably and it won't be faster just because of my inexperience with it all right so let's let's scroll a bit let's see was this did you see any setup instructions there am I missing something because I didn't I didn't see anything what okay that was it download and install like any WordPress plug-in off alright well that's that's super easy okay well that's worth the try if we just have to install it like any WordPress plug-in then I'm I'm fine with that that's that's easy so I think it's worth a shot to just install this plug-in and see what it's like if it doesn't work for what we're trying to do we can go with something else but otherwise this is probably going to save a lot of time and I'm just going to move this over the other stream but I want to keep this ready in case that this other one doesn't work out okay so we're I'm I'm guessing the entire thing then it's gets installed all right I will need a zip file for this so let's download the zip and then let's log in to log into the same the same WordPress install that we're using for the content right now that we worked with yesterday and that is just my might say we're gonna use Jessie waggle calm and I'm not really actively updating this site anymore or using it for anything so if this messes it up I'm I'm not really worried about it that'll just be incentive for me to actually update it okay I guess I'll I'll pull this over so you all can see if you've never updated let's make it bigger updated a plugin so there are different ways you can add a plug-in to WordPress so one of the ways is through the admin panel here you could also just access the files directly and then just drop your file into the plugins folder so for right now I think this will be the quickest way to do it where my plugins we're going to add a new plug-in and yeah it's update all right now I don't want update this right now in case it messes up no weird all right so we're gonna upload a plugin so we needed an zip format so that's why we I did the zip earlier and where we get downloads okay see how this goes cool let's activate the plugin and words to that cool so we have our graph QL API set up I was looking to see if I have any extra options here it doesn't look like it so so I guess there's no configuration screen or anything okay now let's see about getting some data just to make sure it's working I don't want to have to download a graph QL desktop thing right now there's got to be a website I can use does anybody know of a website I can go to quickly to test out graph QL okay let's see okay which is gonna be your side day long / graphic you though okay okay and I'm still trying to find a way to test this here we go I think I found a browser client okay sorry I wasn't checking out the the live chat I'm gonna test out some of the the things you all mentioned the la chat okay all right so I'm not I'm not getting anything to work right now I guess I could just go ahead and do this because uh oh okay I can just install this with homebrew so let's do that cuz that's gonna be easy or the Chrome extension yeah the Chrome extension might be easier all right set em points let's see if it works uh-uh I don't think it did alright so I don't think we're getting what we're supposed to be getting so yeah the endpoint is supposed to be such graphic oh all right yeah so we so we have dogs all right let's check out the ducks and okay all right we need to flush the permalinks would have been nice if they put that on the on the github repo read me all right it's the settings performance those fees paid okay all right so let's do that settings permalinks all right I think if I just flip it flip the settings that should work all right let's shut again yep well it's we had a different error alright let's see I need and see all right so here's what I have now so I need to put in a query basically which next step I guess is figure out how to do a query with graph QL so let's see I don't want to watch I don't want to watch a video there's no text that goes along with it all right okay so we can we can't add things with this that's good Lefty's PHP okay okay I see Kevin says the fonts pretty small so I'll I'll make sure a zoom in on things we're doing it all right this looks nice real basics it's what query okay all right a few more minutes then we'll do the question/answer let's see I'm not sure what this data is is looking is gonna look like so maybe what was this one again let's just copy something see what happens I guess we don't need it we'll paste that in see what happens now they let's check the post I need I really need to know what the with date I'm dealing with I guess I will need to check this video today once you graduate you can point it at your size calculate and planning for us documentation to started I'm just gonna watch enough of this to get I don't know YouTube videos but I said earlier YouTube videos aren't playing alright but actually this this should be enough create those alright let's just create those all right cool let's try that see if this oops see if this works must have a sub selection all right so chef selection those edges all right let me move this over so I can type it out all right so we're gonna try to get some posts here not data date all right awesome okay so here's what we put in here basically we're asking for posts as far as edges a node are concerned I have no idea what that's talking about right now it's just in the demo video that's what they typed in but then down here I've just specified which which items I wanted so which pieces of data about the posts I wanted so we should just get back these ones so let's see we did get back all right so within posts edges I guess we're we're getting all these nodes right so we did we just got ID date title and slug great and then to compare we had a legacy side by side what we get from the rest API and then we get from graph QL so let me find you find where we had this pretty sure I had it on this screen yep here it is okay so let me try to do my best to get these side-by-side and my my timer ran out so we're gonna take our five-minute break as soon as we just seen this side by side so this is the same data for the most part between graph QL on the left and the rest API on the right you can see by default the rest API gives us everything right so each one of these posts has all of this data that was just one post over here the same post is this right so by default they're basically there is no default it's whatever we whatever we ask for so we've been able to get exactly what we want based on a query like this so you can see a lot less data now but previous project we have found ways to cut down on this data but whenever we try to limit our API calls then we couldn't filter out our data like we wanted so there wasn't a good way to both use only one API call per page and limit the data we're getting for each API call so that was our that was the dilemma that we faced in project 2 and we ended up going with using one API call even though we were pulling in more data than we needed to so with graph QL we shouldn't have to make that decision we should be able to do both use one API call and at the same time get only the data that we need all right so let me start my five minutes himer we're going to do question answers for five minutes and then we'll go back to another 25 minutes of coding at this point it's really I mean we have a graph QL API up and running so we're going to move back to our react project and try to pull that data in and we want to get that into our Redux store so let me find the live chats and I'm gonna scroll up and let's see so I'm getting distracted there's a lot of messages coming over my slack at work I don't think any of them are super important for me I just want a glance just to make sure okay I'm like I'm the only person that really has access and knows about some of our sites that are kind of important so that's why I still I glanced at that because if an emergency happened I I would probably be the only person that could fix it all so here's a fun fact I learned on slack orb right before the stream started that the person who works in the office right next to me used to hang out with a member of the wu-tang clan so he's now the coolest person I know I don't know if we have any wu-tang fans in here but I thought that was kind of cool okay all right I'm trying to find the questions there's a it's quite a bit in the live chat today okay so we had a question about did you fix the slack link I can't find in the description all right I'm glad you brought that up because I completely forgot about it I remove the slack length from the description because basically it didn't work so from I have no idea where that original link came from it says that that links expired and we need to get a new link but I don't know how to get that link from slack so if anybody is more familiar with slack or whoever got that original link if you're watching right now let me know how I can get another link if that's even possible the other alternative I guess would be manually sending out invites so I would just I guess I could say anybody that wants in slack channel let me know and then I can just send you an invite based on your email address so you just have to give me your email address through whatever you know channel you want to give that to me and I can invite you I mean that method will work for sure but it would definitely be more convenient for everyone if if we could get the link working so so that's where the the slack link situation is at right now okay also I didn't start our our serve our end grukk server I'm gonna do that right now so since we're gonna be working with this with the react app now you all can go in there let me post it post the URL okay so that's personal live chat now so if you want to go there we haven't done anything with it yet but we will be working with it soon so you want to go there you can check it out not much there at this point okay it looks like some of you were talking about the progressive web app to the last project that I demoed at the beginning on my phone there the Resource Center yeah so create react app comes with a serviceworker and and that's basically what allows it to operate like that a progressive web app so so you would want of your app to have some functionality even offline and then as you get a better connection it progressively has more capabilities so for instance obviously offline you can't submit the form but if you're offline you could still read all the content so you have this core functionality in your app that always works in your web page that will work no matter what so that's the idea of a progressive web app although I was thinking I'm probably not gonna do it right now but it's possible that we could get the form data and save the form data until we did have an internet connection and then send it at that point so I've seen similar things done before like I said I don't I don't know that anybody is going to be using it like that and using it offline so I don't know that it's it's a good use of my time here at work but it would be kind of a cool thing to do on the side just to get it working so we would we would need to store that data may be in local storage I don't know we somehow we'd store that data and then just try to detect whenever we got a network connection and and then send it at that point okay Rowland said try Visor you can mirror your phone on your desktop I actually do a visor installed I just I act I hadn't even planned on showing that so I didn't have it have it ready but I'll remember next time if I'm planning on doing something with on my phone I'll have a better set up Marco says so create react app automatically makes the basic progressive web app yeah pretty much yeah so you so by default create react app is his progressive web app depending on how you build it I'm sure you can make it better or worse at being a progressive web app but the Resource Center is actually not bad like I said the forms obviously don't work it seems like some of the the images and everything we're still on there so that that was pretty cool that that worked well excuse me yawning so yeah some of the images worked I think it just depended on what actually got loaded before I put it on airplane mode so I was able to load the logos but I didn't get some of the images from the other pages okay all right so my five minutes is up I don't know how long it's been up for I just checked so I'm still not getting the beeping in my headphones when that's up so I don't I don't know what the problem is I probably just need to restart my my browser it's been quite a while since I've done that so let me mark down where I left off at and the latch okay all right so another 25-minute session and then after that we'll we'll see if we're gonna code more and I forgot that I had covered this up again so let me move that up there we go I had just assumed you all could see the timer keep forgetting that my my face is in that corner okay let's move this out of the way well I guess we have we have this here so we'll we'll keep this here now here's what we need to do so we need some way to bring in this graph QL data so from what I understand a lot of people use something called Apollo to make it easier to work with data let me know if if Apollo is suitable for this if you know of something better otherwise I'm going to try to install Apollo now and and get that working okay so harsh it says react Apollo and relay so do I use relay with Apollo or is it I could use either relay or Apollo I have reacts Apollo up on github right now hmm okay so it's either relay or Apollo the Helio thinks Apollo is the easiest to start working with okay all right cool let's start with Apollo is anybody at experience using Apollo with redux it should I even be worried about that or should I use something else okay so Helio does have experience with using Apollo and redux okay cool all right so let's install Apollo let me find my my terminal where am I there we go okay so I just had to get up they jump and what I do it alright so we're gonna do yarn add Apollo or reactive part Apollo sorry should I'd like to I'm interested in seeing what you all think do you like it better when we do streams like this where I'm completely clueless and we work our way through it together or do you like it better when I have it a better idea of what I'm doing and it's more like me getting everything done and just kind of narrating what I'm doing it doesn't have to be either/or we can always have a mix of the different types of of streams but if it's like overwhelming that you all like or don't like one or the other then I'll keep that in mind okay cool so we have this and let's let's see I'll bring this over here so this is what I'm looking at right now so it looks like we need to wrap our root component in this Apollo okay all right great let's see pretty direct component this component works almost the same as provider community react reacts affects you that's a store property new Apollo provider and also service provider for react redux okay great so it looks like we can replace our provider component with Apollo provider and it should work fine with with what we have set with Redux anyway cool so I'm going to move this over to the other screen and let's let's hook this up just go into our app and well first things first let's import what we need to import is where we get you if it's import follow Apolo client back to Paula and then if you want to follow along with these instructions I'm just on the react Apolo github repository okay alright so we've made a new Apollo client and now let's give it some instructions here network interface okay so here's what we'll put in the the route to our graph QL code you know our demo that we just set up okay so obviously if you're doing this on your project you you'd want to put in whatever whatever yours is or if I mean if you want to use mine as an example just to get started I don't I don't know the care you can do that as well okay great now let's hook this in to our provider so our provider is now going to be our Apollo provider and we need to add in client that we just made up there I entered passing the client and then since we're gonna pass in store as well based on the documentation it seems like that that will still work with what we're trying to do with redux so let me save that and all right well first thing let's just make sure we don't have any errors when we do have errors polar provider is not defined did we forget to do this I guess we probably forgot to import it yep we did forget to import it create a network interface is not to find out it I hope I forgot to import that too I don't know what I was thinking it's it's right there in the in the documentation I just I just didn't see it okay cool so obviously we're not seeing any difference but we're not getting any air is so now we can move on ahead to the next step okay all right so let me bring this back over for just for a minute so we can at this point pull in or it's like we can connect graph QL into our components but I don't think that's what we want to do I'm thinking that instead hmm sorry instead we would want the data to go into our store and then to go into our components from the store so I guess that's that's what we need to figure out how to do so let me bring up the the complete reference I'm just scanning really quickly just to see if this okay so here's everything let's see if they have anything specifically on Redux integrating with Redux awesome okay so we've already connected the store which yep connect the store and area this is what what we need this is really small so let me zoom in okay so so we're gonna keep we're gonna use connects though let's see how they how they say to do this okay I guess we could try putting some of this in our in our component now I'm not a hundred percent sure this is what I was thinking that we would do but let's at least give it a shot just to confirm that we've hooked everything up properly see if we can get some data to display so I wish I could see what the actions were production graph QL all right this is not using Apollo let me close this out I think I want another example so let's go that's for you all right actually they it looks like they were placing Redux with Apollo that's not what we want to do yeah I don't want to do that mmm this might not be up-to-date okay this is actually more it looks like it's it's more like what I want to do okay I wasn't super helpful but better idea okay let me check the time all right eight minutes let's see if we can get something to display in eight minutes all right let me move this off the side so I can reference it let's go back here to our home component and let's bring in I'm gonna do some copy and pasting just to save time instead of typing it out bring in graph QL and hmm alright I'm a little bit I'm not confident that I can get something to display in probably what is it six minutes now okay so let's at least just think this out maybe personal comments and so we can start from the same point tomorrow I I know that were the example that I saw in the documentation had an important graph QL here but realistically I was thinking more along the lines of I guess having graph QL in here really I'm sorry not in where am I looking more like in something like this so that when we dispatch an action then instead of making the API call to the REST API it would grab the data from from the graph QL API which would then get stored in the redux store now it seems like that's not really how Apollo works if that's the case then I think I need to do some tutorials on Apollo just to get an idea of how that works and see and see how we should be using it if for anybody that has worked with Apollo if I'm mistaking if I'm mistaken here please let me know but I was I was kind of assuming that basically Apollo would just let me do the same thing that I'm doing here with fetch but for graph QL I guess what I need to do then is look at query includes at the very least we can just test it okay cool so harsh it has linked something that will hopefully be useful let's see shoes 3:48 okay let's bring this over then and this will be the last thing that we do we actually got farther than I thought that we would I thought it was gonna be a lot harder to get graph QL working with WordPress but that was that was a nice surprise that it was that easy okay okay yeah it's definitely what we're trying to do okay yeah that makes sense it seems like basically one I'm getting two important things out of this one is that the data even if I grab the data when a component loads instead of doing it like we're we're doing a fetch right now the data will still be available in redux under Apollo data in the Redux store but the second thing is since we're going to have a search bar I want to have a live search this is also going to come into play and that how how would we do a how would we fire off a an API call based on a user action so this probably have to do something like this as well okay all right thanks thanks for that link Harshit that does clear things up so probably tomorrow we'll be working on that more okay all right so I think we'll probably just be at will be we'll go into the question and answer now I was thinking about doing another Pomodoro session but at this point I think I just I wanted to read up a little bit more on things I don't think it would be a great stream because I'd be doing a lot of reading and that's not really nice to watch so if you can stick around and for the question answer session and help answer questions that would be awesome otherwise thank you so much for watching and I'll be back tomorrow I might stream a little bit earlier than normal tomorrow so I'll let you all know on on Twitter and I'll schedule the streams you get a notification if you subscribe to the free code camp channel about what time on stream let's see let me go I'm going to go back to the live shot here and try to answer as many questions as I can okay here's some questions here blank says I'm trying to send data from a form to Google sheets and I found an article and medium on how to do that but I don't know how to set up the last script any help would be great yeah that's actually have we have we done that on a stream those are the first frame you know we didn't do that yet okay so I've done that in previous projects but it's before I started streaming so what are you are you using react or just regular Java scripts it doesn't really matter that much it's pretty much the same either way in terms of making the call either with Ajax or with fetch or whatever you're using so Blake if you have the code for that on github or if you can share it somehow share it with me I'll take a look at it and maybe I can also send you how I've done it before maybe that will help and see all right not really a lot of questions a lot of discussions I keep scrolling trying to find a question okay let me would we put that this is it oh here was okay there's no schema all right so I was checking out Evo says if we go to Docs it should say it should talk about what feels lower but it seems like there's there's no nothing available there so anyway I'll have to keep that in mind maybe there's something I need to set up to populate this Rowen said try so i mentioned earlier i couldn't play youtube videos on my browser right now rowan says try clearing the cache just for youtube I tried it it did not work so I think I'll actually need to turn off my browser and turn it back hunt it just sounds silly to say that like that's it's the answers just just restarted it'll work but it'll probably work this did happen before and that was that was the fix rishabh says can we expect something about subscriptions in graph QL I don't know I don't know yet I'm late I said I'm still I'm very very new in learning graph QL like as I'm streaming so I don't know what we can expect with graph QL but any cool stuff that would be helpful for this project I'm definitely open to learning and using on this project oh cool John Hansen says I'd wondered how this would work thanks Jessi for your work through to get this better than any how-to video cool thanks thank you yeah that that's cool I'm glad you said that because sometimes I wonder how helpful these videos are for actually learning things so I appreciate that vacation says by the way I'm a fan a fan not a fan I'm not exactly sure what you're trying to say but I'll just take it as you're a fan of the stream and thank you thanks for watching Kevin says the four benefits of social media marketing number three will blow your mind I don't even remember what that is now I want to know brush my safe I'll actually my wafer at this one and see positive feedback cool yeah I had big plans for my website but then I got clients and I didn't have time and so I just never updated it again so he only ended up with two blog posts and I only wrote one of the two okay so good Nash says I know this is not a place for asking about something like this but wanted to know something about API do you know any way to send commands from an android app with using java to raspberry pi using Python through an API I don't know I mean certainly I don't think is this is the wrong place to ask those questions because we get a lot of different people with different skill sets that are in the live chat so I think any you know any questions fair game because someone might be watching that that is work with that I personally have never worked with with that type of thing so I'm not sure yeah I mean this is definitely avoiding the question and I don't think this will work in your situation but if it was me and I was doing it I would just build the Android app and react native and then I would use JavaScript for the Raspberry Pi we use node and then that way I would know what I was doing a little bit more because he would all be JavaScript but yeah I really don't know so I'm sorry about that so I couldn't help you but but don't feel bad about asking questions like that you know feel free to ask anything see vacation says can't we use rails you can certainly use rails I'm not going to use rails for this project I probably won't be using rails for any of the projects that I'm doing for work but I'm sure a lot of what I'm doing could be integrated with something that that you're making with rails oh cool so REO says guys I found something amazing word expressed aiyo this project aims to replace PHP with JavaScript and WordPress development by using nodejs and Express to consume data from a wordpress database using graph QL it uses Apollo to fetch the data that's really cool I mean that's just a little what we were trying to do that sounds that sounds awesome it fetched all des fêtes the data and deliver it into react components cool okay so I had asked earlier whether or not you all preferred the type of stream like either like we had today where I go into the stream just really clueless about how to do a thing and then we just work through it and learn together and try to see what we can do or the type of stream where I pretty much know what I'm doing I've already done it before and so I just kind of go through and explain what I'm doing but there's not as much guesswork and learning as we go and it looks like some of you definitely like to see me work through things and in troubleshoot and debug so that's awesome it seems like look it seems like harsh just said harsh it said when I do have an idea that I know I get through it get more done yeah that's true so I think probably what I'll end up doing is still having having a mix Kevin says I like both let's see Zubair says this is super fine your streams are better your mistakes make us perfect cool that was that was the whole point right if I make the mistake and you see me do it then you won't have to make the mistake and learn from it because you've already seen me do it uh-huh so all right cool so it seems like you all would like to mix so I'll try to keep in mind and have a mix I made it a lot of what I do on the stream just depends on what I have to do for work anyway so I only have just a certain like range of options to choose from each day to do a stream line but I'll try to keep a nice mix and and do both so we'll be kind of adventurous sometimes in the streams and try new things like today and then other times there's gonna I mean you all know when you're building something there's some times when you just have to do a thing that you've done a hundred times before but it has to be done so we'll still have some things like that for every stream you know like setting up for every project I mean setting up the server right you gotta set up a server for every so that's that's you know not really a big thing setting up your dev environment just like basic CSS layout you know we'll do that as well Harshit says enjoying the live reloading and and rock cool I'm glad I'm glad you enjoy it didn't really do that much with it but it'll be really cool once we start putting in UI elements and being able to instantly see that feedback and inspect it and dev tools see what's happening with the store I think it would be really really cool and just I know I said this before but it was a long time ago I definitely want to give a shout out to the people at n Grove I can't remember the guys name but the guy who I guess made and rock he's he's letting us use it unlimited for free so normally to be able to have this many users on and rock at once it would it would cost money but we're able to do it for free so he's doing that for free code camp for these streams so I really appreciate that vacation s what are you making Harshit did say a bulletin for the university yes so basically it's just gonna pull in posts from WordPress and then display those posts and it's gonna have like infinite scroll for the posts and you can you'll be able to sort the post by date caddy a filter by category so you'll be able to submit your own posts now they won't automatically be there they'll go to somebody to review first before they get put in to the bulletin so that's I mean that's pretty much it just display images YouTube embeds and text and then allow users to submit a form so it's not gonna be really complicated now I will tell you this if we have time I would love to maybe add in some extra features so users have to sign in so we you know they'll have an account right so based on that account we could save user preferences so we could say preferences for how they like the UI to look we have several different options for the UI so we could save their preferences we could save preferences for I don't know what categories they want to see at the top of the page maybe give them the ability to star certain announcements or bookmark them so that they can see things it would be may be cool to have desktop notifications when new things are available so there's a lot of extra stuff that I've thought about doing and I haven't done yet so this could be a lot more complex it just kind of depends on what other projects I have going on and how you know what the deadlines are like you know if there's anything really high priority I'll have to do that instead so I can't guarantee that we'll do stuff like that but I would really like to do some stuff like that if possible see Brett says I learned graph QL while giving my daughter a bath and getting her fed amazing it is pretty amazing cool actually I forgot today is my dog my youngest daughter's birthday she turned one today so I'm really excited about that she's my youngest and she's so cute and she's also my last because my wife can't have kids anymore so I just spoiler because it's my last little baby so I can't believe she's already one but yeah actually I want to make sure I get out of here somewhat soon so that I can go home and hang out with her maxime a says who used graph QL and meteor has anybody use graph QL a meteor I'm actually I'm really interested in meteor I've seen some cool demos of things people have done with it and I know it's been around for a while is it still relevant is it worth it to learn it or is there something newer that people are moving to if it's still relevant then I definitely interested in learning how to use it and doing a project with it okay cool so Harshit says I can I can get rid of the actions that I'm using now in this app so like right now we're dispatching actions to get our data I can get rid of that and instead use graph QL queries to basically accomplish the same thing that's cool that should simplify our code quite a bit Bret said so would we eliminate Redux actually that's a good question should we eliminate Redux or do we still want to use them together I mean I definitely still would love to have data in the store to be available but yeah I don't know if anybody has any opinions on that please let me know see John Henson says while I'd love to ask a question about adding event listeners when components are there and then not then there again think I've got it but whoa oh yeah cool let let me know how that goes and if you need help with that I get yes so if you're using it in reacts with event listeners I mean normally when I have like things that I would normally use jQuery for within event listeners with when I'm doing it with react I just make sure the state changes when an action happens and then the components will you know we rendered everything will be taken care of so you know you like you could just put like an on-click attribute onto the component or the button or you know whatever has to happen or I don't know what they I don't remember what they all or but for a lot of the events that you would normally use like that you would want to do usually you can just add it as an attribute and then change the state based on when that happened okay Harshit says is Redux compulsory for this project actually no not really well to be honest with you I didn't expect to use graph QL until today I decided today we're gonna use it so at first I thought we were just going to do Redux with the WordPress REST API which is what we were doing yesterday so I like I'm open to reevaluating whether or not we should even use Redux on this project now that we're using graph QL so maybe I'll have to do some research on that and think about that maybe we don't need it I mean there's definitely some other pieces of data parts of the state that we won't make API calls to get but it would still be nice if it was available in the store so we'll see we'll see how that goes but if we don't need to keep it we can simplify things then I guess you know maybe it's not there's no not really good reason to use Redux okay so Blake I just saw your your link so I'm putting that in my address bar on my other screen right now okay so off to take a look at that maybe after the stream maybe tomorrow because I do want to leave shortly after the stream ends so but I'll leave that up on my screen so I don't forget coder Jim says I learned a lot for your videos the problem is only that I don't have enough time to keep up to date with you yeah yeah I sometimes I wonder about that too like I just put out a lot of content since we're streaming I mean we do at least an hour every day usually closer to two hours you know five days a week not always five days a week but that's that's what I shoot for I know that's a lot so I don't know it just takes a lot of my idea is that maybe I would categorize the content better have better descriptions and you know like timestamps of when I go over certain topics to help you all to be able to sift through the material and skip what you don't need it's just there's so much of it I just don't have time to do all that yet but I mean I definitely understand it's a lot to work through so for those of you who are doing it and keeping up with it that's awesome um but but anyway thanks for watching you know even if you can't watch everything I appreciate even you know whatever you all can watch that's I mean that's awesome I should says going to sleep now it's 1:00 a.m. all right good night thanks for watching okay thanks everyone for saying happy birthday oh my daughter's name is Cordelia so we named her Cordelia Elizabeth and in yes she's one today okay cool so yeah so Blake says every I see all right cool Blake I will check that out like I said either today or tomorrow and figure out how to get that google that link to the Google sheet working okay Brett says react definitely overshadowed media okay all right Harshit says we'll make a pool with auth system you need regular email and password as the method actually maybe did I miss something okay so maybe I missed it seems like all harsh it's probably asleep right now so if you're still awake and you're watching you can hear this I guess that's cool with the pool request I'm not exactly sure what what is what you mean about the regular email and password so anyway send me a message on Twitter or something let me know oh okay in my plant yeah so for the login right now it's a it's a password this login system so a user goes to the bulletin and they're prompted to put their email in and it has to be a email that ends with at Franciscan edu if it is that kind of email then the system right now it's using auth0 which handles you know keeping track all the users and everything but they get out their email a link they click the link it logs them in and it stores their login credentials in local storage and they stay logged in on that browser for about a year unless they clear their local storage so that's the current system so if we go with a you know a new system I still would like to keep it so that users with the Franciscan email address could still do the password this login thing I think that's best that way users don't have to worry about passwords I don't have to worry about passwords then at some point down the road I would love to tie it into our single sign-on system here at the University which isn't they haven't launched it yet so that's why I'm not trying to tie it in right away because I it's not ready but I'll need some some information some more information about how to tie that in I'm not even sure how they're they're implementing it it's a totally different Department is handling it so so we'll see how that goes but that's basically what I would like is as a password list system sending email links all right so I've gotten to the bottom of the live chat hopefully I didn't miss anyone's questions I will be back tomorrow like I said tomorrow maybe around like 1:30 1 or 1:30 p.m. Eastern Time it's a little bit earlier than normal but thank you all for watching and for helping me get through kind of a challenging stream because it was all new you know new techniques new technologies that I haven't used before so anyway thanks again for watching and for contributing in the live chat I will be back someone else on my Twitter was it's in the description for the video it's it's at Jesse or Weibull but you know it's in the description too she's wanted to link ok so anyway yeah thanks and I'll be back tomorrow and until then have a great day