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

  • , Переводы
Undraw.co

Совсем недавно 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.

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

App Maker

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

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