 Hari ini, apa yang akan saya bincangkan adalah tekanan aktif. Dan... Bukan betul-betul sebuah tekanan besar. Tapi saya rasa untuk... Untuk awal... Sebaiknya untuk memahami... ...pengenangan untuk... ...memahami bagaimana hal yang berlaku. Dan kemudian cukup untuk anda... ...kenal dan tekanan. Sebaiknya untuk memahami. Okey, jadi apa adalah tekanan aktif? Tentang tekanan aktif... ...sebaiknya adalah... ...sebaiknya yang anda lihat adalah tekanan aktif. Jadi, secara sebenarnya... ...saya dapat... ...begitu terserahkan dan anda dapat melihat dengan betul-betul... ...bagaimana ia berlaku. Sebaiknya, bagaimana sebaiknya... ...sebaiknya tekanan aktif itu adalah... ...sebaikannya, bagaimana jalan kecil itu? Di mana ada jalan kecuali itu? Dan sebagainya... ...sebabkan tekanan... ...dengan tekanan aktif. Jadi sebenarnya tekanan aktif adalah tekanan aktif... Sebelum ini, mungkin 1,5 tahun lalu, R6, dan mereka panggilnya Action Tech, jadi ini seperti So, I'm going to do a demo of what does it like, and where's the rest of my browser? So, for example, there's a post model, just a basic scaffolding of a model in Ruby on Rails. So, for example, if I create a new post and it's like the title, we are all probably quite familiar with this, just a title, a normal form field, text field input in the database, and then this is what you see is what you get editor looks like. So, you can do a title, you can do a h1, and then you can probably do what you schedule for today, and then we'll have a meet and greet. So, it's literally there on top. Okay, then if we want, we can also attach some image. Okay, oh, what is this? What is this here? Okay, what is that? Schedule for today. And then what we see is, like, this is what we call a rich editor. We can do, like, all this markup stuff, and then when we create a post, we can see that it looks almost exactly the same. I said that the brief is different. So, this is what we call, what is referred to as, what you see is what you get editor. Okay, then when you can go back at this, you can change stuff. It all still is what you see is what you get. Okay, so this is what I'm going to go through today. How does all this work? And it's cognitive in Rails. So, it means that today if you want to use this and you start new project, Rails 6, you probably can get such an editor pretty very easily. Okay, very easily. So, that's the demo. So, I'm also going to talk about how to get started using this, I think this is like the most important part because knowing how it all works but then you don't know how to use it, it's like a bit pointless. So, I'm going to go through some of the code, but I'm going to go through this thing first. So, like, all Rails stuff, Rails C stuff, how things are done, we always have a rig task. So, in this case, it's an action text install which will generate some automated code and some migration files to set things up. Then we can, because there's a migration file, so we have to run a DB migrate and then if we want to support image attachments, we need this gem called image processing which we need to install. Then after that, after that, for our model, we need to use this method called has rich text content like how we always see has one, has many, this, has many, that. So, this time round, it has rich text. And then the content part is like just the name of the few you want to use. So, in this case, I have a post and then the title and the content. So, for here, I write a content. Then when you want to show what you see is why you get content, we can just, in the ERB, just do add post, which is the instance variable. Then you just dot content, it will automatically render the entire markup with the image, everything for you. And then for form, we probably very familiar at that form dot text area if you want something like that. And in this case, it will be the rich text area, which is also a method provided by action text. And then this, and then the next part is when the form submission come back, we just, like all other form input like passing, we just require post and permit the content. That's it. It's pretty conventional like how other real stuff works. So, just, so here I will just quickly run through the steps just now. So for here, this is the action text install method. So I have a commit here. So after you do action text install, some of the things that generates is this automated some of the files that are automatically generated like this is the SCSS file for some styling of the tricks editor, which is what you see, what you get editor some JavaScript stuff some block if you are familiar with active storage stuff that supports all the image upload stuff. But the important part is here so the important part is here. So this action text rich text so actually it creates a table that generates a migration file to create a table and I'll go through this later but in short all this what you see is what you get content it's all supported by a new table a dedicated table that saves all this all this HTML markup that is generated by the tricks editor. So just keep in mind later re-visit this table then just some schema and some JavaScript file so I did a standard scaffold just scaffold title and that's it so one interesting thing is that when we do a scaffold here not sure whether I can show simply so this is just RailsG scaffold so I think we are all very familiar but one thing that I just want to point out is that when you scaffold something you wish you want to use the rich content for you don't scaffold the content so basically scaffold everything else other than content because just now I briefly touched on is that because separate database table dedicated one so you don't need a new database column on your this post table to support that one you just do an association a link to that one and then your post will get a rich content something like that and then and then the next part is after you scaffold as usual then this is the part where just now I talk about how to use so the first thing is you just do a rich content has rich text and then content so it's like an association to a a rich text basically the model what you see is what you get content like html body okay so this is like so now post has a rich text and then and then when you want to render you just do this post content in show.html.erb so and then in a form the form partial instead of text area just point point back to this content and then then that's all so it's really conventional so you can very easily start to embed what you see is what you get editor into your app if you already have one not all of this oh and one more is that you just permit a content and then you use these post programs to create your post long or whatever model you want so so using it is really quite easy but the interesting thing is how does it work so today I'm going to go through study people but not all the way because I think you'll be very confusing so enough for you to go out more when you start want to dig into the Rails code so how does it work so so like I said just now actually this action text is backed by a dedicated table so it's like just now I have a post table which is mine, I created it and then it does has rich text like content and then it actually is an association to a new model provided by action text so this is, and the model is called action text rich text and that model itself has a people so this table has some some stuff here, name body record tag, record ID all these are like how how these action text is a package so they have a way to associate like all done for you but basically the text body is where the HTML will be saved and then when you do like for example the post.content then when you try to inspect what's the value of the post.content you'll see that it's actually an action text rich text object like how we do association own models so basically it's an association action text rich text object so then so then has rich text this is how we start to build just now I talk about the table so now it's set up already then now in our model, our own personal model then we put has rich text content or has rich text input whatever you want to name or that field that is supposed to be the rich text so for you, so here you can see that it's actually some some metaprogramming so when you write has rich text and you put a name there what you will generate is some of this stuff so here you can see that like here you can see that like if you do has post.content in my case example is post.content and in line 20 30, it actually references to rich text content this metaprogramming rich text content and where does it point to is actually in line 42 it's like actually it has one so means that it actually has one rich text content and the class name is action text rich text so here clearly you can see that it's an association so if you don't want to write all this you can also just write has one rich text content and then you type yourself like how you type it out for your own associations or your associations between your model so here i think the most important point is an association and then the object that is associated to is actually rich text action text rich text and is an object that is provided by action text the action which is from Rails like package with Rails so it's native native to the Rails ecosystem so on the front end then just going to touch a little bit on the front end so that we talk about both the back end and how to connect it together so if you are familiar with what you see is what you get editor, like a lot of most of the editors out there they use this thing called content editable like basically you put your like P tag for example and then this HTML attribute editable then you realize oh you can suddenly like HTML in the HTML so but for tricks as in this is what they say i haven't inspected javascript every year so all these are javascript on the front end they sort of hijack all the keystrokes and then they do all the re-rendering after so but still important to know that all these things that gets rendered on tricks in the front end they are all essentially HTML code so why is this worth noting is that because it's all HTML later when you submit the file goes to our Rails back end is literally all HTML just escape HTML that's all so this is the next part so there when you do all the javascript actually change the header size then it's all HTML so when you do the post submission i think we are all familiar with action controller, params you get a title, content and one value for each form then you see here content is actually a HTML so anyway i never say so for this first part i'm just ignoring all the images because it's going to get complicated so i'm just talking about how the rest of the what you see while you get editor is like bullet points or italics or bold all the stuff so you can see that um what is submitted back is actually HTML and then when we save it it actually save your post and you also create an action text rich text record in the separate table and it just references to it so literally it's HTML in the database okay and then when you want to render it when how action text render it because it's an action text rich text object and then when ERB wants to render this post.content which is action text rich text object usually it just cause as far as i understand usually it just cause to string on that object so then how does this action text rich text object suddenly transform all the transform to all the HTML code so here we can see this is from the real source code that when we call to s on this action text rich text object it actually sort delegate to the body of this action text rich text so the body is where if you see the previous the body is where the HTML is so basically it actually returns the body but this time round the body is sort of like a cluster into this action text content object which then it just do some sanitization which is not important at this point but basically it returns that HTML very safe in the database so when you render show it still all method nicely in HTML because it save as HTML and it render as HTML so so when you do this to s when you call to s to it and it returns the HTML and then here probably i skip one step because the to s is called on the action text content object because it cluster into action text content object then you call the to s action text content object then this action text content will render so here to s is to render HTML layout so it renders the HTML content but with some layout around it but the layout doesn't change anything but basically the HTML is what you see and then now is the last so now we can sum it sum it sum it sum it sum it sum it sum it sum it sum it sum it a form we can save it we can display it and then the form submission is pretty straightforward also so you do standard rail stuff you do form wave something then you just do form then dot rich text area content and then there's some form helpers here that is provided by action text and then this rich text area actually generates an input and a tricks editor like to HTML nodes and then is linked together by auto generator id id and input so i think this is also the same way as how we do labels and inputs how to tie it together and then editor 2 bar just provided by action text automatically so in high level high level is like that so it's backed by separate model association and there's some rendering by action text of the HTML that is saved and suddenly we have this what you see is what you get editor so for the next part i'm going to go into attaching images so just a disclaimer i'm not going to go into very specific details for this one because it's going to be very confusing especially if you are not familiar with active storage or you are not familiar with how file upload all these things can work should be designed to work well okay so most of them there's text and ideas so i'm going to talk about the ideas about how generally how it works so the first thing is it's the same tricks editor you can type everything it's all HTML and then what happens when you drag a file into the editor so if you are familiar with active storage now we want to do a file upload so immediately there's the RailsUJS thing that happens behind the scenes and then you will do a post request to this active storage direct upload path and this path actually creates an active storage block record so this record is in the database it doesn't save the file it just generates like a record that references to a file but the file is not existent yet it just create a record so now this record is like sort hanging you have a record but you don't have a file backing this record so this post request will return a direct upload URL so now the UJS do the post and got the direct upload URL and this is when the JavaScript library which is tricks will then do the file upload to the URL so it's like a two step process first you ask Rails can you give me a direct upload URL then you use this direct upload URL to upload the file so to the real server so when the direct upload URL it's used to upload the server at the same time the JavaScript library generates this figure HTML figure so this is constructed on the front end and then for example if you're familiar with HTML you want to create an image with a caption you always have to create this figure figure tag you put an image tag inside it and you create a figure caption to write some caption so this is all pretty standard HTML which is generated and a lot of meta text here or a lot of HTML attributes here which for now is not important it's just how it all ties together so the file is uploaded at the same time it's generated this figure HTML and then it's inserted into the tricks editor and because this the image URL for this generated figure tag it's actually a URL that points to the file that you are going to upload so maybe for a while this file is not loading or a blank file it will load after the file upload it sync so literally how this file upload is done right is that background javascript library will just do the upload and then a HTML figure node is created and just inserted into the code and then that's how you see oh suddenly you got an image in your editor as HTML because it's a HTML inserted so then this part is a bit more complicated so although we see the image in the tricks editor but as far as this app is constant you haven't saved the input so this image is still not associated with the rich text so when you press save then the HTML is sent so now it includes the figure tag that HTML is sent to the back to controller and if you can remember just now we see post-programs content is literally just HTML so here is that there is some magic going to happen is that the action text content object was sort of like massage this figure and look for this figure data tricks attachment which is what was created by tricks and inserted into the rich text just now and then you will translate all of them into action text attachment and then it just save as like that so there is no more figure tag in the HTML that is saved in the database and then they will also oh then it is just like that so now it is associated in a sense using the SGID which is a signed global ID and then this signed global ID is actually a rails if you don't know that in rails there is actually this global ID library that you can use to reference objects in your rails ecosystem and then because the figure tag is gone is translated to this action text attachment and saved in the database then when we want to render it it will just sort of like undo or like so action text attachment is translated back to the same figure tag thing so that's all so there is some magic here is that we attach a figure tag when it send to the back end is translated to this action text attachment then when we want to render it out again it just translates back to the figure so so then we see action see this image again in our front end might be a bit complicated but if you have any question you can ask me if not you can ask me for this and you can take the code base at this point i think it's already quite confusing might be already confusing for some people so i also talk through this just now about the rendering translating it back to the figure figure part so so there are some references references here that you can use to see or to understand more about how this action text deal with it's pretty interesting to understand how all this tie together might be what some people call some magic but it's actually quite well designed how it all links the front end, the back end and the active storage all together yup so i think i'm at the end and i overrun by a lot anybody has any questions actually this is only available in real 6 it's not available in the gem available in previous versions like 4 or 5 oh no it's only real 6 i think i think you can install action text by itself in previous versions i think i think you can install it as a separate gem so but in real 6 it's already in so as far as i understand is because back when it was in rails i think rails 5 release candidates real 6 versions it's not officially in yet so that's how they do it they install the action text gem and they do some require and then and then now they have action text in the rails which wasn't shipped with action text so i think you still can do it okay i'll check it out thanks very useful feature does anybody have any other questions? okay if not i'm gonna stop talking