Creating Your First Hello World KMM App (Kotlin Multiplatform Mobile) - KMM for Beginners

hi guys and welcome back to a new very exciting video today because what we will start with today is kmm kotlin multi-platform so in the next weeks and months i will actually be teaching you how you can build android and ios apps together with our favorite programming language kotlin around the start of this year i made a video here on youtube where i talked about that km kotlin multi-platform mobile is actually a pain to set up and actually yeah it took me a whole day to actually get a hello world up running and that's not better so now we have a much more convenient setup and we can just create our km project once we have the initial setup and run that just like a normal app it will run on ios and it will run on android it's really amazing and that's why i also start to make tutorials about that now that doesn't mean that i will now only do km content so please don't think that i'm also just learning that and i will of course only make a video about something came and related if i also personally and thus don't understood that myself because otherwise yeah i can't really teach it so in this very first video of this game and playlist i will show you how you can build a simple hello world app that will yeah just display a text in the end and of course all the setup that is involved to actually being able to create this km project inside of android studio and also inside of xcode first of all in case you have never heard of km before let me quickly explain what that is so kmm stands for kotlin multi-platform mobile so we do have kotlin multi-platform which in the end it just refers to sharing carton code between different platforms so that could be a windows program that could be a mac program that could be an android app so that itself is just kotlin multi-platform and now there is a special version you can say of carton multi-platform and that is km carton multi-platform mobile and that specifically refers to sharing code sharing kotlin code between android and ios so it's actually not like flutter that we just have one single code base in case of flutter that would be dart code where we just put all of our code all of the ui code business logic data logic and then we have an app that actually runs on ios and android note with km it's actually a little bit different here we actually are only able to share big portions of our code so the ui and the things that are actually specific to each platform still need to be implemented separately so if we have a screen then all the ui elements on the one hand need to be implemented either using japan compose or xml for the android side or using swift for the ios site so we actually need both these implementations for the ui because that is very specific to each platform but on the other side if we actually have business logic or if you have data logic like having a database query having api calls then we can actually implement this logic in kotlin now with km and share this between ios and android so that we only have uh have to write that code once and actually use that code in both our ios and android app and the big advantage of that is now on the one hand of course that we can use kotlin which is a great language but on the other side that we just get two purely native apps so both for ios and android we will be actually using the native ui components which will on the one hand make it feel like native because it is native so we will really get two native apps out of yeah just one not one code base but at least a code base with a lot of shared code between both platforms however there are actually two major limitations i want to talk about here that are important to know on the one hand you need a mac to actually follow through this playlist because if you want to make the ios app here then that only works if you are able to run xcode which is just the ide you use to make ios apps and you also just need a mac to run the ios emulator for example if you just care about the android side here then i think you can do this on windows but then of course you can build the ios app and the second limitation that is important to talk about here is that all the libraries you actually use in the shared code section need to be purely written in kotlin so you can't use something like retrofit for example because retrofit is a library that was written in java so instead you would need to use something like a cater client which is a pure carton library so before we now actually get into installing kmm and setting that up to actually be able to create a game and project i want to stress out that i will structure this playlist and basically all my km videos in a way that it makes it very easy for people who know native android development to actually follow through so because most of my current subscribers are native android developers i will of course spend more time explaining things uh on the ios side how we can build ui on that but i will spend less time for example to explain specific hotline language features which most native android developers should know about if you're a complete newbie here like you you haven't coded at all then i really wouldn't recommend starting with something like km because that's already quite complex it comes with a quite complex project structure so in that case i would recommend to first learn some basics of uh just native android so for everybody that is following through here the prerequisites for you are actually that you have android studio installed that is what i assume that you have the jdk installed which comes with android studio so the java development kit and that you have xcode installed so that is the ide we will use for the ios side if you don't have that then you can simply get that on the mac app store so simply search for xcode click install and that's pretty much it and the rest that is actually needed here specifically for km i will actually show you how you can install that and how you can then set up a blank km project that we can also run on ios and android so i'm currently in my terminal and the first thing i want to actually make sure is that you have brew installed which most mac os developers will probably have so we can simply type brew and if it will print you something like this with um potential commands then you are good if you don't have this and if it says something like i cannot find command brew you need to go to brew.sh and actually run this command in your terminal to actually install homebrew so homebrew is in the end you can see that's pretty clear it installs the stuff you need that apple or yeah in this case apple doesn't give you so in this case we will use this to install a tool called k doctor later i will talk about what that is actually for we're actually not later let's actually get to this now so if you have brew installed as i said then you can type or you should type brew install k doctor so k doctor is actually a tool that comes from jetbrains which actually just scans your system for everything you need to actually be able to create game and projects so that's actually a perfect starting point to actually quickly see which tools you're actually missing to create a km project we can do this here after installing that by simply running the k doctor command pressing enter and now we get a bunch of text here so first of all you can see your system and this v simply stands for a check so that's good and if you have an x here then there is something wrong which prevents you from actually using km so you can see my system is yeah it is an mac os system so that's cool i have java installed which comes with android studio that was properly detected um here android studio we see there is next so android studio is currently not set up to actually support km and why well it tells us the carton multi-platform mobile plugin is not installed so it directly tells us what we actually need to do or what we're missing and that is what we now need to work on so we want to open android studio and here in this plugins tab on the left you want to go to marketplace because there is a specific plugin for android studio that is called kotlin multi-platform this one here i want to click install and with this plugin it basically just adds the option for us to create a cayman project directly when we see all these options where we can create a new project like do you want to create a compose project an xml project and then there will be an additional option for km projects so we can now restart our ide to apply that change and then if we now actually run this command again this doctor then we should now see that there is a check mark for the android studio part yes there is so now it actually properly detected that we have the mccartney multi-platform mobile plugin installed xcode is fine since i have xcode installed and now we see there is an x for cocoapods what is cocoapods googlepods is basically the dependency manager or one dependency manager for ios apps and we can use that together with kmm in this first setup video we won't because that involves quite some more setup which i will show you in a later video but we should still make sure that we actually um get a check mark here basically and for that we can see in my case system ruby is currently used and cocoapod is not compatible with system ruby so yeah cocoapods actually needs ruby to run and what we want to do in that case is we want to install this ruby version ruby 2.7 via homebrew so we use brew again when i say brew install ruby at 2.7 so we specify that version km is actually compatible with or actually um cocoapods install that there we go that was installed if we now run kdoctor again then take a look here now we get that check mark here for cocoapods because we install the proper ruby version 2.7 this ruby gems should actually already come from xcode as well as cocoapods i think if not like if you don't have cocoapods and cocoapods generate you can install these using ruby gems so you could say gem install cocoapods for example or cocoapods generate and that would install that if it would tell you that these are missing but i think that this actually comes with xcode the important part is now that it says your system is ready for cotton multi-platform mobile development and i hope it says the same for you of course i can't cover all the different mac os specs here um i'm running an m1 cpu here so that is working fine for me i don't know if there are any specific uh setup steps you need to follow if you're using something like an intel cpu on a mac um in that case there is the uh documentation for km so the getting started guide is actually quite good so i would recommend to simply take a look at that but yeah it would be cool if you would actually let me know if you have some some problems with the setup just down below by leaving a comment or so and maybe we can search for a solution together inside of android studio now since k doctor tells us we are ready to use km we want to create a new project so we click new project then here under all these different types of projects we could create we need to scroll completely to the bottom and since we now have the plugin for k m we can also create a carton multi-platform app that is what we want to do clicking next giving this a name and let's just call this my first km app so this won't do anything in a later video we'll of course also make an app that actually has functionality that is useful but for this first tutorial and the second one will actually just have a plain project in the next one i will then actually walk you through that um blank project structure since that's quite complex already but for now let's just click next and now that is different from creating a normal android project because we see that we now have an android application name and an ios application name and we actually have a shared module name so we will now have a project with three different modules on the one hand we have one for the android app so where we just put our plain android code well actually i'll actually get to this in the next video in more detail but we basically have three sections in our app we can say where we can put in specific code so android code ios code and shared code that would be the the quick version of this and here we can see we can choose an ios framework distribution it currently selected cocoapods as a dependency manager for now i want to use the regular framework so that it does not use this cocoapods because that will require some further further setup that would be too much for this simple setup video here if we choose a regular framework it will just work out of the box that we can run our app so you can also see the difference if we're using cocoapods we can then just easier add dependencies with this cocoapods dependency manager but this requires some for the setup in xcode and if we use the regular framework which we do now then is the then the plugin is actually directly integrated via a gradle task so it will still use gradle at least for android and we can now click finish and after the initial sync basically finished we will see something like this right now the package structure looks super simple but as soon as we actually switch to the product view here which is more relevant for km projects we see if we open this up there is a lot of stuff happening we have an android app we have an ios app we have a shared module here we have tons of gradle files as you can see here so i will actually talk about these gradle files and how this structure works where we put which code i will talk about that in more detail in the next video and in this one we will we just want to run our app so first of all what you want to do is we want to run our app so we click on run android app and this will just run our android app i will of course also show you how you can run the ios app but if i drag over my emulator here we see it says hello android 28 so if we actually take a look here in our android app module in source java then all we see is nothing new to us android developers we just have a normal main activity and here we just display a text view where we just set the text equal to greet grid comes from this function here it returns greeting that greeting and this greeting is actually a shared class so if we hit control and click on that then here we actually see the implementation of that and it returns hello platform.platform and because for ios and android there's of course a difference how we actually need to access the current platform the app is running on that actually belongs in our shared code but this greeting class is actually shared between ios and android if that makes sense it's just a very simple demo here in the next video again i will get more into this how this works and i'll also show you of course how you can use jetpack compose with this so right now it's just using xml by default that's really not a big deal to migrate that but what we now want to do is we want to open xcode and we want to click open a project or file because what essentially happened here is that the is that the ios part of our app is already also included here in our initial km project this is another project that i'm currently talking about let me quickly open this ios app folder here in finder so we go right click open in finder then i have that here i can open xcode again i simply want to let me just pull this over we will simply drag this ios app here in this window so we just get the path of that and then close this again so this is now the ios app folder here of this km project and in here we have an xcode project file that is the file that xcode needs to actually read our ios project of that so that's really just the ios side of things so we want to select this and click open and now it will open that in xcode it's currently indexing that but on the left we can already see the files that are now ios specific for example this content view and here we again see this greeting class which is the cool thing now about km you just saw this greeting class on the android side and you also saw that now on the ios side so it's effectively shared code you also see that it says no such module shared this should actually go away as soon as we compile our project for the first time and launch it on an ios emulator which i already do have open here let's actually run it on that one by selecting a device here which is i think iphone 12 pro if we then click run then waiting a little moment build succeeded you can see that works and now we see the ios app it says hello ios 15.5 which is super cool so you now successfully made your very first kmm app that works both on android and on ios so i hope everything worked well for you i could believe that um some of you might have some struggles because km might still be a little bit tough for specific hardware combinations i would say um but for me it now works really well half a year ago it was terrible to set this up and in the next video i think we're all ready to actually go through this complex project structure so i can actually explain what does which um and what what does which things and yeah what just the the purpose of all these files are where do we put which code and all these things so i hope i'll see you back in the next video have an amazing day and bye you

Channel: Philipp Lackner

Views: 89,371

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, kmm, multiplatform, xcode, android studio, shaerd, shared, code, hello world, cross platform, flutter, ios, apple, iphone, app

Id: 7Wl-G8aXxDA

Length: 18min 12sec (1092 seconds)

Published: Wed Aug 17 2022