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

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

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

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

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

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

1. Залогиньтесь в аккаунте G Suite.
2. Откройте App Maker.
3. Создайте пустое приложение:Если App Maker показывает окно приветствия, нажмите Create New App;В противном случае нажмите Menu  → New → Blank Application.
4. Переименуйте приложение. Удалите имя по умолчанию, «Untitled App», и введите «Hello App Maker» или любое своё название.

Переименуем страницу

Страницы в App Maker становятся экранами приложения. Экраны представляют собой обычные веб-страницы. Страницы —родительские контейнеры для элементов пользовательского интерфейса, таких как формы, таблицы, кнопки и графики.

Каждое новое пустое приложение содержит пустую страницу с именем «NewPage». Для нашего простого приложения нам понадобится только одна страница.

Переименуем страницу:

1. На левой боковой панели рядом с NewPage нажмите на More , затем нажмите Rename.
2. Введите «HelloPage» и нажмите OK.

Добавляем виджеты и устанавливаем их свойства

Виджеты — части пользовательского интерфейса, из которых мы составляем приложение. С их помощью можно, например, получать и отображать данные, создавать навигацию по страницам и т.д.

На этом этапе мы воспользуемся Widgets , чтобы добавить два виджета в HelloPage. После этого мы установим их свойства в Property Editor.

В итоге у нас должно получиться что-то такое:

1. Добавьте поле для пользовательского ввода:Нажмите Widgets  и перетащите Text Box  к левому верхнему углу полотна (участок в центре Page Editor). В Property Editor точное расположение можно увидеть, нажав Layout;Перетащите правый ползунок блока ввода, чтобы увеличить его размер;В Property Editor измените значение свойства name на «YourName»;Чтобы сказать пользователю, что нужно делать, в свойстве label введите «Type your name».
2. Добавьте кнопку:Поместите кнопку  из виджетов  справа от поля ввода;Вертикально выровняйте нижние края кнопки и текстовое поле. Когда вы перетаскиваете виджет, вы увидите синюю линию, показывающую выравнивание;Дважды кликните по кнопке и измените её текст на «Say Hello».
3. Определите действие, которое будет выполняться при нажатии кнопки:Нажмите на кнопку Say Hello;В Property Editor → Button нажмите на свойство onClick и выберите Custom Action;Воспользуемся JavaScript, чтобы определить действие приложения, после нажатия кнопки. Вставьте этот код в окно Client Script:alert("Hello " + app.pages.HelloPage.descendants.YourName.value + "!");Диалоговое окно JavaScript ссылается на свойство value поля ввода YourName.
4. Нажмите Esc, чтобы закрыть диалоговое окно.

Приложение готово, и теперь его можно протестировать.

Тестируем приложение

Наше приложение готово для предпросмотра. В этом режиме только у создателя есть доступ к полнофункциональному приложению.

1. В правом верхнем углу нажмите Preview. Приложение откроется в новой вкладке.
2. Нажмите Allow, чтобы разрешить приложению использовать ваши данные. При первом предпросмотре, а также после внесения изменений в приложение, у вас запросят разрешение на использование определённой информации. Над приложением (вверху экрана) есть меню Page, которое позволяет переключаться между страницами приложения. По умолчанию это меню отсутствует в опубликованном приложении. Под приложением находится консоль, в которую выводятся сообщения и где можно просмотреть логи сервера.
3. В поле Type your name введите ваше имя и нажмите «Say Hello».
4. После появления диалогового окна нажмите OK, чтобы его закрыть.

Поздравляем, вы только что создали своё первое приложение с помощью App Maker!

Используем присваивание свойств для вывода (опционально)

На этом этапе мы модифицируем приложение так, чтобы вывод показывался не в диалоговом окне JavaScript, а в интерфейсе приложения. Воспользуемся виджетом Label для вывода и присваиванием свойств в JavaScript для ссылки на ввод:

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

Примечание Для ссылки на ввод можно использовать диалоговое окно и присваивание свойств в JavaScript. Данный подход можно посмотреть в этом примере.