How to make an Instagram clone with Ruby on Rails & StimulusReflex (Part 1)

hey everyone and welcome to this live stream um today i wanted to do a recording about how to use stimulus reflex uh with rails i've never used it before so this is going to be an explore exploration that we're going to go through together and first of all i'm new to live streaming and so if you can hear me okay uh please write in a chat um also if you have any questions or if there is anything you'd like me to cover please write in the chat also let me know if you can uh if you can read okay if the font size is okay or not okay so the goal here is to reproduce this insta instagram card like application which i've done with elm and html before so i have i also have a tutorial about that this is the elm and html version so you can see this working i can like comments i can like the photo so i can add comments here and so all of this is done with just html css and nums there's no backend component to it so today i wanted to to start again and build the same thing by using rails and stimulus reflex especially because i haven't used it before i haven't used symbols before but uh i have used a little bit of live view from alexa and the reason i wanted to explore both stimulus and live view is i think this is a very promising future for web apps and for full stack depths in particular because um writing no javascript or at least writing very little javascript code is going to be huge for building apps you don't have to build an api and then build a single page app to to have a decent experience uh or a compare comparable experience with other angular say or react apps you can do the same thing with just html css like you've always done and then the user experience is much much faster and much much responsive because of this new technology that's inspired from live view and live view is um is coming from the elixir world and more precisely their phoenix framework to to write web apps it's something that's comparable to rails if you've never heard of it and so just to show you an example that i thought it's worth showing is this counter or clock app that's been done with phoenix and as you can see it's very very responsive and there's no javascript to it right everything gets everything you're you're seeing here is just a live view or html uh updates so i think this is very very promising especially if you uh see here it's less it's about one millisecond response time so that's what stimulus reflex uh promises to achieve with the rails something that's very similar to live view and that's why i wanted to explore it a little bit so i thought i should do it live we'll see if that's a good idea or not but uh the end goal should be this and another thing i wanted to to do is also make it test first and behavior driven because i don't see enough tutorials or enough people doing this doing it this way so i thought that might give you some ideas or might help you in your own development i know a lot of people are struggling to come up with how to write tests and what what do those tests help them with and so i think it would be a good example for you maybe it can inspire you to do to use it in your own apps so that's what we're going to do and now i'm going i'm going to switch to to my editor and browser and we're gonna take it from there so i don't i don't have an app yet uh i'm gonna do everything from scratch so that you can see my setup and everything else okay so first thing is to generate a new application and i'm gonna skip spring because i don't like it i'm gonna install stimulus and then i'm gonna call this insta cart reflex okay so that should generate a new rails app and install the gems for it and also the javascript files packages sorry so on the setup page for stimulus we can we need to have redis stimulus reflex and i'm also going to install cable already just so we can broadcast the changes to other browsers and it's going to be fun to see how that works with tests because we can we will need to write tests that use two different windows okay so instacart what did i call it mr carved reflex okay and then we'll add redis cable ready and stimulus reflex okay now let's also add the javascript packages for cable ready stimulus and i think that's all i'm also going to use tailwind css because i've heard a lot about it and never got to use it so i hope that's gonna work okay and now let's install stimulus reflex install okay okay so the next thing i want to do is add my testing gems okay so i'm gonna use our spec rails and i think this is at version four respect rails let's see yeah okay um it's good to have pride rails uh playing buyback factory bot factory bot cucumber i'm going to use a test group for that rails database cleaner this comes with cucumber or at least it's needed by cucumber to clean up the database okay let me install those okay so now i can generate the install files uh real gr spec install i think it is let's see yep and the same for cucumber let's run our spec test to see yeah that's working and cucumber nope the xml yeah i think i can i need to install this gem i know i've ran into this problem before so let me just add that here i think it's a requirement for for the r spec jam i'm not sure i haven't got the time to look into it but um i know i've ran into this before okay let's try that again sweet yeah i don't know that what that is yet but we're probably gonna look into that sanity jacks okay let's look at a setup so stimulus reflux install did i run that i don't think i did i'm not sure well looks like i did let's run the cucumber command again this is a warning it should probably be fine let's let's try to run the server and then i'm gonna write a cucumber test and see if that's passing because i don't have any tests right now okay so the rail server seems to be able to start okay so that's working and now let me write a test for a cucumber because i i want to have something that's passing i don't have anything here so let's say home page not feature like to start with a home page test just loads the home page and i don't know maybe displays a welcome message that tells me that the cucumber tests are working and i can start from there so the feature name is gonna be home page and then the scenario is going to be i can see a welcome message and given i'm on the home page then i should see a welcome message okay looks like that's not gonna go away so i might have to look into it rails dev cache is there anything in here about it okay so it doesn't work either way right okay so that's gone now we have a few tests a few a few steps here but cucumber is complaining about because we haven't defined those yet and so that's what i'm going to do next i'm going to open up the steps file homepage home page steps okay i'm gonna put those in here and for i'm on the home page i'm gonna just visit a slash which is the root path and then uh for this i should see a welcome message step i'm gonna expect just to see the welcome word on the page so it's expect page to have content welcome right so that's all okay so we're good i'm gonna run these tests in this other tab and i'm gonna switch between them just so i don't have to close my editor as much okay so now for the first error we're missing the the uh root route there's no route that matches the slash here which is the roof path so i'm gonna add the root path um to be site controller and the index action run this again okay now i don't have a site controller so i'm gonna create one let me see if that's okay should complain about the action yeah if it does and now i don't have a template there i need that site directory and then i can touch that file and now it should find the template but it should have no no welcome message that dev cache is bugging me okay so there is no welcome on the page meaning that i need to add the welcome message in there okay right so my cucumber tests are running and now i can commit this everything here as an initial commit so this is clean select right okay so [Music] um what i want to do here is i want to be able to add a card or a post an instagram post which is going to be this entire thing right because in this example here we're seeing one post and so the first feature is going to be to be able to add one of these and so we're going to have a an image an image here and then a profile name maybe a profile picture and then these actions and likes and eventually this section about adding comments so i think that's our to-do list so let's make one let's make a to-do here um okay so first thing is going to be the ability to add a post or create a post create post okay and then what else and while create post will probably have a subtask to be able to select an image or upload image image body even though i don't have a body here but i know instagram does so i'm gonna also add a body here somewhere and then i also need a user user management and then this do i need a user maybe i don't need a user just yet but i could fake user or actually to make this to make it more relevant or to make it more real let's also add users okay so sign up and log in and then the user will be able to create a post okay and the post will have an image a body um it's going to have a number of likes it's called also going to track if it's liked by the current user or not right by the user or eventually many users but uh for now we're gonna just we're probably going to use just this user i don't know yet we'll see but what i do know is that we need to show that liked icon here liked our unliked so for that to work we're gonna need to have a way to to know if the user liked it or not okay and then we also need comments right add comment and these comments need to be likable like comment okay and so on the common side we want to track the user user or commenter and then the body of the comment and whether it's liked or not so something like this like by user i think that's that's okay for now not going to worry about these actions here or the sharing and bookmarking we're going to display the images but i'm not sure if it's worth making those work we'll see okay so from top to bottom it looks like the first thing we need is to have some some kind of user management and that's what i'm gonna start with okay by the way if you have any questions just let me know in the chat can you hear me okay can you see the the code okay do you do you need it to be bigger just let me know okay so let's also commit this now i'm gonna go ahead with my first feature so this one's going to be about signing up so i could i could hey angela nice to see you cool thank you so i could call this user sign up i don't have a better name for it so that should work for now okay so what i want to do here is to be able to create an account right so that's my goal and so giving them this is the context right giving them on the home page the action is going to be when i sign up for a new account then i should be able to [Music] i should see a welcome message and we're gonna we're gonna make that more personal just to to make sure that it's specific to the user okay so that's that's all i have and nice thing about this is if i'm i would be leaving right now and coming back tomorrow then i would know what i need to do right away because i can just run the cucumber command and it will tell me what i need to do so as you can see next step is to define this which i can do right now i'm going to put these these steps in a separate steps file i like to have one one steps file for for each feature file it's not always like that but it usually works pretty well uh hey jamal this is a feature test uh some people call it acceptance testing it's basically going through the user interface clicking buttons filling in forms and then making sure that the user can see your result so this is the highest level uh of tests that you would write in a rails application and the nice thing about this is that this kind of covers everything every implementation detail meaning that i can have just this test and be sure that my application works without having to write any unit tests even though you might want to do that but you don't have to you can start with this make sure that the whole integration is working meaning that that the application is behaving like you expected to uh without writing about a detailed test like units but we're going to go into that as well but the first thing i want to do is to write this high level test to make sure that my users will see what i want them to see and then for for the technical implementation i'm also going to write some tests probably unit tests or request specs depending on what i need yeah if you have any other questions around that just let me know in the chat okay so i'm gonna have a user user sign up no user sign up i could have user steps or account steps let's let's use the same name for now and we might come back later to change it but it's not that important right now okay so i'm going to paste this here and it wants to know what that what that step means what does it mean to sign up for a new account and so i can define my behavior here in terms of the steps that the user needs to take so i have this context with which is given i'm on the home page and that is defined on the homepage here so that's one that one is defined and then uh so the user is on the home page already and then what do i want him to do after that so uh let's let's write let's write the the steps in the in common form so the first thing i want my user to do is to click the registration link then at this point they're probably on the registration page and so um they need to fill in the registration registration form and this one's going to have a few steps and then submit the form and so for the registration form you're probably going to have an email password oops password uh password confirmation maybe and i'm also gonna use a profile name because i want to display that on the page okay so profile name do i need anything else i guess i don't so this is what i want to achieve here in this step right so what i can do is given i'm already on the home page all i need to do is click on and i like to use either ids or data fields but for this example and for what i usually go for is using ids it's just because i got used to it is not the best way to do it but i got used to it and that comes naturally to me so ideally you would add a data attribute for all of your targets like all the html nodes that you want to target and the test and then so for example you if you have something like a a draft like that right this would be a link what i'm doing now is i'm saying if this has an idea of registration let's say i can click on it like using it like that so click on registration it will find the id and it will click but the problem with this is that you might have designers on the team that or maybe front-end people that think that these this ids are replaceable or not used or they could easily change them so then your test would break and so the better uh way would be to have a data let's say tests and put that in here right like that and so you'd use this data test attribute to to target the node but since i don't have any designers for this project i'm good by using ids okay so let me make this more specific uh users sign up so click on user signup link or button and then on the page i'm gonna fill in the form fill in and here i'm gonna have a user email i'm gonna fill it with john doe at example.com and then i'm gonna have a user password and i'm gonna fill that with um secret one two three and then uh the same for for password confirmation confirmation and i'm also gonna have a uh profile name user profile profile name okay um let's call this username username so i'm gonna use mix and go for that okay so that covers this step and then the last one is to submit the form so to submit the form i'm going to click on user signup submit okay so that's what my behavior would look like for this step let's run that okay so again if i was to walk away from this right now and come back tomorrow or a week later i would know exactly what i need to do right because this test is telling me the exact next step that i need to to do in order for for my test to pass and my application to work as expected okay so the next thing is to add that link right since i don't have any views yet all i have is this layout i'm gonna add it in my layout here somewhere uh let's call this sign up and for now it's not going anywhere and it's going to have an id called user registration is that what i call it sign up okay so if i run this now it was complaining about the link right and now it does have the link and it clicks it and now it cannot find the user email field right so i cannot fake it anymore i need to replace this with an actual path and to make this a lot easier for us is i'm going to use i'm going to use device the device jam to simplify everything here and that's going to give me a few paths that i plug and play in here so byes okay oh looks like we're having some issues with device that's interesting never seen that error before has anyone seen seen it okay i suspect that it's got to do with the xcode stuff on os x but uh i want to make sure that that's the problem let me look at that again um i'm using ruby 3 that could be a problem yes code stuff hmm i'm not sure if this is a good idea wow yeah so that could take too long for this stream so let me think how could we do with that device for now and maybe i'll install xcode later and then fix this problem it would be a lot of work to redo what device is doing okay so i'm gonna skip this for now just because i don't want to keep you here waiting how i and look at how i install xcode i'm going to move to my next to do and we're going to come back to user management later and so i'm going to fake the user for now and create a post and then we're gonna replace that fake user with the actual user after i install xcode okay so let's add a new feature create post feature okay so i'm going to assume that the user is logging logged in and he's going to see a link to create a post right so that's that's my context and we're going to make that happen with the with the other feature when that when the user logs in we're going to make sure that that that the link for creating a post shows up and we're also going to uh we're also going to add here at the user sign up should we add it here i'm thinking about adding a way of checking that the user can see a create post message only if it's if it's logged in no i don't think that belongs in here so no we might have to add here another another test that says i cannot create a post post if i'm not logged in or something like that right but we'll get to that later so right now the goal here is to create a post and so given i'm logged in right that's gonna be the context and for now we're gonna fake this and you'll see in a second how but this is the context i cannot create a post unless or it should not be able to create a post unless i'm logged in so when i create a new post this is my action then i should see uh the post on the timeline she see my post on the timeline okay so this is roughly what i want to do high level and i'm going to define what those steps mean what did i call that create post okay create post steps okay so these are the steps which i need to fill in and for i am logged in like i said i'm going to fake this and what that means is that given i'm logged in we'll probably have to again with the comments um what does it mean to to log in right it means to create an account first because i i need to have an account and then sign out i'm gonna make sure that i have an account and that i'm signed out and then i'm gonna click the login link fill in the login form submit the form and then i should see message so this is what the login step should look like right but because i don't have that right now because i don't have the registration and login functionality just yet what i'm going to say is that i'm going to just use this last step here and i'm going to say well to be logged in means to see a welcome message right so expect a page to have content and this could be welcome or it could be welcome john doe whatever right um the username for example so for now i'm gonna let it just adjust this welcome thing and then we're gonna come back to to add more detail to it when we have the user so this is my first step okay when i sign up for a new account no i don't need to run that okay given i'm logged in unable to find expats so when when it's usually when you see this it means that it cannot find a page the the html page and that is because um i didn't tell it to visit the home page yet right so before this you need to visit or load this site or whatever visit slash okay so visit okay so that works and now i need to tell it what the next step means so when i create a post um again with the with the comments what does that mean it's clicking a link in the menu right click uh click create post link then fill in post form and this post form will have a body upload image or any image field right what else i think that's it body and image yeah i think that's it okay and then the next step is to click submit so that's what this step should do right so how do you do that well click on is for clicking links and i want to call this post create or post new this will bring me to the new post page and then here i need to fill in some some details and the first one is going to be post body and then the next one is going to be to attach a file and there's a helper in capybara that helps with that capybara attach something attach file let's see yeah so page attach file and the path to the file let's see if that works so attach attach file post file and then the path i'm going to put this file um should i put it let's put it in the fixtures folder and i know there is a setting for that cucumber fixtures there's a way to define the fixture folder that's what i'm looking for cucumber i don't know what this aruba means cucumber okay fix pictures nope fix sure oh is it in the amp file env fixture now i think i can add a i can add a folder to the load path and that's probably how you do it but select that load fixture now i would expect this to be documented but it looks like it's not so that's okay fixture path okay so that this is what i'm thinking something like that okay right so there is no magic can define a module and you can include that module in your cucumber world but uh i don't think that's very useful so let's just hard code the path there so it's going to be railsroot i hope that's available here and then features sports fixtures and then image not jpeg right okay so features support fixtures okay and i'm gonna need to add a file one second features support fixtures image okay so i have this image jpeg here so this attach file line should should be able to attach that file to this post file field and we'll see if that works and then after i do all that i need to click the submit button suppose new submit okay so this is what my create new post steps going to do and then lastly i need to expect the page to to have the content of the body so oh sorry i missed this um my post body and i'm gonna expect that in here and i'm also going to expect um i'm going to expect to have an image there and the way you do that is either with cs the css matcher or the xpath matcher so let's look at that capybara image something nope that's not what i want matcher finding images yeah yeah so it's this have xpath or there's another one have css yeah this one i'm gonna copy that css and i call this image.jpg let's see if that works okay so now it it can't find the post new link so that's my next task is to add that link somewhere and i'm going to add it here on the site index page link to a new post don't know what where that's going to go probably is going to be something like new post or yeah new post path yeah let's do that so new post path and the id is going to be post new let's run the test okay so now it cannot it doesn't know what new post path is meaning i need to add route so resources posts but just for the new action and that's gonna that's gonna define the new post path okay now let's let's run the the test again okay next step is to define a post controller but i want to keep this these videos short so i'm going to stop here and we're going to come back tomorrow at the same time to continue this and like i said live streaming experiment is hopefully going to take five days but i'm gonna keep it going until we get this done so this application done so if you if you like it and you're learning from it you can come in tomorrow at the same time and we'll continue where we left off so thank you for watching and i'll see you tomorrow bye

Channel: Mix & Go

Views: 598

Keywords: ruby on rails, ruby on rails tutorial, stimulus reflex, stimulus reflex rails, stimulus reflex example, stimulus reflex tutorial, stimulus reflex demo, bdd, bdd testing, tdd, ruby bdd, ruby on rails best practices, ruby on rails testing, learn ruby on rails, ruby

Id: 3C_ZZc36LT4

Length: 64min 20sec (3860 seconds)

Published: Mon Mar 01 2021