Создание приложений без навыков программирования

Перевод статьи « Tutorial 1: Hello App Maker!»

Совсем недавно Google открыла пользователям G Suite конструктор App Maker для создания приложений без навыков программирования. Мы перевели инструкцию, в которой вы познакомитесь с основами работы в конструкторе и создадите своё первое приложение.

Чему вы научитесь

Из этого руководства вы узнаете, как:

Создать и переименовать приложение;
Добавить такие элементы пользовательского интерфейса, как поля ввода и кнопки, используя панель Widgets и Property Editor;
Установить свойства виджетов с помощью Property Editor;
Добавить JavaScript-код, реагирующий на нажатие мыши. Рассматриваются два подхода: с помощью диалогового окна JavaScript alert и путём присваивания свойств;
Просмотреть и протестировать приложение.

Создаём приложение

Залогиньтесь в аккаунте G Suite.
Откройте App Maker.
Создайте пустое приложение:
- Если App Maker показывает окно приветствия, нажмите Create New App;
- В противном случае нажмите Menu → New → Blank Application.
Переименуйте приложение. Удалите имя по умолчанию, «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».
Добавьте кнопку:
- Поместите кнопку из виджетов справа от поля ввода;
- Вертикально выровняйте нижние края кнопки и текстовое поле. Когда вы перетаскиваете виджет, вы увидите синюю линию, показывающую выравнивание;
- Дважды кликните по кнопке и измените её текст на «Say Hello».
Определите действие, которое будет выполняться при нажатии кнопки:
- Нажмите на кнопку 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 для ссылки на ввод:

Добавьте метку для вывода:
- Перетащите Label из виджетов под поле для ввода. Горизонтально выровняйте их левые края;
- В Property Editor измените значение свойства name на «Output»;
- Удалите Label из свойства text.
Переделайте действие кнопки 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 для ссылки на объекты ввода и вывода. Эти подходы эквивалентны.
- Нажмите Esc, чтобы закрыть диалоговое окно.
Протестируйте изменённое приложение:
- В правом верхнем углу App Maker нажмите Preview;
- Введите своё имя и нажмите Say Hello. Виджет Label отобразит приветствие.