Quick start.tutorial 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. @Tutorial {
  2. @Intro(title: "Quick start") {
  3. Create a cross-platform SwiftCrossUI app with Swift Bundler.
  4. }
  5. @Section(title: "Setup") {
  6. @ContentAndMedia {
  7. Get started by installing needed dependencies.
  8. This quick start guide uses [Swift Bundler](https://github.com/moreSwift/swift-bundler).
  9. Although not strictly required, it simplifies many aspects of cross-platform distribution
  10. and provides a platform-agnostic configuration format for specifying things such as app
  11. icons and custom URL schemes.
  12. }
  13. @Steps {
  14. @Step {
  15. Install Swift Bundler by following the [installation instructions]. `mint` is the
  16. preferred installation method on macOS and Linux as of the last update to this quick
  17. start guide.
  18. [installation instructions]: https://github.com/moreSwift/swift-bundler?tab=readme-ov-file#installation-
  19. @Code(name: "InstallSwiftBundler.shell", file: quick-start-01-01.shell)
  20. }
  21. @Step {
  22. Install any system dependencies you might need.
  23. Each backend has different requirements. In this guide we'll use
  24. <doc:DefaultBackend> which uses <doc:AppKitBackend> on macOS, <doc:GtkBackend> on
  25. Linux, <doc:WinUIBackend> on Windows, and <doc:UIKitBackend> on iOS/tvOS/visionOS.
  26. Click through the backend relevant to your machine for detailed installation
  27. requirements. <doc:AppKitBackend> and <doc:UIKitBackend> have no system
  28. dependencies.
  29. }
  30. @Step {
  31. Restart your shell to ensure you're using the updated PATH.
  32. }
  33. }
  34. }
  35. @Section(title: "Creating and running an app") {
  36. @ContentAndMedia {
  37. Create a new app project, run it, and edit it.
  38. }
  39. @Steps {
  40. @Step {
  41. Create a new Swift Bundler project using the `SwiftCrossUI` template.
  42. The `SwiftCrossUI` template uses `DefaultBackend` to select the most appropriate
  43. backend at compile time.
  44. @Code(name: "CreateProject.shell", file: quick-start-02-01.shell)
  45. }
  46. @Step {
  47. Open up `Sources/HelloWorld/HelloWorldApp.swift` in your editor of choice.
  48. Notice how, aside from the two imports at the top of the file, this looks
  49. just like a small SwiftUI app. SwiftCrossUI shares much of its API surface
  50. with SwiftUI, so you don't have to learn any new concepts to get started.
  51. @Code(name: "HelloWorldApp.swift", file: quick-start-02-02.swift)
  52. }
  53. @Step {
  54. Return to your terminal and run the app.
  55. It will take a few minutes the first time around as Swift Bundler pulls in
  56. SwiftCrossUI's dependencies and builds the library. Subsequent builds will be
  57. much faster.
  58. @Code(name: "CreateProject.shell", file: quick-start-02-03.shell, previousFile: quick-start-02-01.shell) {
  59. @Image(source: quick-start-02-03-preview, alt: "A macOS window containing the text \"Hello, World!\".")
  60. }
  61. }
  62. @Step {
  63. If you're on macOS, you can provide the `--device` or `--simulator` options to run
  64. the app on an iOS, tvOS, or visionOS device or simulator.
  65. @Code(name: "CreateProject.shell", file: quick-start-02-04.shell) {
  66. @Image(source: quick-start-02-04-preview, alt: "An iPhone simulator window containing the text \"Hello, World!\".")
  67. }
  68. }
  69. @Step {
  70. In your editor, change `"Hello, World!"` to `"Hello, Earth!"`. Run the app again to
  71. verify that your changes are reflected.
  72. @Code(name: "HelloWorldApp.swift", file: quick-start-02-05.swift, previousFile: quick-start-02-02.swift) {
  73. @Image(source: quick-start-02-05-preview, alt: "A macOS window containing the text \"Hello, Earth!\".")
  74. }
  75. }
  76. }
  77. }
  78. @Section(title: "All done!") {
  79. You're good to go! If you make something cool with SwiftCrossUI, let us know so we can add
  80. your project to our showcase! And be sure to join the [Discord server](https://moreswift.dev/discord)
  81. to get all the details on what we're up to.
  82. @Steps {}
  83. }
  84. }