Build an iOS & Android app in 100% Kotlin with Compose Multiplatform

Ғылым және технология

Visit jb.gg/compose to start building 100% Kotlin mobile apps!
The new iOS target for Compose Multiplatform means you can build cross-platform mobile apps entirely in Kotlin - including the UI!
Compose Multiplatform for iOS is currently in Alpha, so now is a great time to explore the technology: Let’s build a simple app from start to finish in Kotlin. In the process, you’ll see how Compose Multiplatform and Kotlin Multiplatform enable sharing everything - from the networking layer, to business logic, to UI. The end result will be a small app that can load and display different bird pictures from an API, that will run on both Android and iOS!
Find the full, final “My Bird App” project at github.com/SebastianAigner/my...
Tooling:
KDoctor development environment analysis tool: github.com/Kotlin/kdoctor
Kotlin Multiplatform plugin for Android Studio: plugins.jetbrains.com/plugin/...
Demo API endpoint: sebastianaigner.github.io/dem...
Libraries used:
Kamel Kotlin Asynchronous Media Loader: github.com/Kamel-Media/Kamel
Ktor: ktor.io/
kotlinx.serialization: github.com/Kotlin/kotlinx.ser...
Moko-MVVM: github.com/icerockdev/moko-mvvm

Пікірлер: 184

  • @Kotlin
    @Kotlin11 ай бұрын

    If you're coding along with the tutorial: Make sure the kotlinx.serialization plugin (13:38) has the same version as the Kotlin version (currently 1.9.0 in the template, see the gradle.properties file!) Currently, that means using the following: kotlin("plugin.serialization") version "1.9.0"

  • @mofeejegi

    @mofeejegi

    11 ай бұрын

    Thank you 🙏🏾

  • @RaajKanchan

    @RaajKanchan

    11 ай бұрын

    Thank You

  • @dk98126

    @dk98126

    11 ай бұрын

    can you please create an annotation in this video so people would realise that just in time when they watch it? I spent for about a half an hour trying to figure out why serialization doesnt work. BTW this video is such a quality content omg!!! Thank you for your work!

  • @RaajKanchan

    @RaajKanchan

    11 ай бұрын

    @@dk98126 It waited for 4 days and several tries, to figure out what's the issue. Glad to get the answer today.

  • @BhanitGaurav

    @BhanitGaurav

    10 ай бұрын

    The templete has build error, which does not let compiler to generate the sqldelight build classes. Need soloution on this. Yes, app runs fine but how to use sqldelight with build issue? @Kotlin

  • @ravipoon09
    @ravipoon0911 ай бұрын

    As someone who is learning jetpack compose and doing it on the job, I find this extremely useful and motivating ☺️. Thank you compose multiplatform team for all your efforts ❤

  • @nanonkay5669
    @nanonkay56699 ай бұрын

    Finally you can now build UIs for both platforms. That was the one thing I was waiting for. Its finally come

  • @SAPierce2006
    @SAPierce200611 ай бұрын

    A fantastic Kotlin Multiplatform demo!

  • 7 ай бұрын

    Great tutorial. As someone who has a background of developing backend apps using Kotlin, this video is super helpful to understand KMM and the basic mobile concepts.

  • @GabrielSouza-of7kt
    @GabrielSouza-of7kt11 ай бұрын

    Great video Seb!!! Kotlin and Compose will take the world! Awesome to see Voyager! Thanks for sharing

  • @RR-et6zp

    @RR-et6zp

    2 ай бұрын

    flutterflow will tbh

  • @vlogan79
    @vlogan7910 ай бұрын

    One of the clearer Jetpack compose tutorials out there, thanks.

  • @RhexGomez
    @RhexGomez11 ай бұрын

    I actually appreciate the walkthrough on the documentation.

  • @anumamin3886
    @anumamin388611 ай бұрын

    Finally some good example video by Jetbrains 🎉 please make more such videos and keep doing amazing work!

  • @mohanaggarwal4058
    @mohanaggarwal405811 ай бұрын

    Truly awesome demo! Tysm Seb!😁😉💖

  • @RexTorres
    @RexTorres11 ай бұрын

    I learned a LOT just from this one video!

  • @mrkaydev

    @mrkaydev

    11 ай бұрын

    +1

  • @bunhengborath7698
    @bunhengborath76987 ай бұрын

    Kotlin is doing some magic now hope there are more nice tutorial like this in the future. thank compose multiplatform team for your handwork.

  • @nicolagallazzi9295
    @nicolagallazzi929511 ай бұрын

    Great tutorial! It would be a piece of cake to have a consistent navigation library, hope something would pop up in the next future!

  • @alekseyblekot119

    @alekseyblekot119

    11 ай бұрын

    Decompose by Arkadiy Ivanov?

  • @diegoberaldin7888

    @diegoberaldin7888

    11 ай бұрын

    Or Voyager as suggested in the video. I've used mostly Decompose in my multiplatform JVM desktop projects and I think it's great, because it's more than a navigation library, its "slots" (as opposed to stacks) allow to isolate components and have discrete portions of UI+state holders that can easily be moved or reused. I'm experimenting Voyager in another project and it's fine too but still have to put it under stress test with nested navigation and so on...

  • @bierdav

    @bierdav

    11 ай бұрын

    I found the documentation and setup of decompose to be very complicated. Until now I have not a working solution. Would be great to see a proper guide on how to use all of those libraries

  • @GakisStylianos

    @GakisStylianos

    11 ай бұрын

    Decompose voyager appyx circuit precompose Decompose-Router Are all multiplatform navigation libraries. They already have popped up, the future is here

  • @imamyusupbachtiar5461

    @imamyusupbachtiar5461

    11 ай бұрын

    @@GakisStylianos That's very kind of you

  • @xozzy7809
    @xozzy780911 ай бұрын

    Voyager library is the goat, easy to use and easy to understand

  • @cdrv5
    @cdrv511 ай бұрын

    Nice tutorial, Just need these types of tutorials to setup my app and start working on. I still prefer to flutter for both ios and android but looking forward to explore kotlin even further as Kotlin for data science libraries would be great to build good applications for future ai applications.

  • @user-su7no1ld5r

    @user-su7no1ld5r

    10 ай бұрын

    😅yvy9998😊 14:28 😊😊 14:29

  • @letme4u
    @letme4u10 ай бұрын

    thanks for amazing session. Please do consider map-layer and realtime notifications to UI like websockets / graphql subscriptions for next tutorial series on compose multiplatform.

  • @YassineMikeAlpha
    @YassineMikeAlpha11 ай бұрын

    The tutorial is explained very well

  • @owaistnt
    @owaistnt10 ай бұрын

    Magnificent effort. I really look forward to your videos.

  • @sanjaykarki6238
    @sanjaykarki623811 ай бұрын

    Thank you for the video and also information about precompose library i was just looking for the library like that❤️❤️❤️

  • @MichaelMossmanNZ
    @MichaelMossmanNZ24 күн бұрын

    Thanks so much for a great tutorial ... I like your style! ... I've never actually sat through a 50 minute YT video before, but I'm glad I did, and I even paid attention. I have an Android app that I've been working on for about 2 years (99% Kotlin) and now I want that to also run on iOS devices. I'm doing this at the right time IMHO, since CMP is maturing nicely and Google is supporting KMM in general. I just have to learn more Compose, then Multiplatform, and probably a little Swift ... wish me luck =)

  • @ledsonvanini7421
    @ledsonvanini74219 ай бұрын

    Parabéns pelo conteúdo. Você é incrível🔥👏

  • @BenAyesu
    @BenAyesu11 ай бұрын

    Been waiting for this!!

  • @barryfawthrop9962
    @barryfawthrop996211 ай бұрын

    Please consider following this up with an example of how to use hardware like camera in Compose KMP OR where you use native code with Views, thanks Great work

  • @user-dv1ff1dw6b
    @user-dv1ff1dw6b9 ай бұрын

    high-quality content, thank you! 🤯

  • @BenAyesu
    @BenAyesu10 ай бұрын

    That was amazing. Thank you!

  • @khalidrinaldy3671
    @khalidrinaldy36719 ай бұрын

    Great video, i love your penguin meme doll at the back sir

  • @user-fg3wl4xu9d
    @user-fg3wl4xu9d9 ай бұрын

    That's great! More of that please!

  • @markusmcgee
    @markusmcgee11 ай бұрын

    Good tutorial. Would like to see more components like LazyList for iOS and Themes (theme for iOS, Android, MacOS deployment)

  • @hinocenciopaulo
    @hinocenciopaulo6 ай бұрын

    Thank you for this wonderful tutorial 🙏

  • @guanacodevs
    @guanacodevs10 ай бұрын

    I'll admit that I was very skeptical, but this one just convinced me. Take my money.

  • @user-gj9wn3hc9r
    @user-gj9wn3hc9r11 ай бұрын

    Very useful tutorial, thanks!

  • @MrPieTech
    @MrPieTech7 ай бұрын

    You confirmed everything i wanted Thanks

  • @odayprogrammer
    @odayprogrammer11 ай бұрын

    Great work, thank you

  • @tylerwilson3027
    @tylerwilson302711 ай бұрын

    Great video. It would be fun to see this in the warm target too. :-)

  • @mytubekt
    @mytubekt10 ай бұрын

    Great content! Thanks for sharing!

  • @ITwalebhaiya
    @ITwalebhaiya8 ай бұрын

    Waoh How simplify you Teach Thank you 🙏🤝

  • @gokhanfromearth5735
    @gokhanfromearth57359 ай бұрын

    great tutorial, thanks!

  • @kyay10
    @kyay1011 ай бұрын

    Btw, Copilot is amazing at creating data classes from JSON. You can just make a top-level val like: ``` // A typical Json response val pictureResponse = """{ isPicture: true }""" ``` and copilot will make the dataclasses that follow that JSON's structure

  • @finchicoph
    @finchicoph3 ай бұрын

    Oh my goodness, I love this.

  • @emmanuelmtera5936
    @emmanuelmtera593611 ай бұрын

    Very Good Tutorial Indeed

  • @djodoidao
    @djodoidao11 ай бұрын

    Excited to introduce this in company

  • @xorfive

    @xorfive

    11 ай бұрын

    You should wait until it's ready, before bringing into your product.

  • @osisuper98

    @osisuper98

    11 ай бұрын

    @@xorfiveYeah but you should start learning now

  • @DmitryZatuchny

    @DmitryZatuchny

    4 ай бұрын

    @@xorfive I was waiting for jetpack compose to get ready when I started my current project so at that time i chose xml and now I'm stuck with it for a long time. rewriting certain major screens in my app is just not worth it. sometimes you have to predict the future

  • @TheZukkino
    @TheZukkino11 ай бұрын

    Incredible guide. Well done and thanks for this work. If possible, please add, as you said, the repository with DB caching management and injection. This could cover a bit chunck of the development.

  • @weissmannrob
    @weissmannrob8 ай бұрын

    Great Tutorial. Thanks. kotlin("plugin.serialization") version "1.8.21" caused problems switched to "1.9.10" then it worked.

  • @user-yb6vl9nc9g
    @user-yb6vl9nc9g11 ай бұрын

    Great content!

  • @shinobivdk
    @shinobivdk11 ай бұрын

    amazing, I was looking for that., it will save my money XD

  • @Germansdev
    @GermansdevАй бұрын

    Thanks good Sebastian!

  • @offlineuser1888
    @offlineuser188810 ай бұрын

    Great, carefully selected example app: shows only pictures on a grid. This hides the most important aspects of the mobile apps: platform native look and feel. Is this possible with kotlin compose on iOS/Android just like Flutter can do (inlcuding navigation)?

  • @ezriouil
    @ezriouil11 ай бұрын

    Nice tutorial from morocco

  • @eric-ampire
    @eric-ampire11 ай бұрын

    This is a great video

  • @user-cv4vv6ie3b
    @user-cv4vv6ie3b11 ай бұрын

    Osm lecture ❤

  • @ferg
    @ferg8 ай бұрын

    Awesome video

  • @RaajKanchan
    @RaajKanchan11 ай бұрын

    Getting the follwing exception at 19:23 Expected class kotlinx.serialization.json.JsonObject as the serialized body of kotlinx.serialization.Polymorphic, but had class kotlinx.serialization.json.JsonArray

  • @beefpancakez8097

    @beefpancakez8097

    11 ай бұрын

    im pretty sure that instead of doing getImage() you do showImage. Although I am new to coding so take my advice with a grain of salt

  • @beefpancakez8097

    @beefpancakez8097

    11 ай бұрын

    nvm i am wrong, i got that bug near the end and now I'm stuck

  • @beefpancakez8097

    @beefpancakez8097

    11 ай бұрын

    UPDATE THE KOTLIN PLUGIN SERIALIZATION MINE FINALLY WORKED

  • @imharshvardhan

    @imharshvardhan

    11 ай бұрын

    @@beefpancakez8097 what have you updated? as I'm facing the same error

  • @imharshvardhan

    @imharshvardhan

    11 ай бұрын

    ah! got it, updated to 1.9.0 and it works

  • @gregas3068
    @gregas30688 ай бұрын

    Thank you mister for this nice example. I have a following question. I have build an android app in Jetpack Compose. Now I am building a seperate one in Swift for iOS devices. I have a question. Since the app uses camera, ML model, Firebase, Google Play Billing . . . Do you perhaps have an idea of which of these parts (if any at all) can be shared so that it makes sense to use Compose Multiplatform project?

  • @arozendojr
    @arozendojr10 ай бұрын

    I'm new to mobile, felt complicated trying to install the development environment, android studio, gradle, ruby, cocoapods versions had conflicts. I am working to resolve the conflicts

  • @cisimon7
    @cisimon711 ай бұрын

    Just great, android compose developers becoming iOS developers overnight. It's magic

  • @Narazgul
    @Narazgul9 ай бұрын

    I'm curious about the Midjourney Images Compose Multiplatform project. Would you mind telling, me what has been worked on there?

  • @aleksamatic9558
    @aleksamatic955811 ай бұрын

    When will compose IOS get to the beta state?

  • @aseemsharma4643
    @aseemsharma464311 ай бұрын

    How are we managing the navigation, if we want to keep it in shared module? Does compose has plans to work on this?

  • @renascienza.bazarclub
    @renascienza.bazarclub11 ай бұрын

    I found kind of tricky manage internal images on KMM Compose Multiplatform, since seems that gradle doesn't add new image files to iOS project dependencies. This issue is already addressed nowadays?

  • @boskovaskovic
    @boskovaskovic6 ай бұрын

    So basically I need to have mac, iphone, xcode and to be familiar with swift ? Only benefit is to have shared module ?

  • @BenjaminBK
    @BenjaminBK6 ай бұрын

    So, how does all the setup work without "hey, take this template" and "hey, the IDE does all the magic stuff". I want to understand what gradlestuff does what and which folderstructure is neccessary and if the function locations and names are important or custom etc. When i understood all that, i have no problems to use templates or let the IDE do magic

  • @eduardoruesta5180
    @eduardoruesta51807 ай бұрын

    Thanksss!!

  • @samsadch
    @samsadch11 ай бұрын

    I have an Android and iOS application in the production. Can I create a compose feature module and plug the module into existing iOS and Android application?

  • @khaqim4148
    @khaqim41487 ай бұрын

    is there any tutorial like this but with the native UI like swift ui and jetpack compose?

  • @teeesen
    @teeesen7 ай бұрын

    Great tutorial. One problem I had was at 34:27 the overload of `items` wasn't recognized. I'm not sure why. I ended up using `items(uiState.images.size,itemContent={k -> imageCell(uiState.images[k])})` which seemed to work ok. This is my first program in Kotlin, so I probably missed something. I found that a lot of import declarations had to be added that were not shown in the video; perhaps this was a case where the correct overload of `items` had to be imported.

  • @trejkaz

    @trejkaz

    5 ай бұрын

    One frequent trap I find with items() is, if I type this: items(items = clipboardEntries) IDEA will complain: "Cannot find a parameter with this name: items" But it has no issue at all with this: items(items = clipboardEntries) { clipboardEntry -> TODO() } Unfortunately, IDEA is just not very nice when it comes to showing you where the error is. In this case, it should have put the red underline at the end of the line, but instead it just complains about the parameter you did provide, even though it's named correctly.

  • @emlioms
    @emlioms8 ай бұрын

    Fantastic ! Do you know when will be available to use iOS UI emulator on windows ?

  • @verryondrums

    @verryondrums

    7 ай бұрын

    Probably never.... Because Apple 😅

  • @BhanitGaurav
    @BhanitGaurav10 ай бұрын

    The templete has build error, which does not let compiler to generate the sqldelight build classes. Need soloution on this. Yes, app runs fine but how to use sqldelight with build issue?

  • @hassanjamil841
    @hassanjamil8419 ай бұрын

    Brilliant and pretty clear and understandable video, and I would like to know about the dependency injection (like Hilt), and testing in multiplatform. Cheer up!

  • @dmytrorysovanyi8815
    @dmytrorysovanyi881511 ай бұрын

    Thats great, thank you. I want the interface of Android Studio like yours, how to do that :) ?

  • @letme4u

    @letme4u

    10 ай бұрын

    I believe they are using Ultimate version.

  • @bettertoaster
    @bettertoaster10 ай бұрын

    kdoctor doesn't seem to check that Java 17 is used. And it is required to run the ios build. At least with my IDE (Hedgehog)

  • @michal_castek
    @michal_castek9 ай бұрын

    Is necessary to use Android Studio or Can use IntelliJ???

  • @DaleKingProfile
    @DaleKingProfile6 ай бұрын

    Is there any support for creating UI tests for iOS compose?

  • @sunfisoft
    @sunfisoft11 ай бұрын

    hello is it available for web development too?

  • @mrkaydev
    @mrkaydev11 ай бұрын

    does someone facing issue with kotlinx serilization to convert data to List ???

  • @hak5448
    @hak544810 ай бұрын

    This development is great, but please use XML when designing. Please!

  • @notbambang

    @notbambang

    10 ай бұрын

    XML view based? maybe It will depracated soon as mobile development are moving into declarative programming with compose and swift UI

  • @hestonic5114
    @hestonic511411 ай бұрын

    How can we provide and use context in common main?

  • @asmanmirza9083
    @asmanmirza908311 ай бұрын

    Does KMM supports Material 3?

  • @mckenytech8033
    @mckenytech803311 ай бұрын

    Does map box navigation work with this?

  • @tuyulghost291
    @tuyulghost2919 ай бұрын

    what the different between compose multiplatform and kotlin multiplatform

  • @vikashparajuli
    @vikashparajuli8 ай бұрын

    I don't see the way to change the status bar color using compose multiplatform

  • @loliconmaster7152
    @loliconmaster715211 ай бұрын

    is it a bit difficult or am I just stupid that I can't get it well?

  • @neingtyyyy
    @neingtyyyy10 ай бұрын

    Ah the internet permission..would have missed it even if i knew.:D

  • @samsadch
    @samsadch11 ай бұрын

    How can we add png or jpeg images to res and show. In Android it's showing. iOS its crashing

  • @donfreeman686
    @donfreeman68610 ай бұрын

    You stated I would need a mac for testing ios. Can this be used to create for ipad?

  • @firstnamelastname-oy7es

    @firstnamelastname-oy7es

    10 ай бұрын

    Yes, if you have a mac you can make it work on iphone and ipad. If you don't you can still follow the tutorial and make it work on android.

  • @niloythings
    @niloythings3 ай бұрын

    How do I change status bar color in compose multiplatform ?

  • @BantexMotoVlog
    @BantexMotoVlog11 ай бұрын

    Noice 🎉🎉🎉

  • @Daaaaaaavid
    @Daaaaaaavid11 ай бұрын

    I will wait the next decade for the day when you can write the UI in Compose and it translates to native iOS Style automatically, that's the only day I will think OK now we are talking.

  • @GakisStylianos

    @GakisStylianos

    11 ай бұрын

    That's already possible for the most part, just someone has to sit down and write those components. But you can call the same function and have a different actual implementation on iOS vs on Android.

  • @ericvalencia161
    @ericvalencia16110 ай бұрын

    Is that for real can it do what flutter does? Loved kotlin before but since I came to know flutter, I never look back to kotlin.

  • @galaxiegalaxie5003
    @galaxiegalaxie500311 ай бұрын

    Nice Content. We need another video on Map loading with Apple mapkit and osmdroid with androidview.Thank you.😊, is there any replacement or compose official support like moko resource, permission?,navigation like voyager,ssl certificate with ktor,also on nosql database with capability of auto migration code generation like object box,python django orm etc

  • @RavindraSingh-tt1wp
    @RavindraSingh-tt1wp11 ай бұрын

    Great tutorial!

  • @Kotlin

    @Kotlin

    11 ай бұрын

    Thank you!

  • @lutfiikbalmajid
    @lutfiikbalmajid9 ай бұрын

    can i develop it in Android Studio?

  • @sage_ranjan
    @sage_ranjan10 ай бұрын

    Please use the dark theme...🙏🙏🙏🙏🙏🙏🙏

  • @dontknowunknow187
    @dontknowunknow18710 ай бұрын

    how to change screen like jetpack compose navigation?

  • @kamil_supabase_enjoyer
    @kamil_supabase_enjoyer10 ай бұрын

    Compare to Flutter its very hard to use. Maybe someday compose will be as good as Flutter

  • @khantsithuphyo5484
    @khantsithuphyo54847 ай бұрын

    have tutorial for android+iso+smart tv ??

  • @ocramato
    @ocramato26 күн бұрын

    Hello. You must update the video because links are not the same

  • @34adse3
    @34adse38 ай бұрын

    Excellent, but holy moly that’s complicated.

  • @US-Air-Forces
    @US-Air-Forces7 ай бұрын

    Can I write all of this in java?

  • @BlackSkyCrew
    @BlackSkyCrew15 күн бұрын

    You look like Steve Jobs when he was jung))

  • @oriohac
    @oriohac11 ай бұрын

    What will happen to KMM?

Келесі