#2 Production! Let's build a User Feedback app with Rails 7

okay hello so uh we are going to continue working today on the application that uh i started creating yesterday again it is going to be a question and answer application so users can create inboxes and anybody can add a message in an inbox and anybody can vote on a message it's going to be something like their top tens so think of it all these are inboxes like best zones for whatever people can add their responses or questions and anybody can vote and we will see the top voted the results so for example if i've got a youtube channel you will be able to vote on the video ideas that you would like to see or if i am creating an application you would be able to vote for features that you would like to see in the application so it's going to be something like a user feedback application or even something like stack overflow where users can ask questions and uh other users can suggest their answers and vote on them anyway uh coming back to what we're working on previously we had this case with the not been able to push to heruku so i figured out what the problem was basically here is the explanation uh on the hot wire discussion so it's actually a really good forum where they can find many answers so uh when i installed the turbo in the application for some reason it said that we have turbo rails 71.1 but uh there is no turbo rail seven one point farm if we go to turbo rails we see that the version should be around zero point eight point two and if we open hot fire go to turbo so 7.0.1 would be the version of turbo so there was some kind of error than installing turbo in our local application and what i did i went uh and said gem uninstall turbo rails so i uninstalled all the versions you see for some reason we've installed these versions that actually should not exist locally and yeah then i just recreated the junk file so i deleted the jump file let's have a look at get status okay now i will just run bundle [Music] and it should work correctly so let's reload i will say turbo yeah and you see we have turbo rails 0.7.11 something and i can also say that i want well a newer version of turbo to be available do we have the latest version installed or not 0.8.3 and yeah this is the latest version so looks good now it should kind of work let's again see the changes that we did to the jump file so yeah i've updated bundler and i've updated the version of turbo rails you see this version of turbo rails just doesn't exist so now i can say git add all get commit main fix bug with turbo version okay get push and now once again i will try to push to heruku main and hopefully it will work this time yeah usually pushing for the first time to heroku takes quite a while but i think pushing a rail 7 application should be faster than rails six okay application not supported by haruko node.js buildback i've set this buildback but unable to detect node.js so yeah actually i added this node.js built back to the application yesterday when i was trying to find what the problem was but apparently i shouldn't have done that so where do we have our build packs okay i'm going to remove this heruko node.js buildback and we have heroku ruby and i'm going to try to push to heruku once again and actually uh thanks to secret prey for the ideas that he added so today in the morning i see there are already two branches in the application on github one is from secret prey hello so uh he suggested some changes we can uh also have a quick look hello up to abdul rahman yeah so uh he added his fix for turbo rails that's cool then some updates to seeds we can also have a look at them and some layout updates so as i see he made a suggestion to have the footer always on the bottom okay that's good we can edit a bit later as soon as we're done with heroku and in the meantime finally we see that we have pushed to heruku okay so it was not a general rails uh problem it wasn't a heruko problem it wasn't a device problem it was a problem with my local setup hello satin okay now let's try opening the application on heruku and [Music] it seems to be running interesting but i go to any page and it doesn't work because i didn't run the migrations okay actually let's automate this let's make it so that the migrations are run automatically whenever we push to heroku and for this we are going to use a proc file actually on my blog i've got some notes on profile basically it is a file that uh to which we can add some settings that will be automatically executed whenever we push to heroku so we are going to create a file named profile in the root of our application so creating proc file and i'm going to run to add these two lines to their profile so web bundle execute trail server well does it anyway but uh we can edit that's fine and here's the important one we're going to add release railsdb migrate so after the application is released to heruku after [Music] all this happens it is also going to automatically run a migration so we don't have to manually run immigration when we push to heroku let's save our changes and push that hit add all main add rock file get push and get bush heruko name actually i can go to rook in the meanwhile and have a look at some settings that i can add so here we have deploy i have already connected my github repository i can enable automatic deploys from the repository looks good and i will also add the paid here so let's see configure dinos i will now where was it installed at dawns i actually forgot how to change the tier to paid on heroku okay i see a message all videos are very informative thank you so much i'm waiting for more videos thank you satya and hello shiva okay let's see so yes you see we have pushed to heroku once again and after release it says run and release command and adding all the migrations so we run all our migrations on pushing to heroku now i will refresh and looks nice so i go to the root i go to inboxes i need to sign in before continuing let me create an account i'll actually go to sign up and we are signed up okay and i can create a first inbox let's name it uh vote video videos would you like to see on super rails youtube channel now i don't like this input form let's actually make it a bit bigger a bit wider a bit nicer so yeah i'm going to go to our app views here we have our inbox form and we're going to edit this form a bit so we have text field for name then i will also say autocomplete off so if i don't add this autocomplete off let's see what happens i'll start the server i go to inboxes okay i need to also sign up here so i'm going to a new inbox and [Music] let's try adding a new inbox now once again hello okay autocomplete doesn't seem to be working at the moment but from another browser i had some autocomplete functionality and i do not want it here so i'm going to say autocomplete off then i will also make it wider so full width i will say style width 100 something like this okay i forgot the como so with 100 already looks better and let's uh also edit the maximum length so let's say we have our back-end validation for the maximum length like uh it might be a hundred characters or so we see and we will also add this kind of validation on our front end so we are going to add the html attribute of max length and let's say 10 for example i can refresh i'll start typing in does it work or not interesting i don't see it land good so okay maybe i made a typo you see i'm trying to type more characters now but they don't get typed in because of this front-end validation okay i see simply that you're slowly flash menu okay i fill so for now i add next length here and it's going to be the same one as i've got inside our inbox.ob so here we have a min name max name [Music] let's edit i will make it the max length inbox next name you see if we say inbox max name we can have this number from a view as a constant you see it's 100 and now this validation is going to also work in this form you see i cannot type more characters now so yeah i did some basic validations on the front end for our input for an inbox and we can do something similar for our messages let's open our message form and see so it is a text area and we are definitely not going to have any autocomplete in a text area here it is let's actually make the bit 100 percent so style width 100 percent okay now let's also add a max length [Music] let's also move it on a separate line it would be let's see i'll go to message max body i will have message max body as the max length like this we have style bit we will also do we need to add autocomplete off i think not but just in case uh we can oh not really doesn't really matter so here we have max name here we have max body width okay let's uh refresh let's also add the a few more rows let's say rows 10 for example built verb yeah so now in our input for a new message we have 10 draws and what if we also remove this label for body we don't really need it and we just have this input field now let's try to have more than allow the symbols here i try to type more it doesn't work and we don't have to have this we don't raise this back and validation error and again i go to new message i will inspect the element and you see we added this html attribute max length 2000 let's have a quick look at it i will go to mdn max length so here we have this html attribute max length here for example we have max land reset to 4 and we cannot add more than 4 symbols so make sense ok let's save the changes input in 5 pixels 10 pixels okay let's try doing that so we have style with 100 i would try adding bed in 5 pixels 10 pixels let's see if it changes anything i will try once again yeah it actually does change something but i'll leave it for later i just don't want to do too much css at the this point okay let's save the changes get status hit add all get commit main front-end validations for forms git push okay and actually another thing that we were having a problem with in the previous video was our seeds so seeds dr rb and i had an issue setting a random user and we can actually try doing user.old.sample so it would give us a random user let's try doing that i will create a few users in the console rails console so just creating a few users i will say user.com now i will say user.old.sample and you see it's giving me a random user so i can just assign the user as user.old.sample okay and now i can try recreating the seeds so exit rails db seed okay and it seems to be working and another thing is uh as uh alexander noted in his pr's it would be good to add the uniqueness to faker so here we would add the faker like name for example nick in the cases by the validity uniqueness for example in our inbox name so in seeds here we have faker internet email unique let's see if this works rails console okay it's working that unique and we're going to have a unique email and we're going to have a unique inbox name and also as alexander noted again in his br that faker quote famous lost words can have some cases where the uh quote is longer than what we want so we can use actually some kind of other faker generator for our inbox that has a validation on the length so for example okay it was not for the text every year it was for the in line okay yeah let's try that as alexander added some more comments so we'll try that in a moment anyway let's finish with seeds uh jam faker lorem let's try some larum that is definitely under 100 symbols so faker lorem now this is not the most comfortable way to have a look at lorem but let's say fake lorem question word count and we'll add a few words word count 5 and we will say unique let's just ensure that it works yeah so it is working okay let's now regenerate our seeds exit rails db seed okay and it seems to be working so we delete all our messages inboxes users then we generate a few random users to generate a few inboxes for each user and a few messages for each inbox looks good and another thing that was noted by alexander thanks again in the pr so if we go up there is this return unless rails environment development now here's a good thing uh occasionally you might uh run seeds in production and the raw cases when you will want to run seeds in production but 99 of applications you would not and you don't want to delete your production data by running the seeds so you can add a line like this on top of our seeds for us not to occasionally run the rails db seed in production now again i can say rails to be seed it should work well in development but not in production okay so get status kit add all get comment main improve seeds get push okay now let's look at our application on haruku so it is ask askdemoshrookapp.com and let's add a real domain to it so i have the application running here and i've got the name chip i've got a domain askdemos.com on namecheap so i'm going to try to connect it now here is the domain i will go to settings i'm going to add the a domain i will say askdemos.com as a cell later i was given a dns target and now going to the advanced dns on namecheap so previously i already had some records for heruku when i was trying it out i'm going to delete these and add then you dns target so you see the host at means the bare domain without www without any subdomain www is also actually like a subdomain so yeah i will delete this cname i will delete this cname the www i'm going to add a new record cname host will be at at because i added the domain without any subdomain and this is going to be the heroku dns target okay save changes going back to domains and i'm going to add the more domain www.askdemos.com next i was given another dns target and i'm going to go and add an uc name record www at the dns target and accept and now if i try to open the domain will it work or not they're having trouble finding the site so maybe it still just doesn't work let's try the other one yeah it works but you see did not not have as a cell button yet so we'll need to do something on the heruko side on the let's encrypt side and on our application side first of all i'm going to go to our application and close all the tabs that i'm not using at the moment and open production.rb and here we have this config for ssl true so we are going to enforce using ssl okay now i say git status kit add all git comment main force as a cell in production okay now get push main and in the meantime i'm going to try to add a paid tier on haruko okay i'm going to edit here or not change dyno type yeah change dyna type and i'm going to make it hobby and the application is going to run without sleeping so there will be no boot times and importantly we are going to also have as a cell configured by default so it's uh it's quite cheap it uh fits many applications and uh now we will just make ssl work so you see it has also automatically added this uh ssl the certificate is managed by haruku and now i will refresh ms titus so meaning ssl should be working correctly in the meantime i finished pushing to haruku i will refresh and you see i was redirected to https uh the domain works and do not have any ssl problems so seems to be working well we've configured heroku ssl lesson group to edit the page here and it all took us just a minute now looking back at our domain settings here i have the other txt records and cnames for amazon sas it is because i've already verified the domain on amazon so if i open my aws ses account on this account i have a few domains set up so i've verified these domains as demos you see it is already verified and the amazon says is ready for me to be sending emails from this domain okay actually going back to the comments going back to the comments uh there was a comment about uh padding 5 pixels 10 pixels for this inline input let's try adding now so go into inbox form new inbox okay let me sign up once again and i will try adding this style so it would be padding 5 pixels then pixels let's see yeah actually looks a bit nicer let's just compare before and after can i comment it out this way i think i can so before and after yeah it does look actually a bitter better thank you alexander and yeah let's save our changes get status add all get comment main [Music] style uh inbox input form okay so we've got uh heruko kind of working nice and let's see actually i've created a small checklist of things we need to do to make the application production ready so we've got the inbox additional settings we've got some front and input field validations it's what i've actually just done so i will move it to done then i have for what else let's start with something easy gem meta tags so yeah actually we're going to add the meta tags uh to our application so that the crawlers as google for example know what to expect on the website and so they have nicer names of different pages on the application so let's install the gem meta tags now i'll also close all the windows that i'm not using at the moment i'll actually save this for later okay so gem meta tags let's see how we can install it so i take the gem meta tags and yeah add it to the gem file so bundle add meta tags let's see then next i would add rail generate meta tags install it created the initializer let's try opening it so what do we have we can configure title limit keywords limit okay let's go further with the tutorial so in a layout file we are going to add the set meta tags theme anyway i've done this before so that we don't uh spend a lot of time on it i'm going to go through my nodes so here i have meta tags and what are we going to do we've generated meta tags installed now in our application html we're going to set some general meta tags that will be available around the across all our applications are going to layout application html uh i think in the head we're going to say display meta tags site name then description so [Music] user feedback let's say collect user feedback or user feedback app okay then the keywords would be q and a do they need to have a coma yeah qna user feedback yeah q a and feedback that would be enough for right now we can have a look at other sites like the top tens for example and see what meta tags they are using let's go to head so title top 10 lists at top tens description vote so let's say vote on lists or create your own list whatever then let's have a look at some tags if there are any visible on top okay i don't see any tags well never mind we've got the description we've got a few keywords and also you see i've added reverse true now what does this reverse true thin do it's going to add the name of our website on the end so let's say we want to add a specific name to a specific page let's add set meta tags title to a specific page yeah actually i will maybe also remove this title so that it is overridden by display method tags site description keywords let's see if it works let's try to override the site name okay so it does get overridden in the method tags okay and now going to another view let's go to our inboxes controller and here i would set meta tags inboxes all for example and how will it look let's inspect the element go to head and do we have a title or not i will see here let's see do we have a title a title ask demos but it is not what we want and we want to have a custom title like this why doesn't it work maybe we need to restart the server okay because i'm on the run page sure yeah so now i'm going to inboxes index and you see we have all inboxes as demos so makes sense and yeah it's working so you see i said reverse in our application layout reverse true meaning we're going to have the name of the application in the end and if you've got a lot of tabs of this specific application it'll be easier to navigate not just see the name of the application first we will first see the name of the specific page we are on so we can just say inboxes like big inboxes and the name of the application okay are there any other good settings to add config title limit and the truncate site title first true yeah i'm going to also add these true and config title limit let's be 100 for example oh 120 oh no 100 okay now i will restart the server once again and also set some meta tags for our uh show action so here we have our inboxes show action we have set meta text title and the title is going to be add inbox dot name so if i go to an inbox you see we have the name of their inbox so looks good makes sense and this way if you want we can add the inboxes to meta tags to other pages so in this new page i will set either the meta tag is going to be new inbox or add inbox or create inbox doesn't really matter then ensure we have the name of the inbox in the edit let's go and try editing one of the inboxes so i will create an inbox go to edit and set the meta tag actually we can try doing it as controller name let's say controller name and action name so this should give us something like uh inbox edit let's change the order let's say edit inbox let's see if it works uh now let's make it capitalize so we have edit but it should be not in boxes it should be singularized so ruby singularize is that something like this yeah there is something like singularize so i would say dot singularize it should be edit inbox and i will also add the capitalize so controller name capitalize and singularize and you see we programmatically made this name more generic i will do the same with our new action so let's see i will go to new inbox we have new inbox looks good and we can do something like this with our index page we can make it as just control name dot capitalize let's make it like this we don't need any more braces now and going to inboxes so it works looks good now we've set meta text for index for show for new edit for create we don't need because it is a post for update because it is a patch i guess for destroy because it has add destroy so for all our index views we set the meta tags we can do the same for our other pages like uh homepage let it not have anything for price and terms and privacy we will add some some meta tags so privacy meta tag will be privacy and no here actually we have pricing or we can again use the controller name as we did the here just control name capitalize or action name capitalize let's make it action name capitalized for pricing and for privacy and for terms and you see we didn't have to override anything so i go to pricing terms privacy and the meta tag is set correctly looks quite nice let's uh also do the same for messages and i think then they're kind of done with our meta tags so in what cases do we see any message views if we go to inboxes only in the new message we have a view at the moment but we don't really needed uh another tech here because we are going to in the future create new messages inside an inbox without having this separate view we are going to do it with turbo so i will um i will not do any meta tags on our messages i will just save get add all get comment main add meta tags get push and get push heroku main okay so we are done with one more task we've added meta tags let's put this one into dom okay let's see what we can do next so [Music] we've done push to haruko at custom domain as a cell paid tier good we've added the proc file then yeah let's actually add some nice behaviors to our application so let's start finally adding some turbo basically what are we going to do first so for example we've got an inbox and we want to create the messages directly in an inbox oh i see alexander says before action set meta yeah we can set meta as a before action for example where for example in our static pages controller here we can say before action set meta tags but in the future you might want to override it so i'm not going to do it now anyway let's uh go back and uh add some turbo so here we're going to make it so that we can add a message directly inside an inbox and first we're going to render the message form inside the show view so i'm going to go to views and the inboxes show and here we are again not going to have just a link new message we're going to have a render inboxes messages form let's see if it works okay it doesn't work because we don't have a message set so i will say message will be message dot new let's see if this works okay so we have the message form but we cannot uh it will not work nicely yet let's say i will try to create a message one symbol or something it directs me to the other page where we get this error so i don't want this redirect to have an iphone this error message to be visible right here how can i do it i'm going to go to our messages controller and here in the create action i'm going to say if message save or if message doesn't save they're going to respond with the the turbo format so i would say format dot turbo stream and then i would say render turbostream dot update then we're going to update this form does the form actually have an id at the moment or not let's see so it doesn't have any id at the moment let's try to add it into a div div id message form something like this on your message let's say new message and we are going to update this div with a partial named inboxes messages form and the locales are going to be a message will be at message let's just put it on a few separate lines so that it is a bit more visible something like this i guess so if we don't manage to save it we are going to update it with this message otherwise if message save we will render drama stream with the message will be message.new yeah let me just put format toolbar stream on top of html and let's see if it works so we are on the an inbox page at the moment here we have the inbox and i press create message and i get an error so unexpected sign maybe i should have yeah maybe i made a typo maybe it should be like this from a tuba stream do then i will have an end statement then i would have rendered to the stream and here stream dot update something like this let's just see if it works i press create and it did not work okay let's try without these braces i press create message it still doesn't uh okay here i get an error let's say format tuba stream doom and now i press create message and [Music] something happens so you see i got to this text yeah actually i just get this text inbox is a messages form i don't render a partial so how do i do it actually i've made some notes on this before and i completely forgot the syntax let's have a quick look it would be something like this yeah i would have to say partial here and here hello lasik song okay i press create message and you see i was not redirected to a new page so in the same page just uh i got an update from turbostream this partial and i get this message but it can be blank body is too short okay i will try to add a couple of symbols i update and you see i didn't have a full page refresh let's actually check that i will add the couple of timers i will add a timer here as equals time dot zone not now and a timer here and let's see here i have two timers i press create and you see well one was replaced so all the actions we are doing are happening inside the spray paint frame and i don't get a full page reload nice now i will create a message that is valid and i get an error so run the toolbar stream then turbo stream.update so again it's just the syntax now it should work let's see so hello world i press and it looks like it did great so you see i was given a new form and now if i refresh you see i have four messages and a message named hello world does exist so i managed to create a message with turbo and re-render the form so what i have done now i said the if message save we are going to first try to run the format tube stream and i will run that to the stream turbo update this new message div id with the that has this render inboxes messages form so i'm updating it with either a new form or the current form with the current messages errors so something like this it too it's broken all i did is uh again i've added a unique div id here then i say if the message has been saved the update this div again with the partial inbox messages and if success they are rendering a new part you'll get a new message or they're rendering the errors for the current message so this is working let's uh save our changes i will say get status hit add all get comment main turbo form to create messages inside inbox okay and actually now we can possibly even remove this new view for our messages let's try doing that i will go and delete then go into measures controller i will go and delete the action and in our roots i will remove new so let's see if it works now now this link to new message doesn't exist anymore i'm just removing it and what do i have so here i have the form for a new message that has been rendered and if i get any errors they get rendered on the same page so i don't need a page refresh and i've totally removed all the views all the separate views for our messages so messages respond only to create and destroy at the moment okay looks good so let's say stable skip add all git commit main remove view templates for messages okay and now let's add some more turbo so here you see when we add a new message i press create for example okay it doesn't create because i don't have the server running so i press create you see uh messages seem to be added somewhere but they become visible only if i make a page refresh so let's uh add the newly added messages to the message list right here and let's also update the counter now let's start by just updating the counter so here we have this message count and how would we want to render it we can actually give it a unique id let's say div id equals message counter inside i will put inbox messages count and we are going to also update it whenever we uh save a message so we will say to the stream and we are going to add a few actions inside this render toolbar stream we are going to have to stream update new message and we are going to also have turbostream update and we are going to update this div id not for the partial but with the html for example let's say for example hello world and we don't need any locales here let's see if it works so i create a message yeah i should have added a coma here so between this toolbar stream update and between this two boost room update so let's say i create a message and you see it was replaced with hello world and i can try to replace it with the the updated calendar so i would say inbox messages count for example let's uh see if it will work without this html line so i will refresh i add some text and you see it gets updated so looks quite nice and you see it is on a separate line in this div so we might want to say spam not div let's see and you see whenever we add a new message their counter gets updated looks fantastic in my opinion let's save the changes get status get add all get comment main update messages account then message created or oncreate okay and now we're just using the basic turbo streams inside the controller and let's also actually add the message to the messages list and let's uh yeah let's see if it works for us i'll start the server once again and i'm going to add one more tube stream action so i will say turbostream turbostream.prepend so we have the actions as prepend append update delete and so on and prepend would add the uh a partial or something on top of a list so we're going to add a new message on top of all the other messages i'm going to prepend they're going to prepend to the id that is going to be now actually this partial doesn't have this collection doesn't have an id i guess let's see i'm going to inspect element so this message has an id but there is no idea wrapping all these messages so i will say div id [Music] message list okay message list on messages list doesn't matter much so we are going to prepend to the message list we are going to use the partial that will be inboxes messages message and the locales are going to be a message will be at message i think something like this should work okay let's let's try it out so the expected behavior now is going to be that when i add the message it will be added to the top of the list i press create and you see the message was added to the top of the list fantastic so you see without any page refresh i update just a few separate parts of the page with a turbo stream i update the message count i [Music] re-render the form i add the message the messages list looks very good to me let's save the changes so get status and get add all get comment main add message to list on create okay looks very good and now let's also handle the destroy behavior so go into our messages controller you see we've added this render to the stream inside our create action we'll do something similar for destroy so here we have render respond to format format html and we are also going to respond to the format toolbar stream and we are going to only have something like tuba stream dot destroy or remove actually made a few notes about it yeah we would just have to stream remove and the record so to stream remove a message and you see for remove we do not need the anything else only like the stream remove message let's see if it works so i will yeah i will also add a timer to see if we are refreshing the page i will say equals time dot zone dot now okay now i'm going to destroy this inbox okay i forgot an end statement somewhere so i think here oh yeah actually that is possible we can also do pluralization here that's what we'll do next but first let's finish with the destroying so i press destroy and you see messages are actually being destroyed and we don't refresh the page so you see i've destroyed the nearly all the messages i deserve them all i've destroyed all the messages for this inbox and they didn't have to refresh the page but you see there's another problem the match such account was not updated on destroy so let's also fix this i will uh also update the message count in this case so here we have to stream update message counter yeah and let's just fix the indentation a bit so that it doesn't spend too many lines okay now i will refresh and try to destroy a message and you see the messages count has changed looks nice get status and hit add all get commit main update messages on inbox page on destroy okay and now you see uh we've added quite a lot of turbo logic into our into our controllers and we don't have to actually keep it all in the controller if we can also add a template so a template that would be for example destroy.stream.erb let's try doing that so here we have our messages controller our messages inside the views let's try adding a new file that would be destroy dot turbo stream dot erb okay and uh i would try to move this turbo stream remove and update into this uh destroy the stream dot erb so i would say equals turbo stream dot remove add message something like this and equals turbostream.updatemessagecounter so this is in an in attubastrum.erabittemplate and instead of rendering all this we can just say format.string so form a toolbar stream should find a template named destroy.stream.erb let's see if it works i will start the server once again okay uh let me try to destroy a message and it's working so you see we can use this uh template destroy tubo stream erb and it would help us clean our controllers and have them a bit more skinny and we know where we keep our stream logic for this specific page so let's save the changes get add all git commit main try using toolball stream dot erb template okay and alexander also says that there is a tiny bug so let's see we create a couple of messages and i refresh the page and you see the order has changed so they are all ordered in some strange way by default uh they are ordered yeah let's actually add the let's see what the order of the message is are let's uh say equals message created at let's see when the message was created i will copy this creation strf time from our inbox and say message created at actually i don't need the sdrf time that much here so they are all ordered uh nearest first i guess let's try i will create a new message yeah so anyway we need to have some kind of order i want to have the newest messages on the top and now you see i've added this new message i refresh and you see the newest message is on the bottom so i want to order them as yes thank you alexander created at the descending okay now we can actually try doing it in the model so there are a couple of ways of doing it we can do it in the view so collection inbox messages created at sending we can do it uh inside the inboxes controller so for example inside inboxes control we can say uh in show messages equals inbox messages order created at descendant but we can also do it as a default inside the inbox controller so here we have has many messages and we can also say something as uh lambda odor created at the sending something like this let's see if it folks messengers coma okay and even your [Music] message and you see the new ones are on top if i refresh the order is persisted so we've added a default audi inside our model and i think it's like something that is really cool being able to add this default to order to associations in a model but we should also sometimes be careful with the adding all these default orders because they can lead to some unexpected behaviors so let's save our changes get stable skip put it between our message so i will just save this one get comment main default order for messages inside inbox okay now let's actually style our message a bit okay it says that there is a connection problem let's see okay strange i seem to hear myself or not yeah there seems to be some connection problem let's see okay seems to be working for me anyway let's uh try to continue so where was i yeah i wanted to do some basic styling for our message partial let's see here we have the body inbox whatever we don't need the inbox uh visible here because we are already inside an inbox let's go to our message post shell i will the id and the inbox okay we have the upload we have the score we see who created the message let's do it in a similar fashion as we have inside our inbox so we have buy and then it was created message.user.email message created at ok so we have the content of the message we have the upvote we have the score we'll make a break here by the name of the user or the email of the user when it was created let's actually also add the time so [Music] i would add the h and m like hours and minutes let's maybe edit on the end okay so we see then an inbox oh when a message was created and here we have the full list of messages so looks uh quite foul but now you see i yeah everything seems to be working the update is working or is it not let me create another message it seems to me that there was some kind of small lag no there isn't let's see do we have anything strange in the logs yeah in the logs everything seems to be working fine so uh get at all get comment main uh simplify style for message main and let's see where before so yeah we've added some turbo actually i didn't add it to the list here so let's uh yeah let's make voting work via turbo now at the moment if i press up vote it will get a full page reload trails us so i press upload and each time i have a full page reload i don't want the whole page reload i want to be able to upload on many without jumping the page and adults loading the page and let's do this so um how are we going to do it let's go to this upvote action in messages controller and we will say that it should respond to respond as a turbo stream not respond as a redirect to inbox and we can also simplify this logic a bit let's move this logic into the model so i will go to our message dot rb and actually i've done something really similar before and another application let's go to vaishmirov super rails in this application i've added the [Music] nice voting to our posts so go into controllers models for post here we have the post controller and here i have this upload action for example and i just say pose.upvote by current user so let's copy some of this logic into our application here i'll just copy this upload and here we have our messages i will say uh upvote it will be message upvote by current user again we will still need to have this message equals inbox messages find params id then we're not going to run the vote.js erb because in this other application we are not using any turbo we are using js.erb files that do the same thing they replace something so if i go to posts here you see we have these files like vote.js.erb and we find the elements by id and we replace them with some kind of partial so this is basically what we are doing with turbo instead of having this dot js.erb files we are doing everything that turbo bay so anyway they're going to have an upvote action inside our message.rb let's have a look at how upvote looks inside our other application and here i will add upfield if user voted up on this message with the vote scope yeah let's actually add the vote scopes on vote else upvote okay so skinny controller fat model that's what we are doing right now if we're not going to run the vote.js.erb we can potentially want to render this flash but let's do it yeah let's actually try leaving the flash for now i'm removing all this logic and for now i will just leave this redirect to inbox in this step we are first of all not adding turbo we are first of all making valve with just the rail screwed so we have the upload action that we have just basically refactored we've uh moved the logic into our message.rb and the upvote is going to only either upvote or unvote on a message now let's say rails server and try voting once again so i will just destroy all the messages create a message okay you see there is some kind of stranger error if i refresh yeah for some reason there was still one message and now again it didn't update nicely so that does seem to be some kind of lag for some reason i didn't update the messages count yeah that's really strange why doesn't the message count get uh updated for some reason it stopped working let's see so inbox messages count yeah for some reason it stopped working i wonder why anyway let's come back to this fund later let's not work on two things at the same time i will see if upload works so here i press upload and yes the voting does seem to work but again we still have this full page refresh so for now what i will say i will say that we've slightly reflected the voting let's actually also add the download option if we want do we want to edit i think not now let's say hit status and get add all get commit main refactor uh voting okay and uh going to acts as votable there is possibly another thing that we need to do let's go to schema posts so here we have cached scoped like votes total and let's go to acts as votable gem you see we started adding not just uh on vote by or upload by but i'll also edit this vote scope like so we need to also update it inside our database we have the migration add the cached votes to posts and we want to add not just cached votes to post we want to add cached scoped like votes to the posts something like this so let's try doing that here we have cached votes and we want to have add cached votes as cached liked votes but we can also do this one a bit later i think it's spoken the way we have it now let's just focus on making turbo work for now so you see voting works they save the changes get status yes i did and now let's make it work with turbo so we're going to say respond to do format format dot stream we are not going to have this redirect to inbox and this format of the stream we will say do then we will say render double stream braces if you want to have more than one tuple stream but usually i add these braces and i will say double turbostream dot update and i'm just going to replace uh this dom id of this message so i'm going to totally replace this message with itself you see at the moment if i go to inspect element each message has a dom id why is it so because if i go to views message you see still from the scaffold each one was given a dom id a message so i'm going to update the message with the partial inbox messages form actually i'll just copy this update the partial inbox messages form locales message will be at message something like this let's oh it's going to be not form again copy pasting is not nice the partial is going to be a message so it's going to replace itself with itself when i add this action and we are going to update only this tiny piece of the page let's see if it works i'll press upload and it seems to be actually working but you see i'm using update and i get this weird behavior you see it gets rendered in itself so what if i say replace and it works well with replace so now i can vote without a page refresh and when i vote one time i vote up when i change the boat i just unveiled so it works nice and let's maybe also update the text inside the messenger vote button we have the button to upload and let's make this text conditional so we will have a condition like [Music] if current user voted up on this message we will have their unveiled let's just try doing it in the in the text and then do it inside the bottom if current user voted up on message we will have unveiled elsif current user dot yeah else it's going to be upvote in this case let's see if this gets updated at the moment so i press up it does not get updated for some reason i want to buy so if user voted up on unveiled let's maybe try once again so if current user voted up on the message we have the on vote else upload yeah that should kind of work anyway we can do it a bit later i will just leave it for later so for now i've already done it so that we can upvote or unvote on a message let's save the changes and get status git add all commit main voter with turbo let's once again see if we have any errors in the logs just in case i press upvote and in the logs everything seems to be okay okay so yeah we've added the voting with the turbo looks quite nice to me and let's just see there is another problem flash doesn't render so you see i do some kind of action like i create a message for example i see that the message has been added but i have no flash notification that message has been added why is it so because at the moment if we look at the messages controller we have this uh flash message as notice for example rendered only in the html format so we would also want to run some kind of flash messages with turbo okay so yeah let's add the flash messages with turbo and how we're going to do that so we already have a flash messages partial inside our layout here we have our layout application html let's actually move the flash messages partial under the navigation let's see how it works i will create a new inbox create inbox okay it is under the navigation looks a bit better yeah and let's make it so that it gets updated when i add a message how can i do that let's uh let's see let's go to our messages controller and we're going to also add flash for format turbo now we're going to say flash dot now the difference between flash something and flash. now is that flash now is going to be available only in this action not in the redirect so we will say flash now.notice and we'll add some text like message and we'll say message.id create it let's see if it does anything so i'll refresh let's say create message okay i should say add message i'm creating a message and you see nothing really happened so the flash did not re-render and i will add it as a turbo stream now so i will update the flash with the tuba stream and let's say turbo stream dot update then we will take our the id of our flash and does our flash actually have an id i think it doesn't let's go to our shared flash so the flash doesn't have an id let's add an did to the flash i would add it into a dom for example so div id flash okay and now we are just going to update this flash with the something let's see the partial shared slash flash and coma let's see if it works i create a message and you see it says message created i create another message and flash gets updated i go to another page and we don't have this flash because they have flash now but not just flash if i have just flash without flash null let's say i will create a message i get the flash i go to another page and i still have this flash so the difference between flash and flash now is the flash now is available only on this current action so looks nice to me this way we can add the flash to basically anything we want so here we have flash for notice created let's add flash for an error let's add flash now photostream dot update so yeah for the edit action if they have to re-render the edit so let's see here i will just have something then shown let's try once again i press create message okay what was the problem let's see i press create message and i must have made some kind of typo yeah i just didn't add braces here to be able to have a few streams let's make it like this i will add a message that doesn't work and you see we got this flash something ventral but you see it is a notice so i will say flash alert i pre screen once again you see i didn't even have to refresh the page it only refreshed the fro the flash so you see we have this flash alert something done from work so quite nice and we can also add some kind of flash for our destroy action so here we will have flash notice in message destroyed okay let's see if this works so we have former tuba stream and we can also add this uh tuba stream update into our destroy turbo dot erb let's go to our views inboxes messages destroyed to boost from erb we will also say so the tag to the stream update flash and let's try to destroy and you see it works let's also add the id of the message that was destroyed to see that it is definitely dynamic so let's add the at message dot id destroyed now let's try to destroy another message and verbs and let's also add this kind of flash for voting so i'll add this flash notice for upvote yeah we already have this flash notice floated so let's just add the flash double stream update flash let's see if it works so i will refresh i press up vote it works i press destroy so you see flash gets updated and i don't uh have to refresh the page looks good let's uh save the changes so we get status kit add all get comment okay looks good to me now let's uh actually simplify our flash messages a bit so you see we're using the same kind of uh code to stream update flash all around and we can move it into a separate before action and uh just have something like render tubal flash something like render turbo flash instead and just add this instead of this uh longer longer code everywhere so i would say something like render tuba flash and i would move this to the stream update and so on into uh into our application controller for example let's try doing that i'll go to our application controller i will say def render tube of flash here i would say tuple stream update and so on okay and let's see if it works so here in our messages controller instead of this line we can just have tube of flash but we still need the comb i guess so let's see if it works i press upload it works yeah it's broken so we can clean up our code a bit and you see it is something that we can use across all our controllers render tubo flash so here [Music] here and uh and it's fine uh do not change anything in the destroy to stream dot erb so we could say like run to flash here inside this stream update but it doesn't really matter anyway should be working well now so you see it's a kind of some spa single page ad behavior that we've got here no page refreshes for editing messages for creating messages everything is happening inside an inbox get status get add all get comment main abstract common turbo behavior okay and now we haven't run bundle execute robocop for quite a while so i think there are some things robocop can improve in our controller especially this control that we've been working on for so long so let's say bundle exec robocop and there are quite a lot of offenses so let's first fix the ones that can be fixed just as cosmetic changes okay now let's run bundle execute robocop okay so we have please specify an inverse of option inside inbox.rb let's actually save the changes that were done automatically by robocop and then fix the other ones on our own let's have a look at the diff so again cosmetic changes here and you see it changed the syntax not referrer but referral i hope i hope it doesn't break anything let's say rails request referrer yeah so it's fine to have referred with one letter o okay then messages controller so again it's all cosmetic status the message model cosmetic change and inbox policy also a tiny cosmetic change so get add all get comment main robocop auto correct and now again i will run bundle execute trouble cop and fix the errors that could not be fixed automatically so inside inbox.rb we have this specify an inverse of option so we have dependent destroy and inverse of inbox yeah so nothing really special here inverse of inbox let's say bundle execute trouble cop and this arrow is not present anymore and now we have maxtrix method length metrics abc size too high inside our messages controller so it says that our controllers are too fat well actually this does look like quite a fat controller so we can decide to clean it up now we can decide to do it later we can decide to do nothing we can like say that robocop can ignore it and yeah actually something i would just want to leave for later i just don't want to deal with it right now okay again bundle execute robocop nothing to change get status so get add all get comment main robocop add inverse off okay push and let's see if the behaviors also work on heroku so if our turbo works on heruko so rail server oh actually i'll just go to haruku and try adding a few messages so here i have an inbox i will add their first message so what video do i want to see turbo um device great message uh i'm not sure if there was a page refresh or not but looks fine for now let's upload yeah so seems to be working well let me yeah that would maybe also want to add the editing functionality with turbo for now it's not working with turbo for editing an inbox but anyway it seems to be working okay on heroku for now and going back to this uh small problem i had with our messages where i wanted to change this button to behavior let's [Music] change it to something like button2 upvote inbox message then would have something like method patch so no changes here and i will just add a block so do and and i would have some conditional text so i would have some like message dot vote voted by current user and we would have something like uh unvote or fold let's see if something like this would work so the point is i want to have the button updated automatically okay this does not work i should add a coma don't have voted by let's see voted by now how do we check if if a user has voted for a specific [Music] message user voted for comment okay the same analogy i can use current user dot voted for message something like this undefined method id for unvote stream okay uh doesn't matter that much actually i made some notes on this one too beforehand so let's just see turbo so turbo type content no increment like account maybe the other one button to update status so we are going to use this phone okay doesn't matter i don't want to focus on tiny problems uh right now i can do it a bit late i get clean ft get reset pod get status push let's see our main branch on github github josh marov ask demos okay so we are up to date let's actually also add the link to herrukusdemos.com so i will add it to the description of the repository save changes okay and let's actually see what we had the in our master plan for the application so yeah let's also make it so that we can select a color for an inbox that's something i wanted to do so some basic theme in each inbox can have a different color and we are going to save the color in the database and we are going to add an html empty n color picker so input type would be color now let's say rails input type color and we can really use just color field does it truly work well let's uh let's see i'll go to new inbox and just make the name a color field i'm going to the form i will add the form color field name i'll make it form yeah and we can select the color looks cool so let's uh try to add a color get status get uh and i'm going to add a color attribute to our inboxes table so rails generate migration add color to inboxes color stream okay let's have a look at our migration so add color to inboxes color stream uh null can be true or false can it let's say no false and default and i wonder how are the scholars actually saved are they saved as hex or rgb or how they saved let's uh let's see let's say i will save railsdb my grade rails tp migrate okay i've done the migration now i will start the server i'll make it so that we can persist a color in the database so go into inboxes controller we have permit name we will also permit color then i will add this form color field color let's uh save it so i'm creating an inbox with a color i'll select one of the colors create inbox and let me display the color let's see how it was saved i'm going to inboxes inbox and somewhere on top i will say equals inbox.color and i will see how it was saved so it was saved as such a code it's a hex color okay so we're going to add the some kind of hex color by default let's uh add some kind of default color what is the color of our application it's going to be some kind of like yellowish or orange color so let it be this color for example it's going to be the default color in uh our application for all the inboxes let's say get status rails be rolled back now in the migration it will be will be just color it's going to be theme maybe let's name it as a theme or theme color let's make it theme color stream now false default is going to be this color let's also say add theme color here in the migration and here add theme color okay now i will run the migration again rails migrate and now hello pilot hello pilot okay so get status let's see i can now open any inbox will have not the color but theme color okay so theme color also in the form also in the inbox view let's refresh and it works let's go to edit we have this color let's see if it gets saved and displayed nicely in the edit it does so this way we can edit a theme color for our inbox looks pretty nice in my opinion so let's try to override the the color we have the class scaffold record let's also try adding a style style background color will be let's say green let's see if this would work style let's say color green we have a class we have a style let's say css style color or let's say css style background color so for some reason it didn't work for us just now okay yeah i just should have changed this index okay so the color is green let's say background color so it's green for us and let's make the background color the one we have in the inbox theme color so like this and it seems to be working okay now i will edit the color let's make it uh like this for example update color and it's working so yeah this way the users the creators of the inboxes will be able to kind of add some basic branding to their inboxes with the selecting their color now it still has a lot that can be done in terms of styling but this is a good start in my opinion let's just try going to any other inbox you see all of them now have a default color now looks actually a bit ugly but it's a good start i'll just make it in make it span a few lines so that we see all the styles that they are applying okay so looks kind of fine let's say get status hit add all git comment main add theme color to inboxes get and we've done one more check so we've added inbox color theme selector actually i've kind of done the same thing twice here i'm going to remove one of them so inbox color theme selector moving it to the down column and what else do we have so rack attack so that uh lots of boats cannot sign up or lots of people from the same ip address at the same time then we're going to add some captcha so that bots don't sign up to the application uh device confirmable for users that are signing up with an email to be able to know that these are real people real users um photo on the bottom yeah that was um [Music] a branch by alexander so with this function but uh i would like to test it on my own once uh again and and understand the code a bit more before i do it but basically calculate latent the height looks kind of cool okay then i will also add the add cached vote to a message table not just though it's something i can do later on so capture device confirmable foot on the bottom actually it's going to be interesting to try adding the omni auth to a rails 7 app in which we were trying to add the device in a quite hacky way so let's try to do that let's try to add github omni-off and it's going to be quite fast i've done many times and i've already created some notes on how to do it so let's see social looking with github i'm going to install the gem omniauto github and csfr protection to make omnial 2.0 work bundle ok then in device dot i'd even need to add our keys so device dot rb github so here we will have app id and app secret let's go and get them i'm going to go to this url okay i'm going to yeah it's the same as going to settings developer settings new github app it's actually not a github app no it's something different i go to developer settings or out of app and here i'm going to add a new for author app so i will say ask demos the home page rule is going to be askdemos.com this one then they're going to have a callback url that is going to be slash users auto github callback uh ask and the vote trade inboxes let users add messages and vote let's also maybe try adding a logo or actually i don't have any logo quickly available so we can do it later on yeah now we have this client id i will add the client id here and we will need to get a secret key i will generate a secret key also add it here but it's not a nice way to keep our secret keys so i will start using rails credentials i'm going to go and say editor vim rails credentials edit escape enter set paste okay set paste i now i'm going to say we're going to have this key so we'll have omni auth then we will have github then we will have id it's going to be this one and we'll have a secret that will be this one okay and let's uh save the path it will be rails dot credentials dot dig then we will have uh omniauth github and then key or oh id or secret i escape this time wq to exit and save let's just see okay work now rails console i'll see if i can access these keys let's see rails credentials dig okay it should be rails.application.credentialsdig and it works rails.application.credentialstick let's run it two times so we get the id now we can get the secret and we will say config omnial github coma and we will have this key and this key so we'll just need a coma here okay so this way we've obfuscated with hidden the credentials for github id and secret and they won't be just available to anybody on github exit with status so we've installed on the oauth we've added the callbacks we've added the api keys now we'll need to add the authentication behavior so i'm going to go to our roots dot rb and here we have device for users we will say that we are using controllers and we are using omni health callbacks as users omniult callbacks okay so we are going to create this uh controller we are going to go and create this full path we are going to create the folder users inside our controller and inside a controller named omniauth callbacks controller okay now uh again we're just going to add this uh omniout behavior so we're handling only after with github only for now then handle authentication so if a user is present from the omniauth then we log in otherwise we do not and redirect to the new user registration url with an alert user errors full messages okay and we have this user dot from omni out so we need to add this from omni out inside our user dot rb let's go to user dot b and we are going to add this uh from omni author method and we also need to add the omni altable so i'm coping this good that i've done it before i'll add the relationships on top okay so omni audible omniout providers github from github so we find the user then the create the user if there is no user present and we can conditionally update some data from our users github page but for now we don't have these columns so let's just create a user if it's possible okay i think it's uh all we need for right now to be able to log in with a social provider like github so let's see it doesn't work omni authorable syntax error okay again it's a problem of copy paste i forgot a comma here rail server okay let's log out and the login i will select sign into the github found authentication passchrome why is that because we might have the wrong link let's go to our device views we have links and we have this link to sign in with omni of something method post and i think it should be button too let's just confirm i've had another post recently about uh omniauth and and here i was still using an old version i guess so i was using link do not button tool so we'd have button to sign in method post not linked to but button2 let's see if it works rails server going back i press sign in with github does anything happen nothing happens so i will try adding data turbofalls i will refresh press sign in the github and it's kind of broken but you see i get this page you looking for does not exist because i'm trying to redirect to the production from a development environment so i will want to have separate github login for development and for production or actually for right now i can first try just making folk in my local host so i will add the localhost url here and here update application now going back signing this github and it works so authorize and fantastic i managed to sign in with github in a rail 7 alpha application and there wasn't much magic just i had to change link 2 to button 2 and save data turbofall so that we actually definitely get a redirect to the page that we are expecting okay so let's save our changes get status hit add oh we'll get comment main sign in with github and let's also add a few github fields so we will know that we've signed in with the github we'll see the logo of the user and so on so i'm going to add the align as trail generate migration add omniout data to users name image provider uid let's add this and here i have add omelet data so the name that the user has on github his image his uh so the provider is uh github it will be either github or facebook or whatever the online provider we are using the uid is going to be the unique id of the user on github in this case so let's say rails the beam migrate and going back to our user.ob we're just going to say that we want to save these attributes whenever a user logs in so whenever a user logs in we update the name image provider and uid again rails server i will log out now i will again log into the github okay and uh let's see if we saved these attributes i will go to rails console user got lost and here you see i have the name the image the provider's github and the unique github id so works quite well now let's display these attributes and i already had some code ready for this so let's go to our navigation here we have our navigation and somewhere here we will add the the user data so link to inboxes new inbox if signed in we have the email let's uh clean it up we'll have the image we'll have the name uid and provider let's try displaying all of them okay so i've logged into the github i see my github id i've seen that i've logged into github my github name and my github my github avatar okay looks quite good let's try logging in with the user that is not logging in via github so a regular user let's sign up okay and you see i don't have all of those displayed so works quite far let's save the changes get status hit add all and get comment main save data from github on log in git push and it push main and now we've added github social log into our application so that user doesn't have to invent a pass folder a password confirmation remember it's somewhere he'll just be able to log into github if he has a github account and we see we have one user that did log in with the github and actually that we need to do is have a separate application for github in development and production because here you see uh with this url nobody will be able to log in in production with github so for now i'll go and say i'll go to the application askdemos.com yeah it's still been pushed too that's why i cannot open the application i guess okay so i will copy this back and add this url here and here hello sunny nice to see you so approximately 20 minutes ago we've added a lot of turbo to make it look as an spa on the inboxes index basically if you go to inboxes and yeah let's log in so i've logged in i can go to an inbox i can add a message and you see without even a page refresh i update the flash i update the messages count i add the message to the list and the cool thing is that this happened without a full page refresh only uh some partial things have been refreshed you see i vote and only the space of the page has been refreshed i destroy and it's happening without a full page refresh so this is the power of turbo so i've just added the social log in with github it's working okay and uh what do i want to do next let's have a look at the master plan so i've added the github omnioff and this will be something much later than amazon says emails in production will have to be added right after we add the device confirmable for users that want to log in with the an email address then plausible analytics to see how many people visit the website let's actually try adding this one let's say plausible io so he already have uh yeah just this week i've added track and uh bit plausible to my blog okay francisco i just wanted to thank you thank you for your tutorials lessons i lent my first job as a road developer wow francisco congratulations francisco i'm really happy you know uh getting your first job as a developer is always the hardest but as long as you're already in the system it's going to be much much easier so congratulations francisco okay so i've added plausible analytics to my blog and now i will add it to this website let's go i will say askdemos.com autocorrect i don't like you add snippet now i'm going to add the snippet inside the application.html.erb i think in the head and i will add it if the environment is production so if rails end of dot production just in case so that it doesn't work in development okay let's uh confirm that i've got the right syntax here rails console and say rails and production falls or else development true okay so this syntax is correct we can leave it and say get status get at all is there anything else we need to do so waiting for the first page view and get status get the comment main add law visible analytics get push and push to heroku now i am not going to open the rook application on my local device now i'm not going to refresh it i will wait for somebody to be first to visit the application it'll be interesting or maybe yeah maybe actually i should just to be sure that the analytics is set up correctly anyway let's see who is first so basically if you go to askdemos.com i should be able to see that somebody is visiting the website at the moment from here wow somebody did who was it please comment okay let's see the country it was from the it was from the united kingdom cool so plausible analytics is working i see that somebody visited the user's sign in page two page views so the root path and users sign in yeah that's really cool so plausible analytics is working let's add it to the dom folder okay and what else do we need to do folder on the bottom we'll do it later we'll morphic comments later log and thumbnail i don't have them ready available at the moment so later then fix faker uniqueness random user for message this one has been fixed so oh hello tom yeah yeah that's really cool so tom was the first and i might be the second so is it updating or not it might actually know that it's me visit him so not update if it's me oh recurrent visitors cool yeah plausible is actually really cool and how you see it doesn't uh show a thumbnail of this website because i didn't add a thumbnail here so i will need to i'll need to add some kind of thumbnail to the application and i have it in there to do so to add a logo and thumbnail then capture rocket deck device confirmable amazon sas and actually what if we make what if we add a canvas board into our application so here for example if you go to inboxes so for example uh an owner of an inbox will be able to categorize messages so each message will be able to have a status a status can be for example uh like new message than uh a message that was let's say reported as uh spam or uh blocked whatever for example somebody says something some profanities then like to do for example if it is a user feedback kind of application so for example you're building an application and the users can submit features that they want to have in the application and you can uh show that this idea is in uh to do this one is done so yeah we can add the message statuses let's add message statuses and also update the message based on the status let's say git status rails generate migration add status to message status will be a stream yeah 19 page views that's a lot inbox is pricing you see i see everything we have uk poland okay so real generate migration let's look at this migration of status so state of stream default uh we'll say null will be false and default so incoming on you that's a new message so a message that hasn't been let's say reviewed by the host of the application or the host of this inbox yet so this way will be easier to see and categorize the messages that are in common and again like the whole idea of this application is that i i got for example a youtube channel and people who viewers can submit ideas like video ideas into this inbox and vote for these ideas and i'll be able to say like okay i'm doing this one i've done this one i am not doing this fun so here i've already created the first inbox what videos would you like to see one video durable plus device i've added a vote now this doesn't look beautiful yet but i'm going to improve the style so default will be in u but [Music] i will want to use some enums and in a num it's not called have [Music] the word new so the new is used by a controller action and we might have some problems so i will say something like incoming or not view not seen like let's say incoming default in common rails db migrate okay we've done the migration and oh my god so many windows let's just close all the windows that we are not using at the moment let's also add a button to change the status of a message okay let's go rails us okay let's display the status of the messages in the posture let's go to inboxes messages message and let's display the status let's say equals message dot staples and here the status is incoming for example let's add some kind of uh style so b actually is there any difference between b and the strong html b is strong that strong element is for content that is of greater importance while b is used to draw attention to the text okay make sense so this is just going to be inside a bhtml tag okay and now let's make it so that we can change the status by clicking add button and it will also work with the turbo now let's uh start by maybe adding some functionality without turbo and then we add like responsiveness with turbo that's the way it should work so first we just make it work with the regular crude and then we add turbo just as a tiny sparkle of responsiveness so here we have the message status and uh we would be able to update the message status to something else now what are the available status is going to be we'll have something like uh as i said before in common then we would have to do and done and we would have spam for example so four options for the beginning let's add this inside the model i will go to message.rb and here we can add an anom now how do we add an nm i really don't remember let's go and see anon see again go into my blog it's not located to google it's fine to go to stack overflow but here i've already got a lot of notes on my blog and it's a bit easier for me so i would go and say enough status and would have in common as in common to do as to do done as ton and spam as spam so why am i doing this way uh because uh i want to save the string in the database i don't want to save an nm as a number so if i did noms differently would have like draft bounds reviewed to or whatever so we want to save it as strings in the database we have four different statuses let's see i will start the rails console and try to see if enums work so i will say message.first dot spam and it says false and let's say uh dot incoming says true let's say dot spam with a ban and we make it the spam so this kind of works in the console we've added the anoms and now we can actually make some action add an action to be able to change it in our roots controllers and views so we can also actually have a different color for different statuses so we would maybe have a different color for each status inside a helper i would go to helpers inside messages helper i would say def for staples color status okay and i would say van then in common the color would be let's say blue then then what do we have then to do the color would be orange then when done the color would be let's say green and then spawn spam the color would be red let's see if this would work yeah alexander so at least what google tells me like strong and b both make sense but strong is of great importance and b just highlighting something inside the text well anyway let's let's have another look at the b yeah so both of them seem to be kind of uh valid okay so here we are going to have different colors and let's try to display the status color so i'm going to a message and i will say equals status color and i'll say message those tables okay so i might have written the one statement incorrectly okay let's see maybe i had something similar before okay maybe it should be as a symbol not a string okay maybe i forgot to say case status yeah so case status like this okay and here you see blue and blue now let me change well yeah it's kind of broken not super beautiful but to kind of make sense so we've added the status color helper and now we're going to add and wait to change the status so i'm going to have a button to yeah let's actually try to have a list of all the statuses i would have message dot statuses here are all the statuses and i will say dot each do status and i would have a few different buttons and so measure statuses each those status and here i would have a button two status so i would like make the status yes nikolai hi nice to meet you indeed i forgot this case one okay so button to status it will be the name of the status then we would have some action so here we had upvote here would have something like change status then add inbox and add message and method would also be patch okay so it will be a button to change the status okay now i'm going to the roots and the root that i'm going to add is going to be change status so patch change status get status okay i've added the root and i need to add this action in the controller so go into our messengers controller i will add an action named def change status again i will find the inbox i will add the flash notice and i would have an action as message dot message.something now let's see i might have already done something like this before and nom i might have already done it with a nom and have some kind of fancy way of doing it yeah so it would be just update status with the params possibly let's say message.update status with the params status okay and let's say redirect to add inbox and we're going to have this flash node stem actually in this upvote we don't want to have flash notice won't thanks for sharing your knowledge i'm neutral hello gurav nice to meet you okay here we'll have flash now here i will say status changed status changed from param status to at message.status to the new status okay so we find the message we update the message with the status that they pass in in the params we have a message that the status was changed from one to another we will direct back to an inbox and let's have a look back here so button to status change status and uh do i pass it in the params here yeah here i do pass the status in the params so [Music] will it work this way or not status as status let's refresh and see adding phone work wrong number of arguments so what if i actually make it in a slightly different way i'll go to rules change status uh hello victor yeah so i fixed the heruko basically it was a problem with my local environment that was set in the wrong version of turbo and what i had to do is delete the turbo from my local environment and re-install it once again and the error was fixed so going back i made a small note about it yeah so a couple of days ago there was this tuba rails gem version was yanked so i had to uninstall turbo in my local development environment and reinstall it once again and everything worked perfectly okay so yeah where was i i want it to have change status inbox message path let's try this way equals button two status then change status inbox message path then i pass add inbox add message and status status and the method patch let's see if this one works going back okay no root measures actually change status controller inbox messages did i make a typo somewhere patch change status and we have button to status change status inbox message paths inbox message oh yeah i should say message without this ad let's try once again and yeah we have these buttons but you see they don't look really nice let's say we'll just display the key status dot key or status.value it really doesn't matter let's say status dot first or let's say statuses dot keys like this so here we have the keys and status dot capitalize okay looks fine let's just add some kind of break between the button to vote and the place where we update the status so here we have the statuses the status isn't common the color should be blue and we have four buttons to change it let's uh try doing it so moment of truth i will try to change the status from incoming to spam status changed from spam to spam yeah anyway that's good that's uh working well for us we can just i mean this one isn't so important let's say status for message let's say message dot id updated to spam let's say status from message and the message status so i will change it once again you see the spam android i go to done okay undefined the message i should get add message here so we have done green i press to do orange so looks kind of fine we have these buttons working without turbo now now let's save our changes and make them work with turbo get status get add all comment main add status to message okay now let's add a tiny bit of turbo to make it work responsibly responsively and we're just going to say flash dot now not to have it on the next page then we're going to say respond to the format to the stream and they're not going to have the redirect anymore and they're just going to re-render this partial so again i will try to do it i press done and you see if we don't have a page refresh and we are changing the status and it uh updates so i press spam oh you see it was changed to spam done and so on and we don't have a full page refresh so this is the magic of turbo that's working perfectly in the application now okay let's uh save the changes get status and you see we didn't have to do anything else in the views we only updated the controller response okay so get stable so you get add all yeah i just made it to span couple of lines so that it is a bit more readable get comment main [Music] add turbo for updating message status get push and get push heruko main and in a moment you'll be able to go to askdemos.com try to create an inbox or let's say create an inbox like uh what would you like to see in this stream you can select a color create an inbox and everything inside this inbox is acting as an spa so let's say i add a message and without a full page update okay you see it is updating because i just pushed to heruku so it run heroku restart so yeah but now basically everything should be happening as uh nsp so you see i add messages i get the flash updated i get the messages account updated i get a message added on top of the messages list or you see i get something been shown without the full page refresh then i can change the status you can see again i don't have a full page refresh i can upload a message or download without a full page refresh or i can delete a message and the page isn't refreshed it is just removed from the list so this is the magic and the full fantastic power of turbo streams and you see for now we've just used only turbo strings in the application yeah i will share the link how can i share the link oh hello ahmed nice to see you here how's it going power of turbo streams okay so let's see what we've gotten plausible we had four unique visitors already success okay so going back what have we done we've added the color let's say add color uh yeah we've added inbox scholar theme and now we've added status to messages actually we didn't have it in our to do but we've done it okay and then i had a small thing that i was trying to fix before let's see maybe i can do it quickly now so if i go to a message you see even if i have upvoted on a message i still still see this upload text so the text is not responsive yeah happy to see you ahmed okay so let's try updating this uh text once again and i had it here in our message partial so we had button to upload again let's uh make it work as a block so button to upload do then we'll have an end statement and for now we'll have just upload one to three okay so it works as before and now we'll have some conditional text here so i would say if current user dot voted up on message without scope like yeah that's what i forgot initially then we will have a on vote else will have up the vote and an end statement here so let's see i have on vote and upvote and the looks quite fine so let's save the changes get status get add all get comment main uh change voter text based on vote status git push now you see the whole thing here is that i've added those scopes here so i vote up or down with a vote scope like and here then checking if the current user has voted up or down on the message previously i forgot to add this vote scope to the query and that's why it didn't work nicely anyway it's working now push main okay yeah i'm quite happy about it let's see so we've added omni author if we are not going to do this anymore so we've got a few inboxes and they all have different colors yeah i see dom created an inbox also cool nice to see you dom yeah cool okay and now based on the status we can also let's say change the color of an inbox oh i mean of a message so similarly to what we did inside our inboxes let's go to the inbox here we added the style background color and we'll do the same for our messages so class scaffold record and style background color it will be a state of scholar message status let's see if this works i refresh and now i change the color and you see without any page refresh the whole partial gets with the correct color so the responsive behavior looks even nicer now fantastic now i can change remove the status color from here i don't want to see the message status here or not well let's stay for now but basically what's the color of the incoming messages let's make it not blue the blue is very harsh on the eyes let's make it gray for example okay so gray is in common to do is orange down green spam red so the colors of a traffic light let's save get status skip add all get comment main change message color based on status message partial color so added some more responsive turbo behavior to our messages controller you see it's now if we go to our messages controller we've got quite a lot of turbo in each action change status upvote create both cases of create and destroy so each uh non-private action here has a change status and actually see we have this message inbox messages find params in a few places so we can move it to a before action let's say before action set the message and i will go to private and say def set message and move this here so message inbox messages find i will also remove it from the upvote action and i will set message only i uh change status and upload okay it should work as before again it's a bit cool to write some tests for this application but we can do it later on so works just as before and we've just done a tiny bit of refactoring hit at all get comment main move refactor messages controller now let's run bundle execute robocop okay these are a lot of offenses but style frozen string literals or string literals this is uh just cosmetic so i will say autofix and all of them have been automatically fixed and what do we still have so we have our messages controller change status is still on upvote is still on let's have a quick look at them so it is again because of the formal tuba stream then let's see messages controller too long because of the tuba stream format yeah good idea alexander it would be possibly better to change the color only of of the title of a message for example this can also be done okay so consider placing case van with a hash look up here i also think alexander said this at some point on top let's see yeah better to use hash and select by the key okay but i won't be doing it right away actually i would be super happy if you alexander or somebody added a pr with this uh change to fix this robocop casement in okay get status if at all main robocop auto correct push and let's see what else i wanted to do to launch the application mvp anyway the functionality already seems to be quite nice but it looks quite ugly so we have inboxes we can create a new inbox like the color and name again why do we have the color in line with the name it's kind of awful let's go to our inboxes form we have the label for name and i will have a label for theme color and it's going to be in a separate div class field let's see rails s okay so this makes a bit more sense now a message has a name a theme color oh i mean an inbox to edit an inbox we still need to go to the edit page now i think it's fine we don't have to have responsiveness everywhere but we do need to have some on the client facing page like these inboxes okay looks fine so let's see what else we had in the to the list device confirmable amazon sas rack attack some kind of capture yeah there's a few things we can actually do now so let's try adding device confirmable and set up emails in the production now how do we add device confirmable okay no it's not the guide i wanted maybe i'll go to visit original url okay this is good so i'm going to add confirmable to user.rb yeah and i will also add a user page so a user id page so you'll be able to go to your own profile and we will add the ransack for inboxes and the messages so we'll be able to sort messages we'll be able to sort inboxes and we can do this with the turboframes for example then we can add disappearing flash messages yeah let's uh first of all start with adding disappearance flash messages okay so how can we add disappearing flash messages let's add a stimulus controller for this and it would [Music] remove a flash message after some time i will clean up the views now i'm in the tabs get status yeah i can commit that later and now let's uh sorry go and add a controller i will add a javascript controller named for example like flash or disappear autohide controller now i will copy the behavior from another controller then i will say connect console.log connected let's uh see if this controller just works so i will edit somewhere i will edit for example inside our flash message so here we have our shared inside chat we have flash and here we have flash hd key value and here i would have defer data controller would be auto hide okay something like this and yeah whenever flash is uh rendered we would see that this controller has been connected let's see if it works trails server okay now i'll inspect the element go to console try adding a message and here you see auto hide connected so the controller does uh work well it does do what we asked it to do okay action okay so yeah now we're going to add some behavior i would say on connect we're going to set a timeout set timeout and it would be something like like this so this dismiss we're just going to dismiss the element and we are going to dismiss it in in let's say five seconds okay something like this so we're going to set a timeout on connect and dismiss the element and what is this dismissed going to do i'll say dismiss will mean [Music] this dot element dot remove something like this let's see if it works i will add a message and let's see if it gets removed yeah it did get removed so now we've added disappearance messages and you see it was just a tiny tiny sparkle of javascript let's add another message you see we have message created we wait for five seconds and boom it has been removed fantastic so i think we can save our success let's say get status hit add all no actual not all we've changed only these two files for flash to disappear and get comment main it is a pairing flash with stimulus git push okay looks nice with push main [Music] let's uh see what we had so disappearing flash messages we've and it's moving to done and now let's actually add some ransack so it will be able to search for messages to sort them by the creation date for example how would do we do it well let's start with inboxes let's add the ransack for inboxes on the inboxes controller let's go to controllers inboxes controller so we are going to add the gem ransack so github active record hacker real ransack now we take the jam ransack and add it to the jump file yeah thank you ahmed now i run bundle and let's see what's next so activerocket hackery ransack so simple mode yeah simple node is fine for the beginning let's go to our inboxes controller we have just inbox all it's actually awful i would always like there to be some kind of default order on the controller level but that's fine for now we are going to already change it so let's say inbox run suck inboxes q result okay let's see if this works should work so i have the list of inboxes and now i will add some kind of sorting so we have sort link for name for example let's go to our inboxes index i'm going to inboxes index and somewhere here we'll have sortling by name and by created app let's see so now we can sort by name and by created add so works and yeah that's fine let's also add a search bar to be able to type the name and see the result yeah ahmed so there are a lot of ways to make ransack work with hotwire depending on what exactly you want to do and we are going to try to do something with it now so again now we have just sorting let's also add a button to reset filters how can we do it let's say equals request dot query parameters let's see if we have any query parameters uh dot any you see we do have some clear parameters at the moment now we see true or false if i go back to the inboxes page it says false so we will have a conditional link to the current page if there are any query parameters it will be just a refresh link so link to clear search uh request both if request parameters any and what is request path let's also see what request path is i'll say equals request both okay so the request path is inboxes and the class search is going to bring us back to inboxes so it's removing our search or sort filters yeah let's actually leave the request for the request path visible for now okay so you see if we have any filters we have this class search now let's also add the an input form to be able to select a name so here for example i will add a search form name contains let's see if it works so name contains let's say s e d now i don't like that it offers me some auto fill so i will say auto complete off i think it will do the job okay how did i do it previously was it autocomplete off yes it falls let's see html autocomplete off yeah so this should kind of work form action autocomplete off maybe we should actually do it on the form level let's see uh autocomplete or fill it work or not yeah it seems to work if we edit on the form level let's see i'll go to inspect element and here we have form but i don't see this autocomplete of thin so maybe let's say input html autocomplete off let's see if it does anything okay let's just say html autocomplete off if this one doesn't work then yeah this one did well okay auto complete off and yeah it's the right thing to do so for now i've just added some really basic ransack now let's also add sold not only by the name and created by by the quantity of messages so by a child field okay how can we do it let's see so sort form [Music] is going to be a sort link and some kind of child attribute let's try adding a sort link [Music] and we will have something of modal attribute okay messages uh oh actually we don't need another attribute or we don't need to search by childs or by parents because we already have messages count so we have it in the database so sort by message count so we have sort by name by created add and by message count and also i would like to sort by uh ascending so from top to bottom on the default so default order is going to be descending let's add the default order here here and here going back i'll go to the inboxes so by default we sort from top to bottom and also let's add the some kind of default order inside our inboxes controller so inbox transact.order created at the sending so we will also have a default order okay maybe not here let's see if this works so yeah all of them will create it on this day but if we change the order then it works so you see on the first time it doesn't change anything because it is the order that we have by default but the second time it does change stuff okay so yeah we've added some basic ram side let's save our changes so we've updated our gem file our gem file lock inboxes controller inboxes index get the comment main add basic rand sack for inboxes get the push rook main and let's also save these changes in the form if we want dom custom date range would be a nice sort type tool yeah custom date range that's that's an interesting one that would be a good so too for messages so not for inboxes but to sort like messages between two dates i think that's a good one to add when i'll be adding run sector messages okay anyway uh what did i do here i get status so i improve this form a bit so get add all get comment main style inbox input form git push main okay so let's see where we are in the master plan runzik for inboxes and messages okay we have added the ransec for inboxes and it works without any turbo at the moment let's try adding a tiny bit of turbo so i'm going to the index page and i will try wrapping part of the page in a in a turbo frame so i will say equals turbo frame tag i will give it a unique id like search for example do and i will put this all inside the the block of this tubo frame tag okay let's start the server i refresh let's say i will go to new inbox back to inboxes and let's uh just track some things i will check the time so i'll say equals time that's so now i will have request both inside the frame and outside the frame and i will check the time inside and outside of the frame okay so let's refresh again going here you see the time is identical and the url is identical at the moment let's say i will sort by name and [Music] you see the time updates inside the frame but the time does not update outside of the frame and you see the url doesn't change so everything that changes is inside the frame let's see how it works i press inspect element let's go to network i will clean it all for some reason i'm using safari at the moment no idea why okay so i press sort by name and you see but i get basically i go to the controller so it brings me to the inboxes index controller it sends me back a response but the response the request type is a tube of frame and it renders only the stuff that is inside the frame so basically i send a request a normal request to the controller index action it sends me a response but in the response it on the page it renders only the stuff that is inside this particular frame so you see each time i get the inboxes as a fetch and i don't have a full page reload so you see the first time it doesn't change the time i press class search and everything is updated only inside the frame so looks quite nice again uh it is debatable whether you need this kind of behavior in your application or not uh if it is just some kind of uh basic list uh and you don't need to be able to access it without with the url then it's uh fine to use turbo frames and it can look quite responsive let's again try doing the same without a turbo frame so i press name [Music] and you see both times update and still it looks very responsive because turbo drive the child of trouble links updates only the part of the page that should be updated so all the other parts of the page still stay kind of static although we have yeah you see we still have the fetch kind of request so again it is debatable whether you do want to use turbo frames in this case but it's fun to try to sort records with turbo actually let's try one more thing let's uh input a name so i will search by a name inbox something i press search you see both times updated and let's uh make it responder so let's make the search form q html and uh let's make it work with the turbo so i would say something like data turbo frame search let's see if this for uh work only with the search thing so i would not want this time to change because this will be kind of a remote form that goes to this turbo frame oh i've actually removed the turboframe so let's add it back so refreshing i start typing i press search and you see the first time didn't get updated the first time did not get updated so we didn't have a full page kind of reload you see i typed this in i type something once again and you see the first time doesn't change but that the time inside the tuba frame does change so uh this way we kind of made the all the search and filtering on this page work with the turbo now another thing that we would possibly want to do is uh make it work as you type so let's try to do that for this we might want to add the an additional controller so searching for records without a page i'm getting a bit tired let's uh create a new controller it would be something like a search controller okay what have we got here okay let's actually do this later we don't have much time and i still want to finish at least most of the things on the to-do list still today i am going to release separate videos on turbo everything later on so i'll just save the changes get add all get comment main toolbox frame search for so ransack tuber frame search get push okay and what have we got on the to-do list that's still a must-have so ransack inboxes index with ball frames is done i can't believe you have been streaming for hours and 17 minutes oh neither can i okay so we still have a few things to do like ransack search on input or let's say turbo search whenever input changes on inboxes index okay now user id page here let's add the possibly a user id page and let's actually make it so that a user can see yeah more importantly let's make it so that a user can see his inboxes separately from somebody else's inboxes so uh what if we make a scope as my inboxes for example how can we do that let's go to our inbox dot rb or actually we can do it in the search or we can uh or we can do it in the user's show page or we can do it later let's do this later anyway i already have so many windows open for device confirmable let's finally do this rails generate migration at confirmable to device this is a must-have if we have log in via email okay now we are adding confirmable in user dot rb okay then we're going to add these lines so let's go to add confirmable device yeah we have to specify the migration version so it is seven you can use you can't use change okay then we don't want to update all the existing users with confirmed ad so we will automatically confirm all existing users now within url7 goodness would you stay away from as bundling and says bundling when using young and package.json so ahmed adian dig deep into css ngs bundling yet this is a good question and hopefully i will have a good answer in the next month or next couple of months yeah so again rail 7 is still in its alpha state and what i'm doing now is a bit experimental uh so trying to launch an application on rail 7 alpha there can still be a lot of changes so uh i uh i would be very on moving production applications away from young and web packer if you run any really business critical application uh on urban rails i would still consider using rail 6 yon and web packer but hopefully that in the near time will be we'll be having some good uh some good answers on the best way to use input maps or best way to use js bundling css bundling as you don't know yet okay so going back to device confirmable this looks good let's say rails it beam migrate okay we don't need to generate device views but do we want to change any confirmable behavior let's go to device dot rb go to confirmable allowed and confirm allow unconfirmed access for some days no confirm that then no confirmable true confirmation case email remember four it's not confirmable anymore okay so we're not going to change anything to the default behavior of confirmable in the device initializer and what do you want to do next so there is an after confirmation path option so after confirmation path yeah what if we do have a user profile and he'll be redirected to his profile or he'll be regular to the scope of inboxes that belong to him anyway we can do it a bit later so we've added confirmable and now let's try to play it out i'm going to start the server and create a new account log out register sign up not now and define local variable method unconfirmed email okay why is that so but we have this unconfirmed email yes we are using reconfirmable i guess um yeah tom is saying that depending on if you use television or something you need es build or similar you can use apply on or anything like that with input maps from how the television gem is currently yeah so as you see in this application i'm not using any external packages that are not rails or ruby gems yet but it'll be really curious to find uh the right way to add television but actually there's no problem with finding the right way to add tailgate because github rails there is already a repository named the television trails so it should be pretty straightforward to edit yeah anyway i didn't go deep into css bundling js bundling input maps yet it is a challenge that i still need to overcome yeah thanks don okay so we're going to use an unconfirmed email let's see we're confirmable true so we will add this column i'll say rails to be rolled back now i will add unconfirmed email and trails the beam migrate rails us okay i will just create another account log in or sign up not now okay a message has been sent if i go into my logs i see that an email was sent and if i go to this url now it won't work correctly for me because i don't have localhost i'm using cloud9 at the moment so i'll just copy this and add this line and you see your email address has successfully been confirmed so the device confirmable is kind of set up and hit status and get add all we hit commit main add device confirmable okay now i don't want to push yet because i don't want to push to heroku yet because they still don't have amazon simple email service set up on heroku so there is no way a user can actually confirm his account so i have added device confirmable and now i need to add amazon simple email servers let's go to amazon let's go to aws and get some credentials so um i said they have changed the layout a bit i'm going to go to the bottom and here i have uh create smtp credentials okay i see ahmed is saying at possesses needs john which you can add the it just using css bundling and yes bundling gems yeah ahmad i've actually seen the the wonderful pr that you've added to super rail so going to github by schmorov super rails i've seen this fantastic pr where you've added the tailwind and the it's just amazing so js bundling css bundling tube rail stimulus rails like a few things i was just not trying to add to this repository yet and the api is so massive and you've done so many changes i really just need to first understand how js bundling works and css bundling works for myself and then i i'll be able to review the pr and merge it but thank you so much i'm really looking forward to understanding first of all how gs and css bundling work and then merging the pr okay anyway going back i was going to create a new user for aws ses so let's create the uh ask demos stream create yeah show my smtp credentials please don't use them guys i'm going to change them right after the stream editor veeam rails credentials edit set paste i and here i will have yeah i already have aws so i'll have aws and here i will have s e s so for emails and then i will have id and i will have secret close id and secret exit with saving aws scs id and secret okay and now how do i set up my smtp settings so i go to production.rb and here i need to have some action mailer settings now i've done this before if i go to cosigo mailer i have this repository action mailer i will just go to i'll go to production.rb let's go to config environments production.rb and see what i've added here before so action melee default url options perform deliveries the delivery method i'm going to add these lines then the ses settings and the application will be named the askdemos.com protocol https okay then the address yeah we can also keep it in the credentials username is going to be aws ses id here we'll have aws scs secret let's just check if these work rails console id and secret okay they do work [Music] then yeah i'll also add the the address into the credentials and is that just correct let's see so i'm going to sas um let's see account dashboard so this one is possibly the same as i have here now i'm using eucentral now not eu best so i would want eubast here and yeah let's go back to credentials editor theme rails credentials edit okay let's see if i've copied everything or not yeah looks like everything and what is this it is the address okay i will exit saving now again go to editor and i will say again what is it it is address exit with saving now rails console and let's uh try to access the address okay it works and here we will dig to the address okay the board seems to be 587 let's just confirm yeah 587 is a valid port are there any other things we need to copy let's have a look so mailer perform caching okay raise delivery arrows let us actually raise delivery errors so true or did we already set it up on top no we did not yeah so these are all the action mail settings that we have in the file at the moment now let's actually first see if it gets delivered in development before pushing this to production so what if i copy this now to whatever i copied and make it work in my development environment going to app config no just a config development.rb they are also going to perform deliveries in here hey victor what's up yeah let's try performing deliveries in development also so let's see how i did it last time so delivery method is going to be smtp perform delivery is true and the url default url option is going to be the one i've got in the localhost at the moment so this is my localhost let's just copy it and compared to what we have here yeah so we're just changing this uh random hex the id of the environment and now let's uh yeah let's try performing a delivery rails server okay now i will go and sign up let's see what accounts i have set up at the moment okay this is fine let's say uh weishmurov gmail.com sign up okay save not now and i expect a new message maybe in junk no okay let's have a look at the log suppose it send yeah it seems to have been sent so we did not get any delivery errors i just don't see it right here let me see from my email in gmail um okay actually we might have not received the email or oh actually it's downloading lots of messages so maybe that's fine i don't see it anyway let me try another account let's see what accounts i have well yeah i expect it to be delivered so this should kind of work i'm removing it from my development environment i don't don't want these deliveries to happen in development only in production so i'm leaving it in production yeah it's uh it looks fine so again going to development.rb uh here i have everything set up yeah i will remove this other default url options and the perform deliveries no i will comment it all out because i don't want deliveries happening at the moment in the development environment here looks fine okay so let's save our changes get status get add all get commit main set oppo action [Music] mailer with aws ses push main okay so i think i've set this one up let's go to move it to review in progress i will say that it's done when i definitely know that i've received an email and what else do we have so rack attack capture so lots of tiny small stuff but we've actually done a lot today and i'm especially happy about doing the turbo part of the application so let's open it once again yeah i think we'll be finishing now in a minute or two yeah so uh what have we done today so when we create a new inbox okay first of all we've added the device confirmable we've added social login with the github when we log in with github we have our profile information updated then when we create an inbox we can select any theme color that we like add a name then the inbox is updated with this color of course it doesn't look super sexy yet then we can add inboxes and without any page refresh the flash messages are rendered this message count is updated and we can upload or download or actually on vote and you see if we don't have a full page refresh on this specific partial message partial is updated and the same here we can change the color and change the status of a specific message without a full page update so here we are leveraging turbo and also if we destroy the message account updates and the the message that does just disappear from the page so you see no full page refresh and we're using the kind of spa so single page upper behaviors and in the inboxes list we can filter by name created at message count class search all without a full page refresh so you see only what is inside a turbo frame gets refreshed i also search for something like name contains i press search and you see we don't have a full page refresh so what is inside the frame gets refreshed you see the time updates here but the time does not update here so now i'll make a full page refresh and you see the time updated in both so this way we are using turbo do not have a full page refresh and only update part of the page and yeah that's basically it so now we also

Channel: SupeRails

Views: 426

Keywords: ruby, rails, ruby on rails, tutorial, programming

Id: LWEMPqGhstU

Length: 225min 1sec (13501 seconds)

Published: Sun Nov 07 2021