Dzisiaj przedstawię gotowe repozytorium dostarczające szablon aplikacji wykonanej we frameworku Ionic z wykorzystaniem Webpacka. Omówię również jego budowę i działanie niektórych jej elementów.
Wstęp
Ogromne podziękowania dla pana Julien'a Renaux'a za stworzenie szablonu aplikacji omawianego w tym poście. Szablon ten posłuży mi jako baza do stworzenia mojej aplikacji. Niniejszym ogłaszam również, że w końcu bo tych kilku tygodniach w moim GitHubowym repozytorium zaczyna się coś dziać. Wszelkie zmiany będą prowadzone na osobnych roboczych gałęziach aby nie śmiecić w gałęzi master.
Modyfikacja
Po kilku testach z tym szablonem doszedłem do wniosku, że dobrze będzie wprowadzić kilka zmian. W pliku package.json w sekcji cordovaPlugins dodałem pluginy
- cordova-plugin-browsersync - umożliwiający podgląd aplikacji na żywo w przeglądarce
- cordova-plugin-geolocation - dostęp do geolokalizacji
Instalacja browser sync może dziwić. Przecież Ionic ma świetne narzędzie wywoływane poprzez
ionic serve
Tak to prawda ale w momencie tworzenia aplikacji poprzez moduły CommonJS i kompilację przez Webpack przestaje spełniać swoje zadanie.
W tym momencie kombinacja jest następująca:
Uruchamiam polecenie
npm run watch
uruchamiające kompilację "na żywo" tzn po każdej zmianie zawartość folderu ./www się zmienia oraz następnie
cordova run browser --live-reload
uruchamiający przeglądarkę z podglądem aplikacji.
W pliku package.json z sekcji "cordovaPlatforms" zostawiłem tylko android i browser.
Działanie
Cała logika aplikacji znajduje się w katalogu ./lib gdzie podzielona jest na moduły zgodnie z CommonJs.
Plikiem wejściowym modułów jest ./lib/index.ts. Ktoś może pomyśleć, że w rozszerzeniu znajduje się literówka. Jest to rozszerzenie plików napisanych w języku TypeScript, który jest językiem upraszczającym programowanie i w pełni kompiluje się do JavaScript.
Plik ten załącza framework Ionic i przekazuje pałeczkę do modułu "app", który jest głównym modułem całej aplikacji.
Opiszę co robi każdy z plików tego modułu:
index.ts
Importuje kolejne moduły. Jest plikiem zbiorczym informującym Angulara o lokalizacji każdego z submodułów i dodający jego funkcjonalności.
router.config.ts
Zajmuje się inicjalizacją początkowego stanu aplikacji i jej szablonu
run.ts
Nie jestem do końca pewien ale podejrzewam, że dostarcza informacje o działaniu aplikacji do konsoli deweloperskiej urządzenia.
Menu
Kolejnym ważnym modułem jest "menu", które za pomocą linków i atrybutu ui-sref pozwala wczytywać inne moduły do głównej przestrzeni szablonu. Jako wartość tego atrybutu podawany jest identyfikator stanu aplikacji. Każdy moduł, który może zostać w ten sposób wyświetlony posiada plik config.ts, w którym do danej nazwy stanu są przypisane informacje o kontrolerze i szablonie.
Po zagłębieniu się w budowę tej z pozoru skomplikowanej struktury wszystko staje się jasne i klarowne. Aplikacja jest łatwa w modyfikacji oraz utrzymaniu. W Następnym poście postaram się usunąć przykładową aplikacje i napisać coś swojego, w drodze do utworzenia JourneyPlanner
Brak komentarzy:
Prześlij komentarz