Building a language learning system with n8n 🇩🇪

hey everyone welcome to our new live stream hello welcome everyone so today i have with me again omar thank you for joining us and um yeah so we have some exciting new things now and last week i think it was last week omar when we basically created a new node for dbl on the live stream and we created it for a project that we were doing for an internal hackathon that we had last week and we actually ended up creating a project or a system for learning languages so we want to show you what we built and talk a bit more about that definitely thank you for inviting me again it means like the last uh live we had was okay it was cold so i hope you all enjoyed it uh i hope we can create more content like this it was really fun last week and yes we got some very cool results like creating that note life we made it in time like so like over the minute but it was really fun um so yeah we created a a note in less than an hour just amazing and yes we use it on the hackathon project which is like the very next day uh i i'm also going ahead of things a little bit but we'll be showing like a presentation and i saw a few minutes ago that it was mentioned like using the deep l note created yesterday because the presentation will use it in the very next day so yeah like let's talk about it a little bit awesome so maybe we can first give a bit of background on what hackmission is so in case like you missed the last stream i mean we touched it very briefly so i think we can elaborate on it a bit more so what we started doing i think this first time we did that in december so this was our second hack mission and uh for those of you who didn't

figure it out yet uh heck mission is our hackathon for automation so what we do is every quarter like we have a couple of objectives in mind when uh running this hackathon so you know some of them are team bonding so you know working with colleagues that we don't regularly work with on a day-to-day basis um exercising our product because you know all of us love uh using na10 over at 10810 so just learning a bit more about it because every time you know we discover something new and we'll show you we discovered some really cool things during our project building our project um then we have like we want to create something valuable in terms of um like we have usually two pathways that the participants go in so some of the people some of the participants what they did was they automated an internal process and what the others did was they created a new product so if i remember uh correctly like last time i automated an internal process and so did you i think omar uh yeah as well and uh this time what we did was basically uh we created a new product of sorts so that was a very interesting experience as well and yeah like basically having fun which is very coherent with one of our company's values like we want people using na10 to have fun and we wanted to have fun ourselves so yeah sure it was an amazing experience like

the first one we did all remotely and even then it was really fun uh because like i had on that occasion i worked with max one or four team members and it was the first time really interacting with him regularly you know because we talk sometimes and something like that but you know working for a whole day with that person sharing ideas bringing insights discussing stuff allows you to really get some bonding and uh you know have some fun and talk to someone that you don't really do like we've been quite on time for a while so because like last week was actually my second time at the office so i barely know my team colleagues you know um so the hack mission is awesome for this like creating some bonding even if you work with people regularly the hackathon is an opportunity to work with other team members that you don't talk regularly like you know you don't really work you don't interact so much and uh yes in the first time like the previous hack mission the first one we created an internal product that is really being used actively and daily by max and that's amazing because it's something that we created in one day it's an internal tool that's a system him into connecting many of the applications that we have internally so uh he connected zendesk with the instance for that user with an internal database so he can query information about that user instance based for example on his email so from the email you can get information about user instance and many actionable resources so utilities it was all created in-house and in a single day because all we needed was and it can and that's the cool thing you know so it was an amazing experience and last week it was really awesome because well you see we discovered so many things our mind was blown during this process

yeah and the funniest part is like we did have some planning sessions that we booked for the different teams throughout the weeks like leading to the hackathon itself and um like we had a couple of lofty ideas in the beginning like uh it was interesting because when we worked on automating an internal process we had a very clear end goal in mind in terms of you know this is what you should do and of course we're going to iterate on it over time and improve it but i think it was trickier while working on this uh new product because we had like lofty goals uh no clearly nothing was clearly defined as like okay this is how we're gonna do it we did procrastinate a bit as well i guess and uh you know naden is a great tool for procrastinators because if you procrastinate you get stuff done quickly

quickly exactly uh the like this phrase you mentioned like na10 is a great tool for procrastinating that's definitely the thing because there are so many things to discover capabilities and strengths that you can build it on top of anything like things that you can do and we'll showcase some of them today so yeah if you want to kill some time definitely take some time exploring it again you'll definitely waste a few hours in there yeah it's a very productive time sink yeah yeah that is true cool so omar do you want to show um so what we did was okay so what we're going to show you is um a small presentation like you prepared a few slides because you know we wanted to be professional in presenting our project and uh yeah so we're just gonna take you through like um the abstract information on what we build and like why we made certain decisions the baby did and then i think we're gonna do a demo and show you the workflows that powers this actual product so omar i'm gonna bring your screen up to the stream now all right

and we called it deutsch schuler because uh you know omar and i um started learning german very recently and our knowledge of vocabulary is very limited deutsch and schuler are two words that we know which means german school so we thought let's call our product dot shooter yeah exactly so uh giving something some background information what we wanted to do is like we just arrived to germany i arrived like four months ago and uh i never spoke german before i was born in brazil always living my life in brazil so german is like really not part of my daily life you know and uh well moving to germany is awesome it's something i wanted for a while but i don't speak german and tonight is learning tonight is very advanced in the german language a2 level right congratulations thank you so like for beginners and for people that already speak some german that's always there's always room to learn more words or more sentences and we wanted to make this easier so that's why we call this dart shula and we wanted to find ways to learn german so

our goal was to try to learn like one word or one sentence a day like make it really easy and simple so you can you don't have to spend much time and if possible if that's something that was coming to you know you don't have to go after this learning you know so while we are every day using our matter modes for internal chat so if you don't know matter most uh that's like slack but you can host it although i think you can hold slack as well but it's an awesome tool very similar to slack so it's great for team communication and we wanted to make the experience better and consistent so getting a message a day to help you learn something new maybe a sentence a phrase a word something like this unintrusive so we wanted to make something like uh for example we thought about it at first so maybe we could use telegram but then it's like something more personal so how do we want to make it like not unintrusive it needed to be practical friendly we wanted it collaborative so we wanted people to add more words and how can we achieve that but also competitive so people are compelled to participate and that's what we wanted to do those are the goals there were the principles that drove our creation exactly and we also

chatted about like you know should this be a flashcard like app or maybe we could also like build mobile apps or you know web apps powered by anything but that we again thought like if we do that people would have to install these apps and you know what happens to apps like duolingo is i know i installed them four years ago when i came to germany and have it like so and matamos is something you know we take a look at daily while working to communicate with others so if we get some new information coming on to our channel that's something uh that we're gonna take a look at and you know if you're on vacation and you don't wanna get bombarded with words every day uh you know you can leave the channel and join back in so i think there's a lot of flexibility involved in this sort of uh ecosystem if we centralize information here yeah like that's the call like big and intrusive so i think we managed to reach that really easily by using mattermost

mattermost so um how one we wanted to learn some new stuff being collaborative so what we wanted to get away okay so we want to have a database of information you know we need like words or sentences how do we get this where's the starting point so we came up with a chrome extension called sent to webhook it's this extension here that i have open um it's free it's open source and it allows you to send a web hook with selected text so let's say for example this text the overview word i can easily send it and i configured it to annotate cloud instance so it sends this text to whatever endpoint that you configure so we thought okay we have an a10 and it can receive webhooks why not perfect glue and we set it up it was pretty easy actually there are a few examples so this is actually the extension configuration page it's super simple when you click this button it opens a field where you can set it up and the setup instructions are on their web page so i'll just show an example real quick on how it works not going to spend too much time here this is their github page you can see you can also make contributions and improvements to this if you want but all you have to do is use a simple json saying giving you the url you want to send this information to uh and the text is sent there you go easy as that you know so it's pretty easy installing and getting a start with this extension and it allowed us to easily send stuff to anything so okay cool we have a starting point

uh and then well we created a deep l note right so that was the goal we wanted to have this sentences of words that you sent translated to german and if they were in german already translate that to english so that we can contribute with sentences both in german and in english and they would be all available and we needed to save this to a database so we decided to use error table because our table is awesome yeah so let's like i'll give you just a short example this is our air table and we have a few words already our table consists of the english text the german tax columns uh a username and the date it was pushed so pretty simple and the last word that was pushed was share and now we'll just share another one like overview send overview 2010 cloud and voila there you go overview was pushed and it's now a new word here in our database was that correct tonight yeah previously yeah good see i'm learning some german awesome so this is a very simple way that we created using na10 to build this database and this is very simple workflow here we created this webhook and it's a post it receives some information from that chrome extension that we have set up we change the data a little bit to parse the body because it comes as a json we need to parse it so transform it from a string to a json object so that naden can work with that then we ask dbl to translate the sentence to us so it gets translated for example this one was in english it gets translated to german that's always a target language this is what we do all times and then we're using some tricky things here uh remember that last week when we created this node we said that the source language uh is not mandatory it's optional field and dpl will detect the source language so we're using this to see if the original text is in german so if it's german and we requested to translate the german actually the bell will do nothing so we have to translate that to english otherwise we already have the source text in english and we already asked if l to translate to german so we just save it to our table so this is what this workflow does and it's pretty simple and works like a charm yeah exactly and what we did first um when configuring the web hook um maybe we can show uh the json for the configuration um or maybe the example one uh works too uh you mean for the extension yeah sure uh do you wanna show this one yeah so what we did here was yeah we can give it any name so we were testing it locally and then within it n cloud and uh url is basically a web hook from my um connected cloud instance and for this extension they have a couple of things like percentage s means send the selected text and you know it's always um gonna be uh a string and we added something like called username as well so what happens is if omar sends it adds to the air table is like hey this is the phrase this is the translation and it was sent by omar when i configured this webhook on my end i changed the username to tane so that way we know who is sending what um another thing that we did was um in the set nodes um so we specified before the yeah a table um either of those set nodes actually both of them look pretty much the same just that german text and english text are flipped um we take the information because the function node we changed the string that the extension sends into json format and after that what we also did was we added an expression so if we click on the value for pushed at let's see it's new date dot 2 iso string so we're also keeping track of when this person sent a certain string uh which comes into play later um we'll show you later what we did with that cool yeah so uh but you see it was so simple creating this because the username is an information that we got from the web hook uh we got either the german or the english tags so we just did the counter part and we added the push add and there you go it's already available here on our table and i just pushed like once and i was talking i pushed another sentence and intuitive user interface that translates into intuitive ben or something like this i'm not sure should sound like this i don't know anyway so it was really simple to set this up so this was like the basic building block for our application because now we have a group of sentences where people can contribute new sentences for this and we have a starting point with a database that can be used for teaching people you know one cool thing about this is that now when i'm reading the news really uh whenever you say a word that i say how is it in german i just right click it and send it to air table it becomes it became an addiction yeah i think that's the cool part about it is like you know we don't have to block time off to uh learn new vocabulary it's you know we are going about our business you know looking at documentations writing to people and um and then we can just right click and send the word and then we have a more uh context appropriate word that gets trans uh yeah translated i mean who doesn't want to talk about uh binutzer over flash every day right exactly amazing okay so a very basic

presentation this is how we achieve like saving data to our table so we made it practical because it's really easy to add new sentences like you just right click on the word or select a sentence and right click it so it's already there and it's translated and we're using an intent to get these translations and save this to our table so awesome first goal was really easy to achieve and then we wanted to make it uh how to share this learning so we decided like we're using matter most why not push some sentences every day to people and uh well let me show this real quick let me join our deutsch schuler channel and this is how it works so every day at 9 00 a. m and at 2 p. m our bot will pick one random word or pseudorandom let's say yeah word from airtable and we'll post it here and we just pick a random emoji as well because why not emojis are cool right now so this is the workflow that runs behind the scenes here so it's a cron it runs every day at 9 00 and 9 a. m and 2 p. m uh it queries all information from our table maybe we should improve this something like this but we get all the information from our air table we use this function and this is some cool thing like we're using javascript to randomize the row that we want so we know the amount of sentences that we have we know the length of the this array so we just pick a random number so this is like very simple javascript that uh based on the size of the sample that you have picks a random number in this sample and we get the information about the sentence we just push it as only one row so we get like all rows from air table pick one and all this one goes through but we enrich this data with an emoji that's the cool thing so also uh the same thing like we have a list of emojis uh that are allowed so we just pick one of them at random and uh push it as well and this is the list of emojis we can add more if we want to we can remove some of them whatever so very simple and easy so in the next situation what you have to do is make these uh emojis more german specific oh yeah definitely like yeah like there's a need in here so yeah definitely something we should work on yeah cool so and then they simply send a message to matter most so simple and easy so amazing right yeah this is awesome and uh what happens is basically so we have like a bit of an interesting structure going on in the workflow here so we talked about the top row and all it does is essentially uh the top part from the crown to mata most is gonna send a random pseudo-random uh record to us every day and um omar if you open the mattermost one node um one thing we'll show you is basically what we did here if we go a bit down if you see on the left side we have this action section and yeah that's how we added the two buttons that you saw in the matamos ui and along with that um so these are integrations so this is something that matamos provides and na10 has a ui for talking with those and what you can do is for every button you can specify a url in the integration part and these urls are basically something that happens once you click a button and in this case i think we'll get to it later on it calls a web hook for another workflow and what else you can do with that is you can add context so you know what sort of button is pushed and what should happen so here what we have done is uh when you list records from airtable using a table node it also returns a unique id no matter if you set it or not airtable does that automatically for you yeah um and what we do is we whenever the button is pressed to the next workflow we also send this record id um and omar if you show the channel again sure what have what happens is like a

lot of these buttons have revealed translation there and you know we need to know which specific record did the person push it for and we do review translation uh and we send the id as well so that we know to translate the correct uh record yeah and this was also very

easy to create because this integration this ui that nav provides to talk to matter most is so easy to implement i literally had no idea how this work and i did it like four clicks and it was all working i was mind blown how simple it was uh because like just simple as that you just click review translation you get a bot message a system message that is only visible to you and that's an amazing thing because uh if i haven't seen the word from today like or if i saw only the first one but not the second one uh i don't want the translations to be revealed to everyone and that's cool yeah no spoilers you know so uh you can like try oh i think i saw this word previously uh maybe and that's one cool thing in german uh war many of the words in german are actually a composition like adding gluing together lots of words you know this is where those huge words come from so uh maybe you know like ah i'm not sure what this means but i know that this part in the middle should mean something like this and you can try to understand based on the context of that word so you don't want spoilers you know because it's inevitably you end up like peaking and maybe you see something and that prunes all the experience so that's what we wanted to do like collaborative and easy so i think we achieved that and the cool thing about those messages is that you can easily delete them so if you don't want them to be flooding or interface you can just remove them and they disappear to you exactly yeah so okay i think this is uh so this is the context and there's another button it's called i want more and more and like just like the previous one we already we also have a context and it says private yes uh which will be used to return another sentence just to use so let's showcase this by now so whenever you click this button i want more it gives you another sentence that is randomly picked from our air table and it shows you the word get built which is the german word for building is this how we pronounce it ah cool yeah all right because uh there's the umlaut in the a so i thought it would be pronounced as e but it's about all right that's a little bit different then cool learning a little bit every day exactly so yeah like you can get even more sentences if you want you can just click it whatever forever and you get a lot more words and you see all these words are somewhat related to the things we are working on uh overview from our talks fundraising creative ideas for virtual teams is from one of our blog posts um and what we can do is actually show them uh the workflow that actually powers

this part sure is this one i'm not sure i can yeah it's exactly the same one so awesome the funny thing about this workflow is it has two triggers so cron essentially takes part and we could have had this as a different workflow but you know a lot of the functionality is still the same so we thought let's just put it in the same one so when we click on i want more what happens is it triggers the web hook node and we get the data there and what happens is we click on if node and we check for a value this is essentially checks for the button has a context called private so if the value to private is not set that means you know this hasn't been triggered by a person this is being run on a cron job so it has to be visible for everyone so if we check if private then what it does it sends a ephemeral message so it's only visible to the person who clicked on the button so it all happens in this note right like to send the message privately ah okay and that's how they know like uh the workflow knows it's like is it something that i have to just show to everybody is it like that job or is it like a personal job like did it be requested was it being requested by somebody else yeah amazing yeah so uh we check if is empty like we did this operation and we check if private is empty then if it's empty we go to this place so it's a message that we have to show to everyone otherwise we use this uh other path where uh we list all the sentences as well because this is the i want more button so we list all sentences we do the pretty much the same um steps we did before we pick a random one we enrich the data with an emoji and now we push it a little bit differently because uh if i'm not mistaken this restriction on how matter most operates with private messages right i think it's um like an end point that hasn't been implemented in the nhm node in uh matter most noted anything yet so this is another good thing you know like at and oftentimes like products like matamos um and i don't know like a lot of google products have really a lot of endpoints that maybe aren't that much of use to people so maybe like at times there's uh things that hasn't been implemented because like nobody asked for it before and this was the case here so we wanted to send a private message to a channel um for a person so what we did was we went to matamos documentation and we just used http request node to sort of send the data in the format that they're expecting and uh you know did this i mean alternatively what we can do is we can actually go back and add that feature on github to matamos because uh it's a fair code project it's on github so that's a great thing yeah definitely yeah so it was also simple to set it up because we just have i was just showing the url that we use uh slash api slash v4 slash and the body the cool thing is that we can create the whole body the json object entirely and uh we can interpolate the variables easily using nh10 expressions with whatever we had so like in here we get the user id that came from the web hook node so it's a node way behind uh we get the channel id where uh the click happened and we sent one person this is like this i want more operation where we send the german and the english text only to you so that's how we did it like we have the german tags one from the function one node the node that ran previously we get the field called german text and the english text as well and we just create a pretty message send it to you on matter modes and you receive that one privately and so that's one cool thing because we are sending a message to a channel which is destined to a single user like it's visible to only one person that's something i really love on matter most it adds a lot of power to how bots can interact with people right yeah exactly yeah amazing um so cool like this is the way like

using this we have we found a way to share the learning so if i wanted to learn a word or a sentence or a phrase or something like this that i wanted to know how it is in german i just added to our air table and eventually everyone would get this message so that's the cool thing it it's simple so right now it's simple it's an intrusive and we made it columbus awesome and you can even get more if you want so why not and one thing is uh that i should mention is you know um we have a couple of people in our company who are learning different languages as well like oh yeah omar mentioned he wants to learn spanish as well and our founder and um you know you can easily change uh the configuration in dbl to have it spanish instead of german and then you have spanish should i don't know how it will translate but you're getting mine uh i i'm not i don't i know the word in portuguese it's escala no so school in portuguese is escala and cool things that it sounds so similar in many languages so yeah we can also use a creative portuguese one i like to learn spanish because although it's really similar to portuguese there are many slight differences you know so it's something i would like to learn a bit more i worked for a while with people from colombia and it was very cool because uh they were all developers here so when discussions started to like get you know more fervorous uh when schedules heated up they switch from portuguese like actually we were using english most of the time so not even portuguese or spanish we were using english but then like when discussions started heating up they would switch to choose spanish and it was awesome because i started to learn spanish by by seeing them already so it's a really fun experience yeah it's awesome okay

so uh we also explained how to get even more but we wanted even more why not so and i think like uh one of the another drivers behind this was um you know we had a whole day hackathon and uh and it is pretty awesome honestly and we finished way too soon and like we had half a day left like it was lunchtime and i was like omar we are done with what we wanted to do so what should we do now so we thought let's create a website yeah so uh i had an inspiration and yeah it's an inspiration but in the end we almost copied it i don't know if you've heard about this website it's called what the commit. com and it contains amazing and very funny commit messages they should never use i hope so for example it's 2016 why are we using code fusion which is something i would expect from a company using code fusion in 2021 maybe two so imagine 2016 and every time you refresh this website you get a new commit message so you can use i would definitely recommending you not using this so like computers like ah and it's really funny you know like this one so we thought like why not build something like this so that's what we did

um we called it deutsche la and we managed to register those three domains it's actually a simple register uh you get this website for free and the cool thing is that even though it's free it works pretty well and uh they do an amazing trick because we asked them to redirect to our na10 instance and that's something we'll talk about in a little bit how we did this it's magic um but the cool thing is that it's as simple as it can be like i'm just showing the source code they just add a friend frame to your website so it's pretty simple you know but there you go like we got the emoji that we selected randomly from our notes uh the text in german and the text in english and who posted this message so we wanted to do something like this and every time we refresh oh what happened okay uh their proxies are a little bit weird sometimes it says uh the website was not found but it works so and or something like this monitor changes and every time you refresh you get a new phrase and you can always

see who posted that so the cool thing is that how we did this and this is something that was mind-blowing yeah and so maybe you can load up the workflow for that but i can give a bit of background there so omar and i thought like see we have this air table so essentially this is our database of sorts what we're gonna do is uh we'll have a workflow with a webhook node so you know request summate to that uh similar mechanism we pretty much copy pasted it a table gets records the function node the code in that selects a random one and then we thought what we would do is basically create an api endpoint here so it would send this emoji german text english text and the person who posted it and the website would actually get this information from the api so we were talking about doing it that way so omar actually went ahead and created like a express application and used jquery to basically uh get this information and what happened after that was we were talking with our founder yanis like hey and where can we host this like

do we have something where we can host this kind of uh stuff and uh yeah this is actually the code that omar wrote yeah and um this was one of the mind best moments of last week for me and nian goes is like wait what are you gonna what are you trying to do and we showed him all this and he goes like you know what you can actually serve html from anything and it's like what and then he showed something to us and then we are going to show it to you right now and it was amazing we actually didn't even need any hosting or anything so this is the workflow um it basically um let me see if it's this one no this is the part to review answers sorry

this is the one the website exactly yeah so webhook essentially what we do is uh there are some additional settings here so we send only uh response mode is last nodes the last node that gets executed in this workflow uh response data is first entry json and then we have added like response content type and it's text. html cursor qtf8 and the property name is data here and then what we do is basically same stuff get information from your table uh choose a random emoji range a random record and we finally set an html uh text so what we do is like this is all the code that omar wrote but instead of using jquery or a server we added expressions here so it gets that data from the previous node and just serves that page serves this html markup as a web page and this is actually our whole website so if you think about it doesn't even exist till the moment you call it um and yeah like we then purchased dot tk it was a free domain just google that and yeah got that so omar just pasted it uh copied the workflow from uh from our webhook node copy the webhook url actually yeah and here we have our webpage and this was mind blowing because this is awesome we didn't need any hosting we didn't need anything it's all in from anything this was completely unexpected you know this was definitely the most like mind-blowing thing because so far it was being fun and cool and some learning and everything but this part like wait can i serve html pages because building an api on top of an a10 once you realize the web hook node and its capabilities well it's easy to understand okay i can build a whole api on top of anything but then getting to realize that you can serve even html pages that's when things get serious it's one of those universe mind moments right yeah this like was completely mind-blowing so there is no need like to uh i created

this simple express application it's just like basic express axios um i had to query because um anytime already contains the credentials and all the workflow information to talk to our table and i didn't want to re-implement all of this using express so i was just going to query our ntn instance to ask for the information so german text english text emoji and the person who sent the sentence send it back as a as an end point expose it using our express application and a basic html page that we were had in here like index html it's the pretty much the same html you saw on that page but i was using like plain oj query here just to get this information and display it on the page but then seeing that you're able like realize that you're able to create all of this and serve all this content using any 10 alone an html page with all of this uh like you can create a whole website you know and how cool is that exactly yeah i guess like one thing we missed was uh

we can show our viewers like the workflow three so what happens um when somebody clicks on reveal translation this is a pretty straightforward workflow as well like what we do is we are getting the id record id here um and the air table just looks for that id uh that is provided by the webhook and just returns the english text as a private message uh as a female message tough word yeah so well just like and i mentioned we're using that context that we use for matter most buttons so whenever you click the button it calls an endpoint and sends the contact's information and we use the sentence id from error table so that's how we glued it all together and there you go you have the uh we get that specific sentence so we're reading from our table and we're pushing that to matter most using the private messages in the channel right so like with this

we so far managed to get like even a website running it is amazing and we said like okay so how do we make it like how did gamify this so we wanted more so we decided to create a scoreboard with this so why not um we created a matter most command called slash scoreboard and i'll use it right now just to show you how it works so when you type sql slash scoreboard it presents you the url for a retool web page that we created and i'll explain a little bit about free tool real quickly retool is a well it's i'll be using the word tool quite a few times now retool is a tool that allows you to create internal applications and uh assisted administrative tools for your internal company and even for external things maybe but like mostly for an internal company so exactly like a dashboard uh or like your support team needs something like i don't know maybe you reset some information about a user uh query a user quota from your database like any sort of internal tool that you need and you sometimes have people going hey developer help me i need this information or can someone export me a spreadsheet with something you know all of this uh repetitive processes you can create reads whole because it's a it's an amazing assistant to create those interfaces so you can add buttons you know simple as that just drag a button and okay on click run a query for example you set up what happens on every reaction and the interface is really simple to create i'll be honest i was completely lazy all i did was adding label text here and a table and voila it was so simple creating because uh the table object requires um a resource so you have to give it a resource where it attaches information from and there are plenty of possible resources and why not use na10 as a resource i think you can also connect it directly to our table but then i would have to add our table credentials truly tool and maybe another api key so like why this hassle i already have anything and creating an endpoint for this takes like 10 seconds so uh we created another endpoint here and you can customize it as much as you want for example you can send url parameters custom headers for example for authentication if you want to make it secure more secure extra body values so you want to add a payload information for whenever something queer for whenever some somebody interacts so you can create like complex forms i don't know uh i want something that to enrich our user data so for let's say your sales representative is with the lead on a phone and he needs to provide the phone and something else real quickly you can create a small a sample screen on retail uh where person can easily type information and get it saved you know i'm just like giving ideas which is really simple to create those simple tools so what i'm doing here is this i'm just querying this url so if i call this url you'll see that it provides me with a simple json and that's what i'll be using to uh feed that table so it basically returns the username and the score and that's a cool thing i'll go over in a second and i just display it right here you know simple as that just get user name of the score and i didn't even need to change anything like um i called this resource i said okay use this resource and you can use this um the resource name is called get all users so i just call get all users. data and i didn't even need to say that to name columns or anything just use dot data and there you go it displays everything so yeah how did how do we calculate this like how is this core created you know how is this scoreboard so ah let me just show it in real action you know uh so whenever i click the slash that whenever i click uh i type slash scoreboard i have this url and when i click it shows to me the scoreboard which was like omar i'm winning can i no bring it on man i got a lead here

anyway it's another workflow like so this is the one for the dashboard what we do is that we return all entries from uh from the last node what we do is we query all information from error table just like we do always and then we do some javascript magic where we go through the list of sentences that were added to eric table and for every word that you sent in german you get one point so that's what we're using right now so this is a simple and easy way to create a scoreboard but if you want to make it more complex like i don't know i want to weigh it based on the length uh or older sentences get a penalty to score i don't know you can you name it you know uh so this is some plain javascript that we did like very simple array operations and uh even if you're not like into programming you're not like a developer uh even if coding is just like our hobby you'd be amazed by this code because it's so simple and at the same time it contains so many different things so we are mapping we're iterating for an array we are splitting a string into words using the split function we're calculating the length of this array uh we're adding this to the score of every user so for each sentence split the sentence into words count them add them to the scoreboard so if the user doesn't exist yet in the array uh initialize it with zero so every user starts with zero points and they get more as more as we iterate through the sentence that we found an error table and then we create a final object that m8n is going to read and serve to our error table so oh and we also sorted based on the score so we have a descending scoreboard so very simple and amazing thing to create you know yeah this is really cool because uh

added the element of gamification a bit of competition and um you know like this is really the beginning because we've been thinking about you know how else we can expand this and improve reinforce our learning and so on i mean you can create an app with things like i know bubble web flow there's so many cool no code tools out there as well there's also things like apple studio where you can use figma to create your own mobile app and you can use this data from your table and even configure it in a base like okay actually just send me words that i have entered so you can even have it customized or maybe have a selectors like i want to read all the omaze words and uh yeah a lot of different things there definitely like uh one thing we were thinking about creating it was like really overkill and unnecessary but we can create like uh this web page uh we can add the authentication because retool supports that uh and we can create like an admin page where you can for example uh remove a sentence because it's duplicate you know instead of going to air table so you don't have to share your air table information with anybody you can create actions in the retool that will talk to anything and it end will request will proxy that information to error table and maybe remove sentences or edit something you know uh there's one i'm not i don't remember exactly which word it was uh that we asked diane i don't remember now it's extendable right because yeah extendable workflow automation actually this is our word and jan said yeah okay like it's not wrong but there's a better translation for that so we definitely can't change this here and just save it but like we can create another tool so i don't have to share my airtape with anybody uh where they can add it some part of the information and that's something really cool you know um because let's say you're in a company in a big company and you have people from different teams you don't necessarily you don't always want everyone to have access to all of your data uh so using ritual security like authentication along with site na10 you can easily have a lot of people collaborating in the very same database uh without the wrong permissions you know it's a very simple and easy way to restrict access to what you want and whoa how cool can that mean you know yeah i mean you can also build a twitter

bot maybe shares german words and earnings with the rest of the folks you could even configure it so that like okay you see a word every day but you don't it doesn't show you the translation maybe you like it or maybe you enter something in the comments then it's gonna send you a direct message just like the possibilities of this are in this definitely so i think this is resumes like what we did well how was our hackathon on during last week yeah it was i'm quite excited and you know i remember that we pretty much finished all we wanted to do it was like uh the presentations began at 4 45 if i'm not mistaken and i think it was like 4 20 we were already finished and i said look what can we do ah i'll create a presentation because you know i got some time yeah and i was just walking around looking at what other people are doing it was really an amazing and very fun experience like creating this dr schuler yeah in one day you know and expanding the ways because uh we had to pivot a few times like and that strategy on how to serve this website and until we got to the point where jan said you can serve html pages with na10 was i started like okay let me start by creating an html page in my own computer and that's what i started with oh simple html okay now i need to get information from uh airtable okay so let me query na10 but then i started having issue with course because i was running on my own computer and i had to change the headers if you're a developer you probably know what i'm talking about but anyway like it was starting to become a problem so i said okay so i have to proxy it through express and then i started creating an mpi then it was all working fine awesome it's working let's deploy it where you know leon said like why are deploying this just serve it as html and you know awesome like so many learnings during a single day yeah and i think like this is a really great format like hack mission because i mean last time we created things that automate a lot of really cool stuff like the release graphics that you see on twitter today are all created by a workflow that we made me and uh another one of my colleagues ben made that during hackmission and like these save us so much time and even building products like this you know we are uh we have a lot of people joining us from out of germany uh want to learn german and i think it's useful for that and by doing that we learned a lot of things so i can definitely recommend hosting a day for people to automate things that they do on a day-to-day basis because not only you don't like you not only you become more efficient with the things you do but also you know it's the small things that are boring that you have to do it again and again um they take a toll on mental health and i think it's also has a really interesting um mental health perspective because you can then outsource that to your machine uh let in it and take care of that for you exactly sure yeah and those small activities they are a time sink you know because you need to do them over and repeatedly so uh that's the cool thing about hack nation because uh our heck of us like how do we organize those and that's something that um i really like the way we do it um way ahead of time like one month before the hackathon day or let's say heck nation day because this is our hackathon um we sent a survey to all of our colleagues asking uh for suggestions on products they would like to build and um internal process automate so people everyone collaborates on giving ideas and insights about things that we can do and then we start grouping things together ideas that are similar so that's how we ended up working together like both of us me and i and that's a cool thing because you will really be working on something that you want to that something that is really your idea you know and that's related to something that you wish to do to work on and you get one day to focus on that because if you're done like without this hackathon thing uh possibly this would be something just another plan for some day whenever i have time you know would just like keep procrastinating over it and it would never really come to life you know and uh especially for those internal processes when you need to automate stuff that's really valuable because um you know not everyone and the company is necessarily a developer or a programmer and necessarily has this knowledge for example i was saying that we were trying to build an express website hosting an html page so not all of this is really so common to everyone in the team you know so when you spend a day doing this you can interact you can learn you can exchange ideas you know uh this is really a way to bond learn and connect with people so definitely if you don't have hackathons in your team uh try scheduling one and no matter how big the team is our first hackathon we had like eight people right maybe or something like this like it was a smart very small team and even then like we separated teams into teams of two people and that started let's get hacking yeah it is true i think this has been like very uh successful experiment and uh you know we've have feedback from the first hackathon around how we can make it better we implemented those things and like it was definitely a bit smoother than the last time and you know we're actually also working on a content piece um around how you can host hackathons in your own company as well and the great thing about anything is like you know if you don't know how to write code and like you're not so proficient with different technical things you can still go ahead and build stuff and um till we have that content piece uh till that comes live you know if you want to host this uh feel free to get in touch with me or through our twitter account and we'll help you in making this happen for your team awesome cool all right then um omar i think we hang out for maybe two more minutes so in case there are any questions please send them in the chat and you know if you're feeling shy feel free to reach send us an email um or like come to our community community. nh. io and uh we'll answer your questions there really excited to see what you all do with this sure yeah and uh start doing hackathons definitely i had i've had experiences with other companies that i work for uh where we tried creating uh doing hackathons like those sort of hacking marathons like that's the name like that's what it means actually and uh i've never had like an ex a pleasant experience like this one because this is really like the first time i was feeling that i was working on something that i really wanted you know um the other experiences i had maybe we had projects like that were driven by something that wasn't really what i wanted you know and this experience of building a project where you really feel like you're the owner of this thing uh working on something that you are really interested adds an awesome layer of interest and engagement to the marathon exactly yeah that's true because i think in a lot of cases your work it's it becomes another day of work uh a bit more intense if anything um so i think this is cool that uh we had this format and i think uh i'd have just enjoyed it or not yeah definitely yeah i think the whole team enjoyed because uh we were really craving for more true that yeah can't wait for the next one me too awesome so all right thank you so much everybody for attending and yeah as i mentioned if you have any questions uh or if you want to host your own hackathon or hack question you know reach out to us on twitter email however you prefer and we'd be very happy to support you with that and omar thank you so much for joining in the stream again and uh showcasing what we built no problem thank you for inviting me feel free to reach out people uh our community firms are always very active we have a very thriving community and it's awesome to see you joining us welcome awesome all right everybody thank you so much and thanks omar have a nice day bye