Когда мы говорим о мобильном приложении, в первую очередь представляется интерфейс, так как именно этим мобильное приложение отличается от любого другого.
На самом деле, полноценное мобильное приложение требует огромного количества невидимых компонентов для своей работы - это и сервер, который обрабатывает запросы, и база данных, которая хранит данные, и видеохостинг, и очереди, запускающие код в определенное время, сокеты, позволяющие разным клиентам сообщать друг другу об изменениях и многое другое.
Именно это отличает Chatium от большинства конструкторов приложений - мы предоставляем всю инфраструктуру, которая нужна для выпуска боевого приложения.
Но начнем именно с создания экрана. Для этого нажмем на кнопку "Добавить файл" -> "Серверный TypeScript", создадим наш первый TypeScript-файл, назовем его start.tsx и напишем в нем код:
// Main screen
const mainScreen = app.screen('/', async function(ctx, req) {
return <screen title="My screen"></screen>
})
Попробуем сохранить и посмотрим что получилось, нажав кнопку "Предпросмотр". Мы видим пустой экран с заголовком My Screen
Добавим на этот экран первый блок. Для этого внутри тега <screen> мы напишем тег <text> внутри которого напишем какой-то текст.
<text>Hello world</text>
Мы видим что наш текст слишком плотно прилегает к границам телефона. Для того, чтобы его отодвинуть, добавим ему класс section.
<text class="section">Hello world</text>
Теперь попробуем добавить к нашему экрану еще и кнопку под этим текстом. Для этого используем тег <button> . Дадим ей класс primary, чтобы обозначить что это основная кнопка на экране и класс section, чтобы добавить отступы.
<button class={["primary","section"]} title="Click me"/>
Пока эта кнопка ничего не делает. Чтобы добавить ей поведение, возьмем одно из действий - showToast и добавим его в свойство кнопки onClick.
<button onClick={showToast('Hi!')}
class={["primary","section"]} title="Click me"/>
А сам showToast импортируем из @app/ui - добавим первую строчку файла.
