-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: new onboarding step #3686
Merged
Merged
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
5017c36
feat: new ui step
danil-pavlov bd7991d
chore: temp for a missing img
danil-pavlov 79a1920
update: scheme screenshot
danil-pavlov e34c4ba
update: scheme screenshot
danil-pavlov 157c0ad
update: review suggestions
danil-pavlov 3ece71c
update: android code and screenshots
danil-pavlov 0794e23
update: code samples in last steps
danil-pavlov 6ee920c
chore: common description
danil-pavlov 1795ece
update: first suggestions
danil-pavlov 1fc00ad
chore: expect and actual definition
danil-pavlov b964b79
update: review suggestions
danil-pavlov File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file modified
BIN
+157 KB
(150%)
.../images/multiplatform-mobile/create-first-app/first-multiplatform-project-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-314 KB
(31%)
...tiplatform-mobile/create-first-app/first-multiplatform-project-on-android-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-217 KB
(52%)
...tiplatform-mobile/create-first-app/first-multiplatform-project-on-android-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+179 KB
(370%)
.../multiplatform-mobile/create-first-app/first-multiplatform-project-on-ios-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+173 KB
(340%)
.../multiplatform-mobile/create-first-app/first-multiplatform-project-on-ios-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+142 KB
(140%)
docs/images/multiplatform-mobile/create-first-app/multiplatform-mobile-upgrade.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
286 changes: 211 additions & 75 deletions
286
docs/topics/multiplatform-mobile/multiplatform-mobile-create-first-app.md
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
docs/topics/multiplatform-mobile/multiplatform-mobile-update-ui.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
[//]: # (title: Update UI) | ||
|
||
<microformat> | ||
<p>This is the third part of the <strong>Getting started with Kotlin Multiplatform for mobile</strong> tutorial. Before proceeding, make sure you've completed previous steps.</p> | ||
<p><img src="icon-1-done.svg" width="20" alt="First step"/> <a href="multiplatform-mobile-setup.md">Set up an environment</a><br/> | ||
<img src="icon-2-done.svg" width="20" alt="Second step"/> <a href="multiplatform-mobile-create-first-app.md">Create your first cross-platform app</a><br/> | ||
<img src="icon-3.svg" width="20" alt="Third step"/> <strong>Update UI</strong><br/> | ||
<img src="icon-4-todo.svg" width="20" alt="Fourth step"/> Add dependencies<br/> | ||
<img src="icon-5-todo.svg" width="20" alt="Fifth step"/> Share more logic<br/> | ||
<img src="icon-6-todo.svg" width="20" alt="Sixth step"/> Wrap up your project</p> | ||
</microformat> | ||
|
||
To build the user interface, you'll use the [Jetpack Compose](https://developer.android.com/jetpack/compose) toolkit | ||
for the Android part of your project and [SwiftUI](https://developer.apple.com/xcode/swiftui/) for the iOS one. | ||
These are both declarative UI frameworks, and you'll see similarities in the UI implementations. In both cases, | ||
you store the data in the `phrases` variable and later iterate over it to produce a list of `Text` items. | ||
|
||
### The Android module | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I expect here a verb. Like "update the android module" or something similar |
||
|
||
The `androidApp` module contains an Android application, defines its main activity and the UI views, and uses the | ||
`shared` module as a regular Android library. The UI of the application uses the Jetpack Compose framework. | ||
|
||
Make some changes and see how it is reflected in the UI: | ||
|
||
1. Navigate to the `MainActivity.kt` file in `androidApp`. | ||
2. Find the `Greeting` class invocation. Select the `greet()` function and use the **Cmd + B** shortcut. | ||
You'll see that it's the same class from the `shared` module you edited in the previous step. | ||
3. In `Greeting.kt`, update the `greet()` function: | ||
|
||
```kotlin | ||
fun greet(): List<String> = buildList { | ||
add(if (Random.nextBoolean()) "Hi!" else "Hello!") | ||
add("Guess what it is! > ${platform.name.reversed()}!") | ||
} | ||
``` | ||
|
||
Now it returns a list of strings. | ||
|
||
4. Go back to `MainActivity.kt`. As you can see, it doesn't compile anymore because the `GreetingView` composable | ||
expects a `String` argument. Update its definition: | ||
|
||
```kotlin | ||
@Composable | ||
fun GreetingView(phrases: List<String>) { | ||
LazyColumn( | ||
contentPadding = PaddingValues(20.dp), | ||
verticalArrangement = Arrangement.spacedBy(8.dp), | ||
) { | ||
items(phrases) { phrase -> | ||
Text(phrase) | ||
Divider() | ||
} | ||
} | ||
} | ||
``` | ||
|
||
Here the `LazyColumn` composable shows the list of `Text` items, adds padding around the content and a space between the list items. | ||
|
||
5. Follow Android Studio's suggestions to import the missing dependencies. | ||
6. Update the preview as well, passing a list as an argument: | ||
|
||
```kotlin | ||
@Preview | ||
@Composable | ||
fun DefaultPreview() { | ||
MyApplicationTheme { | ||
Greeting(listOf("Hello, Android!")) | ||
} | ||
} | ||
``` | ||
|
||
7. Now you can run the Android app to ensure it displays the list: | ||
|
||
![Updated UI of Android multiplatform app](first-multiplatform-project-on-android-2.png){width=300} | ||
|
||
### The iOS module | ||
|
||
`iosApp` is an Xcode project that builds into an iOS application. It depends on and uses the `shared` module as an iOS | ||
framework. The UI of the app is written in Swift. | ||
|
||
Implement the same changes as in the Android app: | ||
|
||
1. Launch Xcode. Select **Open a project or file**. | ||
2. Navigate to your project, for example **KotlinMultiplatformSandbox**, and select the `iosApp` folder. Click **Open**. | ||
3. In the `ContenView.swift` file, select the `greet()` function and use the **⌃ + Cmd** shortcut. | ||
|
||
You'll see the Objective-C declarations for the Kotlin functions defined in the `shared` module. Kotlin types are | ||
represented as Objective-C types when used from Objective-C/Swift. Here the `greet()` function | ||
returns `List<String>` in Kotlin and is seen from Swift as returning `NSArray<NSString>`. For more on type mappings, | ||
see [Interoperability with Swift/Objective-C](native-objc-interop.md). | ||
|
||
4. If you try running the project, the build will fail. As in the Android app earlier, | ||
the Swift code that uses the `greet()` function doesn't compile because its declaration is different now. | ||
Change the SwiftUI code to display a list of items: | ||
|
||
```Swift | ||
struct ContentView: View { | ||
let phrases = Greeting().greet() | ||
|
||
var body: some View { | ||
List(phrases, id: \.self) { | ||
Text($0) | ||
} | ||
} | ||
} | ||
``` | ||
|
||
* The results of the `greet()` call are stored in the `phrases` variable (`let` in Swift is similar to Kotlin's `val`). | ||
* The `List` function produces a list of `Text` items. | ||
|
||
5. Run the app to see the changes: | ||
|
||
![Updated UI of your iOS multiplatform app](first-multiplatform-project-on-ios-2.png){width=300} | ||
|
||
## Next step | ||
|
||
In the next part of the tutorial, you'll learn about dependencies and add a third-party library to expand | ||
the functionality of your project. | ||
|
||
**[Proceed to the next part](multiplatform-mobile-dependencies.md)** | ||
|
||
## Get help | ||
|
||
* **Kotlin Slack**. Get an [invite](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up) and join | ||
the [#multiplatform](https://kotlinlang.slack.com/archives/C3PQML5NU) channel. | ||
* **Kotlin issue tracker**. [Report a new issue](https://youtrack.jetbrains.com/newIssue?project=KT). |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm thinking about expanding the toc-title to make it more readable.
In the nav tree the titles should be short (like "Share more logic"), but in the title of the content I'd like to see something like "Share more logic between iOS and Android").
What do you think about this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes sense, I got rid of the acronym and expanded the header for the 5th step