"Hello World" H2O Wave Web App in Python [H2O.ai WAVE Tutorial]

Key Takeaways

hey friends welcome to one little coder in this video we are going to learn how to build a first hello world H2O W application the H2O wave application is um basically a software stack that helps you build a web application and the previous video we learned how to install H2 if you have not seen it please check it out it's it's um it's a pretty simple process so in this video we learn how to build our first Hollow World application we going to uh follow their tutorial pretty much not going to do anything different uh so the first step is you need to run your existing uh wave server so if you have already got a wave server make sure uh that you invoke it so first get your terminal and once you have your terminal let me increase the size of the terminal if you cannot see it let me increase the size think this is this is decent let me put this in one side this in one side I hope you can see that okay so now that we have this the first step is you have to you have to run uh wave so wherever you have installed wave and if you have followed their tutorial probably you would have installed wave your home directory um wave and then you can go there and then do waved once you do this thing you can see that at this point the wave server is uh initiated so you can basically go to Local Host um Local Host I think the URL is uh the port number is 1 let me just quickly check the port number um it is still loading that's uh that's quite bad or what worth yeah uh okay okay let's uh let's see this um host one 01 okay it's it's it's searching myo that's fine that uh we'll get to it uh so it's basically one1 that's support in which it is running so you can see it is saying wait waiting for Content that means now you can be sure that your wable application is successfully running so uh this is one uh once you you know that your wave application is running so it's better you create a new environment so now is the place where you are going to um uh put your wave application so make sure that um you want to put it in a place so what I want to do is I want to create a a docu uh a directory uh where I usually keep my python codes uh I'm going to call it wave apps okay uh inside wave apps I'm going to enter into wave apps okay so once I'm into wave apps um I can I can just start with my basic uh application so before even um I do that uh let's say I want to create a new directory get uh hello world okay so now at this point I've got uh my hello world uh you can see Hello World okay that's nice so you can either create a virtual environment only within this directory or you can uh you can have a virtual environment overall it's up to you Python 3 mvn VN so I'm uh I'm creating a virtual environment first that's what it is advisable so once I once the virtual environment is created then we are going to be in action so the virtual environment is created and then the first step is maybe like um we can we can first uh activate the virtual environment saying VN uh V bin activate permission okay I don't want to I don't want to deal with the permission issues uh so let me first quickly install the app uh sorry the package three install H2O so it's installing H2O wave first U that's the package that is required for us uh primarily to do this task so that is successfully installed so once that is successfully installed our next next step is for us to create a new file and for us to create a new uh wave file we can use any code editor in this case I'm going to invoke my vs code so my VSS code is loaded and within my vs code I'm going to just basically basically paste whatever they have uh um that we get in the help document then I'm going to save it within the same directory going to call it um okay uh let let me just quickly save it and then I'll show it to you I'm going to call it uh hello world I'm not going to give any special name for it wave apps hello world hello world. py okay as you can see this is basically copied from their documentation I've not done anything different I can explain this code so first of all uh wave so the wave if you see the server has a lot of pages so this is one page that we calling uh so whatever you are giving here that's going to be like uh your home URL something like that so you have uh we are importing site and UI so UI is going to help us add UI components so if you're familiar with um all of these um packages or libraries that help you create uh that help you create um um that help you create a web application simply so every Everything follows almost the same uh formula where um you have got a UI class and from there you can add the function that you want uh if you see streamlit uh you would probably import streamlit s SD and from there you would start adding UI components so you can see uh this this is basically a markdown card where you can start adding things in markdown so you can have markdown content uh not necessarily we have to have the same content we can say Hello World um let's say this is one little coder trying to show you H2O wave demo okay that sounds nice and this is a box position where it you wanted to appear on the page uh and finally you can save the page so loading the page so once you save the page uh the next thing that you want to do is let's take it down you want to go to the page where this is loading okay uh so you have to go to which is called uh in this case as hello sorry in this case it is called hello uh but uh that hello has to be loaded so that's why I want to show you first if you load Hollow you wouldn't basically see anything because there is nothing it's still waiting for the content so what you can do is you can go and run Python 3 okay it says no module uh that is primar because I was trying to run it just like that rather than activating my virtual environment so B Python 3 so at this point when you can see that the moment we ran the code you could see that this this uh successfully showed the demo so it says hello this is one little coder trying to show you H2O demo uh so the same way you can actually basically uh change it um you can go change whatever you want for example um you've got hello here so let's say instead of hello you want to say uh you want probably want to show it in the homepage itself so now you can say go viral environment and uh now instead of hello what we going to do is we are showing it in the homepage itself so these are uh the things that you can start doing like for example um instead of the markdown page now you can have something else or even in the content you can say um this is a okay this is a title let's see let's try to run it and then you can okay maybe it's not renting properly but uh you can start adding the content here you can have multiple cards here and that is how um you would basically start adding uh um the you would basically start adding the W um components to the wave application so this is um this is a very simple demo uh so basically we followed whatever they showed in the documentation and uh we started uh we started going through we we started with uh creating a directory to put our apps and then from that we created our own directory uh so maybe you can do like how I did it or you can have one virtual environment for all the W application it's up to you uh so you can basically do whatever you want to do and then um you install H2 wave Library python Library uh package for you to start using it in the code so as you know with any virtual environment whatever package that you want to use within code so you have to make sure that you are installing it once that is done then you add your code um whatever python file name it basically doesn't matter much because um this is the this is the place where you are actually defining the page the wave page and this will not work if you stop the server just wanted to show you you stop the server nothing works because of course the server is not running um so that's a main concept uh you now you have managed to successfully write your first wave application basically the hello wave hello world I'm saying hello wave hello world application uh but um yeah nonetheless it's a first step and happy coding so welcome to H2O wave let's hope that it's a good beginning