Creating the First Screen
<!-- TODO need to create links to the documentation https://docs.chatium.com/en/getting-started/1.screen--> <!-- figure out the photo -->
When we talk about a mobile application, the interface comes to mind first, as this is what distinguishes a mobile app from any other.
In reality, a full-fledged mobile application requires a vast number of invisible components to function - including a server that processes requests, a database that stores data, video hosting, queues that execute code at specific times, sockets that allow different clients to communicate changes to each other, and much more.
This is what sets Chatium apart from most app builders - we provide all the infrastructure needed to launch a production application.
But let's start with creating a screen. To do this, click on the "Add File" button -> "Server TypeScript," create our first TypeScript file, name it start.tsx, and write the following code:
// Main screen
const mainScreen = app.screen('/', async function(ctx, req) {
return <screen title="My screen"></screen>
})
Let's try to save it and see what we've got by clicking the "Preview" button. We see a blank screen with the title My Screen.
Now, let's add our first block to this screen. For this, inside the <screen> tag, we will write a <text> tag containing some text.
<text>Hello world</text>
We notice that our text is too close to the edges of the phone. To move it away, we will add the class section.
<text class="section">Hello world</text>
Next, let's try to add a button below this text on our screen. For this, we will use the <button> tag. We will give it the class primary to indicate that this is the main button on the screen and the class section to add padding.
<button class={["primary","section"]} title="Click me"/>
For now, this button does nothing. To add behavior to it, we will take one of the actions - showToast and add it to the button's onClick property.
<button onClick={showToast('Hi!')}
class={["primary","section"]} title="Click me"/>
And we will import showToast from @app/ui - adding the first line to the file.
