Совсем недавно Google открыла пользователям G Suite конструктор App Maker для создания приложений без навыков программирования. Мы перевели инструкцию, в которой вы познакомитесь с основами работы в конструкторе и создадите своё первое приложение.
Чему вы научитесь
Из этого руководства вы узнаете, как:
- Создать и переименовать приложение;
- Добавить такие элементы пользовательского интерфейса, как поля ввода и кнопки, используя панель Widgets и Property Editor;
- Установить свойства виджетов с помощью Property Editor;
- Добавить JavaScript-код, реагирующий на нажатие мыши. Рассматриваются два подхода: с помощью диалогового окна JavaScript
alert
и путём присваивания свойств; - Просмотреть и протестировать приложение.
Создаём приложение
- Залогиньтесь в аккаунте G Suite.
- Откройте App Maker.
- Создайте пустое приложение:
- Переименуйте приложение. Удалите имя по умолчанию, «Untitled App», и введите «Hello App Maker» или любое своё название.
Переименуем страницу
Страницы в App Maker становятся экранами приложения. Экраны представляют собой обычные веб-страницы. Страницы —родительские контейнеры для элементов пользовательского интерфейса, таких как формы, таблицы, кнопки и графики.
Каждое новое пустое приложение содержит пустую страницу с именем «NewPage». Для нашего простого приложения нам понадобится только одна страница.
Переименуем страницу:
- На левой боковой панели рядом с NewPage нажмите на More
, затем нажмите Rename.
- Введите «HelloPage» и нажмите OK.
Добавляем виджеты и устанавливаем их свойства
Виджеты — части пользовательского интерфейса, из которых мы составляем приложение. С их помощью можно, например, получать и отображать данные, создавать навигацию по страницам и т.д.
На этом этапе мы воспользуемся Widgets , чтобы добавить два виджета в HelloPage. После этого мы установим их свойства в Property Editor.
В итоге у нас должно получиться что-то такое:
- Добавьте поле для пользовательского ввода:
- Нажмите Widgets
и перетащите Text Box
к левому верхнему углу полотна (участок в центре Page Editor). В Property Editor точное расположение можно увидеть, нажав Layout;
- Перетащите правый ползунок блока ввода, чтобы увеличить его размер;
- В Property Editor измените значение свойства name на «YourName»;
- Чтобы сказать пользователю, что нужно делать, в свойстве label введите «Type your name».
- Нажмите Widgets
- Добавьте кнопку:
- Определите действие, которое будет выполняться при нажатии кнопки:
- Нажмите на кнопку Say Hello;
- В Property Editor Button нажмите на свойство onClick и выберите Custom Action;
- Воспользуемся JavaScript, чтобы определить действие приложения, после нажатия кнопки. Вставьте этот код в окно Client Script:
alert("Hello " + app.pages.HelloPage.descendants.YourName.value + "!");
Диалоговое окно JavaScript ссылается на свойство value поля ввода YourName.
- Нажмите Esc, чтобы закрыть диалоговое окно.
Приложение готово, и теперь его можно протестировать.
Тестируем приложение
Наше приложение готово для предпросмотра. В этом режиме только у создателя есть доступ к полнофункциональному приложению.
- В правом верхнем углу нажмите Preview. Приложение откроется в новой вкладке.
- Нажмите Allow, чтобы разрешить приложению использовать ваши данные. При первом предпросмотре, а также после внесения изменений в приложение, у вас запросят разрешение на использование определённой информации. Над приложением (вверху экрана) есть меню Page, которое позволяет переключаться между страницами приложения. По умолчанию это меню отсутствует в опубликованном приложении. Под приложением находится консоль, в которую выводятся сообщения и где можно просмотреть логи сервера.
- В поле Type your name введите ваше имя и нажмите «Say Hello».
- После появления диалогового окна нажмите OK, чтобы его закрыть.
Поздравляем, вы только что создали своё первое приложение с помощью App Maker!
Используем присваивание свойств для вывода (опционально)
На этом этапе мы модифицируем приложение так, чтобы вывод показывался не в диалоговом окне JavaScript, а в интерфейсе приложения. Воспользуемся виджетом Label для вывода и присваиванием свойств в JavaScript для ссылки на ввод:
- Добавьте метку для вывода:
- Переделайте действие кнопки Say Hello так, чтобы вывод происходил через метку:
- Нажмите на Say Hello;
- Нажмите на свойство onClick. Когда появится диалоговое окно Client Script, удалите текущее действие и замените его на один из следующих вариантов:
- Простой — используем одно выражение присваивания, чтобы присвоить свойство value ввода свойству text вывода:
widget.root.descendants.Output.text = "Hello, " + widget.root.descendants.YourName.value + "!";
- Посложнее, чтобы правильно обработать пустой ввод — добавим переменные со ссылка на виджеты ввода и вывода и перед присваиванием свойства text виджета вывода проверим, не пуст ли ввод:
// Определяем переменные для виджетов ввода и вывода var nameWidget = app.pages.HelloPage.descendants.YourName; var outputWidget = app.pages.HelloPage.descendants.Output; // Если имя есть, то приветствуем по имени. // В противном случае выводим просто 'Hello!' if (nameWidget.value) { outputWidget.text = 'Hello, ' + nameWidget.value + '!'; } else { outputWidget.text = 'Hello!'; }
Примечание В этом коде используется абсолютный путь, начинающийся с
app
вместо относительного пути, который начинается сwidget
для ссылки на объекты ввода и вывода. Эти подходы эквивалентны.
- Простой — используем одно выражение присваивания, чтобы присвоить свойство value ввода свойству text вывода:
- Нажмите Esc, чтобы закрыть диалоговое окно.
- Протестируйте изменённое приложение:
- В правом верхнем углу App Maker нажмите Preview;
- Введите своё имя и нажмите Say Hello. Виджет Label отобразит приветствие.
Примечание Для ссылки на ввод можно использовать диалоговое окно и присваивание свойств в JavaScript. Данный подход можно посмотреть в этом примере.
Перевод статьи « Tutorial 1: Hello App Maker!»