Build a glamorous habit tracker using Charm CLI

Are you a terminal and keyboard addict? Do you want to combine your love for Go and CLI? How about building a habit tracker using Charm CLI! In a few lines of code, you will turn programs in your terminal into beautiful, user-friendly, and glamorous UIs.

In this talk, learn how to:

• Write the basic syntax data model of Bubble Tea library from Charm CLI
• Apply some lip gloss to turn your CLI into something glamorous

Apply Charm CLI to your daily tooling to make your developer life better and sexier using our favorite language!

Transcript

1. Using Charm CLI Build a glamorous Habits Tracker Donia Chaiehloudj | @doniacld GopherCon Chicago, 2024 Software Engineer @Isovalent by Cisco Co-author of “Learn Go with Pocket-Sized Projects”
2. Agenda_ My ideal Habit Tracker What is Charm_ ? Demo 🤞 Charm_ Cheatsheet @doniacld
3. My ideal Habit Tracker Why? @doniacld
4. My ideal Habit Tracker Why? @doniacld
5. My ideal Habit Tracker Why? @doniacld
6. My ideal Habit Tracker In a terminal @doniacld
7. Display strings Print logs in a file Handle errors properly Terminal UI @doniacld Constraints
8. Charm_ Making the command line glamourous, powerful, fun and modern. glamourous @doniacld
9. Libs Charm_ Making the command line glamourous, powerful, fun and modern. glamourous @doniacld Stylesheet mardown renderer Terminal style toolkit Some components for Bubble Tea apps Terminal UI framework
10. Libs Charm_ Making the command line glamourous, powerful, fun and modern. glamourous @doniacld Stylesheet mardown renderer Terminal style toolkit Some components for Bubble Tea apps Terminal UI framework Apps Render markdown on the CLI Self-host your Git server for CLI Write terminal GIFs as code
11. Model — the state of your application View — render your model in your terminal as string Update — a way to update your state based on messages Bubble Tea @doniacld Based on the Elm Architecture Architecture
12. Bubble Tea @doniacld Architecture
13. Bubble Tea @doniacld Architecture
14. Bubbles @doniacld Bubble = Component = Model Spinner, Text input, Text area, Table, Progress, List, Paginator, ...
15. Habits Tracker @doniacld
16. Habits Tracker @doniacld
17. Habits Tracker @doniacld
18. Habits Tracker @doniacld
19. @doniacld List Habits Habit Define a Habit 1. // pkg/habit/habit.go
20. @doniacld List Habits Habit Define a Habit 1. 2. Implement Item Interface // pkg/habit/habit.go
21. @doniacld List Habits Habit Define a Habit 1. 2. Implement Item Interface 3. Define main Model // pkg/habittracker/model.go // pkg/habit/habit.go
22. @doniacld List Habits // pkg/habittracker/model.go
23. @doniacld List Habits // pkg/habittracker/model.go
24. List Habits @doniacld Model interface // pkg/habittracker/model.go
25. List Habits @doniacld Model interface Check the message type 1. // pkg/habittracker/model.go
26. List Habits @doniacld Model interface Check the message type 1. Update the pagination at resize 2. // pkg/habittracker/model.go
27. List Habits @doniacld Model interface Check the message type 1. Update the pagination at resize 2. Check input keyboard 3. // pkg/habittracker/model.go
28. List Habits @doniacld Model interface Check the message type 1. Update the pagination at resize 2. Check input keyboard 3. Delegate update to Bubbletea 4. // pkg/habittracker/model.go
29. @doniacld Demo List Habits 📋
30. func (m Model) View() string { var details string if m.habits.SelectedItem() != nil { current := m.habits.SelectedItem().(habit) details = fmt.Sprintf("\nDetails: \nAchieved %d/%d", current.ticksCount, current.target) } return lipgloss.JoinHorizontal(lipgloss.Top, m.habits.View(), details) } List Habits @doniacld Put some Lipgloss // pkg/habittracker/model.go
31. List Habits @doniacld Put some Lipgloss // pkg/habittracker/model.go
32. @doniacld Demo List Habits 💄
33. @doniacld Tick Habit Custom command // pkg/habittracker/cmd.go
34. @doniacld Tick Habit Custom command // pkg/habittracker/cmd.go
35. @doniacld Tick Habit Custom command // pkg/habittracker/cmd.go
36. @doniacld Tick Habit Custom command // pkg/habittracker/model.go
37. @doniacld Demo Tick Habit ✅
38. @doniacld Progression Bar Add new Model // pkg/habittracker/model.go
39. @doniacld Progression Bar Create new command Add new Model // pkg/habittracker/model.go // pkg/habittracker/cmd.go
40. @doniacld Demo Progression Bar 📊
41. @doniacld Add a Habit Create new nested Model // pkg/form/model.go
42. @doniacld Add a Habit Introduce session state Create new nested Model // pkg/form/model.go // pkg/habittracker/model.go
43. @doniacld Add a Habit Introduce session state Create new nested Model // pkg/form/model.go // pkg/habittracker/model.go // pkg/habittracker/model.go Add to main Model
44. @doniacld Add a Habit // pkg/habittracker/cmd.go
45. @doniacld Add a Habit // pkg/habittracker/cmd.go
46. @doniacld Add a Habit // pkg/habittracker/cmd.go
47. @doniacld Add a Habit Catch create key input
48. @doniacld Add a Habit Delegate Update to textinput.Model Catch create key input
49. Demo Add a Habit + @doniacld
50. Key Takeaways Build your Model and combine: list, table, text, form, etc. Model interface: Init, Update, View Put some lipstick 💄 Create new commands Apply to your everyday boring CLI && Have fun! 🤩 @doniacld xxxCmd(msg tea.Msg) tea.Cmd
51. Key Takeaways Build your Model and combine: list, table, text, form, etc. Model interface: Init, Update, View Put some lipstick 💄 Create new commands Apply to your everyday boring CLI && Have fun! 🤩 https://charm.sh https://github.com/bashbunni/pjs/ @doniacld xxxCmd(msg tea.Msg) tea.Cmd
52. Thanks @doniacld github.com/doniacld/charmify speakerdeck/doniacld manning.com/learn-go-with-pocket-sized-projects Recorded with VHS