Uwaga! Zakładam, że posiadasz zainstalowane IDE Android Studio oraz SDK dla wersji Androida, w której chcesz budować aplikację (u mnie wersja 7.0). Instalacja SDK jest bardzo prosta i sprowadza się do wybrania odpowiedniego pola wyboru w interfejsie programu:
W ostatnim czasie zaczął mnie interesować framework Xamarin. Na studiach stworzyłem kilka projektów w C# i .NET, ale bardzo interesująca dla mnie jest wizja stworzenia za pomocą tej technologii aplikacji na smartfona; dodatkowo aplikacji, która będzie multiplatformowa. Na studiach miałem okazję tworzyć także aplikację w frameworku Cordova, który ma podobne ambicje - tworzenie aplikacji na wiele platform jednocześnie, więc jest to dobra okazja aby porównać obie technologie w najbliższym czasie. W dzisiejszym wpisie chciałbym pokazać, jak szybko zacząć przygodę z frameworkiem napisanym w JavaScript.
Do stworzenia aplikacji będziemy wykorzystywać narzędzia konsolowe. Posiadacze IDE Visual Studio mogą także w prosty sposób wygenerować projekt poprzez interfejs; ale my tego nie zrobimy. Najpierw należy pobrać narzędzie Cordova CLI (ang. Command Line Interface). W tym celu musimy posiadać menedżer pakietów NPM ("odpowiednik" Composera w języku JavaScript - tak w uproszczeniu). Pobieramy go wraz z Node.js ze strony: https://nodejs.org/en/download/. Po instalacji uruchamiamy ponownie konsolę i instalujemy narzędzia Cordova:
npm install -g cordova Następnie tworzymy nowy projekt o nazwie demo za pomocą komendy:
cordova create demo Przechodzimy teraz do stworzonego przed chwilą folderu demo (za pomocą polecenia cd) i dodajemy nową platformę. Nową platformą będzie Android w wersji 7.0 (oprócz tego dostępnych jest wiele innych systemów):
cordova platform add android@7.0.0 Platforma została dodana. Struktura katalogów projektu wygląda następująco:
- hooks
- node_modules
- platforms
- plugins
- res
- www
- css
- img
- js
Dla nas najważniejszy w tej chwili jest folder www - w nim znajduje się interfejs oraz logika aplikacji. W środku na start znajduje się aplikacja demo, która jest gotowa do zbudowania. Podłączamy zatem teraz telefon kablem USB w trybie debugowania i budujemy rozwiązanie:
cordova build android Za pierwszym razem budowanie może potrwać odrobinę dłużej, ze względu na pobieranie dodatkowych komponentów. Zakończenie budowania będzie oznaczone komunikatem BUILD SUCCESSFUL. Teraz już można uruchomić aplikację na telefonie. Wpisujemy komendę:
cordova run android Jeżeli nie mamy urządzenia z Androidem, to możemy przygotować emulator (znowu - najłatwiej będzie to zrobić przez Android Studio) i uruchomić emulację za pomocą polecenia:
cordova emulate android Jeżeli dotrwałeś do tego miejsca to jestem z Ciebie dumny! Teraz zagłębmy się w zawartość katalogów www. Plikiem startowym jest plik index.html. Dzieje się tak dlatego, że taki punkt startowy został wybrany w pliku config.xml. Plik config.xml zawiera konfigurację całej aplikacji. Tutaj możemy też zmienić nazwę naszej aplikacji. Zmieńmy zawartość tagu <name> na nazwę Sum Calculator. Teraz po zbudowaniu i uruchomieniu aplikacji na telefonie nasza apka będzie posiadała nową nazwę.
Otwórzmy plik index.html. W tagu <head> widzimy sporo wpisów, którymi się teraz nie przejmujmy. Chciałbym Ci tylko zwrócić uwagę, że została skonfigurowana polityka CSP, która ma ogromne znaczenie na bezpieczeństwo Twojej aplikacji. Więcej o CSP możesz przeczytać np. na stronie Czym jest Content Security Policy.
Usuńmy teraz z pliku zawartość <div> z klasą app i dodajmy nagłówek z nową nazwą aplikacji, dwie kontrolki oraz przycisk:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Sum Calculator</title>
</head>
<body>
<div class="app">
<h1>Sum Calculator</h1>
<div id="deviceready" class="blink">
<input type="number" id="input-number-first"/>
<input type="number" id="input-number-second"/>
<input type="button" id="button-calculate-sum" value="Get sum"/>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Z pliku index.css usuwamy wszystkie reguły i zastępujemy je zawartością:
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body
{
background: orange;
color: white;
padding: 20px;
}
h1, input
{
margin: 0 0 10px 0;
padding: 20px;
width: 100%;
}
Teraz przejdźmy do najlepszej części - pliku index.js. Zawiera on logikę aplikacji. W aplikacji demo jest stworzony prosty obiekt z metodami initialize, onDeviceReady oraz receivedEvent. Stwórzmy drugi obiekt z metodą calculateSum, obliczającą sumę liczb z pól wprowadzonych przez użytkownika:
var calculator = {
calculateSum: function() {
var firstNumber = document.getElementById('input-number-first').value;
var secondNumber = document.getElementById('input-number-second').value;
alert(firstNumber + ' + ' + secondNumber + ' = ' + (parseInt(firstNumber)+parseInt(secondNumber)));
}
};
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
document.getElementById('button-calculate-sum').addEventListener('click', calculator.calculateSum);
}
};
app.initialize(); Teraz po zbudowaniu aplikacji, uruchomieniu oraz wypróbowaniu aplikacji otrzymujemy rezultat:
Mamy teraz dwa problemy; po pierwsze, co się stanie jeżeli nie uzupełnimy jakiegoś pola i klikniemy na przycisk? Otrzymamy wartość NaN :). Musimy o to zadbać. Drugim problemem jest to, że korzystamy z funkcji alert, a chcielibyśmy wykorzystać natywny komunikat systemu Android. Jak to zrobić? Należy zainstalować odpowiedni plugin to umożliwiający. Instalujemy plugin poleceniem:
cordova plugin add cordova-plugin-dialogs Wtyczki do Cordova możesz znaleźć na stronie https://cordova.apache.org/plugins/. Po instalacji plugin będzie dostępny we wszystkich wspieranych platformach (zdarza się, że wtyczki obsługują tylko jedną, dwie platformy - należy o tym pamiętać tworząc aplikację multiplatformową). Aby wykorzytać plugin, zmieniamy funkcję alert na navigator.notification.alert:
var calculator = {
calculateSum: function() {
var firstNumber = document.getElementById('input-number-first').value;
var secondNumber = document.getElementById('input-number-second').value;
navigator.notification.alert(firstNumber + ' + ' + secondNumber + ' = ' + (parseInt(firstNumber)+parseInt(secondNumber)), undefined, 'Result', 'Thanks!');
}
};
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
document.getElementById('button-calculate-sum').addEventListener('click', calculator.calculateSum);
}
};
app.initialize(); Gotowe! Aplikacje pisane w frameworku Cordova to świetny sposób na szybką aplikację dla osób obeznanych z technologiami webowymi. W środku możemy wykorzystać dodatkowe biblioteki JavaScript takie jak chociażby jQuery. Czy taka wizja nie jest kusząca? Pozdrawiam serdecznie i zachęcam do pobawienia się tą technologią.
Komentarze
Ten wpis nie posiada komentarzy.
Dodaj komentarz
Pola oznaczone gwiazdką (*) są wymagane. Komentarze są wstępnie moderowane i mogą nie pojawić się na stronie.