Совсем недавно 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. Данный подход можно посмотреть в этом примере.

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

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