Golang TUI Project Basics - Shopping List | Part I

we're going to build a shopping list for the command line [Music] we're going to get into how to implement the TDOT model interface so you can start building your own bubble tea models and applications here is what it looks like we've got our little shopping list and we can toggle each of the items that we might we might want on our shopping list and also of course deselect them and then just hit Q to quit or Ctrl C we're going to go ahead and get that functionality going in some code right now so here we've got our repo up and right here in the tutorials folder is where you're going to be able to find this tutorial so today we are just going to do the basics tutorial I will also be doing a follow-up video where we will be following along with the commands tutorial and the basics is just going to give you a rundown of what bubble tea is a little bit about the elm architecture introducing you to its documentation that you can read and learn more about if you're interested the elm architecture isn't super natural feeling for go developers but I think that once you start using bubble tea you'll start to see why it's actually really fun to use and how it can help you write your applications very quickly so without further Ado let's get into building a shopping list and let's create a new project so let's go shopping list perfect and then let's do a little go mod in it shopping list and let's touch mandaco let me actually just move myself to the other side and flip I have teleported yay there now I won't be in the way of the code so let's go ahead and get started by editing our mean.go obviously you can use whatever editor you want you do not have to be doing this from the terminal and let's go ahead and declare package Main and let's get some imports going so we are going to import fmt we are going to import OS and we're going to import bubble tea of course and then let's talk a little bit about the bubble tea model so here you can see that we've basically the bubble tea model is an interface that requires you to Define some kind of functionality for an init update and view methods so init is basically where you're going to run some command that's going to get called when the program starts up so one common use case for this is for example if you want to start a timer right when the application starts then you would include that time that tick message as what's getting returned in the init you can also batch commands which means that you can have multiple multiple commands that fire off and are returned running in their own go routine in your init so you can look at T dot batch for that and then we'll talk about updates so update is something that your model also needs to implement and basically this is where you're going to be adding the interactivity element to your Tui so update is where you're going to be handling different messages and if you'll see this a little bit more in our commands tutorial but basically a TDOT message is any data type you will you declare some type so that you can call whatever you'd like for example like a return message or something like that and it can just be an INT and then what you do in your commands is that you actually just wrap the whatever you're returning in the corresponding message type that you've declared and then from there your update you're actually going to be able to handle those messages and decide when this go routine has completed when this command has completed then what are we going to do with that output sometimes you might actually just end up returning nil from your commands because you're like I don't need to run anything after that or sometimes you might want to use that opportunity to update your UI in some way so maybe if you have a viewport and you have text showing in that viewport you might want to update the text that's being displayed and all of that stuff so update is where you are going to be able to handle those events and respond accordingly and then view is where you're basically creating the string representation of your Tui so let's break the idea that a Tui is complicated it's just text being displayed in your terminal so that's what we're doing in view is you're able to leverage if you have existing UI components you can use their view method for like from our bubbles library for example or if you just have text that you want to display you can have a string value and literally just display that string and that's fine too and that's as simple as your view can be and in your view you can also have some different conditions and basically have it show different strengths depending on certain conditions about the model or just about state of the application in general so that is the nitty-gritty of what those what those functions need to do that might have been a little bit too complicated of an example for just getting into bubble tea but bear with me so let's go ahead and create our model so let's hop back to the code and here we're going to Define our model so we'll do a type model which is a data structure and in this data structure we're going to have a few Fields we're going to have choices we are going to have a cursor which is how we're going to keep track of where we are in the list and here we're going to have selected which is basically just going to be a map that has some index and it's just some empty some data structure some arbitrary data structure and I'll add some comments for additional context we always want to be able to initialize a model with some sane defaults so this is how we're going to do it is we're basically going to have an initial model function and then here is where we're going to set those default values so we can just return a model and then we're going to add some choices so what we can do is we can just have an array of strings and we can just say let's buy some carrots we'll buy celery and buy Kohlrabi I have no idea what that is but these all look like rabbit food so I'm gonna assume it follows that same theme okay and then we are going to go ahead and initialize our map so we'll just create a map int and then it's Direct there we go so now we're initializing things don't worry that my editor just deleted our Imports it'll fix that later and then let's start actually implementing the TDOT model interface so we'll go ahead and create our init method and model in it and then this returns a t command and in this case we don't need anything to run on Startup so we're just going to go ahead and return nil easy peasy perfect perfect and then because it's yelling at me about not being able to import bubble tea let's quickly adjust I'm just going to close my editor and just do groom on tidy and let's just open it back up there we go all right don't worry about any of this stuff getting being unused my linter is just very picky very very picky so let's read through the docs a little bit more together so next up is the update method the update function is called when things happen its job is to look at what has happened in return an updated model in response it can also return a command to make more things happen but for now don't worry about that part in our case when a user presses the down arrow update's job is to notice that the down arrow was pressed and move the cursor accordingly or not the something happened comes in the form of a message which can be any type messages are the result of some i o that took place such as a key press timer tick or response from a server we usually figure out what type of message we received with a type switch but you can also use a type assertion for now we'll just deal with a TDOT key message messages which are automatically sent to the update function when keys are pressed so let's go ahead and Implement that head on back to the code all right so Funk let's define our update there we go and then we've got a message which is type TDOT message not command TDOT message and then it returns a t dot model and a TDOT command and then let's switch on the type of the message because right now we're looking for when the message is of type T dot key message so we'll do a quick little Switcheroo ski message DOT type and then let's do case T dot key message perfect and then let's switch on the string value of the message so we'll do switch message dot string and then now we can actually compare directly to strings of key of keys so for example but let's get our case four when we want to quit the application so in control and C are pressed or when Q is pressed we will go ahead and return M comma T dot quit so we're actually going to quit our application and for now it's gonna it's gonna yell at us about returning M which is our model because we haven't implemented view yet so just ignore that for now and we'll get there we'll get there and then the next one is let's move up so how do we want to handle moving our cursor up so we can either hit the up Arrow or we can hit k and then we are going to set okay if m dot cursor is greater than zero MDOT cursor Mass minus perfect and then we'll do something very very similar for moving down so let's say we want to hit down arrow or we want to hit J then we can go ahead and do if m.cursor is less than the length of MDOT choices minus one okay then m.cursor plus plus and then we also want to be able to select an item so to do that let's say we want to hit enter or space so we'll give a case for enter or it's equal to a literal space we will check if it's already in the list if selected so this was basically going to like toggle whether or not an item is selected so we're going to check first if it is in the selected items so we'll just do m.selected and then m.cursor and then if okay so if it exists if it found it then we will delete m dot selected at index m.cursor otherwise let's add it to MDOT selected and it would be m.selected at index m.cursor yes typing is hard is just an empty struct because we don't care we don't care about that and then finally we will return M comma nil because we don't have any we don't really have anything else that needs to update this is all that we're doing is handling these key messages and updating what is selected so you might see online 27 that we have this TDOT quit so this is basically a built-in function for bubble tea that allows you to exit your bubble tea program next let's get into view so let's declare our function signature and then let's pause for a moment so I can tell you about what view is okay let's read it together switch back to the browser all right at last it's time to render our UI of all the methods the view is the simplest we look at the model in its current state and use it to return a string that string is our UI because the view describes the entire UI of your application you don't need to worry about redrawing logic and stuff like that bubble tea takes care of it for you so basically what's happening is the view is going to get called after every call to update so whenever any of the any of your commands finishes so once that go routine wraps up and it returns update and it calls it again you will get a re-render so there's no there's never going to be a need to manually call view to trigger a re-render it will happen whenever any of your commands finish up so without further Ado let's start building it we've got the code here let's hop over to the terminal and write it together all right so let's create a string and we're just going to ask what should we buy at the market new lines and then let's go through 4i comma choice in the range of MDOT choices so we're going to iterate over the choices cursor is going to be empty if it's not the current index so for now the default is that the cursor is blank to space and then we're going to check if m.cursor is equal to I then we're going to show a different cursor so in this case it's going to be a little arrow I'll add the comments while we go okay don't you worry don't you worry I will add those comments there we go all right and then the next part is let's check is this Choice selected so we're gonna make checked empty by default all right and then we are going to do that same check that we did earlier by seeing if it exists in MDOT selected at the current index and then let's change checked to X there we go which means it is selected in that case and then finally let's render the row so we are going to do s plus plus or equals Sprint Dev and again where it's just strings it's just strings so we're able to do that a little new line in there we'll add the cursor We'll add whether or not it's checked and we will add the choice perfect and then last thing that we're going to do outside of that for Loop is let's quickly just add a little a little info on how to quit the program all right press Q to quit and then finally we will return s perfect and one thing worth mentioning is that the view function is when you'll start to see more of lip gloss being used just to both style the text and create layouts so not something that I'm going to cover in this video but just a heads up of how some of our different libraries might tie together this is where lip gloss would be used and then finally we're at the last step if you've made it this far good job participation metal for you okay I'll send you stickers if you'd like all right p is equal to a new T program so here and then we'll do a little we'll initialize our model because that is what the TDOT new program needs is a TDOT model and now it shouldn't give us any errors because our model is actually now implemented init update and view so we're good we're good and we'll check if error is equal to P dot start so we'll check if P dot start has any issue running and if error does not equal nil panic not actually that we're printing it's fine and we're just going to say alas there's been an error all right good enough and then os.exit and we'll give it a little General exit code and so now you can see that my editor has brought back these Imports that it deleted earlier and let's go ahead and run it and let's see what it looks like so I'll just clear all of that garbage this one go run what should we buy at the market let's see let's buy some Kohlrabi because we're feeling we're feeling adventurous it's by carrots and actually no carrots let's get celery instead and there you have it you can select whatever items you'd like from the list and hit Q to quit if I run it again you can also hit Ctrl C we just did not include that a little message in our view so people don't know you can hit Ctrl C but they do know you can hit Q so I hope that this was a helpful tutorial for you I hope I didn't jump into the complexities of it a little too soon I got a little eager don't mind me okay but I'm excited to also share with you our commands tutorial which should help you a lot with just understanding messages commands how you can work in bubble tea pass information all that powerful stuff that you need to be a 10x bubble tea developer okay that's all I have to say about that um but yeah this is what we built and good job everyone see you in the next video peace out [Music]

Channel: Charm CLI

Views: 25,035

Keywords:

Id: 5lxQJS3b38w

Length: 20min 40sec (1240 seconds)

Published: Fri Oct 14 2022