Full Featured Discord.py Bot Dashboard - Part 4: Finding Mutual Guilds

hello there um i'm just gonna check if my audio is working properly yes it is working properly so um hello everyone welcome back to another stream i know this week has been pretty crazy so many streams as well as videos i actually did like three videos yesterday so it's like a video in the morning i recorded and edited and then two live streams in the evening so it was yeah pretty damn crazy but um yeah welcome back in this stream i am going to be showing you how you are able to you know implement a way to find the mutual guilds between the bot and the uh user so what i want to do here is like so in the in the live stream we have implemented this cool way to find the what status but now what we want to do is we want to make a system on the api side where we are able to get the mutual guilds so that when someone goes to the guilds page on the dashboard they can see what gills they can access so in here i haven't actually made any changes here what i want to do is i want to actually create a new endpoint where you are able to um get the thing but before i do that i actually want to make uh wait let's actually make a route first so this is this will be flash guilds and this would be async def mutual kills request and what i want to do in this case is i want to check if they have the token or not so let us actually make a helper function here in the back end so let's actually make a utils pi and here i want to actually do an async def uh return token or raise so basically what this function will do is it will check if the request has a token if it does have a token it will return it but if it doesn't have that token it's going to raise an error so i want to copy the exceptions here and i want this to have an invalid usage or maybe unauthorized let's do an authorized here so we can take the request and we can just do this same thing here instead of just using invalid request uh we can just do uh unauthorized and then we can just say invalid access token we can erase this here and if there is a token we're just going to return the token here so we can actually do this here so we can just pass in the request and i can just do uh why do we have this here from utils import return token or raise so yeah we can do that and now we can just have the token here as well before we do that let me actually give you one second please okay sorry about that so we have this here and now what i want to do is i want to actually fetch the current user skills let us actually do copy this thing and instead of doing fetch my user i want to do fetch my guilds skills so client don't fetch my guilds you have this and one thing i actually want to do here is i want to go to postman for making the api requests and i hope you guys know how to use postman it's just for you know testing your own apis and stuff i'm going to create this here how do you okay yeah and let's actually make a get request to this api slash guilds and in the headers i don't i won't put any access token or stuff or maybe let's actually put an invalid access token or something like that yes let's actually put something like this so we can just do access token and let's just put something else here send and you see what happens here it sends you unauthorized html now we don't want html here instead we actually want to return json when there's an error and it's really simple to do that with uh sanic so sanic return json on exception you can actually take a look at this so you can go to the exceptions page here and there are actually like you know some full-back handlers so you have text html but we want json so you can just copy this and you can paste it here now if we actually make any uh if we have any errors here instead of sending that uh html it's just gonna send you some json so that is actually pretty awesome if you remove this same thing this time it's just going to say no access token and stuff it says away oh yeah i forgot i need to await this that is why it was giving you errors await since that is an async function so we have that and now if we run this it says invalid access token or something like if that go to utils yes it says invalid access token it's going to be the same thing here so what i want to do is i want to get the guilds and stuff putting user here let's do a user guilt so this will return you a hikari own gills object so you can do own guild and if you actually take a look at this if you take a look at the documentation you can actually go to on guild and what this will have is this will have your permissions now one thing all both dashboards do is if you want to access that dashboard you need to have the uh manage guild permission or the manage server permission so if we take a look at the discord api reference if we take a look at this permissions you can see that you can actually use this bit operators to check for those permissions the permissions just are a way to limit and grant such an abilities to users we can run this or we can just you know run these uh we have this uh thing here this one we can just run this sorry not running we just use this and bit shift but instead of doing that what i want to do is hikari has this permissions thing where if you take a look at this permissions if you take a look at this the permission api you see you have um multiple permissions and if you want some permission to you know if you want to check if you have some permission you can just use your permissions and then use the and operator and then just use the uh which permission you want to check you can just use that and then if it returns true that means you have that permission if it doesn't then you don't have that permission we can use something like this so my permissions will return you a permission object now we can just run this uh bit shift on this so you can go here in the guilds what i want to do is i want to do a valid kills and i want to actually filter this so filter i want to filter with a function instead of doing a list operator i'm going to do user guilds and i want to run this filter function uh filter let me just do check filter guilds filter guilds we can just run filter goals or we can just do filter gills as we just want this right so we can do a user guilds and we can just have this filter guilds thing in a uh you know what let's just make it async or else it's going to block the i o so what you can do is we can just import this from here as well and if we go to utils it says cannot import that's fine async def and then we can just have a kills and that's that will be a let's import typing first import typing and this will be typing.list and let's import hikari as well ikari dot own guild so we're gonna have this and what i want to do is i want to return filter on to return this filter object and then i can do the function will be lambda x and i want to return true if let's actually do something like guild guilds yes if x dot my permissions you know what let's just actually return false and then you can take a look at that so it's going to return you that permission object here we can actually go here and run this and advantage guild and then we can do this so ikari dot permissions so yeah basically what this is doing is it's running filter and it's basically giving you all of the kills if you have information so now we can just actually return just this because this bishop operator should return you this year how about we actually convert this to a list and see what we have so we can just do print list valid guilds and to return json and yeah we can just do this so basically we're just returning to json here go to postman run this request and it says invalid access token so yeah one thing we can do is we can actually you know after logging in i'm just going to use my access token that i have here so i can go to application local storage access token yeah i'm going to copy this doesn't matter to be honest i am going to put this in here so that's a header and postman and this request and now it will take a bit of time because this is making a request to the discord api but if you're hosting something it shouldn't make the request so these are basically the guilds where uh i have permissions i'm either the owner of the guild or i have the manage server permission at least if you have admin the same thing um so yeah basically i have all this like these are the guilds where i have the permissions now what i want to do here is i want to map all the skills instead of you know making this away yeah it's fine it's fine so basically what i want to do is i want to convert all this to guild ids so we can just do guild ids and i want a map function and what this will do is it's going to take a lambda x it's going to return a stringified version of the id and it's going to just take valid guilds okay so it's going to return that id and the reason i'm converting it to string is if you take a look at the twitter twitter snowflake so twitter snowflake is the uh id convention that discord uses so you can just have twitter ids and it's always best to convert them to a string so rd values are returned in two formats both integers and strings welcome macbook paradox to the stream good morning to you as well and the reason we are always converting them to strings because if you take a look at this in a browser javascript console the result will be this instead of being this the 64 bit integer loses accuracy as a result of translation or munging and that is the reason we are converting it to string instead of keeping this an integer so basically what i'm doing here is i'm getting the guild ids where you have that permission but it's not only that we also need to make sure that the bot is also in that guild so what i want to do is instead of you know making a request for the bots guilds on our server side on our back end since we don't uh it's going to actually you know like take tons of time so uh imagine if the boss is in like a thousand servers making a request for each guild and checking if the member the bot exists there that's going to take so much time and you might also hit api limits api rate limits so instead of doing this we have a simple server on our bot so we can just use that so you see we have this simple server that we made here and we can just use this for the forgetting are checking the guild since the discord.pipebot has a cash or a built-in state we can just fetch those guilds from the cash and see if the bot is a member in those skills so we have the guild ids here and we can just uh we just convert it to convert this to a list so you can have the map and then convert it to a list or you know instead of doing this map function we can just do a list comprehension so str uh str x dot id or x in valid kills we can just do this simple as that now we can actually make a request to that bot api here but before we do that i want to actually make another endpoint for this so uh get mutual kills and self uh self request and i want to just do web.json response and i want to return something called guilds like this i want to return array for now so what i want to do is it's going to have this i want to go here and i want to run this bot again so it's going to run the server and before i actually do that let's actually add this course endpoint let's add this course endpoint and we can just add this think here so wait we can just do slash guilds and then this should use post and we have get mutual kills so we can just do this here and instead of just allowing every single origin to do this i only want to allow the local host 8000 packets to access this api so i can just do localhost a thousand welcome floyd to the stream hope you enjoy and stick around and you don't understand anything but um yeah please stick around so yeah we have this end point here we can now stop the button run this again you can go to our app.pi here and what i want to do is not to make a request using aio http so i'm going to do async with yeah http dot client session pass session and then i want to do response will be await session post and this will be the bots url so we can do http localhost 6969 slash guilds since we are using this skills endpoint we're going to use skills and we also want some json data so they json i want guilds to be the guild id so it's basically going to like make a request with these guild ids here oops my bad and i want to now print await response.txt i want to print whatever this api returns now by default it will just return some json here if you take a look at this it's just going to return this here but that doesn't matter here we can just uh go here to the kills uh 6969 make a post request instead of doing this uh what i was doing here i was actually being weird i need to do it over here on the get request send it says could not send request 8080 oh yeah on my bad just 8 000 and send the request and what it's going to do is it's going to get a response and as you can see it's just printing this skill data here so that's fine and what we want to do here is i want to actually loop over okay so uh give me a second so basically this is where we will do our mutual guild stuff where we will check if the bot and the user share the same guilt or not so we want the uh data to be request dot json is that request.json let me actually take a look at this uh audio http server if you take a look at the server api reference which we're going to get here if you go to the reference the documentation click json we have this json here your request.json i can just do awake request.json this will give me the json data and then i also want to do the guilds the guilds is supposed to be um json data dot get guilds okay and what i want to do is you have json response i want to do status to be 400 so if not kill so if it doesn't return you guilds until you return web dot json response i want to do status equals 400 and i want to do uh error invalid guilds we can do this if we don't get this so now we have the guild ids we have the guild audis over here what i want to do is i want to loop over each of those giveaways so i can just have uh guilds so these are basic so this gills is basically the thing will return and i can now loop over each guild id so for i in guild ids i'm going to try to get that guild from the bot so guild equals to self.bot dot get killed get killed why am i not having intelligence here that is because i need to change the virtual environ so get guild and yeah we can just do int i and that is because i'm going to convert that guild id to um string or sorry to an integer and if we have that guild or we can just do if not guild continue but if we have that guild i want to do if guild dot get member is this how to do it guild dot okay yeah so we need to actually do discord dot guild killed that's what you need to do so if gil dot get member and i want to uh convert or i just want to do cell dot dot id now the reason why we're doing this is basically we're getting the guild where the user has the permission and now we're checking if there is a member with the bots id so we're just checking if the bot is in that guild where the user has permission that way we can actually differentiate uh between kills where the bot is in and guilds where the bot is not a member so we can just do guild.getmember and now we can just if we have this we can just do guilds dot append and i actually want to append some json data to it so we can just do something like uh let's do id str guild.id and then we can just do a name it's your uh we can just do kill dot name and then avatar or this is you icon url and i want to be guild dot icon url as i want the format to be png and the size to be 512 and i want to convert this to an str so the str version of it will basically return the link instead of doing this so if we have that member here we're going to append to that guild and now let's actually stop the server and run again let's see what happens here so before this we actually have so many guilds over here so many guilds but now i actually want to see which guilds both the user and bot is in and the user has managed server permissions at least so we can now run postman and if we take a look at the terminal here you see there's only one guild guilds and there's only one guild and that guild is poke champ testing which is my testing server here this is my pokesham testing server but this is the only server where the bot is in if i add my bot to another server it's going to show the same so yeah we can actually do that but now i don't want to do that right now so yeah we have that and i want to now uh return that json data so we can just uh do so i want to you know import json from here so from json from json import loads for loads and licenses to loads so basically i'm just loading that json await response.txt and yeah you can have this so if you now go and run this you can see the gills which are we're going to get to the mutual kills so we can just send the request and the reason this is taking a while is because i'm streaming and the discord api is basically fetching all of my user goals and it's actually like it's not going to be an issue if you're not streaming but since my internet is not very good it's taking a good while yeah uh courseworks led exception handler it says request to match this course not using options methods huh wait a minute what issue is this giving me oh never mind so you can run this and let's see what's happening here connection laws get killed is this an issue on the bot side because literally a few minutes ago this was actually working properly one second so i can actually go here i can just do uh i can actually comment this part out if i do this on the bot side if i run this here and if this is the same thing let's actually make the request and this is still giving me is the discord api taking a long time or is it just my uh thing here one second my internet's probably not working really well so if i remove this here how long will it take to make that request let's see yeah yeah so the issue was with that discord api i see so probably it's hitting a few rate limits i don't know but let's actually uncomment this part and let's run this again this time it should give you that let me actually print the print guild ids just to see that it reaches this point you know the print statement is the best debugger on the planet and it's probably the discord api again never mind i have those guild ids but it's taking a while to fetch the response how about i do this uh i can just do kills to be a weight response or text i can print the kills here how about that that that actually seems pretty okay here so let me run this it's not going to take a really really long time i hope and yeah it's just returning this here so if i return the loads kills it's it's probably an async issue or something like that because they waited in the same function let's run this and see what's happening and yeah look at this so sorry about that it's probably some async issue or something like that but yeah you see this is the mutual guild over here that i have now if i actually go and uh invite this spot to another server where i um let me actually go to my dashboard tutorial and i want to [Music] actually i want to just do bot and i want to copy this url here and i want to invite this bot to another server let's actually invite this to my coder system discord server uh coder system and i hate captcha oh god boat okay is this a boat i think this is a boat yeah so it is it has been authorized and if i actually take a look at my server and if i go to and put this on i put this i put a bottle to this so what i want to do now okay so this is now in my uh server so i have invited that bot to my server and i've actually run this if i send this request take a look at this so i have invited that bot right like to my server just right now and since i am the owner i have the manage server permission by default and take a look at this it's showing that coder system is here if i uh go to the icon url here follow this link if i go here to my server's icon boom you have the servers icon over here which is great so the mutual guild system is working properly and just to prove to you that this method is efficient instead of you know making a request to the rest api like i'm going to show you how much time it takes to start it's going to be time.time do i have time imported i don't import time and i'm going to i got to change the event again back end okay and then i can just now you know print time.time dot time minus end uh sorry start now this should print in seconds now you take a look at this here if i run this you take a look at this here this is how small this number is this is how less it takes you see it's not even a second it's even less than a second do you see this this is how less time it takes so this method is efficient the only amount of time it takes is to fetch that guilds used to fetch those skills from the discord api and that is completely fine it will take some time uh it's not going to take you know more than uh two two to three seconds for you to have a good internet connection but this thing that we are doing here this is efficient so yeah so if we didn't do this what we had to do is we had to make a rest api request to the discord api for every single kill that this user was in and then match that with the bot that would be a disaster so yeah we have this over here and now we can actually work on a guilds page so yeah let's actually try that uh yeah let's actually take a look at this one second okay so what i want to do now is i want to go to the front end and make a request for this route so we can go to the front end here go to the client src and right now the front-end client that we have here it's pretty simple i want to make a route where you have this you have guilds so let's actually go to the router.tsx uh welcome vedra side to the stream i'm a goku's classes oh man bosses and like it but you still gotta do classes you know there's nothing you can do about it so let's actually do the kills this is gonna be slash guilds and then we can just have show kills we can have this show girls component here and we can just go to showgirls.tsx and you can do import react from react export cons show show kills react.fc return div boom i can actually import this here and yeah so we have this show guilds thing here if i go to slash skills this is like so this is how it is over here um so yeah we can actually do this and what i want to do is i want to get the current user here and uh let's actually go to react uh hello welcome to the stream uh hello welcome to the stream how's it going so uh let's actually take a look at the show guilty so this website is working pretty perfectly early morning streaming yes sir so yeah this is actually working pretty well now we can uh go over here and go to div and what i did in the home page is i made an api request a good looking api request for the set loading in the user so i can go to i can actually remove the utools and the app router i can go to show kills i can use the state uh states over here so use state and i can also import user from here and produce different types that looks fine format document with prettier great now i want to run use effect because axios is pog and same thing over here although i want to actually return this here you know what let's actually return this loading component let's actually call this eight components due to this uh we could have a components we're gonna have this loading dot tsx so we can just do i'll just paste this in so import react from react and export cons loading react.c return i want prettia great i can just do loading loading great so we have that here and now if i actually refresh this it's gonna keep loading and boom we have this here now we can do uh slash gills on this side slash kills uh what wait what okay great so you can take the use effect here we have um and then in the show guilds we can also import use effect here use effect and we can just take a look at this so let's use use effect and we can just do import config from config.json i'm going to import axios from axios and then i don't need the status here i only need the token so for my document with prettier loading sure see how we have that and we also need to make another request to this uh place here and what i want to do is if there is no access token what i want to do is window.location.href slash login and if we have a catch here i want to do the same thing i want to uh if we have any caches here i just want to redirect to that place and i also want to do axios.get on the api url and then i want to get the kills so it lets us actually get the kills here kills and we can just import the header yeah we can just use the same headers we had there okay and we can just do dot then so you can see the response and then we can just do something like const kills will be uh list or array guilds and that will be rest.data dot guilds and we need to make a guild types here so we can just go to types and let's do export interface skills oops gills and it's going to have an id which will be a string name which will be a string and then icon url which should be string you can have that and we're gonna have this and then we can just do something like set loading to false either set loading to false and i also want to do guilds here so let's actually do guilds set kills and i want this to be an array so generics are good kills it should be killed from here you know types why are you doing this exporting phrase guild yes sir so um that's working perfectly and we can just format document with prettier catch do the same thing here just as we did before gonna take you to the login page and then what we want to do here is set kills i want kills to add this and yeah let's actually do console.log guilds well let's actually do console.log kills so we can just do slash skills here and we can just do check the console it says right now this is null but we had an issue here for some reason and let us actually do something like if access token so we don't have an access token here uh hello why not interesting wait a second so we can just do here uh slash kills i hope that doesn't give you an error here yeah that is giving us an error i don't know why you can remove the cache from here just for now slash login uh we can just do slash kills and then the skills giving you internal server error i see i see it says server disconnected why is that let's fetch my guilds client.fetchmygills it says server disconnected error and why is that let me actually make a postman request to the guilds api here shouldn't give you this error here it shouldn't okay so what i want to do is i want to actually uh contour.api url guilds it's okay you can do print rest.data and why is that not working i actually want to see here print oh god console.log yes sir so why is this giving me an error here server failed wants that you can have a self.session.request server disconnected error so we can actually take a look at this here server disconnect error servers api as well as the service they paid on being happy multiple non-concurrent calls sync your semaphores fine session this is two possible servers connected error multiple parallel tsp connections that can be made from a single ip address by default it's in kiosk i used to order a particular 200 you can reduce huh okay that is actually something i have not faced yet rare enough uh you know instead of doing this user here how about we just run this how about we just run this okay so we have we will do this first and then we will get the user how about that uh my bad uh js a react sleep between request you can do uh yeah we can just sleep here so sorry my bad uh is it or one liner yes we can just do this one liner here and i want this to stop or i can just do return you promise let's actually do async how about that async you swagged up effect call back cannot be async okay okay you know what we can actually do this run this code expected wait uh js run function one line yes one main function uh actually forgot how you're supposed to do that i actually took a look at this before but um you know we can actually make an async function here oh god the curly braces are killing me this is why i don't do javascript kids okay so i can do cons to make requests async and i can do i do make requests here yes so this should return promises so it is getting the kills here and that is because it's async or is it because they're running at the same time so i can just run this i just do a promise here and for one second we're gonna run this internal server error http client closed and why is that you can take a look at this error we can actually do something like wait so axios async weight that is what i need here so axios async weight and we can just do res equals to a weight axios or a json is this how you're supposed to do it uh so you run async here okay yeah we can actually do this so uh const user res is going to await axios.get yeah so you can await this i forgot that so you can await this here and then we can just do something like user res then we can just do set and just do kills res to set guilds to be guild rest.data okay and data dot guilds kills rest yes skills rest that's what i want here so after this i want to make the request here so it's gonna wait for one more second and then i can just do const user res and that's going to be weight and if there's an await we don't want this to be a set user i want this to be user dot rs.data say let's actually do users.data that should be the user object here and we don't want to catch here so it's actually format with prettier yeah looks pretty okay to me and we can just run this i'll just give you an error here show gills okay it makes two requests too oh yeah i forgot set loading false after all the requests we want to set set loading to false and it should give you this here okay great another thing i want to do here is i want to do 500 instead of being just a whole second of waiting time let's actually do this it shouldn't take too long okay yeah so we have that working perfectly and what i want to do is i want to add i want to have div dot mx auto so div dot container okay so one second my my obs says that my obs says that it got disconnected for a second never mind okay so it's working now so i can just do log in as uh also logged in as user dot username say if the user exists like it will exist but i want to make sure that it does exist here so it's going to make that request and say logged in as this user i don't want to make two requests so uh react use effect makes two requests in one use effect in the use effect it just you know it makes multiple requests here for some reason and i don't like that i know why it makes so many requests we just want this to make the request only once i want to see how many times it does request i can just refresh and it's it should only make just one request here that makes three requests great why does it make so many requests i don't know react is just like this it makes three requests for a single thing are there like three state changes if i go to a network here they shouldn't make one request for each of this uh let me just take a look at this there gills returns the goal successfully that's great i want this to be mx auto uh so yeah let us actually make a first let's actually make a title guilds and let's do for this should be in the center you know so my five and then text center well let's actually use a flexbox or something like that you know we can actually try out with the flexbox so we can just do something like div dot flex dot align uh let me just do items center h screen let me just run this over here and then we can just do uh justify center that seems nice here so we can just have the gills in here so we can just uh format this with prettier and then we can do div how about we do tailwind rows and columns so we can just do some like tailwind rows red template rows that is what we have here you can just have these uh responsive grid templates you can add the uh this here and instead of having two we can have six or something like that yeah let's do this the class name and then we can just do uh let's actually add a few of these i want to see how tailwind handles this handles all of this so this is making the kills like this okay understandable um let's make this a simple div here and then class name h full so it's going to be 100 with maybe like this or should we make it like this just as it is as it was yeah it uh makes it perfectly so it does all of this completely fine we can now uh map each of them let's actually make something like cards so we can just do tailwind cards cards you can have tailwind cards here and then what's it telling cs italian cards so tell them components they actually have some fancy looking stuff here okay so is my internet not working because obs for some reason it's not working i don't know why so i want simple cards over here notes something advanced as this yeah we can use this one testimonial card does that look great i think uh we should be using this one here yeah this one looks pretty awesome yeah this this this one's pog so you can use this one but you know what we can actually make our own why copy someone else's when you can make your own one so we can have a class name so what padding did they use for this p10 yp10 uh let's px6 py4 and then bg let's actually detail with colors so tailwind colors customizing colors and then we can just use the 600 one so gray 600 gray 600 looks pretty fine today uh yeah this one actually looks pretty well or should we actually use 700 700 looks pretty awesome to me 700 yeah 700 looks nice and we can now actually use some uh border radius border radius i'm gonna use rounded just just around it here in the class name rounded and text white so we have this and now what i want to do is i want to add a padding to this so you can just do p y 10 and that should look pretty nice here so we can have multiple of this you know yeah we can have multiple uh and how about we the rows i want columns to be three so we can just do columns grid and then we can just do grid yeah good morning uh deluxe color welcome to the stream red cools three okay we want close three now to rows three calls to be three we wanted like this here but one issue i'm having is instead of just using something like this you can just use grid with cools3 gap4 grid how does this look yeah this this looks this looks completely fine here and then we can just do uh text center this is going to center out the text for you and what i want to do here is so i have all of my servers you know what we had postman we had this we can just copy this url here and then we can just paste this image in so you can just let's actually create that component here so image and then src use this we can just remove this one for now you can remove the old as well instead of adding the padding over here you can remove the padding from here okay we can remove the padding from here and then we can just do div dot px6 dot py4 and then we can just say coders system yeah this looks this looks good one of my concerns is how am i supposed to make it rounded class name uh rounded yeah this looks pretty well but i want to actually you see like the bottom here i want to round the bottom part so you can just do border radius border radius and i only want to you know uh round the tlgs rounded tlg or just rounded t that looks that should look well it's gonna round the top but not the bottom and i want the width to be 200 yeah 200 seems pretty fine to me uh yeah 200 looks good what i want to do is instead of having this i want to do 3x4 or let's just do h four does this work you can just do three by four and not three by four like over here want to do three by four but i want this to be over here so class name h3x4 and yeah this this this actually looks pretty nice or we can just put this at the top here and that should look a bit better like i'm not the best one when it comes to css styling you know what we can actually do position absolute here how about that that does look nice we can try out some css stuff while we're doing this we can just do h1 dot text to excel that's where the name is going to be the server's name let me just have just excel and then line break so we can have okay my bad tailwind break word break i want word break to you know wrap break words yes that is what i want here i want break words to be like this and if the server name's a bit too large let's do 3xl this one's breaking like this uh word break okay so i have this word break here and i want the width to be straight it's going to be like this but this image it kind of looks weird to me i don't know why one thing we can do is we can actually add this to the top here you know we can just do uh border radius and we just do border radius circle rounded full seems fine to me how about we just do round at full that's going to make this a circle and what i want to do is i want the circle to go a bit on the top side so what this person did on here here or maybe we can just go to the tail and components here and then we can go to that testimonial one the testimonial where's the testimonial card then go here i actually want to see how they uh put that image there so what they did is they did um justify end and what they did is they made it up with 20 indigo but how did they actually implement this let me actually take a look at this here so i want to do class equals let's we can just do class name and it seems pretty good let's actually try this out see what's happening yeah they actually have it like this for some reason i don't know how they are doing this but what i can do is instead of doing justify end you can put this on the center here and then we can just do margin top 16 remove this margin top 16 you have bg gray 700 and okay so yeah this is the thing i was using guys so uh this one's pretty popular i'm gonna leave the link in the chat because i want to check this out on your own so yeah uh shout out to this guy katabweeda i'm sorry if i'm pronouncing his name wrong but uh yeah this actually looks pretty cool we can we can use this so yeah this this looks pretty nice but my question is how did he do that oh wait wait a minute wait a minute uh you guys can check that part out negative margin i think we hit the jackpot i think we hit the jackpot i don't know what we did but we did something and i don't know this looks pretty awesome here you can just uh put this to justify center so this flexbox should have um now we can just do dev dot flex and we can just do justify center yeah this this looks pretty good and here we have this and we can just you know this looks pretty nice i just want a margin bottom a good amount of margin bottom here into the py 10 we can just do uh p b to be 15. hello welcome to the stream uh llama corny sorry if i'm pronouncing your name wrong oh god so this this is probably a bit too big i guess so let's actually do m b 10 instead of my five yeah this actually looks a bit better here uh hello aqua power box welcome back to stream again let me just do text semi bold or just do font semi bold yeah that actually looks good my opinion that looks good py10 yeah i now run it um so we can py10 ui4 for this for work uh you are just 10. what kind of padding is this the py here ui 10 okay so if i remove the padding from the bottom so we have pt and then pb should be 15. eb should be 15. we do have a pb so we can just do padding padding bottom px pypt and i want prp b where is pb pb8 pb8 that's what we need here pb8 and db16 is what we want here why aren't using this for api for mutual guild i am using the discord api for mutual kills like i i don't think you have seen the code properly what i did here is on the back end i am getting all of the user skills from the discord api using hikari and then i am actually like the discord api doesn't give you the mutual kills by default as far as i know so you have to manually like get those mutual kills so what i did is i'm basically using the bot's cache and then checking if the bot exists in those guilds by the members so yeah i am using the discord api for this for getting the kills but i am doing the mutual guild verification on my own it's actually pretty efficient it's really quick so i have this pb16 here pb16 how does this look 14 oh god yeah i think this looks pretty nice here all i need here is i'm to go to kills and i want to do mb 16 this looks pretty nice what do you think guys how does this look i think it looks pretty awesome you can you know click on these guilds if i actually copy this multiple times yeah this is the one that i want and if i copy this multiple times here if i keep pasting this yeah this actually looks pretty well i just need to adjust the padding just a little bit yes it's cool oh thanks a lot thanks a lot ronnie uh i need to set the padding just a little bit so we can just do gap six robot gap eight yeah gap it looks fine dab it looks fine in my opinion how about we paste this a bit more you know just to get a hang of what how it's gonna show yeah this is an issue we have here um the issue we have here is if i actually remove this you see here what we have here is we want to add a bit of margin bottom to here so we can just do something like we can take this we can just do mb 16 and if i actually remove all of this from here and if i copy and paste this yeah this looks pretty good but instead of doing 16 let's actually just do 14. 14 looks like a good number for a lot of those 14 uh 10 we just have 10 here and then we can do yeah 10 looks nice i think a bit too close 12 looks the best i guess we can try this out with 12. okay yeah i guess i guess 12 is doing the job instead of just doing three by four we can just remove this part wait a minute so we can do six so five by six how does this look let's do height height we can do something like uh five by six five by six looks pretty well i guess and let's do six by six yeah six by six is a what is nature of salt i know what nature of salt is why are you asking me that i don't know what nature of soul test so we have this um here we can click on this and i want the cursor to be pointer so we can just do pointer here and then you're in class okay okay i get it i get it cursor pointer is not working here we can just do a pointer cursor yeah oh so i need cursor pointer for this okay okay and what i want to do is i want to do cursor pointer whenever they hover i want the just hover hover so we can do focus or hover i want the background to change so right now the background over here is bg gray but what i want to do is i want to change the vg600 whenever someone hovers i want to change the background just a little bit we can just do uh transform transform we can just do a transform scale yes so we can have transform on this i'm just going to do scale 50 i don't know we can just uh do that how do you implement transform on this hover do you use hover for transform yes you do 120 looks pretty fine to me but 120 doesn't have this class here and then we can just do a responsive variance we also need animation so scale and then uh tailwind scale scale animation we can just i actually need to see that the scale how does the scale look when you animate on it i'm sorry when you uh okay so it has this scale here transition you need the transition class okay so uh we have this and wait a second so scale does have 125 which we can use 125 ah this is a bit too big a bit too big for my taste yeah this actually looks pretty well to me what i want here is if you take a look at this this is uh yeah let's keep it as it is this looks pretty well so what i want is when you click on this so on click i want this to on click uh i want this to go to window.location.href equals to slash guilds slash and i want to put some number in here how about that you know before we actually do that let us uh use the map function for this so we can do kills.map so we have the guilds here we have the kills links dot map and then we can do killed would be of type killed return we can return this okay and we can save this this is going to return two builds but i don't want that i want the guild dot name and i also want the gil dot icon url and this looks pretty nice pretty nice in my opinion but i want the text to be centered to text center yes this looks pretty well to me at least the curve system pog champ testing and i want this to be like no one click uh window dot location and i will slash kill slash guild dollar sign kill dot icon url how about that so when i click this it's going to take me to this oh god not icon url i want id yes sir just going to give me this and boom it's going to take me to this route but for now we have this this is working perfectly um it just takes the only issue it has it takes a bit time to load and that is on my side if you're hosting this on your server it won't take a long time because your vps or server might have better internet than me and it obviously will have better internet than me because my internet sucks so yeah we have a mutual guild system over here uh what i want to do is i want to actually have a lot in ass system so we can just uh we can do something like on the bottom side so this is like this uh undo div dot absolute and i can do h1 load in as just for example just for testing i want to see how this works we can do uh logged in as and i don't want this to be a container here all i want is for this to be uh so this is using the full screen thing and i want the width to be a hundred percent so this class can be here okay what i'm gonna do is i'm gonna do bottom zero oh god my spelling bottom bottom zero does that look good yeah i think that is pretty okay with me i guess i don't know bottom zero and i want the left side to be now instead of putting this in the container like this how about i just take it over here put it like this and then if i refresh it should be like this wait one second so we can just do a flex box here or maybe we can just do it full screen on this one oops we need a full screen on this one let us actually take a look at this and it says full screen how about we do h full yes so this looks pretty nice and i just want this to be on the side here i just want this to be on the left side i can just do right zero and i can just have something like you know mb or mr5 mb5 i can have something like this and then i can do uh class name text white text lg and then i can actually do uh do this and just do looked in as i do user dot username user dot avatar or sorry discriminator and yeah we can just we can just have it like this and i also want an image how about that so we can just have a flexbox just do dev dot flex because this is how i flex with my css skills and then i can have an image image and then the src would be user dot avatar url that seems fine we can just do items center then i want the width to be 50 50. i want the width to be just 50 pixels and then the class name rounded full yeah this seems this seems pretty nice over here on this side and yeah i mean we can just also uh add some spacing so you know like gap gap too yeah this this looks this looks pretty awesome here like i actually like this thing that i added here and you know what let's actually use the waves here get waves dot io and uh let's actually use it like this let's actually get another wave here uh how does this look yeah this actually looks pretty nice but what i need here is i want the color to be like telling colors so yeah do tailwind put using around the top right now i don't think top right will look nice you know in my opinion i don't think the top right would look nice and just tailwind css.com get started and then documentation let's do colors color and colors here it uses 500 or something try once okay try once let us actually do top zero yeah it actually looks pretty nice thanks ronit thanks thanks a lot uh mt5 yeah this looks pretty nice thanks a lot ronnie yeah i did add some padding here like i'm using margin like margin is not that bad and we can just use the waves here at the bottom it's all good uh you can just color does the thing use a second so i can just copy this svg copy svg i can paste this as vg in here you know what let's just actually copy the svg that we had on the home page that'll actually look a bit nicer so you have it like this oops i can have bg in user like guild uh i don't get it i don't get what you mean on it so we can have a another dev dot absolute here dev dot absolute dot bottom zero and this should be at least uh something like this here absolute and bottom zero and where is that device i can't see that different can use glass morphism and guild i have never heard of glossomorphism so closed in bottom zero doesn't this work if i remove this from absolute this goes over here but what if i class name h1 uh let's actually put it like this here you know so i can just copy this div i can put it like this this will be over here so i could just do class name absolute i can do with full full here and then i can just do left zero and then i can just do mb0 let me just do bottom zero yeah we can just do this this actually looks pretty nice ronnie what do you think what do you think about this yeah this looks pretty nice you can have it like this yes better side uh how's it going welcome back to the stream you gotta check brad's twitter rn brad's twitter traversing media twitter i'm gonna check brad's twitter let's actually see what's happening here underdog i don't know wait a second tweets what does it say anything's really good fine this is a video just wanted i just found a video on channel called the underdog you got something pog literal pog i didn't get it which tweet are you talking about brad traverse's latest tweets which one could you send the link here the underdog one oh the underdog one wait a second yeah i'm gonna actually take a look at this after this stream removed logged in text from user uh loadings text from user can i remove this okay yeah i can just remove this here uh does this look nice here you know yeah i think this does look nice so we can just click this it's going to take us to the pog champ testing here i think this web dashboard is looking pretty nice here but we're going to do the rest of the stuff later so right now let's actually do like an overall review of what we did today and put bg and username no i don't think so on it like i'm like the bg and username okay we're logged in as this user we can just you know have this have the bot status ping et cetera et cetera we can log out or we can just add a button here yeah i forgot you can add a button here so we can just add another button to the uh is add another button go to guilds slash guilds and that should have a break line on it two break lines make the job done uh get the job done okay ah instead of doing do two break lines let's actually do uh mb auto or sorry m not mb auto mb6 how does that look vr mb6 is a bit too much i think mb2 yeah i think mb2 looks the best i can go to guilds here and now it's gonna add bj in username of button color narrow on it i don't think so i don't think it'll look good this actually looks pretty nice over here um yeah we can uh take a look at this we can go here so i guess that's actually enough for today's stream we actually did a lot of stuff today we implemented a mutual guild system and we also have this working dashboard thing here so you can log out let's actually do some stuff here again next up is nah i like mongodb although i might make a mongodb tutorial i mean look look look better side the the process is the same whatever database you use the only things you need to do is you need to make sure you have a bot for it if you have a bot for it and the database works you can just use the same database things with the dashboard and look at this i haven't used a database even once in this web dashboard yet so the database part is not important the back in db stuff is in pi yes it is in pi it isn't python ooh this is python so um you don't need to worry about this i didn't even touch the database part yet and we are so far on our quest so login with discord we can now click login we can do authorize and instead of you know redirecting to the user page i want to do is i want to go to the callback handler and i want it to redirect to slash skills after the callback handle i'm gonna log out and i'm gonna click login with discord it's gonna log in and it's gonna redirect me to the guilds page will take just a bit of time to load not a problem like yeah and now we have our guilds page that is basically it so um that's it for this stream guys uh yeah the not the bots not in hickory the bot is in discord.pie if you haven't taken a look at the bot yet you weren't actually watching these streams so um yeah like the bots in discord.5 we have cogs here and in the clock we have this server where you can get the mutual goods and stuff aio http server cog et cetera et cetera so yeah pretty nice can you try one's bg uh what bg are you talking about ronnie i don't understand which one let's have this here this looks pretty nice username you want me to put a background background on this username you want me to put a background on this username okay i guess bg blue 500 that doesn't look nice i really don't like it uh p2 why did i swipe pp2 p2 adding two rounded you mean this i don't like this remove the avatar why remove the avatar now this doesn't actually look good in my opinion this actually looks like a button and it's not actually have any source of functionality this doesn't actually look good in my opinion so um yeah anyways i guess like this is that's it for today's stream i don't want to make this any longer for you guys so i'm you bg from avatar what do you mean bg from avatar there is no background in the like there's no backward of the avatar what are you talking about like we can talk about this later like if you're on my if you're in my discord server we can talk about this later uh but i want to end the stream right now so um yeah anyways guys uh i hope you enjoyed this stream and if you did please subscribe to his channel and like this video um i really appreciate all the support and before all the work that i put in so anyways have a good one guys peace out

Channel: DevGuyAhnaf

Views: 535

Keywords: python, discord.py, hikari, discord bot web dashboard, discord.py web dashboard, discord.py bot dashboard, hikari bot dashboard, sanic, discord.py sanic, react, react dashboard

Id: 6aCFKG02br0

Length: 87min 28sec (5248 seconds)

Published: Sat Jul 31 2021