niedziela, 27 marca 2016

Ionic i AngularJS - Architektura aplikacji

Po wstępnych testach możliwości frameworka, pierwszych niezbyt skomplikowanych aplikacjach czas na zabranie się za właściwy projekt od prawidłowej strony. Na pierwszy ogień pójdzie architektura aplikacji.


Już przy pierwszej aplikacji zaproponowanej w poradniku autorów Ionic'a zwróciłem uwagę na pewne problemy. Przede wszystkim na brak większej architektury takiej aplikacji. Wiadomo, że nie była to ani duża aplikacja ani aplikacja, która będzie miała jakiś cykl życia. Wszystko było ładowane w dwóch plikach: index.html i app.js . Nie trudno sobie wyobrazić jakie konsekwencje i problemy może nieść taki układ przy rozwijaniu większych programów. Będąc szczerym nigdy nie miałem przyjemności z AngularJS, natomiast przewinął mi się kiedyś ReactJS. Muszę przyznać, że obydwie te biblioteki niosą ze sobą zupełnie inne podejście do pisania aplikacji. ReactJS wpływa bezpośrednio na strukturę HTML i ją tworzy, natomiast w Angularze to struktura HTML korzysta z biblioteki. Działa to w zupełnie przeciwnych kierunkach. Przyjemnie pracowało mi się z React'em, zobaczymy jak sprawa będzie wyglądać w przypadku Angulara.

Podczas tworzenia tego posta posiłkowałem się następującymi wpisami ludzi zdecydowanie bardziej kompetentnych w tym temacie ode mnie, mianowicie:


Architektura

Tak, każdy z nas kocha to magiczne słowo. Słowo, które jest obszerne i bardzo pojemne. Z racji mnogości rzeczy, które może określać wyjaśnię co będzie określać w tym poście. 
Wyraz architektura w kontekście tego posta będzie oznaczać organizację struktury katalogów oraz plików w projekcie. Najpopularniejszym podziałem aplikacji w większości języków jest model MVC. Abstrahując od tego czym jest MVC, ponieważ zakładam, że większość jak nie wszyscy wiecie o co chodzi. Jeśli nie to pewnie jest wiele zgrabniejszych opisów niż ten który mógłbym sporządzić, a który nie jest tematem tego posta.
Taki model aplikacji wymusza podział naszych plików na trzy kategorie. Inaczej pisząc wykorzystujemy podział sort-by-type czyli rozdzielamy pliki według ich typu, ich przeznaczenia.
We wszystkich podlinkowanych artykułach występuje propozycja żeby zrobić krok dalej. Wykonać podział o wdzięcznej nazwie sort-by-feature. Znaczy to nie więcej, nie mniej, że nasz dotychczasowy podział przenosimy poziom niżej i stosujemy w katalogach przeznaczonych na konkretną funkcjonalność naszej aplikacji.


Jest kilka zalet takiej organizacji struktury projektu:
  • Liczba plików w katalogu jest ograniczona tylko do kilku, pojedynczych z każdego typu.
  • Nawigowanie i wyszukiwanie plików potrzebnych do zmian w danej funkcjonalności jest proste.
  • Pracujemy bezpośrednio z daną funkcjonalnością.
  • Wiemy co reprezentuje każdy katalog. Wszystko jest jasno i precyzyjnie nazwane.

Julien Renaux, autor pierwszego z podanych artykułów proponuje konkretne rozwiązania i narzędzia potrzebne do zorganizowania i wykonania aplikacji skonstruowanej w ten sposób.
Jego podstawowymi postulatami są:
  • Nie używaj Bowera.
  • Używaj npm.
  • Nie używaj Gulp'a.
  • Stosuj CommonJS - standard modularnego organizowania aplikacji
  • Używaj Webpacka - biblioteka budująca aplikację z modułów i zdefiniowanych zależności
O ile zrezygnowanie z Bowera na rzecz npm'a nie jest żadnym problemem, zrezygnowanie z Gulpa może być czymś ciekawym. Dotychczas chwaliłem sobie tą bibliotekę do tworzenia zróżnicowanych tasków zadań. Stosowanie CommonJS mamy już w miarę ogarnięte przez stosowanie reguły sort-by-feature. Natomiast Webpack jest dla mnie czymś zupełnie nowym i powoduje u mnie pewną ekscytację.
W zapoznaniu się z biblioteką pomocna będzie zapewne ich strona domowa ale również wprowadzający w temat post osoby, która o nim wspomniała. W następnym poście postaram się opisać trochę wszystko czego udało mi się na jej temat dowiedzieć.


sobota, 26 marca 2016

Szybka aplikacja dla brata

Dzisiaj techniczny post ale nie bezpośrednio o aplikacji wykonywanej na potrzeby konkursu, a która jeszcze nie powstała bo wciąż zbieram wiedzę. Dzisiaj napiszę o aplikacji, spersonalizowanej pod wymagania członka mojej rodziny.


Przy niedzielnym obiedzie pochwaliłem się, że rozpocząłem naukę tworzenia aplikacji na telefony. I od razu zostałem zasypany pomysłami takich aplikacji. Jeden pomysł mi się spodobał bo był w miarę konkretny.

Aplikacja do obliczania wagi materiału usypanego przez podajnik w żwirowni

Brzmi skomplikowanie? Opisze pokrótce kontekst. Mamy żwirownie, która wydobywa materiały w postaci żwiru i piasku. Często pojawia się potrzeba oszacowania wagi materiału zgromadzonego na hałdzie w kształcie stożka. Otrzymujemy tutaj trzy dane wejściowe: obwód hałdy, wysokość i rodzaj materiału.
Proste obliczenia. Aplikacja również. Wystarczy, że będzie składać się z dwóch pól do podania wartości numerycznej i listy do wyboru materiału.
Wiedza zdobyta podczas tworzenia aplikacji ToDo, jest wystarczająca aby wykonać tego typu prostą aplikację przy pomocy frameworka Ionic i AngularJs. Aplikacja została nazwana roboczo BingCalc. Bing – z angielskiego hałda, a Calc chyba nie muszę nikomu tłumaczyć.

Do dzieła

Pierwszym krokiem jest stworzenie projektu. W tym celu w katalogu z naszą aplikacją wywołujemy komendę

ionic start BingCalc blank

Tworzy to standardowy pusty projekt z nagłówkiem, który od razu został przeze mnie zmieniony.
Wywołujemy komendę

ionic serve


Uruchomi się przeglądarka z podglądem naszej aplikacji.

Dalsze budowanie wyglądu aplikacji to wklejanie kodów z przykładów użycia komponentów CSS na stronie Ionic'a.
Pierwszy komponent to Card. Umieszczamy kod przykładu w tagi <ion-content>

Następnie zamiast przykładowego tekstu wstawiamy formularz. Ja wybrałem ten konkretny przykład: http://ionicframework.com/docs/components/#forms-stacked-labels
<form>
  <div class="list">
 <label class="item item-input item-stacked-label">
   <span class="input-label">Obwod</span>
   <input type="number" min="5" value="5">
 </label>
 <label class="item item-input item-stacked-label">
   <span class="input-label">Wysokosc</span>
   <input type="number" min="5" value="5">
 </label>
 <label class="item item-input item-select item-stacked-label">
   <span class="input-label">Material</span>
   <select>
  <option value="">
    -- Wybierz --
  </option>
   </select>
 </label>
  </div>
  <div>
 <button type="submit" class="button button-block button-positive">Licz</button>
  </button>
</div>
</form>

I to w zasadzie jest kompletny szkielet naszej aplikacji. Teraz należałoby tchnąć w nią „życie”.
W tym celu używamy atrybutów udostępnianych przez framework AngularJS do obsługi formularzy.
Odpowiednio modyfikujemy tagi FORM, INPUT oraz SELECT tak aby wykonywały pewne akcje i przyjmowały konkretne wartości.
<form ng-submit="calculate(input)"> <!-- funkcja calculate() zostanie wywołana po zatwierdzeniu formularza -->

<input type="number" ng-model="input.ambit" min="5" value="5"> <!-- pole przyjmie wartość atrybutu input.ambit -->
<input type="number" ng-model="input.hight" min="5" value="5">

<!-- lista przyjmie wartość konkretnego atrybutu i wyświetli opcje zawarte w tablicy materials -->
<select ng-model="input.material">
<option ng-repeat="material in materials" value="{{material.code}}">
  {{material.name}}
</option>
</select>

I otrzymujemy taki wygląd aplikacji

Po takim zmodyfikowaniu formularza przystępujemy do stworzenia back-endu aplikacji.
Jednak wcześniej modyfikujemy tag BODY
<body ng-app="calc" ng-controller="MainCtrl">

Zmieniając identyfikator aplikacji oraz kontroler odpowiedzialny za dany obszar strony.
Następnie w pliku js/app.js modyfikujemy linię
angular.module('calc', ['ionic'])

oraz dodajemy pod nią nasz kontroler
.controller('MainCtrl', function($scope, $timeout) {})

W ciele funkcji kontrolera dodajemy zmienną przechowującą materiały wyświetlanie w wybieralnej liście
$scope.materials = [{
  code: "gravel",
  name: "Zwir"
}, {
  code: "sand",
  name: "Piasek"
}];
W tym momencie powinny się one pojawić na liście.

Kolejno wartości domyślne dla formularza
$scope.input = {
  ambit: 5,
  hight: 5,
  material: "gravel"
};

Obiekt zawierający dane na temat przelicznika metrów sześciennych na kilogramy danego materiału
$scope.units = {
  gravel: 1700,
  sand: 1520
};

Oraz funkcję przetwarzającą podane przez nas dane
$scope.calculate = function(input) {
  console.log(input);
  var r = input.ambit / (2 * Math.PI);
  var baseField = 2 * Math.PI * r * r;
  var bulk = (1 / 3) * baseField * input.hight;

  var result = bulk * $scope.units[input.material];
  result = result / 1000;
  result = result.toFixed(1);

  alert(result + "t");
};

Po tych zabiegach powinniśmy uzyskać działającą aplikację.


Aby stworzyć z niej plik .apk wywołujemy kolejno komendy

ionic platform add android
ionic build android –-release

Nasz plik .apk powinien znajdować się w katalogu platforms/android/output/build/

Efekt końcowy


Czas pracy: 2h
Mina brata: Bezcenna



niedziela, 20 marca 2016

Pierwsze zmagania z komponentami Ionic i AngularJS

Po skonfigurowaniu środowiska testowego przyszedł czas na stworzenie pierwszej testowej aplikacji. Na stronie domowej frameworka Ionic znajdziemy tutorial przeprowadzający nas przez proces stworzenia prostej aplikacji do zarządzania listami zadań, czyli ToDo app. Mógłbym przeklejać tutaj kod ale nie ma to najmniejszego sensu. Opiszę problemy z jakimi przyszło mi się zmierzyć i pomysły jakie pojawiły się podczas wykonywania samouczka.


Podróż w czasie

Możemy wyobrazić sobie moment, w którym aplikacja została wykonana przeze mnie w całości zgodnie z tutorialem. Dodam, że działa tak jak powinna, czyli umożliwia dodanie kolejnych projektów (osobnych list zadań) oraz dodawanie do każdego z projektów zadań. Przy okazji weekendu, gdzie odwiedziła mnie rodzina skompilowałem nawet gotowy plik .apk aby sprawdzić czy działa ona na różnych urządzeniach. I działa! Sukces.

Mimo to jest to uboga aplikacja. Posiada tylko boczny panel i listę zadań. Postanowiłem ją udoskonalić. A mianowicie umożliwić edycję nazw projektów i ich usuwanie oraz dodanie podobnych działań dla każdego z zadań.

Usuwanie projektów

W celu usuwania projektów przedstawionych w ten sposób:

Aby dodać mmożliwość usuwania skorzystamy z komponentu ion-delete-button dostępnego w pakiecie ion-list. W moim przypadku umieściłem przycisk w lewym górnym rogu odsłaniający przyciski usuwania przy każdym elemencie listy. Wygląda to w ten sposób



Aby to wykonać do kontrolera dodałem obiekt z danymi
$scope.data = {
    showDelete: false
};

Następnie przycisk w górnej belce
<div class="buttons">
    <button class="button button-icon icon ion-ios-minus-outline" ng-click="data.showDelete = !data.showDelete"></button>
</div>

Aktywator do listy oraz przycisk usuwający do ciele każdego z elementów listy
<ion-list show-delete="data.showDelete">
    <ion-item class="item-dark item-remove-animate" ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
        <ion-delete-button class="ion-close" ng-click="deleteProject($index)"></ion-delete-button>
        {{project.title}}
    </ion-item>
 </ion-list>

I metodę usuwającą projekt w kontrolerze
$scope.deleteProject = function(index) {
    $scope.projects.splice(index, 1);
    Projects.save($scope.projects);
}

Dzięki takim modyfikacjom jesteśmy w stanie usunąć elementy z listy. Efekt końcowy prezentuje się następująco:


W następnym poście postaram się przedstawić sposób na edycję nazwy każdego z projektów.

wtorek, 15 marca 2016

Genymotion – emulator Androida

W niniejszym poście skupię się na konfiguracji środowiska testowego naszych aplikacji. Jest to w zasadzie dalszy ciąg poprzedniego posta traktującego o przygotowywaniu środowiska uruchomieniowego pod systemem Windows 7.



Jak zostało ustalone pod koniec posta Ionic – konfiguracjadla środowiska Android emulator systemu Android dostarczony wraz z SDK nie nadaje się do testowania aplikacji ze względu na wolne działanie. Zespół tworzący framework Ionic na jego miejsce poleca emulator Genymotion, działający jako maszyna wirtualna VirtualBox'a.
Na stronie twórców przed pobraniem darmowej wersji z licencją indywidualną należy założyć konto. Następnie pobrać obraz emulatora lub obraz wraz z instalatorem VirtualBox'a. Jako że nie posiadam zainstalowanego VirtualBox'a wybrałem tą drugą opcję.


Instalacja trwa kilka minut. Po wszystkim uruchamiamy aplikację, dodajemy urządzenie takie jakie nas w danym momencie interesuje i uruchamiamy je.
Gdy emulator uruchomi system możemy przejść do naszego pokazowego projektu Ionic i uruchomić komendę

~ ionic run android

Dlaczego run zamiast emulate? Ponieważ nasz system traktuje emulator Genymotion jak fizyczne urządzenie.
Tym sposobem aplikację udało mi się również uruchomić zarówno w emulatorze jak i na tablecie podłączonym do komputera. Ionic sam wybiera odpowiednie urządzenie i wykonuje deploy aplikacji. 


Który sposób będzie lepszy okaże się pewnie podczas pracy. Czasowo, kompilacja wygląda identycznie. Zawsze warto pomacać aplikację palcem gdy będzie w dalszym stadium prac. Póki co skupię się na emulacji.

Aby jednak nie kompilować i nie uploadować projektu na maszynę (np. gdy tylko projektujemy wygląd) można użyć komendy

~ ionic serve 

tworzącej lokalny serwer możliwy do podglądu w przeglądarce na żywo. W ten sposób będę projektował wygląd aplikacji.
Emulator potrzebny będzie do testowania funkcjonalności dostępnych tylko na fizycznym sprzęcie.

A w następnym poście chyba będę mógł zacząć próbować pisać lub modyfikować przykładową aplikację, którą widzimy powyżej. A przede wszystkim zrozumieć jej działanie.

niedziela, 13 marca 2016

Ionic – konfiguracja dla środowiska Android

Będąc pewnym wyboru frameworka, który w obecnej chwili mnie zadowala kolej na wybranie platformy mobilnej, na której w pierwszej kolejności będzie testowana aplikacja.

Problem wyboru platformy rozwiązał się sam. Aby kompilować programy dla platformy Apple, czyli systemu iOS wymagany jest Mac lub przynajmniej jakikolwiek sprzęt z systemem OS X. Nie posiadam takiego pod ręką na stałe – odpada.
Sam używam telefonu Nokii z Windows Phone 8.1 na pokładzie i nie ukrywam, że z chęcią napisałbym na tę platformę aplikację. Niestety, aby kompilować programy na system mobilny w tej wersji wymagany jest przynajmniej Windows 8 na PC. Posiadam tylko Windows 7, a Windows 10 mnie nie zachęca – odpada.
Został Android. Tutaj nie ma szczególnych wymagań. Zaleca się Linux'a ale posiadanie Windowsa też w niczym nie przeszkadza, a przynajmniej nie powinno. Wybór jest prosty.

Na szczęście nie jestem skazany na jedną platformę, wszak aplikacja jest pisana w JS, a więc jest multiplatformowa. Kwestia kompilacji na dany system jest sprawą drugorzędną i w miarę łatwą do rozwiązania. Pierwszym sposobem są na pewno znajomi lub maszyny wirtualne (nie mieszać w wirtualnych znajomych). Czytając o samym budowaniu aplikacji w JS natknąłem się nie raz na oferty kompilacji w chmurze. PhoneGap posiada takie cudo z ograniczeniem do jednej aplikacji dla darmowych użytkowników. W moim przypadku może się to okazać całkiem przydatne.

Konfiguracja środowiska

Aby móc testować aplikację w emulatorze Androida, a więc również ją skompilować do działania w tym środowisku będziemy musieli zainstalować kilka niezbędnych aplikacji/narzędzi.

Java SDK

Nic prostszego ściągamy wersję działającą na naszym systemie, instalujemy, a po wszystkim powinniśmy być w stanie w konsoli wywołać z sukcesem komendę „java”. Następnie wyszukujemy narzędzie „Edytuj zmienne środowiskowe systemu” i do zmiennej PATH dopisujemy ścieżkę do katalogu bin w miejscu instalacji JDK. Tworzymy również nową zmienną JAVA_HOME zawierającą bezwzględną ścieżkę do folderu zawierającego JDK.

Apache ANT

Używany zarówno przez Androida jak i Cordovę. Ściągamy paczkę i umieszczamy na którymś dysku tak aby się nie straciło. W moim przypadku jest to C:/ProgramData/ApacheANT . Tutaj podobnie jak w przypadku JDK w zminnej środowiskowej PATH dodajemy ścieżkę do katalogu bin, czyli w moim przypadku C:\ProgramData\ApacheANT\bin\ .

Android SDK

W przypadku SDK Androida wszystko odbywa się podobnie. Ściągamy, instalujemy. Osobiście pobrałem Standalone SDK, zamiast Android Studio musiałem uruchomić SDK Manager jako administratordoinstalować niezbędne paczki. Po uruchomieniu widzimy mniej więcej takie okno:


Wszystko co musimy zainstalować automagicznie jest już zaznaczone do instalacji. Klikamy „Install 23 packages” i czekamy na zakończenie procesu (Jakaś godzina!).


Następnie dodajemy zmienne środowiskowe ANDROID_HOME ze ścieżką do folderu zawierającego SDK Androida, w moim przypadku jest to C:\Program Files (x86)\Android\android-sdk oraz do zmiennej PATH dopisujemy ścieżki do podkatalogów platform-tools i tools.
Kolejną rzeczą jaką trzeba wykonać jest stworzenie emulatora systemu Android. Według dokumentacji Ionic'a nie wato korzystać z emulatora wbudowanego w SDK ponieważ jest baaaardzo wolny. Jako alternatywę podaje się Genymotion, a zaleca się fizyczne urządzenie.

Środowisko gotowe?


Moje zmagania z emulatorami i/lub fizycznymi sprzętami opiszę w następnym poście. Zastanawiałem się również nad wykorzystaniem PhoneGap'a do testowania. Póki co zadowala mnie skonfigurowane i działające środowisko uruchomieniowe. 

czwartek, 10 marca 2016

Cordova, PhoneGap, Ionic – O co w tym chodzi?

Kolejnym krokiem po stworzeniu podstawowej, przykładowej aplikacji przy użyciu PhoneGap'a, przyszedł czas na wybór frameworka. I tutaj zacząłem się gubić. Nie wszystko okazuje się tak proste jak wyglądało z początku.

Apache Cordova 

Apache Cordova to framework open-source pozwalający tworzyć wieloplatformowe aplikacje przy użyciu technologii webowych takich jak JavaScript, HTML5 i CSS3. Udostępnia on API, za pomocą którego każda z aplikacji może korzystać z możliwości poszczególnych urządzeń i systemów operacyjnych na którym jest uruchamiana. Do możliwości tych możemy zaliczyć na przykład korzystanie z akcelerometru, sieci, statusu baterii, kamery czy geolokalizacji GPS.
Apache Cordova jest głównym rdzeniem narzędzi opisanych w dalszej części tego posta.

PhoneGap 

W moim rozumieniu PhoneGap nazywany frameworkiem jest pomostem pomiędzy Cordovą, a konkretnym urządzeniem mobilnym. Umożliwia w łatwy sposób uruchomienie serwera hostującego naszą aplikację. I w zasadzie tutaj kończą się jego możliwości. Reszta jest zostawiona programiście, czyli dobór frameworka JS, CSS. Zdecydowanie dla bardziej zaawansowanych użytkowników. Z drugiej strony zaletą tej platformy jest aplikacja, która została opisana w poprzednich postach. Mianowicie „PhoneGap Developer App” umożliwiająca uruchomienie i testowanie aplikacji bezpośrednio na urządzeniu. Co może być przydatne gdy będę chciał pisać i testować aplikację na Windows Phone. Ze względu na to, że pracuję na Windows 7 nie jestem w stanie zbudować aplikacji mobilnej na tym systemie.

Ionic

Dla mnie jest to gotowe narzędzie do wytworzenia aplikacji mobilnej. Bazuje jak poprzednik na Cordovie. Dostarcza natomiast gotowe komponenty JS, HTML i CSS, dodatkowo framework jest zoptymalizowany do współpracy z AngularJS. A więc dostajemy wszystko o co przy używaniu PhoneGap musielibyśmy martwić się osobno. Przy tym Ionic posiada ogromne wsparcie społeczności i dużą ilość tutoriali, co w przypadku początkującej w tym temacie osoby jak ja będzie na pewno bardzo przydatne.


Podsumowując, używanie Ionic'a nie wyklucza używania aplikacji ułatwiającej testowanie na telefonie od PhoneGap'a. Mój wybór padł na trzecie przedstawione narzędzie i teraz większość postów będzie właśnie o wytwarzaniu aplikacji mobilnej na tej platformie.

Pierwsza aplikacja mobilna - c.d.

Ten post zostanie poświęcony dalszej części przygód z konfiguracją połączenia telefon-komputer oraz pierwszych zabawach z „aplikacją mobilną”.



Na początku, zamieszczę krótkie przypomnienie co wydarzyło się w ostatnim odcinku poście. Mianowicie został stworzony przeze mnie przykładowy projekt aplikacji mobilnej. W ramach testów hostowany jest on na komputerze w formie serwera node’a działającego na socketach. Do wyświetlenia aplikacji na urządzeniu mobilnym pobieramy dedykowany program PhoneGap’a na odpowiednią platformę i za jej pomocą łączymy się z naszym serwerem. I w tym miejscu skończyła się moja ostatnia przygoda. 
Ze względu na mieszkanie w akademiku gdzie WiFi jest tępione, komputery podłączone są do gniazdek Ethernetem potrzebowałem jakoś połączyć się do mojego laptopa. W tym celu po nieudanych próbach tworzenia Ad-hoc’a przy pomocy Windows 7 pobrałem program MyPublicWiFi. Z kolei ta aplikacja uruchamiała się ale nie chciała wyświetlić żadnego okna konfiguracyjnego. Jak się później okazało wystarczyło odłączyć mój zewnętrzny monitor od laptopa. Bardzo dziwny problem. No ale cóż w momencie w którym człowiek chce coś zrobić małym nakładem pracy zawsze najdzie się jakiś chochlik. 
W chwili pomyślnego uruchomienia MyPublicWiFi sprawnie sparowałem telefon z siecią komputera i załadowałem demonstracyjną aplikację. 




Po kilku chwilach prostego grzebania w plikach HTML i JS zmodyfikowałem wyświetlany tekst (tak to musiało być bardzo trudne :) ). Następnie pobrałem kilka pluginów wykorzystujących funkcje telefonu. W końcu czym jest aplikacja mobilna bez wibracji, powiadomień i innych ciekawych rzeczy.
Korzystając ze strony zawierającej pluginy Crodovy pobrałem kolejno Device Info, Battery Status i Vibration.
W nagłówku przykładowej aplikacji za pomocą pluginu wyświetlam producenta telefonu, następnie dodałem przycisk 
<button id="vibrate">Vibrate</button>
W funkcji bindEvents pliku index.js dodałem Event kliknięcia
document.getElementById('vibrate').addEventListener('click', this.onVibrateClick, false);
A następnie akcję reagującą na kliknięcie. 
onVibrateClick: function(ev) {
    var target = ev.target;
    navigator.vibrate([100, 50, 300]);
}

Jak można się domyśleć z kodu jest to przycisk wywołujący wibracje w telefonie. 
Parametry funkcji vibrate() podane w tablicy informują o czasie wibracja-przerwa w milisekundach. Więc tutaj mamy 100ms wibracji, 50ms przerwy i 300ms wibracji. W rezultacie przypomina to wibracje powiadomień.

Końcowy wygląd aplikacji:



Podsumowując, udało mi się w końcu stworzyć coś co działa! I nawet korzysta z wbudowanych funkcji samego telefonu. W tym przypadku były to najprostsze funkcje takie jak Informacje o sprzęcie i uruchomienie wibracji. 
Pisałem również, że został pobrany również plugin informujący o stanie baterii. Niestety nie udało mi się zmusić go do działania, mimo że Cordova w oficjalnej dokumentacji zapewnia kompatybilność z systemem Windows Phone 8.1.

W następnym poście skupię się na stworzeniu bardziej zaawansowanej aplikacji z konkretnym wyglądem. Czyli głównie wybór frameworka CSS dla urządzeń mobilnych i próba jego wykorzystania.

niedziela, 6 marca 2016

Pierwsza aplikacja mobilna - PhoneGap

Przyszedł czas na tutoriale ze strony domowej PhoneGap'a. Post jest tworzony na bierząco podczas wykonywania instrukcji w nich zawartych.


Krok 1: Instalacja PhoneGapa


Tym razem instalacja niezbędnego oprogramowania przebiegła bezproblemowo. Zwykły instalator systemu Windows. Jest to aplikacja dostępna za pośrednictwem GUI, alternatywą lub też dodatkową aplikacją jest interfejs do obsługi z konsoli - PhoneGap CLI.

Krok 2: Instalacja środowiska testowego PhoneGap Developer App


Instalacja odbywa się na naszym urządzeniu mobilnym. Dostępne są wersje na wszystkie popularne obecnie systemy operacyjne na smartfony. Osobiście posiadam telefon z systemem Windows Phone.


Krok 3: Tworzenie aplikacji


Zgodnie z tym co znajdziemy w tutorialu po wykonaniu tych dwóch kroków jesteśmy gotowi do stworzenia pierwszej prostej aplikacji mobilnej.

W prosty sposób tworzymy nowy projekt
źródło: http://docs.phonegap.com/
Tak utworzony projekt możemy momentalnie uruchomić. Utworzy się w ten sposób lokalny serwer hostujący naszą aplikację. Uzyskujemy kilka adresów IP na których dostępny jest podgląd naszej aplikacji. Musimy uruchomić teraz naszą aplikację mobilną, która została zainstalowana w kroku 2 i połączyć się ze wskazanym adresem.
W tym miejscu napotkałem pierwszy problem. Wiadomo aplikacja z komputer hostowana jest na lokalnym IP. Aby się z nim połączyć za pośrednictwem telefonu wypadałoby być w tej samej sieci.
Jako że jestem mieszkańcem akademika komputer wisi na kabelku, a WiFi tutaj nie uświadczymy.

Mój pierwszy pomysł, stworzyć na komputerze access point, do którego podłączy się telefon i może wtedy jakoś pójdzie. Do tego celu spróbuję wykorzystać aplikację MyPublicWiFi.

... Godzinę póżniej.

Tak jak wiele rzeczy ostatnio. Ta również się nie powiodła. Póki co nie umiem włączyć telefonu do wspólnej sieci z moim komputerem. Jest już późno czas na sen i chyba wiem o czym będzie kolejny post :)




Edytor ważna rzecz - Atom.io

Na pierwszy ogień zgodnie z założeniem został wybrany edytor Atom.io od autorów GitHuba. Poniżej przedstawiam opis mojej walki z nim. Zaznaczam przy tym, że nad wszystkim póki co mam zamiar pracować na systemie operacyjnym Windows.


Wybierając edytor kierowałem się głównie informacjami znalezionymi w internecie. Z tych darmowych najczęściej pojawiające się to (kolejność przypadkowa):
  • Atom
  • Sublime Text
  • Visual Studio Code
  • Brackets
Jako, że dzięki studenckiej karierze wcześniej korzystałem zawsze z WebStorma od JetBrains, tym razem postanowiłem wybrać coś dostępnego dla wszystkich, za darmo.

Atom

Plan był następujący:
  • Pobieram instalator i instaluję
  • Znajduję w internecie jakieś pliki konfiguracyjne stworzone przez mądrzejszych ode mnie
  • Stosuję się do instrukcji
  • Piszę programy!
Niestety jak to bywa w programistycznym świecie nic nie idzie tak jak się to zaplanuje. A najczęściej są to problemy błahe, nad którymi spędzamy nieproporcjonalnie więcej czasu. 

Tak też było w tym przypadku.

Walka rozpoczęła się od niemożności zainstalowania jakiegokolwiek dodatku do edytora. 
Po kilkudziesięciu minutach walki udało się! Problemem był błąd, który zdarza się raz na milion (brawo ja). Aby go naprawić musiałem dodać zmienną środowiskową Atoma ręcznie do systemu. Z jakiegoś powodu nie wykonało się to podczas instalacji.
Problem wydaje się błahy ale ilość poszlak w poszukiwaniu przyczyny spowodowało kilkanaście zmian konfiguracyjnych mojego systemu. Takich jak na przykład grzebanie w samej instalacji Node'a, lub grzebaniu w APM (Atom Package Manager), który to nie wiedzieć czemu używa Node'a w wersji 0.10.x .

Po tych w zasadzie 3h walki uruchomiłem internety w poszukiwaniu jakiś zgrabnych konfiguracji środowiska do pracy z PhoneGap'em. Z tego co wyczytałem nikt nie używa Atoma do wytwarzania oprogramowania tą biblioteką. 
Większość ludzi używa kombajnów z wbudowanym SDK na konkretną platformę takich jak Eclipse, Netbeans, Xcode czy Visual Studio. 
Nieliczni używają po prostu Bracketsa. Cóż, pomyślałem, że jeśli używają Brackets'a to ja mogę się uprzeć i zostać przy Atomie. W końcu rdzeń aplikacji nie jest zależny od platformy (w każdym razie takie jest moje pojęcie na ten temat w momencie pisania tego posta). I z własnego lenistwa stwierdzam, że sam stworzę swoją idealną konfigurację w trakcie pisania aplikacji. Zdecydowanie się nią podzielę w jakimś momencie na niniejszym blogu.


Podsumowując 5h walki z edytorem i przegrzebywania internetu tylko po to aby wrócić do punktu wyjścia – czystej instalacji z kilkoma wtyczkami, które uznałem za potrzebne. Kolejnym planem jest dowiedzieć się:
  • z której strony ugryźć PhoneGap'a,
  • co jeszcze będę do tego potrzebował, a nuż zostanę zmuszony bardziej z własnej niewiedzy do zmiany lekkiego edytora na jakieś bardziej rozbudowane i zintegrowane z tą platformą IDE.

czwartek, 3 marca 2016

Wstępne założenia projektu

Pedantyzm nakazuje mi spisanie wstępnych założeń do weryfikacji, przed pierwszym uruchomieniem edytora.


Opis aplikacji Journey Planner

Aplikację można opisać jako podręczną mapę do planowania podróży czy wolnego czasu w weekendy i nie tylko.
Początkowy zamysł sprowadza się do aplikacji na urządzenia mobilne oraz komputery stacjonarne. W aplikacji będzie można w wygodny sposób znaleźć:
  • Atrakcje turystyczne w zadanym obszarze wraz z ich opisem i np. godzinami otwarcia.
  • Wydarzenia publiczne (prawdopodobnie zaciągane z Facebooka).
  • Transport publiczny w miarę możliwości.
  • Obiekty takie jak kawiarnie, toalety, restauracje, kina, muzea i tym podobne.
  • Pogodę
  • Sklepy
Będzie można również utworzyć ramowy plan zwiedzania wraz z harmonogramem co do godziny, wybierając poszczególne miejsca, dodawać postoje oraz zobaczyć swoje dzieło na mapie.

W ogólnym rozrachunku ma być to aplikacja-agregat różnych danych na temat danego obszaru na mapie.

Narzędzia

Technologia jaką wykorzystam to JavaScript. Od strony kodu chciałbym stworzyć jeden uniwersalny core, który mógłbym wykorzystać przy tworzeniu aplikacji desktopowej i mobilnej. To aplikacji desktopowej prawdopodobnie użyty zostanie Electron, a mobilnej PhoneGap lub Ionic.
Całość spróbuję napisać przy użyciu TDD. Bo z takim procesem tworzenia aplikacji w JavaScript miałem przyjemność przy okazji projektu inżynierskiego, zobaczymy co z tego wyjdzie i na ile akademicka wiedza się przyda.

Na swój edytor wybrałem Atom'a. Rozpatrywałem również możliwość użycia Visual Studio Code. Sprawa wyjaśni się zapewne w praniu.

Ogólny plan pracy na najbliższe dwa tygodnie tj. 5.03 - 19.03

Przeczytać i przyswoić jak najwięcej wiedzy na temat podobnych aplikacji i ich tworzenia. Ogólny research czy spisane założenia można zrealizować w takiej formie i jak je zrealizować w szczególe i w ogóle.
Stworzenie prototypowej aplikacji, która się uruchamia lub silnika, który "coś" robi.


Rozpoczęcie konkursu Daj Się Poznać

Witam na moim blogu założonemu głównie z powodu ogłoszenia konkursu Macieja Aniserowicza pod tytułem "Daj się poznać".


Mam nadzieję podołać temu wyzwaniu, ale zawsze można zadać sobie pytanie: "Dlaczego zdecydowałeś się je podjąć?"
Jest kilka powodów:

Bo o konkursie poinformował mnie mój motywujący kolega (pozdrowienia dla Krzyśka).

I to w zasadzie tylko jemu zawdzięczam to, że teraz piszę tego posta.

Bo mogę!

Koniec wymówek o braku czasu, chęci, pieniędzy, słońca za oknem. Mogę więc robię.
A co z tego wyjdzie to się zobaczy :)

Bo chcę spróbować

Nawet jeśli nie dam rady napisać tych dwóch technicznych postów już w następnym tygodniu. Co by się nie działo prawdopodobnie spróbuję pociągnąć projekt swoim trybem do końca lub momentu, który uznam za koniec.

Nowe doświadczenia i wiedza

Zawsze warto korzystać z okazji do nauczenia się czegoś nowego. Tak się złożyło, że projekt jaki obmyśliłem będzie wymagał ode mnie użycia narzędzi, z którymi nie miałem dotychczas zbyt wiele wspólnego. Na pewno nie na takim poziomie.


Tutaj warto zakończyć posta bo pogwałciłem się wymuszając na sobie napisanie paru zdań od siebie do "internetów".

W następnym poście postaram się zdefiniować przedmiot i założenia projektu, a następnie wypadałoby stworzyć orientacyjny plan pracy (w końcu deadline jest znany :) )