Thank you so much. So hello, everyone. My name is Madonna. Happy Wednesday. I like that. I like to start with introductions.My name is Madonna, and I am an Android expert. I am also a founder and an author and also a mom. So I have wear so many hats but I'm super proud of all the hats that I wear. And today, I'm excited to be talking to you all about how you can build modern applications for the modern world. Because as you all know, phones are not going anywhere. You might have an iPhone. You might have an Android. Have both. So I have an iPhone with a purple color, like showcase my phone collections, and then I have a foldable which is, as you can see, it's just a Samsung bag.

It's affordable. So when I talk about building Android apps for the modern, application for the modern world, I mean, building for Android, the operating system, which is the Android. Now something else that I like to mention before my presentation is that Android is used by so many users around the world, and it's actually used also on Watch. If you've had the watches, it has an under operating system. If you use, let's say, in the Android auto car, which uses the Android operating system. Peloton uses Android 2. What else? Fridges twos. I know some fridges use that too and so many other things. So in short, so many things the TVs too. We'd have Android TVs. So in short, what am I trying to say? I'm trying to say that there's a very big field that uses the under operating system. And if you know how to code for 1, you can code for all the others. So let's get started. Okay.

Let me make sure I can hit through my slides. Can I make the move? Oh, there. Okay. So this is our agenda. We'll work the mobile landscape under development. I'll talk a little bit about iOS because I'll I always like to be welcoming and showcase how actually you can build. We'll also talk about what is hybrid development for people who are curious about. I have 2 phones. How can I build for both platforms, which is also very popular? It's this is especially for founders and the indie developers because most of the companies, especially here in the US, they customize to be to be based on each experiences. For instance, a company might hire individual owner developers and another company might and in the same company might hire, let's say, developers who cater for the iOS only. And then we'll talk about data management and API, which is very important in the mobile application. Test and unemployment and education. Now I think I've talked through this.

Again, we have 2 operating system. We used to have 3 Microsoft. I think, however, Microsoft stopped producing the mobile apps. So now we have Android and iOS. Too. I'm going to be a visual person a lot today. So to you. And then, so this is how it's broken down. So if you wanna build for Android, which is the Android phone, you will need to learn Kotlin or Java. So these are the languages that are required for you to learn this particular stack for building for the Android. Now if you wanna build for the iOS, which is an iPhone, you will need a swift or objective c. Now if you wanna build full boat, you will need a data flatter or react native. We'll talk about those things later. Now to the next point. Now Android development.

So Android is developed by Google. It's good to know the history. So Android is developed by Google, and it's actually an open source project. Now, sorry, platform. The reason is to why many people get to build for the Android around the world is because it's opened its open source, and also people get to learn a lot through just contributing with others and getting others too. Work together or to contribute to the system. Now, so if you're building for the Android, ecosystem you'll need to use the Android studio, which is the integrated development environment that is needed. And then again, official language is cotton, which is what I've mentioned before. And then next, if you wanna build for the iOS, you will need oh, so Fast iOS is developed by Apple. It's not an offices platform.

So here it's pretty there's a lot of value of entry to this particular platform, but one thing I'd like to mention is that you will need to have a MacBook. That's a must, and you will need to have an IFA to be able to test. However, for Android, you can use any particular laptop to build It just needs to have a higher RAM and higher storage. Now for iOS again, you will need to have exclude, which is their integrated development environment, and the official language again, as I mentioned at the beginning, was either swift or objective c. Now let's talk about other things like hybrid. So hybrid, again, this is just going to be flatter, covering multi. I think it's KMP now, and then you can use react native too. So this is for people who want to build for both.

So I mentioned in the beginning, the reason is why this is important is because you might be a founder or you might be an indie developer that wants to make extra money and you want to build your app, you move faster building for both platforms using the already existing platforms.

Now So for multi platform, as you can see here, this is how it's broken down, flutter is open source, react native is so flutter is by Google. React Native is by Facebook and Kotlin Modbluff is just by Kotlin. And then let's talk about UI because if you have a mobile app, and it has a turbo UI, it will not get downloads. And if you're a founder or if you're working for a company, These are the things that we take into consideration. So it's good to know this background before you jump into it. So for And you are UX, which is user interface. For Android, you'll definitely need material design. There's a lot of documentation on this. Which is super great.

So one of the thing that I normally tell developers or new developers is that before back in the days when When I was starting to build annual application, we didn't have all this documentation and all this design patterns on all this recommendation that dollars are now given.

And then I would you would build such a turbo app, but for some reason, I build my first app back in 2014 and it got over 500 downloads with a 4.5 freight, and they're also shocked. Like, people liked it. I was like, the designs were terrible. But anyway, right now, we have design system that you can use. And for 100 rates, excuse, maturity design. Now for IOS, it's human centered guideline, HGA, IHG, And again, these are things that you can go and get used to them as you start building your applications. Now let's look at the code. I didn't wanna jump in the code in the beginning, but I wanna showcase how the code looks a little bit similar, or if you know at least a little bit of Java, you might notice some similarities. I did not capture very high level code because I didn't wanna make it so hard for people to follow along.

But feel free to ask me any questions in the chat, and then I'll be able to to be answering them. Now Let's look at the NANDRE text. Let's say today you download the NANDRE Studio. And you want to write your fast texts, how does that look? How will that look like? So one recommendation that I have for everybody that wants to go for the modern work modern world is to look into Jetpack compose. Jetpack compose is a new. I'd like to call it a framework for people who've work through the JavaScript or other languages, but it's a good framework. It's a it's like a UI toolkit for under developers. Before though, we didn't have this. So we struggled a lot because we had to write all this in XML code if you've had an XML.

But now in Android, you're able to use it by compose. So if you need a text, what you'll just do is call text, which is a composable, which is more like a function and a composable function. So here you'll see you have a text, and then you can pass in the text, which is text. And the good thing about JetBank Compose is that you can style it to whatever you want it to be. Work made easier for newer developers. For instance, there you can have a style equals material theme. This is in the material design, and then the typography, and then dot body, And then the modifier, which is actually a decorator, you can decorate the text the way you want.

For instance, you can say, my modified dot pattern equals 16. So when I pass in 16, I'm telling this text that my pattern, which is right, left, top bottom, let it be 16. So pretty straightforward, and you can do so many things in it through just declaring whatever you want in your text. So that is the good thing about building for the modern world because you get all these advanced features to build with. Now I like to mention it's not easy. It's always a learning journey, but once you start it, you notice that it keeps getting better and better. Now notice how The under text looked like. Let's go and look at the iOS text. Stay with me. Voila, there's not so much difference. As you can see, they have the padding too.

They have the font and they they then and in the in the parting, you can pass in lessee. Edge, instant top leading bottom trailing. So it's the same top bottom, you know, starts in. And then the font, you can tell, I want this font to have this particular Title, you can always dig deep into looking at what the title look like. But then the text, in the beginning, that's when you call the text, and then you just pass it to your UI text. Notice how the locks similar to the previous one in in Android. So you'll keep seeing a lot of similarities, which makes me which makes me wonder the idea that's so Jappa composed clearly idea was from Swift UI.

So their idea here is to tell you as a developer that if you understand one, you can definitely build for the other. So great tips there. Now let's look at it at a text field, which is something that's used a lot in so many apps. Now what is a text field? A text field is I assume you have a username and a password, and you need to enter your username in any field. Let's say you have an app, let's say it's Twitter or Facebook or Instagram. You always have that text field. Now this is what I mean by text field. Now what I mean an outline text field in JEPA composed that is whenever I tap, when I'm entering my username, it jumps up and puts the title. Let's say the name was username, so it will put it up on top. And I know many have seen that design, so that's the idea.

Now in a 100, this is how we build our outline text field. So we have a volume which is the text. We listen to the value when it's changed while we're passing a new text. We have a label, which is what I was talking about. For instance, if it was Username. This would be username, but here we have enter text. And then we have our decorator, which is the modify, and then we have a shape A shape is telling this particular outlined text to look rounded at the corners. And then I give it an 8 pattern. So it looks very beautiful. And then the borders is the borders of the tax field that I want. So he has a in the tax field default, Let the outline borders have a color of black and the width of 2 dp. Pretty straightforward.

Let's look at how the one in iOS looks like. The the iOS 1 is pretty interesting because it's just a simple line. But for Android, as you can see, the only thing I did in Android was I took an outline text field, but here in iOS, I'm passing the original text field. As you can see here, there's a list of work I went with these kinds of examples is because these are the most things that many applications you use and you'll see as we continue walking through the progress, how you can build them in your app. And I always like to challenge the listeners to go check it out and go try it out. I'll share the slides for sure, but please feel free to go check it out and try it out and see if you're able to build this. Just using the Symbicos. Your note is that it's very easy. Not to say it's easy, easy, but it's very straightforward. When you start doing it.

So this is how the iOS 1 would look like. Come on. Let's look at the button. Bottoms are everywhere. Everybody uses buttons in the forms. This is how a button in JFA compose looks like. So we have a button. You call again this composable function button. And then you say, I want you to listen to any click functionality. If somebody clicks to something, for instance, in your own click, you can see, I wanna print a message that says, Hi. Women in Tech Global Conference. You can do that. Again, the modifier, as you notice, is just a decrease on degrading this button. I'm telling this button, have a pattern of 16, start, and top and bottom, and then fill the maximum with what has filled the maximum with me?

It means I wanted to start from this from 16 because I said September 16. I wanted to end at 16, which is the end, but I wanted to be 16. But fill the max. So if it's a phone, it'll just leave small spaces at the end, but it'll fill. You can make it small if you want to and the size you need. But that's what I mean by for the maximum width. Now a button needed needs a text inside because it needs to have a description. Like, what is this button doing? Right? So what you can do I know my end is longer, the text is longer, but you can save this button. Maybe it's a submit question. So you can write the text there and submit. Something else that I wanna mention is that, do you know she's that text?

You can do everything we did in the text from the beginning to this particular text. That is add modify if you need to. Let's see add color if you need to. Add any decorators that you want. So pretty cool. Let's look at an iOS button too. If you notice, they're not pretty similar. Let me go back. Look at that button in Android using Jetpack of poles and look at this button in iOS using Swift UI because these are the most used recently. So here's you can see we have an action again like previously, the on click, in order to get called on click for iOS, it's called an action. So when there's an action, do something. And now in the text, like I was mentioning, you can do as many things as you want.

So here in the text, what I'm doing is again, I'm telling this particular text. Your name is gonna be Swift UI button. You will have a pattern of edge in the top 10, bottom 10, and trailing 20. And then you'll have a foreground foreground color of white, and you'll have a background color of blue, and you'll have a corner radius of 10. So just designing my button in different ways. Let's look at another popular thing that you need to do. So for everything that you build, you have to put it either in a row or a column. That's why this is very important because let's say you have your button and you have your text. How are they gonna look?

If you don't tell them, okay, I need you in a column or I need you in a row. They will just be everywhere. So that's where the column comes in, and that's why it's very important when you're building, you think about stuff like this, like, hey. I will need a column or a row, and then you can design your UI to fit pretty well. Now, yes, you can see, I call my column and I tell my column and I want you to have a modifier that, which is my decorator. Now you can also tell your column to fill the maximum width, which means I want it to be from top to end. So you can do that. It's also allowed. Now inside the column, as you can see, I have 2 compostable function. 1 is an image, and the other one is a text.

And you notice that right now, it's also very straightforward when you're building for the modern world because before I couldn't call an image, I had to go create an XML file that had an image and then I would pass everything in there and then I would call that code using an Android resource back to my to my coding, let's say Java or Kotlin, it it was a lot of work.

I mean, I'm not against doing that lot of work, because when I I did it myself, it was fun. But right now, when you have these capabilities, is is even better. The other thing I'd like to mention is that Understanding fundamentals is always good, but if you're working, let's say, for a company and you need it to move fast, utilizing client resources is okay too. Like, for instance, utilizing Jetpack composed to move fast, especially newer development is amazing because The reason is number 1, you're using the same language, which is Kotlin. You can use it everywhere. So this compostables, I, Kotlin, and your codelogic will be in coddling. So here we have an image that has a painter And as you can see here, I'm passing in a painter resource. What is a painter resource?

A painter resource is the image that you as a viewer, you'll see on your mobile when you pick the mobile app, you'll see, I see an image of Android. Now the content description is very important because you have to ensure you're very accessible. Now accessibility, number is very important, and not only Android, but also iOS. It's good to be accessible. So they I'm giving you my image description of what it is. So I'm telling this particular image, that's my image. It's good to also give the descriptives content description because you just don't want it to be like that. You know? So put in a good description. Now the modifier again is just telling this particular image. I want you to have a size of 120. That's the size. Notice here do not call the pattern. I called the size. So the size of that image is going to be 120.

Again, we've talked about the text, but In this images, you can see after the image, you have a text. So for visual people, you have an image and then a text, a description. Let's say a text description of the image. So here you see in my text, I have gender composed column. It has a style. Here, typography, I'm giving it a H5, if you've written any code in JavaScript or any other language. And then in the modified, you can see there, I'm just passing a pattern of top now. I'm explicitly telling this cutting to only pad top. Notice I'm not telling you to pad 16 because if I told you that, it will read that in the system that it's being told to put stats and bottom and and top.

But here, I'm telling it only top part 16. So just after the image part 15, sorry, 16, and put the text here. Let's look at how an iOS columns looks like. Are you curious? There we go. So the only big difference in iOS and Android, which is just for compose and shift you by, is at the columns in iOS are called vistas. Why? Because we're talking about the vertical stacks to the column back, vertical stacks or hedge tags. So that's the only thing that you'll see, but when you notice him, I'm telling this Visa that I want my content aligned to the center. I want a space in off 16. And here, the spacing also not describing it. I'm not telling you, hey, I want it to be top war.

I'm telling if the spacing needs to be sixteen. And then the image I'm calling I'm giving you the name. That's my image for accessibility, and then I'm telling it to be resizable. And then I want the frame of that image to have a width of 120 and a height of 120. And then I will need to add my text as the visualize the the Android 1. I'll tell it up. I need my text here and the phone, and then I'll give you the pie that I want down there. So I want this vstack to have this particular pie. That's how we build columns in iOS. Let's look at a row. I was not gonna leave you all without telling you how the rows look like.

So this is how a roll looks like in Android. So as you can see here, what I'm telling this row to have is I want it to have a vertical alignment, and I want the alignment to be centered vertically. So, you know, center vertical. I need this modifier to have a pattern of 16. I'm telling to modify, hey, have the pattern of 16 again. Start Oh, I my my my demonstrations are around start and top bottom. Yeah. And then I have an image there that I pass the paint resource and I tell it this is the image. I give it a content description. And then I have a column because this is a row. I have a column inside the row that tells it I need to text. I need a text here.

Another text. So this is a different design in this particular row where we add into more text. We have a text that has a title and a different epigraphy, And then I have another text that has a subtitle, and then notice here I'm calling the subtitle 1. So I'm telling it this one has to be a subtitle. So it's not gonna be the same take the same typography of the previous text. And it's very important because you're trying to distinguish that. This is the title and this is the subtitle, and you'll notice this a lot in a lot of And then this is how you build, let's say, a row in iOS. So here as you can see, we have a horizontal stack, and we have an alignment.

I tell it again, center and I give a space in, I give it my image, and then I do the vstack inside here, the column previously as it's the previous code as before. And then here as you can see, I have my text again and my subtitle. And as you can see here too, in iOS, they have the font dot headline, which means it's going to be bolded or a little bit bigger as compared to the side title, which is sub headline. So pretty descriptive. So as you can see here, if you're new and try to understand, how can I start coding? How can I get into mobile? You there's so many ways you can get started and get into mobile just through looking at similarities, and then you can pick and say, Maybe I wanna become an android developer. Maybe I wanna become an iOS developer, or maybe I want to build for both.

Because notice, one of the good thing is that if you use both of, let's say, this experience where you build for iOS or Android, and try to see how you can match them using Kotlin Multi Platform. Cortland Multi Platform uses actually Codlin. So you're set. So if you know how to build for data compose, you will build this pretty smoothly because the code will look pretty similar. Have us code sample where I'll showcase that, but it's going to be pretty, pretty similar. Now, something else that I wanted to showcase is a radio group. Why? Because radio groups are used a lot in many applications. So what is a radio group? When you think about it, a radio group is something that has the suck a circle, and you can click different points.

Like, let's say you have line option, 2 option, option 3. When you have already group, I like that question. I'm gonna answer that question in few in few minutes. But so here, as you can see, I have a radio group. So this is how you build a radio group. So you have to definitely Listen to the selected option because our review group always starts with an issue because it can just be there. It always needs an issue state. And then the second, you'll have the options. No. So here, visualize this as you have already a group that has option 1, option 2, option 3. So here, you're trying to pick an option to something. So as you see, I'm wrapping all my my radio groups inside a column. So the column will say let the pattern be that.

And then I have a text that specifically tells the user select an option because I'm giving them an option. It's good to tell the users, like, what are you trying to do with this radio group? So in my code here, I'm just telling them select an option. Now as you notice there, I'm taking the option, which is the list of option 1, 2, 3, and I'm going through that. I'm looking through them saying for each option, create this row that has these radio groups. So what I'm doing there in the row, I tell this row, be vertical aligned, send a vertically, have them modify off that fill max width, have a pattern of top 8 trying to give space between my select and option with my radio groups. And then I use the radio button composable function to do the option. So here, as you can see, it's I just called it once.

I told it, look, radio button when you select it, you'll be able to select it option, which is equals to the options. He are here as you can see the option. And then I'm telling you once it gets clicked, showcase the right one is clicked. Now there's a lot of logic that we can add this, but I just wanted to show an example. And then the text, the text will be in that radio group. What is the text? It just can't to be just a a a cycle like this with nothing. So we need a text description. So there, the text will be it's an option. The style will be Material theme, do typography, and then the modifier, you can do, let's say, patterns like this.

And then now when you click, you can see option 1 is clicked, option 2 is click, and option 3. Let's look at how it looks in iOS. Pretty similar. So here's a little bit complicated, but not very complex, but you can see we call somebody called a radio group directly. So we have a tracked radio group, and then we have a view because this is a view. And then we have to listen to the state the same way we'll listen to the state previously here. Where we see selected option, and then we have the options. We have those lists is the same thing we'll have here. So we'll select options option 1, 2, and 3. And then we'll tell it, body, some view, have a vstack, and then the text, again, select an option, and then we have to loop through the for each and tell it when you're selected, show the options, and when you're not selected, move away from that preview, the one that's selected.

Let me know if I'm also going too fast as the series still have time, but let's keep moving. So something else that is very, very used and widely used in Android and also iOS is the cards. Most of us have seen cards Now let me see if I can give a good example of how a card looks like. Oh, I can't look. Okay. My presentation actually looks like a card. So normally in Android Wednesdays, we have so many cards, especially if you have an app. Let's see. I think, well, Airbnb uses a lot of cards. So if you're trying to build an application, it's you can utilize the cards too because they make your UI look more appealing and more good.

So the card will be there, and it showcase this is how you can actually build with a card. So a card just called the compostable function card, And inside the card, you can say, I need a modify of this. I needed to fill max width. I need a pattern of 16. I wanted to have an elevation, and then I have a shape I want it to be, again, rounded color shape, and then you can pass in a column. And then in the column, you can say, I need to text So you will have a card that looks like this, and then a column that has to text, let's say cat title and just card content, only that. Nothing much to to it. And then let's see how card looks in iOS. So a card in iOS, you'll just have to create a disease stack.

And then you'll have it, let's see, I need a or on a. So they don't so in iOS, they don't have cards. I don't know if they've built them yet, but they don't have anything that you can call directly. That's called a card. Then it has this one will have a rounded rectangle and then corner radius, and then it'll have a fill, shadow, vista, and text. And then you'll have a padding. Oh, let me see. Now as I mentioned, I was not gonna leave you everyone without showcasing how you can do for both platform. So here is how the KMM will look like, and this is called my platform. I think now it's called KMP, and if you update that, But here's you can see you expect a class and then you're passing a cut height on a string, and then you can create a cut and all that.

So there's a lot of documentation on this you. It's not fully stable. I'm not sure, but it's also worth looking into how you can build it. And, also, another hand is that if you also know anti build with Sift or JAPA Compose, you can actually build to a flatter because it's they're very sim they're all very similar. So it's just realizing how I can do that, and that's how you call the card from the Kia Mill. Now I don't like to end my talk without talking about testing because if you're gonna bill for the modern application, it's important to test your code. So unit testing is when you're testing some unit of your code, and the UI testing is when you're testing the lot. Let's say the UI in your code. So you need testing can test the logic and UI test can test the UI because Again, you have to to validate that. Whenever something is clicked is actually clicked.

And then deployment, when you build everything and it's done, You deploy your application to Google Play Store for Android and Apple. You just display them to the Apple App Store. And then it's always a continuous learning, and thank you very much. So I have my book where I talk about all these things. Sure how people can build in modern in using more than 113, and you can definitely learn all that. And thank you this way. You can connect with me. I hope I didn't go over time, but I think we had 30 minutes. And thank you so much. I see a question. Okay. How can I come with this? Do you still build an app that actually solves a problem with daily basis? Now Sylvia, that's a good question.

The only thing I normally say is don't try to reinvent the wheel. One of the things that I did for my own learning purposes is I looked into a lap I wanted to build, which was, oh, what is it called? A buzzing buddy. So what I did is I noticed that, hey, everybody uses a budgeting app, but can I build mine to fit my own need? And that's what I did. So what I can recommend is that find the problem you're trying to solve and see if you've seen anybody build it before if it's not a good idea. If it's not a new idea, and see if you can start the ideas.

But if it's already built, you can also build it yourself, but customize it to fit your own need. And you can use this particular app for your learning purposes. What I did was I did budgeting buddy for that. You can check my app out is on is on a the Google Play Store. It's called budgeting, but it's just an app that I built. It now also almost has 50,000 downloads. So excuse me. So yeah, I would highly recommend you looking into what is the problem you're you're trying to solve and can it be solved with an already existing project where you just take the ideas and just build it to customize it to yours. And if it's a new idea, I think then if you want to build a setup, then that means you can find somebody to help you validate the MVP build with you and all that. But if you're gonna build by yourself, again, it's not hard. You take your time. It's always learning It's a learning process, and you run through it. Yep.

And that's all. Thank you all so much. I hope you learned something so much. And also, I'm hoping everybody notices that it's very similar and you can build for both if you want to. Thank you very much, Fiona. Thank you, Chills. Okay. I'm gonna say Bye.