Kivy Intro - Mobile and Desktop App Dev w/ Python

Key Takeaways

what's going on everybody and welcome to a Ki tutorial series if you don't know what KY is it's a crossplatform gooey development Library the idea is that you can code it in one place one time and it just works everywhere on Windows Mac Linux as well as on mobile with like Android and iOS uh it's been about four years since I looked into KV curious about the changes curious if like packaging and deploying to Linux I'm sorry not Linux um Android and iOS like on mobile curious to see how that works out now after it's been some time was pretty clunky before so to get started uh head over to ai.org go to download and grab the download instructions for whatever operating system you intend to program on this isn't for running it it's just simply where where do you want to develop your kyv app so I'm on windows so I'd go here grab these things there's some stuff that's uh like you you could this is optional um kiwi examples also optional but if you like Ki I would suggest coming back and grabbing the examples uh just so you can see how other people have done things and get ideas about how you might want to do cool things with your KB app also check out the API reference if you want to learn more the API is huge there's a lot of stuff here okay so just kind of glance through that get ideas again about things you might want to make with kiwi if you like kiwi so uh with that go ahead and install all the things you want positive video if you need to and then uh continue when you're ready to go we're going to start making our first kwi app ever in the series uh what I'd like to do is make a chat app with Ki so the idea is uh you can taking from our sockets tutorial we want to be able to uh create a chat app that can work on our phone and our desktop and all that kind of stuff and so we're going to use KY for the UI aspect of that so uh let's go ahead and get started so to use KY no surpr uh we're going to import KY without the capital K uh from k.a we're going to import app uh this is just your base app class every app is going to have it uh then from k.u. label we are going to import label this is just so we can add some text then we're going to say ki. require and this is just so we can make sure that people are using the same version again this is just mostly for development purpos so KY require 1.10.1 uh pay attention to what version of Ky you installed so as soon as you install it you'll see what the version was so mine is 1.10.1 yours might be something different um also when you do install kiwi you could always do pip install kyv equals or double equals 1.10.1 if you need to get the exact same version of me cuz something's not working and you're not sure if it's you or if it's just the version okay continuing uh so KB require done now let's go ahead and epic app and epic app is going to inherit from app can I get away with that I don't know if my uh pep eight linter is happy with that or not looks like it is okay class app uh or Class epic app inheriting from app what do we want to do we are going to run the build method and the build method is pretty much your initialization method right it it's your initialization method without being an initialization method because app already has one but you'll see in a moment we have to supersede that anyways pretty quickly anyway your initialization method so we're going to build and all we're going to do is return uh label uh hey there and I don't remember if this is the F I'm assuming text is the first parameter but just in case go ahead and just pass text equals hey there and then your usual if name equals does anybody know what Dunder Dunder magic Dunder is fascinating anybody knows what the heck that is let me know man okay if name equals main uh epic app.run don't forget your parentheses in both cases otherwise not going to work very well okay let's go ahead and save that and I'm going to run that in another window because I don't think it's going to work out in Sublime I can test it in Sublime let's just try it real quick I just don't think it's going to work yeah I don't see it here so I'm going to go ahead and exit that tools cancel the build and then what I'm going to do is come over to KV tutorial here open the command prompt and do pi- 37 kyv app.py go ahead and run that if you get any errors they'll be displayed here so you can uh hopefully Google them or ask you know ask in the comments anyway here is our app awesome one thing to note right out of the gate is you can resize it and it just kind of just works and that's kind of the point is it works on many different screens or on a phone if you were to rotate your phone it'll fix itself and all that so um cool all right so cool but not that cool so now what we're going to do is actually start building the first page of our app because this is pretty boring up to this point so we're going to say uh from k.u. grid layout we're going to import grid layout and then uh we want to bring in text input so from k.u. text input we're going to import text input so trying to make a chat app the first step to this chat you know server app thing is we need to input at least a username for sure but also in our case we can customize the port and IP so really the first page of this app needs to be like you know uh IP port and username you know um so for all those things and then probably like a button to connect and then when it's connecting um then switch to the chat app page right which will just contain the chat history and then a field for you to chat in okay so um so we're going to use the grid layout this is just so we can organize the widgets and stuff right and then text input so we can input some text and then label um we already have that so text input text from the user label so we can just put some text on the screen basically so uh the first thing that we're going to do is make a new class so rather than epic app just simply returning the label it's actually uh what we'd like it to do is return the connect page now we need to define the connect page so uh Class Connect page and connect page is going to inherit from the grid layout and then one thing to keep in mind first of all there's many layouts but also to further customize layouts you can like in the case of a grid it's obviously a grid surprise uh but you can like make certain cells of that grid a certain percentage width or height uh and then also you can add layouts inside of layouts so uh just keep that in mind that you have lots of options there and anyway connect page grid layout awesome uh we're going to Define our init init method here uh and pass self here don't forget that and the first thing that we want to do is actually run the init method of grid layout so we're going to say super uh in it and uh self and quars qus one day I'm going to get it and then we need to add the quars here as well okay so if you don't totally understand that that's okay we've actually really never covered the super in it but basically all you're you're saying is super so you're referring to grid layout run the init method okay um and why might we want to do that well John I'm so glad that you asked let's just copy pasta uh let me just run a test. oops I didn't want to do that I want this one to be modified test up high uh we'll just open that and let's say you had two classes you had class one uh and in fact uh let's do Define in it sound and then all we're going to do is print uh one okay let's say you did that uh and then let me just copy this come down here paste we're going to call this two two and let's say two inherits from class one so that's your parent class right uh let's just say we made a two object You' see here it just prints two right um but sometimes you'd actually want the init method of the inherited from class otherwise known as the parent class um you want that to run as well so the way that you would do that is accessing the super method uh and then we're going to say super uh in it um self or not s let's see uh super init there we go um and boom obviously you don't need to pass self here that's just understood okay so um now that's how you're going to run one and two so you run the initialization method of both classes and that's what we're trying to achieve here okay so uh back to the regular World um cool so the connect page basically is going to have two columns because you're going to have some text on the left and then the field input on the right so it'll be like you know IP and then you enter the IP port colon right you enter the port username colon enter the username that you want to use right so we need two columns so we're going to say self. calls equals 2 and then we're going to start adding some widgets so self. addore widget this widget will will be a label widget uh where the text equals IP colon then what we're going to say is uh self. I equals the text input and then we'll pass multiline equals false here and then uh we're going to say self. add widget self. add widget self. I so really we could say this so imagine you've got two columns and then infinite rows so boom you've got IP colon just a label it just says IP colon and then right next to it it says um basically you got this text input widget um added there so you can just boom input some text so widget number one widget number two we've exceeded two columns we now are on row number two easy so now we're going to basically do uh the same thing again with port and for username so I'm actually just going to copy this paste paste port and then username and then we're going to say here port username copy this pasta there copy that pasta that all right that looks pretty beautiful what do you guys think uh is it going to run hey man there's only one way to find out let's uh do this save that um okay so let me run it and just for the record I probably won't always have this on the screen if I say I'm running it I'm just doing pi3 7 K app.py if you're on Mac OS I believe to run it it's Ki and then the file name just for the record did I pass self I probably pass self to this I really wanted to keep doing that oh I don't want to do that either I'm so used to just heading control B okay rerunning it okay I know python I swear okay so there's our app okay so just in case I zoomed through that too quickly I did the exact same thing I tried to do I'm just so used to like anytime I in it I just pass self cuz like you never you never actually run in it right except when you're doing the super but you never actually intentionally run in it so literally every time I do in it it's just like H ingrained in me S uh anyway cool so here's our app and again pretty nice that you can just kind of continue resizing it and it just works right um so yeah pretty cool uh now what we want to to have is probably one more row uh and have like some sort of submit button where you click on that and then we got a handle for that so one we need buttons we need to start handling for events we got all kinds of stuff that we got to figure out and I'm going to save that for the next video so uh quick shout out to my recent Channel sponsors members awesome people Clark Uma con draad duck and digier thank you guys very much for your support you guys are are amazing all right everybody I will see you guys in the next video