191 lines
3.8 KiB
Markdown
191 lines
3.8 KiB
Markdown
# 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)
|