Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

Создание вашего первого приложения с предохранителем

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Svetlana (you can also view the original English article)

Теперь, когда вы изучили основные понятия Fuse, пришло время воплотить в жизнь и создать приложение. В этом уроке вы узнаете, как разработать приложение, используя фреймворк. В частности, вы узнаете следующее:

  • Как закодировать с помощью UX Markup.
  • Как использовать API Observable, Timer и Geolocation.
  • Как просмотреть приложение, используя предварительный просмотр рабочего стола и пользовательский просмотр.

Если вам нужно обновить Fuse, ознакомьтесь с моим предыдущим сообщением в этой серии: Представляем Fuse для разработки кросс-платформенных приложений.

Необходимые условия

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

Предохранитель доступен как для Windows, так и для macOS. Загрузите и установите правильный установщик для своей платформы. На странице загрузки они также указывают плагины плавких предохранителей, доступные для различных текстовых редакторов. Установите его для текстового редактора. Плагины плавких предохранителей включают в себя завершение кода, определение goto и просмотр журналов, созданных в приложении, что делает приложения более удобными.

Мы также рассмотрим, как просмотреть приложение с помощью пользовательского предварительного просмотра. Для этого необходимо установить Android Studio или Xcode на ваш компьютер.

Основное понимание веб-технологий, таких как

То, что вы будете создавать

Вы будете создавать приложение секундомера, которое также измеряет пройденное расстояние. Расстояние измеряется с помощью геолокации. Пользователь также может создавать круги, а индивидуальное расстояние и время для каждого круга будут отображаться на экране.

Вот как будет выглядеть приложение:

Final Output HIIT Stopwatch

Вы можете просмотреть полный исходный код в учебнике GitHub repo.

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

После установки Fuse Studio теперь вы можете создать новый проект Fuse. Просто откройте Fuse Studio и нажмите кнопку New Fuse Project. Введите название проекта и нажмите «Создать»:

Create a new Fuse project

Это создаст новую папку в выбранном каталоге. Откройте эту папку и откройте файл MainView.ux. По умолчанию он будет иметь  <App>   разметку . Обновите его, включив <Текст>, а затем сохраните файл:

Теперь предварительный просмотр должен быть обновлен с указанным вами текстом:

Hello world output

Это основной рабочий процесс разработки в Fuse. Просто сохраните изменения в любом из файлов в каталоге проекта, и они автоматически отразятся в предварительном просмотре рабочего стола.

Вы также можете увидеть журналы в нижней панели. Вы можете запускать свои собственные, используя console.log (), как в браузере. Единственное различие заключается в том, что вы должны использовать объекты JSON.stringify (), чтобы увидеть их значение, поскольку реализация console.log () в Fuse может выводить только строки.

Разметка UX 

Теперь мы готовы создать приложение. Откройте файл MainView.ux и удалите <Text>элемент из более раннего. Таким образом, мы можем начать с чистого листа:

Включая шрифты

Как и в документе HTML, стандарт должен включать в себя такие объекты, как шрифты, таблицы стилей и сценарии, - до фактической разметки страницы. Поэтому добавьте следующее внутри <App>элемента :

Это импортирует шрифт, указанный в атрибуте File, и дает ему имя Thin. Обратите внимание, что это не делает шрифт по умолчанию для всей страницы. Если вы хотите использовать этот шрифт, вы должны использовать его имя (Thin) для конкретного текста, к которому вы хотите применить его.

Вы можете загрузить шрифт из учебника GitHub repo. После этого создайте папку ресурсов / fonts / robot внутри корневого каталога проекта и поместите в нее файл .ttf.

Если вы хотите использовать другой шрифт, вы можете скачать его с dafont.com. Вот где я скачал шрифт для этого приложения.

Затем мы хотим использовать иконки внутри приложения. У предохранителя действительно нет встроенных элементов и наборов значков, которые позволяют вам это делать. Он предлагает способ добавления существующих шрифтов значков в ваше приложение. Поскольку шрифты значков по существу являются шрифтами, мы можем использовать тот же метод для включения шрифтов:

Вы можете загрузить шрифт значка из репозитория GitHub или загрузить его прямо с fontawesome.com. Обратите внимание, что не все значки на fontawesome являются бесплатными, поэтому лучше проверить фактическую страницу значка перед ее использованием. Если вы видите ярлык «pro» рядом с значком, вы не можете просто использовать его в своем проекте, не платя.

Включая JavaScript

Затем нам нужно включить файл JavaScript для этой страницы. Мы можем сделать это с помощью элемента <JavaScript>:

Не забудьте создать файл сценариев / MainView.js в корне каталога проекта.

Создание новых компонентов

Чтобы максимизировать повторное использование кода, Fuse позволяет нам создавать пользовательские компоненты из существующих. В приведенном ниже коде мы используем <Pane L> для создания пользовательской кнопки. Подумайте об этом как о div, который действует как контейнер для других элементов. В этом случае мы используем его как компонент многократного использования для создания кнопки.

Предохранитель поставляется со многими элементами. Существуют <Pane L> элементы для размещения контента, такие как , элементы для показа пользовательских элементов управления, страниц и навигации, сценариев и данных и примитивы для создания пользовательского интерфейса. Каждый из них имеет свой собственный набор свойств, позволяющий изменять данные, представление и поведение.

Чтобы создать повторно используемый компонент, добавьте свойство ux: Class в элемент представления, который вы хотите использовать в качестве базы. В этом случае мы используем <Pane L>в качестве базы. Затем вы можете добавить стиль по умолчанию. Это похоже на то, как стилирование выполняется в CSS. Margin добавляет пространство вне контейнера. Здесь мы указали только одно значение, поэтому это поле применяется со всех сторон панели. Color (Цвет) добавляет цвет фона к элементу:

Внутри <Panr L> мы хотим показать текст кнопки. Мы хотим превратить это в компонент многократного использования, поэтому нам нужен способ передать свойства, когда мы будем использовать этот компонент позже. Это позволяет нам достичь разных результатов, только изменяя свойства.

Внутри <Pane L>, используйте тип данных значения, которое вы хотите передать, как имя элемента, а затем добавьте имя свойства с помощью ux: Property. Затем вы можете показать значение, предоставленное этому свойству, используя {ReadProperty PropertyName}, где PropertyName - это значение, которое вы предоставили для ux: Property. Это позволит вам предоставлять свойство Text всякий раз, когда вы используете <ToggLeBtn> компонент .

Затем мы хотим предложить пользователю некоторую обратную связь при нажатии кнопки. Мы можем это сделать с помощью триггеров и аниматоров. Триггеры - это в основном слушатели событий - в этом случае <WhiLePressed> А аниматоры - это анимации или эффекты, которые вы хотите выполнить, пока триггер активен. Приведенный ниже код сделает кнопку на 10% больше, чем ее первоначальный размер, и изменит ее цвет. Duration и DurationBack позволяют указать, сколько времени потребуется, чтобы анимация достигла своего пика и достигла своего конца.

Затем мы создаем <IconBtn> компонент  Как следует из названия, это кнопка, в которой отображается только значок. Это работает так же, как и предыдущий компонент, хотя здесь есть несколько новых вещей.

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

Мы также использовали условный элемент с именем <WhileTrue>. Это позволяет отключить <WhilePressed> триггер , когда значение is_running является ложным. Мы передадим значение этой переменной, как только получим часть JavaScript. Пока что знайте, что эта переменная указывает, работает ли данный таймер или нет.

Основное содержание

Теперь мы можем перейти к основному содержанию. Во-первых мы складываем все в <StackPanel>. Как следует из названия, это позволяет нам «складывать» своих детей по вертикали или по горизонтали. По умолчанию он использует вертикальную ориентацию, поэтому нам не нужно явно указывать ее:

В приведенном выше коде мы использовали четыре значения для Margin поля. В отличие от CSS, распределение значений остается слева, сверху, справа, снизу. Если заданы только два значения, это слева-справа, сверху-снизу. Вы можете использовать инструмент выбора в Fuse Studio для визуализации применяемых полей.

Затем добавим фоновое изображение для страницы. Он принимает путь к фоновому изображению, которое вы хотите использовать. StretchMode of Fill заставляет фон растягиваться, чтобы заполнить весь экран:

Вы можете загрузить фоновое изображение, которое я использовал из учебника GitHub repo. Или вы можете найти похожие шаблоны на веб-сайте Toptal.

Затем покажите название приложения. Ниже это текстовое поле с истекшим временем. Этот текст нужно часто обновлять, поэтому нам нужно превратить его в переменную, которая может быть обновлена ​​с помощью JavaScript. Чтобы вывести некоторый текст, инициализированный в файле JavaScript этой страницы, вам нужно обернуть имя переменной в фигурные скобки. Позже вы увидите, как значение для этой переменной предоставляется из файла JavaScript:

Затем мы используем <IconBtn> компонент , который мы создали ранее, - в отличие от веб-среды, где мы используем идентификатор шрифта. В Fuse вам нужно использовать Unicode, назначенный для шрифта значка, который вы хотите использовать. Вам также нужно использовать & # x в качестве префикса. Когда эта кнопка нажата (называется Clicked), функция addLap (), объявленная в файле JavaScript, выполняется:

В шрифте Awesome вы можете найти юникод шрифта значка на своей странице.

Прямо под кнопкой для добавления нового круга есть текст, который указывает, что кнопка выше предназначена для добавления новых кругов:

Затем покажите кнопку запуска и остановки таймера. Это также выполняет функцию, которую мы объявим позже:

Затем нам нужно вывести кружки, добавленные пользователем. Это включает номер круга, пройденное расстояние и потраченное время. Элемент <Each> позволяет нам проходить через набор объектов и отображать индивидуальные свойства для каждого объекта:

В приведенном выше коде мы используем <DockPane L> для обертывания содержимого для каждого элемента. Этот тип панели позволяет нам «состыковать» своих детей с разных сторон (сверху, влево, вправо и снизу) доступного пространства. По умолчанию это помещает своих детей непосредственно друг на друга. Чтобы равномерно выделить их, вам нужно добавить свойство Alignment.

Код JavaScript

Теперь мы готовы добавить код JavaScript. В Fuse JavaScript в основном используется для бизнес-логики и работает с собственной функциональностью устройства. Эффекты, переходы и анимации для взаимодействия с пользовательским интерфейсом уже обрабатываются с помощью UX Markup.

Начните с импорта всех API-интерфейсов, которые нам нужны. Сюда входит Observable, которая в основном используется для назначения переменных в пользовательском интерфейсе. Эти переменные затем могут быть обновлены с использованием JavaScript. Таймер является эквивалентом функций setTimeout и setInterval в веб-версии JavaScript. GeoLocation позволяет нам получить текущее местоположение пользователя:

Затем мы инициализируем все наблюдаемые значения, которые мы будем использовать. Это переменные, которые вы ранее видели в разметке UX. Значения для этих переменных обновляются на протяжении всего жизненного цикла приложения, поэтому мы делаем их наблюдаемой переменной. Это позволяет нам обновлять содержимое пользовательского интерфейса при изменении любого из этих значений:

После этого мы можем теперь установить начальные значения для кнопки переключения и текста таймера:

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

Установите начальные значения для таймера, времени круга и местоположения для каждого круга:

Функция toggle () используется для запуска и остановки таймера. Когда таймер в настоящее время остановлен и пользователь нажимает на кнопку переключения, это единственный раз, когда мы возвращаем значения для таймера и кругов. Это связано с тем, что мы хотим, чтобы пользователь видел эти значения даже после того, как они остановили таймер.

После этого получите текущее местоположение пользователя и нажмите его в массиве location местоположений. Это позволяет нам сравнить его со следующим местоположением позже, как только пользователь добавит колени. Затем создайте таймер, который выполняется каждые 10 миллисекунд. Мы увеличиваем как общее время, так и время lap_time для каждого исполнения. Затем обновите интерфейс с форматированным значением с помощью функции formatTimer ():

Когда пользователь останавливает таймер, мы удаляем его с помощью метода delete () в таймере. Для этого требуется таймер_ид, который был возвращен при создании таймера:

Далее используется функция форматирования таймера. Это работает путем преобразования миллисекунд в секунды и минут. Мы уже знаем, что эта функция выполняется каждые 10 миллисекунд. И время увеличивается на 1 каждый раз, когда он выполняется. Таким образом, чтобы получить миллисекунды, мы просто умножаем время на 10. Оттуда мы просто вычисляем секунды и минуты на основе эквивалентного значения для каждой единицы измерения:

Каждый раз, когда пользователь нажимает кнопку обновления, выполняется функция addLap (). Это добавляет новую запись поверх наблюдаемых <Laps> кругов:

Вот функция для получения расстояния, пройденного в метрах. Это использует формулу Хаверсина:

Не забудьте экспортировать все наблюдаемые значения:

Пакет геолокации

Чтобы облегчить работу, Fuse на самом деле не включает все пакеты, которые он поддерживает по умолчанию. Для таких вещей, как геолокация и локальные уведомления, вы должны сообщить Fuse, чтобы они включали их при создании приложения. Откройте StopWatch.unoproj в корне вашей директории проекта и включите Fuse.GeoLocation в массиве Packages:

Это должно указывать Fuse на включение пакета Geolocation при создании приложения для пользовательского предварительного просмотра или для создания установщика.

Настройка для пользовательского предварительного просмотра

Прежде чем вы сможете запустить приложение на своем устройстве iOS, вам нужно сначала добавить идентификатор пакета в приложение. Откройте файл StopWatch.unoproj и добавьте следующее под iOS. Это будет уникальная идентификация приложения, когда оно будет отправлено в магазин приложений:

Затем, на Xcode, войдите в систему со своей учетной записью разработчика Apple. Если у вас его еще нет, вы можете перейти на веб-сайт разработчика Apple и создать его. На самом деле, бесплатно разрабатывать и тестировать приложения на устройстве iOS. Однако есть некоторые ограничения, если вы не являетесь частью программы разработчика.

Как только ваша учетная запись будет создана, перейдите в настройки Xcode и добавьте свою учетную запись Apple. Затем нажмите «Управление сертификатами» и добавьте новый сертификат для разработки iOS. Этот сертификат используется для обеспечения того, чтобы приложение было из известного источника.

Как только это будет сделано, вы должны теперь запустить приложение на своем устройстве. Нажмите Предварительный просмотр> Предварительный просмотр на iOS в Fuse Studio и дождитесь его запуска Xcode. Когда Xcode открыт, выберите свое устройство и нажмите кнопку воспроизведения. Это создаст приложение и установит его на ваше устройство. Если есть ошибка сборки, скорее всего, идентификатор пакета предварительного просмотра не уникален:

change the bundle ID

Изменение идентификатора Bundle на что-то уникальное должно решить проблему. Как только ошибка в разделе подписи исчезнет, ​​нажмите кнопку воспроизведения еще раз, чтобы перестроить приложение. Это должно установить приложение на вашем устройстве.

Однако вы не сможете открыть приложение, пока вы его не одобрите. Это можно сделать на устройстве iOS, выбрав «Настройки»> «Основные»> «Управление устройствами» и выберите адрес электронной почты, связанный с учетной записью Apple Developer. Утвердите его, и это должно открыть приложение.

Для Android вы можете просмотреть приложение без каких-либо дополнительных шагов.

Вывод 

Это оно! В этом уроке вы узнали об основах создания приложения, используя фреймворк. В частности, вы создали приложение секундомера. Создав это приложение, вы научились работать с Fuse UX Markup и несколькими API-интерфейсами Fuse. Вы также узнали, как использовать Fuse Studio для предварительного просмотра приложения на вашем компьютере и телефоне при его разработке.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.