Incodable: 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

Incodable

sobota, 26 marca 2016

Szybka aplikacja dla brata

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

Do dzieła

Brak komentarzy:

Prześlij komentarz