Статьи

Учебник по Android: создание приложения Hello World на Tiggr

Сентябрь 4, 2017

В этом руководстве используется Tiggr , веб-конструктор мобильных приложений. Если у вас нет учетной записи, зарегистрируйтесь . Это быстро и просто.

Создание нового проекта

  1. Введите имя нового проекта: AndroidHelloWorld

     

  2. На вкладке «Собственное приложение» выберите «Пустое мобильное приложение»:
  3. Нажмите OK, чтобы создать новый проект. Как только редактор приложения будет загружен, вы увидите следующее:

    Теперь, когда мы получили проект, мы готовы построить пользовательский интерфейс. 

Создание пользовательского интерфейса

  1. Найдите компонент Input и перетащите его в телефон. Удалите метку ввода по умолчанию. 
  2. Найдите компонент Button и перетащите его в телефон. Измените метку кнопки на Hello Android . 
  3. Например, дважды щелкните на метке подписи и измените ее на Android Hello World . 
  4. Выберите экран (вы можете нажать за пределами телефона) и в Свойствах выберите одну из доступных тем. Мы собираемся использовать Blue. 
  5. После того, как вы выполнили все шаги, результат будет выглядеть так:
  6. Прежде чем мы создадим вторую страницу, давайте сделаем несколько небольших обновлений. Сначала снова выберите экран и в Свойствах измените его имя на Пуск . Затем выберите компонент ввода и измените его имя на вход (в свойствах). Мы собираемся сослаться на эти элементы всего за несколько шагов, и присвоение им имен облегчит нам их поиск. 
  7. Переключитесь в представление Projects, затем выберите Add> Screen. 
  8. Выбрав шаблон экрана для мобильных устройств, нажмите кнопку ОК, чтобы создать новый экран.
  9. В Свойствах переименуйте экран в Привет . Затем измените его тему на синий, чтобы соответствовать первому экрану. 
  10. Например, измените его метку на Hello .  
  11. Переключиться в палитру
  12. Из палитры Mobile перетащите компонент Grid. Компонент Grid по умолчанию имеет 2 столбца. 
  13. Выберите компонент «Метка» и перетащите его в первый столбец сетки. 
  14. Измените его метку на Hello .
  15. Затем перетащите другой компонент Label во второй столбец сетки. Удалить его метку по умолчанию.  
  16. Наконец, измените имя компонента на enterName . Как только вы закончите, ваш экран должен выглядеть следующим образом:

Настройка переменных, событий и навигации

  1. Открыть стартовую страницу
  2. Выберите экран (вы можете щелкнуть за пределами области телефона) и открыть вид событий справа. 
  3. Выберите Добавить событие> Загрузить. Событие загрузки будет указано в поле ниже. 
  4. Выберите компонент кнопки, в представлении «События» выберите «Добавить событие»> «Нажмите». 
  5. Нажмите кнопку + справа и добавьте действие Set Variable и установите следующие значения:

    1. Имя переменной: имя
    2. Проверить: привязать к компоненту
    3. Целевой компонент: вход
    4. Название недвижимости: Текст
    5. Нажмите ОК
  6. Нажмите кнопку + справа и выберите Перейти к действию страницы.

    1. Выберите страницу Hello и нажмите OK
  7. Открыть страницу Hello
  8. Выберите экран, затем События> Добавить событие> Загрузить
  9. Нажмите кнопку + справа и добавьте действие «Установить свойство» и установите следующие значения

    1. Имя компонента: nameEntered
    2. Название недвижимости: Текст
    3. Проверка: переменная
    4. Переменная: имя
    5. Нажмите ОК

Тестирование приложения

Теперь вы можете протестировать приложение. Откройте стартовую страницу и нажмите «Тест». Откроется новое окно браузера, где вы можете попробовать приложение.

Еще одно обновление интерфейса

Давайте сделаем так, чтобы легко вернуться к нашей первой странице со второй. 

  1. Открыть страницу Hello
  2. Перетащите компонент Button и поместите его в заголовок слева от надписи.
  3. Измените метку кнопки на Назад . Это должно выглядеть так:
  4. Нажмите кнопку, затем События> Добавить событие> Нажмите. 
  5. Нажмите + и добавьте навигацию к действию страницы. 
  6. Выберите Начальную страницу, нажмите ОК. 
  7. Вы можете протестировать приложение еще раз.  

Тестирование приложения на устройстве Android

Есть два способа проверить это приложение на вашем Android-устройстве.

1. Tiggr Мобильный тестер

Установите приложение Tiggr Mobile Test на свое устройство. С помощью этого приложения вы можете запустить и протестировать любое приложение в своей учетной записи. То, что вы будете запускать, является нативным приложением. Вы можете установить Tiggr Mobile Tester здесь . Мы рекомендуем этот подход, так как это самый простой способ тестирования и приложения без необходимости каждый раз обновлять и устанавливать его.

После установки Tiggr Mobile Tester войдите под своим именем пользователя / паролем. Вы увидите список всех мобильных проектов. Нажмите на проект, нажмите Preview, и через несколько секунд приложение запустится. Tiggr Mobile Tester выглядит так:

 
  

2. Экспортируйте приложение как Android Binary

В Tiggr выберите «Экспорт»> «Двоичный файл Android». Сохраните файл и загрузите его на свое устройство. Один из простых способов — отправить его по электронной почте на ваше устройство. Установите файл .apk. Tiggr использует PhoneGap для создания собственного приложения. 

Получать родной, действительно. 

Вы только что создали (ваше первое) настоящее приложение для Android. Все еще сомневаетесь? Давайте добавим некоторый нативный код с PhoneGap API.   

  1. Добавьте кнопку на странице Hello, измените ее ярлык A Fun Button . 
  2. Выберите кнопку, затем События> Добавить событие> Нажмите
  3. Добавить Выполнить пользовательское действие JavaScript. Введите следующий JavaScript: 
    alert('Device name: '+ device.name+'\nPhoneGap: '+device.phonegap+'\n
   Platform: '+device.platform+'\nVersion: '+device.version);
  4. Запустите приложение еще раз на вашем устройстве Android. 

Примечание: поскольку JavaScript вызывает собственный API, это не будет работать в браузере. Вы можете узнать больше об API устройства PhoneGap здесь .

Ищете больше? Попробуйте справочный сайт Tiggr: http://help.gotiggr.com , блог Tiggr или следите за Tiggr в Твиттере @gotiggr .

29
Share: