W tym artykule przyglądamy się stworzonym przez Mozillę nowym narzędziom i funkcjom, ułatwiającym tworzenie aplikacji sieciowych na platformę Firefox OS.

Za pomocą Firefox OS, systemu operacyjnego w całości opartego na otwartych standardach sieciowych, Mozilla udowadnia, że sieć jest platformą do rozwoju aplikacji, niezależnie od wykorzystywanych narzędzi, języków czy urządzeń. W ramach tej inicjatywy, fundacja odświeżyła niedawno wygląd swojego systemu operacyjnego oraz wprowadziła wbudowane w przeglądarkę funkcje debugujące wydajność. Najważniejszą nowością jest jednak nowe IDE dodane do rozwojowych wersji Firefoksa, które znacznie ułatwi tworzenie aplikacji sieciowych bez dodatkowego narzutu.

Dostępnych jest tak wiele narzędzi i szablonów, że czasami trudno zdecydować, od czego zacząć tworzenie aplikacji. W tym artykule przyjrzymy się wbudowanym funkcjom Firefoksa, podpowiemy, gdzie znaleźć pomocne narzędzia oraz podzielimy się praktycznymi wskazówkami, jak poprawić i przyspieszyć proces tworzenia.

 Firefox WebIDE: twórz, edytuj i testuj aplikacje w przeglądarce

Edytowanie w IDE innym niż środowisko przeglądarki może być czasochłonne i szczególnie frustrujące, jeżeli wymaga przepakowywania i przeinstalowywania aplikacji przy każdej wprowadzanej zmianie. WebIDE Firefoksa jest wbudowane w przeglądarkę, co umożliwia tworzenie, edytowanie i testowanie aplikacji w przeglądarce oraz na różnych urządzeniach. Umożliwia również instalowanie i testowanie aplikacji na urządzeniach i symulatorach Firefox OS.

Mozilla zapewnia w pełni funkcjonalny prototyp aplikacji, a użytkownicy otrzymują wszystkie narzędzia niezbędne do rozwijania jej w oparciu o solidne fundamenty.

Zaczynamy

Otwórz WebIDE, aby zacząć. Znajdziesz je w menu narzędzi dla twórców witryn. Następnie wybierz polecenie „nowa aplikacja”, aby wyświetlić przykładowe szablony. Zapisz wybrany szablon na komputerze. W szablonie możesz wybrać plik index.html, aby wyświetlić prototyp aplikacji i pliki źródłowe, które są już przygotowane do wykorzystania.

Doświadczeni programiści mogą wspólnie z Mozillą tworzyć nowe przykładowe szablony. Społeczność Mozilli cały czas pracuje nad udostępnieniem użytkownikom jeszcze większego wyboru szablonów, dostosowanych do różnych potrzeb. Aby dołączyć do społeczności Mozilli i tworzyć szablony, odwiedź stronę: https://github.com/mozilla/mortar. 

Edycja

Po utworzeniu projektu możesz edytować pliki źródłowe w WebIDE. Wbudowany edytor – bazujący na darmowym edytorze Code Mirror z frameworkiem do analizy kodu tern.js, to proste w obsłudze, lecz oferujące zaawansowane możliwości narzędzie do edycji plików HTML, JavaScript i CSS. Przetestuj działanie edytora wpisując tag <h1> i dodaj do szablonu swój nagłówek.

Edytowanie to tylko ułamek możliwości WebIDE. Środowisko automatycznie weryfikuje manifest aplikacji sieciowej oraz tworzy i instaluje spakowaną aplikację w symulatorze bądź na urządzeniu podłączonym przez port USB. Podczas weryfikacji aplikacji, sprawdzana jest prawidłowość pliku manifestu, wymaganego do publikacji w Firefox Marketplace.

IDE w zupełności wystarczy do podstawowej edycji, ale możliwe jest też korzystanie z innego, wybranego edytora. W tym celu można podłączyć własny edytor za pomocą prostego API. Umożliwia to zewnętrznym edytorom dostęp do zaawansowanych funkcji narzędzia, takich jak zarządzanie wykonywaniem, przenoszenie aplikacji na inne urządzenia czy podłączanie narzędzi dla programistów Firefoksa. Możesz wyłączyć wbudowany edytor i korzystać z WebIDE jak z prostego, przejrzystego interfejsu do zarządzania wykonywaniem i weryfikacją aplikacji. 

Uruchamianie i testowanie

Kiedy będziesz gotowy do przetestowania swojej aplikacji, wybierz sposób uruchomienia – zainstaluj Firefox OS lub podłącz swoje urządzenie z systemem Firefox OS. Po podłączeniu do systemu możesz korzystać ze znanych z biurkowego Firefoksa narzędzi, aby przetestować aplikację. Możesz również pracować w modelu przyrostowym – wybierz Ctrl/Command+R, aby ponownie załadować aplikację na urządzeniu lub symulatorze. W tym momencie można uzyskać informacje o urządzeniu, uruchomionym procesie i zrobić zrzuty z ekranu.

Lepsze zarządzanie manifestem

 Jeśli chcesz udostępnić swoje aplikacje HTML5 na inne platformy niż sieć czy Firefox OS, możesz skorzystać z narzędzi Apache Cordova, które teraz obsługują, obok systemów Android i iOS, również Firefox OS. Na początek warto upewnić się, że korzysta się z najnowszej wersji programu wpisując: 

$ sudo npm install -g cordova

$ sudo npm install -g plugman

Aby przekształcić dowolną stronę HTML5 w aplikację na Firefox OS, należy stworzyć plik manifestu. W tym pliku zapisane są kluczowe informacje, których system Firefox OS wymaga do interakcji z aplikacją.

Cordova ma plik konfiguracyjny config.xml, który już zawiera informacje potrzebne do stworzenia manifestu. Cordova stworzy i zaktualizuje manifest na podstawie pliku config.xml użytkownika. W nowej wersji wtyczki mogą dodać konfiguracje określające niezbędne uprawnienia. Za każdym razem, gdy korzystasz z Cordovy, upewnij się, że manifest jest aktualizowany w oparciu o Twoją konfigurację. Dzięki temu wszystkie informacje dotyczące aplikacji będą znajdować się w jednym miejscu.

Konwertowanie aplikacji na system Android

Nowy Firefox na Androida umożliwia automatyczne przekonwertowanie stworzonej aplikacji sieciowej w natywną aplikację systemu Android. Zalecamy jednak przetestowanie aplikacji na systemie Android przed przesłaniem jej do Firefox Marketplace. Pomoże w tym mozilla-apk-cli – aplikacja wiersza poleceń, ułatwiająca testowanie aplikacji. Poniższe komendy można zainicjować z aplikacji Terminal.

npm install mozilla-apk-cli

Zainstaluje to program mozilla-apk-cli w katalogu ./node_modules/.bin/

Można go również globalnie zainstalować za pomocą:

npminstall -g mozilla-apk-cli

Zakładam, że ./node_modules/.bin masz umieszczony w zmiennej path bądź program został zainstalowany globalnie.

Za pomocą CLI możesz stworzyć wszystkie trzy typy otwartych aplikacji sieciowych:

• Aplikacje hostowane

• Aplikacje spakowane do pliku zip

• Aplikacje spakowane uruchamiane z katalogu kodu źródłowego

Przyjmijmy, że pracujesz ze spakowaną aplikacją.

Struktura katalogu wygląda następująco:

www/

   index.html

   manifest.webapp

   css/

       style.css

   i/

     icon-256.png

     icon-128.png

     icon-60.png

   js/

      main.js

Możesz zbudować aplikację gotową do przetestowania na Androidzie za pomocą:

mozilla-apk-cli ./www my_test_app.apk

To polecenie stworzy my_test_app.apk, który można zainstalować na telefonie na dwa sposoby:

• Umieść w sieci i pobierz lub zainstaluj za pomocą przeglądarki na swoim urządzeniu z Androidem

• Zainstaluj aplikację korzystając z adb

adb install my_test_app.apk

Przyszłość: programowanie dla całej sieci

W samym centrum WebIDE znajduje się protokół Firefox Remote Debugging. Dzięki niemu narzędzia deweloperskie Firefoksa działają na urządzeniach mobilnych za pośrednictwem portu USB. Obecnie protokół może być wykorzystany w Firefoksie dla systemów Windows, Mac, Linux i Android oraz w systemie Firefox OS. W przyszłości adapter protokołu umożliwi deweloperom korzystanie z Firefox Remote Debugging – w tym z narzędzi deweloperskich i WebIDE – na wszystkich przeglądarkach, bez względu na silnik renderujący i środowisko uruchomieniowe.

Ten projekt jeszcze nie wszedł w fazę ogólnodostępnych testów. Osoby, które chcą dowiedzieć się o nim więcej lub pomóc w jego rozwoju, znajdą więcej informacji na: https://github.com/campd/fxdt-adapters.

Jeśli tworzysz narzędzie i chciałbyś poeksperymentować z protokołem, możesz zacząć programować pod Firefoksa dla systemów Windows, Mac, Linux i Android oraz system Firefox OS. Więcej informacji o protokole Remote Debugging można znaleźć na stronie z dokumentacją.

Zobacz jak to działa

Obsługę WebIDE w praktyce można zobaczyć na tym klipie:

####

Autor: Christian Heilmann, Mozilla Developer Evangelist

Chris Heilmann specjalizuje się w technologiach otwartej sieci i HTML5. Stworzył swoją pierwszą stronę internetową zupełnie od podstaw w 1997 roku, a następne lata poświęcił pracy nad licznymi międzynarodowymi projektami internetowymi. Chris jest autorem i współautorem czterech książek o rozwoju Sieci oraz napisał wiele artykułów dla Ajaxian, Smashing Magazine i ScriptJunkie.

Blog: http://christianheilmann.com/

Twitter: @codepo8