# Getting Started

This guide walks you through creating your first Mosis app in under 10 minutes.

## Prerequisites

- A Mosis developer account ([sign up here](/register))
- Text editor (VS Code recommended)
- Desktop Designer for testing (download from portal)

## Step 1: Create a New App

1. Log in to the [Developer Portal](/dashboard)
2. Click **Create New App**
3. Fill in the details:
   - **Package ID**: `com.yourname.myapp` (unique identifier)
   - **App Name**: My First App
   - **Description**: A simple hello world app
4. Click **Create**

## Step 2: Set Up Your Project

Create a project folder with this structure:

```
myapp/
├── manifest.json
├── icon.png
└── assets/
    ├── main.rml
    └── styles.rcss
```

### manifest.json

```json
{
  "id": "com.yourname.myapp",
  "name": "My First App",
  "version": "1.0.0",
  "version_code": 1,
  "entry": "assets/main.rml",
  "permissions": [],
  "min_mosis_version": "1.0.0",
  "author": {
    "name": "Your Name",
    "email": "you@example.com"
  },
  "icons": {
    "32": "icon.png",
    "64": "icon.png",
    "128": "icon.png"
  }
}
```

### assets/main.rml

```xml
<rml>
<head>
    <title>My First App</title>
    <link type="text/rcss" href="styles.rcss"/>
</head>
<body>
    <div class="container">
        <h1>Hello, Mosis!</h1>
        <p>This is my first app.</p>
        <button id="click-me" onclick="handleClick()">Click Me</button>
        <p id="counter">Clicks: 0</p>
    </div>

    <script>
        local clicks = 0

        function handleClick()
            clicks = clicks + 1
            document:GetElementById("counter").inner_rml = "Clicks: " .. clicks
        end
    </script>
</body>
</rml>
```

### assets/styles.rcss

```css
body {
    font-family: LatoLatin;
    background-color: #1a1a2e;
    color: #ffffff;
}

.container {
    padding: 20dp;
    text-align: center;
}

h1 {
    font-size: 24dp;
    margin-bottom: 10dp;
    color: #00d4ff;
}

p {
    font-size: 16dp;
    margin-bottom: 20dp;
}

button {
    background-color: #00d4ff;
    color: #1a1a2e;
    padding: 12dp 24dp;
    border-radius: 8dp;
    font-size: 16dp;
    font-weight: bold;
}

button:hover {
    background-color: #00b8e6;
}

button:active {
    background-color: #0099cc;
}

#counter {
    font-size: 18dp;
    margin-top: 20dp;
}
```

### icon.png

Create a 128x128 PNG icon for your app. Use any image editor or find a placeholder icon.

## Step 3: Test Locally

1. Download and install the Desktop Designer from your dashboard
2. Open a terminal in your project folder
3. Run:

```bash
mosis-designer.exe assets/main.rml
```

The designer window opens showing your app. Changes to RML, RCSS, or Lua files automatically reload.

## Step 4: Build Your Package

From your project folder:

```bash
mosis build
```

This creates `myapp.mosis` - your packaged app ready for submission.

## Step 5: Submit for Review

1. Go to your app in the Developer Portal
2. Click **Create New Version**
3. Upload your `.mosis` package
4. Add release notes
5. Click **Submit for Review**

Your app will be reviewed automatically. If it passes all checks, you can publish it to the store.

## Next Steps

- [UI Design Guide](guides/ui-design.md) - Learn RML/RCSS in depth
- [Lua Scripting Guide](guides/lua-scripting.md) - Add complex interactivity
- [Permissions Guide](guides/permissions.md) - Request device capabilities
- [Publishing Guide](guides/publishing.md) - Tips for successful submissions

## Example Apps

Check out these example apps to learn from:

| App | Description | Source |
|-----|-------------|--------|
| Calculator | Basic calculator | [View](examples/calculator.md) |
| Notes | Simple note-taking | [View](examples/notes.md) |
| Timer | Countdown timer | [View](examples/timer.md) |

## Getting Help

- Join our [Discord community](#)
- Check the [FAQ](faq.md)
- Search the [Troubleshooting guide](troubleshooting.md)
