Fuse – kolejne narzędzie do prototypowania czy innowacyjne podejście do tworzenia prototypów i aplikacji mobilnych w jednym?


Podczas gdy debata nad wyższością aplikacji natywnych nad tymi napisanymi w HTML5 trwa w najlepsze, w tle wyłaniają się rozwiązania, które starają się z jednej strony zapewnić wszystkie korzyści, które dają aplikacje dedykowane, z drugiej strony spełniają największą obietnicę frameworków webowych – przenośność.

Na przestrzeni ostatnich lat powstało sporo projektów, które próbują zagarnąć ten segment rynku z różnym powodzeniem – PhoneGap, appcelerator, Xamarin, Kony czy Feedhenry. W zeszłym roku zrobiło się głośno o polskim projekcie Kinetise – online’owym kreatorze „drag and drop”, którego pomysłodawcy przekonują, że dla rynku aplikacji mobilnych stanie się tym, czym WordPress stał się dla stron www.

W tym artykule chciałbym opisać stosunkowo młody projekt – Fuse, publicznie dostępny w wersji beta od zeszłego roku, po pozyskaniu inwestora na $2,8 mln celem wprowadzenia finalnego produktu na rynek. Twórcy Fuse starają się odpowiedzieć na następujące wyzwania:

  • Prototyp tworzony niezależnie od aplikacji – obecnie w procesie wytwórczym, przygotowane makiety i prototypy po ich akceptacji przez Klienta są „przepisywane” od nowa na aplikacje. Fuse ma to zmienić poprzez udostępnienie narzędzi do prototypowania, które pozwolą aby przygotowany prototyp był częścią późniejszego rozwiązania. W przypadku korzystania z zewnętrznych narzędzi np. Sketch, oczywiście przewidziano możliwość importu projektu layoutu.
  • Przenośność pomiędzy platformami Android i iOS – Fuse wprowadza UX Markup – oparty na XMLu język do opisywania elementów interfejsu, dialekt C# – Uno, kompilowany bezpośrednio do C++ oraz Javascript do opisu logiki biznesowej. Oznacza to, że Fuse pozwala tworzyć w 100% natywne aplikacje korzystające ze wszystkich dobrodziejstw API platformy w tym np. dostępu do pamięci, aparatu czy GPS.

Wszystko ma działać szybko i bezproblemowo na Android oraz iOS, z możliwością bieżącego podglądu prototypu przez www a nawet bezpośrednio w urządzeniu mobilnym.

Instalacja i uruchomienie

Instalator dla Windows i MacOS dostępny jest pod adresem https://www.fusetools.com/downloads. Do testów bezpośrednio na telefonie będą potrzebne komponenty Android SDK i Google USB Driver – dostępny bezpośrednio ze strony www (https://developer.android.com/studio/run/win-usb.html#download) lub z poziomu Android Studio (Tools > Android > SDK Manager > Google USB driver package). SDK instaluje się z poziomu wiersza poleceń po instalacji Fuse:

fuse install android

 

Po instalacji w systemie Windows konieczne jest jeszcze dopisanie ścieżki do lokalizacji z Fuse do zmiennej środowiskowej PATH, dzięki czemu będzie możliwość wygodnej obsługi z poziomu wiersza poleceń.

Przy pierwszym uruchomieniu GUI (Fuse Dashboard) istnieje możliwość instalacji rekomendowanego edytora tekstu Sublime Text 3 oraz plugin’u Fuse do Sublime Text 3, dzięki czemu możliwe będzie otwieranie do edycji plików projektu z poziomu Dashboardu Fuse oraz edycja właściwości obiektu wskazanego w edytorze z poziomu narzędzia Inspector.

Rys1

Rysunek 1 Dashboard – główne okno GUI Fuse

W Dashboardzie znajdziemy następujące opcje:

  • New Project – utworzenie struktury plików pod nowy projekt,
  • Open Project – podłączenie istniejącego projektu Fuse (.unoproj),
  • Open Monitor – otworzenie okna narzędzia Monitor, wyświetlającego błędy i komunikaty z aplikacji – wyjątki, komunikaty debugujące, itd.,
  • Open Inspector – otworzenie okna narzędzia Inspector, umożliwiającego podgląd i edycję parametrów obiektu (wielkość, rozmiar, położenie, kolor,…) bezpośrednio w aplikacji lub w edytorze Sublime Text,
  • Setup Guide – możliwość instalacji edytora Sublime Text 3 wraz z pluginem Fuse.

Rys2

Rysunek 2 Edycja właściwości obiektu w narzędziu Inspector

Rys3

Rysunek 3 Błąd Javascript wyświetlony w narzędziu Monitor

Dla każdego istniejącego projektu istnieje możliwość wykonania następujących akcji:

  • Open in Sublime Text 3 – przejście do edycji projektu
  • Preview – zbudowanie aplikacji i jej podgląd lokalnie lub na urządzeniu mobilnym
  • Open in Explorer – przejście do katalogu z projektem
  • Open in Command Prompt – przejście do katalogu z projektem w wierszu poleceń

 

Pierwszy projekt

Projekt Fuse można utworzyć z poziomu Dashboardu lub z poziomu wiersza poleceń:

fuse create app Test2

Rys4

Rysunek 4 Tworzenie projektu z poziomu Dashboardu

Tworząc projekt z poziomu GUI mamy możliwość wyboru szablonu, z którego będzie utworzony. Standardowo dostępne są dwa szablony – „goły” Fuse project i bardziej złożony Example project.

Na początek skorzystam z Fuse project, celem omówienia struktury plików. Fuse utworzył dwa pliki:

  • ux – główny plik projektu, w którym tworzone są elementy UI w UX Markup,
  • unoproj – plik JSON zawierający informacje, parametry i ustawienia aplikacji oraz odwołania do innych pakietów. Ten plik steruje eksportem projektu do natywnych aplikacji.

Dodanie kilku podstawowych elementów UI pozwala  na utworzenie pierwszej prostej aplikacji:

<App><DockPanel>

<StatusBarBackground Dock=”Top” />

<ScrollView ClipToBounds=”true”>

<StackPanel>

<Text FontSize=”30″>Hello, world!</Text>

<Slider />

<Button Text=”Button” />

<Switch Alignment=”Left” />

</StackPanel>

</ScrollView>

</DockPanel>

</App>

 

Utworzenie aplikacji i jej podgląd lokalnie:

fuse preview

Build przebiega bez problemów

Rys5

Rysunek 5 Build pierwszej aplikacji

Rys6

Rysunek 6 GUI aplikacji w trybie podglądu (Preview)

 

Symulator aplikacji

Okno podglądu posiada kilka przydatnych opcji, które pozwalają na testowanie zachowania aplikacji na różnych urządzeniach i w różnych sytuacjach:

  • Reset – pozwala na reset aplikacji do stanu inicjalnego
  • Design mode – pozwala na podgląd i bieżącą edycję właściwości obiektów w narzędziu Inspector
  • Device – pozwala zmienić urządzenie, w które emulujemy do testowania aplikacji. W praktyce sprowadza się to do zmiany rozdzielczości okienka z możliwością zdefiniowania własnych rozmiarów i testów urządzenia w pozycji horyzontalnej. Definicja urządzeń powinna znaleźć się w pliku devices.json w katalogu głównym projektu

 

[{

„Name” : „iPhone 6”,

„Width” : 750,

„Height” : 1334,

„PixelsPerPoint”: 2,

„PhysicalPixelsPerInch” : 326,

„IsDefault” : true

},

{

„Name” : „iPhone 6 Plus”,

„Width” : 1242,

„Height” : 2208,

„PixelsPerPoint” : 3,

„PhysicalPixelsPerInch” : 401,

„PhysicalPixelsPerPixel” : 0.8695652173913

}

 

UX Markup i Unoproject

Wracając do przedstawionego przykładu, poniżej omówienie wykorzystanych znaczników UI w pliku MainView.ux:

  • @App – znacznik główny dla aplikacji (może być tylko jeden)
  • @DockPanel – znacznik tworzący layout poprzez układanie elementów UI i ich pozycjonowanie (góra, lewo, prawo, dół). Ostatni element UI domyślnie wypełnia całą pozostałą przestrzeń interfejsu,
  • @StatusBarBackground – znacznik rezerwujący miejsce na górny status bar. Efekt wykorzystania znacznika nie jest widoczny w symulatorze, ale po uruchomieniu aplikacji w urządzeniu mobilnym.
  • @ScrollView – znacznik obsługujący scrollowanie – domyślnie w pionie
  • @StackPanel – znacznik tworzący layout poprzez układanie elementów UI w linii w pionie (domyślnie) lub poziomie
  • @Slider – znacznik dodający element UI – suwak
  • @Button – znacznik dodający element UI – przycisk
  • @Switch – znacznik dodający element UI – przełącznik

Pełna lista obsługiwanych elementów UI znajduje się w lokalizacjach:

 

Edytując plik Test2.unoproj możliwe jest określenie dodatkowych parametrów aplikacji przykładowo:

{„Version”: „0.1.0”,
„Title”: „Fajna apka”,
„Description”: „Apka pozwalająca zakupić polisę ubezpieczeniową z          telefonu komórkowego”,
„Copyright”: „Copyright © 2003-2016 \$(Publisher)”,
„Publisher”: „Atena Usługi Informatyczne i Finansowe S.A.”,”Android”: {„VersionName”: „\$(Version)”},”iOS”: {„BundleVersion”: „\$(Version)”},

„Mobile”: {

„RunsInBackground”: false

},

„Mobile”: {

„Orientations”: „Portrait”

},

„Android”: {

„Icons”: {

„LDPI”: „Icon-ldpi.png”,
„MDPI”: „Icon-mdpi.png”,
„HDPI”: „Icon-hdpi.png”,
„XHDPI”: „Icon-xhdpi.png”,
„XXHDPI”: „Icon-xxhdpi.png”,
„XXXHDPI”: „Icon-xxxhdpi.png”
}
}

}

 

Logika aplikacji – Javascript API

Cała logika aplikacji może być zbudowana w API Javascriptowym. Możliwości są nieograniczone – od wpływu na wygląd i zachowanie poszczególnych elementów GUI, po operowanie na danych oraz wywoływanie zewnętrznych usług.

Modyfikując nieznacznie powyższy przykład otrzymujemy aplikację, która reaguje na kliknięcia przycisku zmieniając jego napis i zapisując tą aktywność w logu.

<App><JavaScript>

var Observable = require(‚FuseJS/Observable’);

var buttonText = Observable(‚Button’);

var clickCount = 0;

 

function onClick() {

clickCount += 1;

buttonText.value = ‚Clicks: ‚ + clickCount;

console.log(‚Clicks: ‚ + clickCount);

 

}

 

module.exports = {

buttonText: buttonText,

onClick: onClick

}

</JavaScript>

<DockPanel>

<StatusBarBackground Dock=”Top” />

<ScrollView ClipToBounds=”true”>

<StackPanel>

<Text FontSize=”30″>Hello, world!</Text>

<Slider />

<Button Text=”{buttonText}” Clicked=”{onClick}”/>

<Switch Alignment=”Left” />

</StackPanel>

</ScrollView>

</DockPanel>

</App>

Rys7

Rysunek 7 Wykorzystanie Javascript API do modyfikacji elementów UI

 

Korzystając z Javascript API możemy:

  • odczytywać i zapisywać w pamięci urządzenia
  • odczytać stan aplikacji (m.in. czy pracuje w tle)
  • uruchamiać inne aplikacje w urządzeniu
  • skorzystać z funkcji wybierania numerów w urządzeniu
  • uruchomić domyślną aplikację aparatu w urządzeniu
  • kontrolować funkcję wibracji urządzenia
  • odczytywać informacje z usług lokalizacji w urządzeniu
  • obsługiwać notyfikacje Push

 

Podsumowanie

Fuse to całkiem przyjemny zestaw narzędzi pozwalający na budowanie zarówno prototypów, jak i w pełni działających natywnych aplikacji Android i iOS. Nieskomplikowany w uruchomieniu, z prostą i zrozumiałą składnią UX Markup oraz logiką pisaną w Javascript – poradzi sobie z tym każdy kto choć przez chwilę zetknął się z programowaniem web. Do tego podgląd zmian „na żywo” w symulatorze i dowolnej ilości urządzeń mobilnych, co potencjalnie pozwala na wprowadzenie zmian na bieżąco „przy Kliencie”. Czy okaże się na tyle przyjazny i przystępny, aby był wykorzystywany szeroko podczas prototypowania? W mojej ocenie jest na to duża szansa. Z niecierpliwością będę wyczekiwał finalnej wersji produktu.

 

 

Źródła:

  1. Fuse, http://www.fusetools.com/
  2. Hybrid vs Native Mobile Apps – The Answer is Clear, http://www.ymedialabs.com/hybrid-vs-native-mobile-apps-the-answer-is-clear/
  3. Fuse Raises $2.8M For Design-Centric App Development Platform, https://techcrunch.com/2015/01/27/fuse-raises-2-8-million-for-a-cross-platform-app-development-platform-where-designers-play-a-bigger-role/

Łukasz Czech

O Łukasz Czech

W ATENIE pracuję od 2012 roku, obecnie pełniąc rolę Kierownika Zespołu Project Managerów. Poza aspektami zarządczymi projektów oraz sposobami wytwarzania oprogramowania w organizacji, interesują mnie technologie web oraz marketing internetowy. Wolny czas chętnie spędzam z rodziną, fotografując i filmując dorastanie moich dzieci :)


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Komentarz do “Fuse – kolejne narzędzie do prototypowania czy innowacyjne podejście do tworzenia prototypów i aplikacji mobilnych w jednym?

  • Kira

    O, właśnie czegoś takiego szukam – nieskomplikowanego narzędzia, głównie do prototypowania. Podoba mi się też funkcja podglądu. No, czekam na efekty końcowe, że tak powiem ;).