Twórz natywne aplikacje internetowe na Androida za pomocą Apache Cordova

W połączeniu ze strukturą interfejsu użytkownika, taką jak jQuery Mobile lub Dojo Mobile, umożliwia to aplikację w formie natywnej, ale opracowanej w HTML, CSS i JavaScript. Oznacza to, że jeśli mamy aplikację internetową, możemy przekonwertować ją na natywną aplikację dla systemu Android, ponieważ Apache Cordova będzie działał jako wbudowany serwer sieciowy na naszym urządzeniu mobilnym.
To API daje nam możliwość budowania aplikacji mobilnych, które będą działały lokalnie na urządzeniu mobilnym i będą oparte na projektowaniu i rozwoju stron internetowych, więc dzięki Apache Cordova możemy uzyskać dostęp za pośrednictwem Javascript do funkcjonalności urządzenia mobilnego, takich jak kamera, dane, połączenia wifi lub sieci, klawiatura lub dźwięk, geolokalizacja, własna wbudowana baza danych i wszelkie inne dostępne funkcje.

W tym samouczku użyjemy Ziarna Netbeans 8.0.2 który pochodzi z Apache cordova zainstalowany, ale zobaczymy również, jak zainstalować go od zera, aby móc go używać z dowolnym innym edytorem, w tym tak prostym, jak Notatnik ++ lub Bluefish.
Konieczne jest posiadanie SDK dla Androida, Menedżer urządzeń Android Tak Java jre zainstalowany, wskazując również pliki wykonywalne na zmienne systemowe.
Aby rozpocząć musimy zainstalować node.js, że to framework, który pozwala na stworzenie serwera używającego javascript jako języka klienta Cordova jest instalowana przy użyciu menedżera pakietów o nazwie NPM, który jest częścią Node.js.
Instalacja zostanie wykonana najpierw w systemie Linux, uzyskamy dostęp do terminala w trybie root i pobierzemy plik node.js za pomocą następującego polecenia:

wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz

Rozpakuj i skopiuj do innego katalogu

sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz

Instalujemy odpowiednie pakiety

 ls -l / usr / lokalny / bin / węzeł ls -l / usr / lokalny / bin / npm 

Następnie przechodzimy do instalatora Apache Cordova

sudo npm install -g cordova

Aby sprawdzić, czy został poprawnie zainstalowany, możemy napisać w terminalu cordova-v i zwróci zainstalowaną wersję Apache Cordova.
Po instalacji możemy tworzyć aplikacje za pomocą Cordova, aby stworzyć aplikację przechodzimy do katalogu projektu, który posiadamy a następnie z terminala piszemy sugerowane polecenia:
Struktura dowodzenia będzie wyglądać następująco:

cordova utwórz katalog projektu component.package.class

więc na przykład nasza aplikacja będzie:

cordova tworzy misapp com.tutoriales.misapp MiApp01

Stworzy to strukturę projektu i pobierze wszystkie niezbędne i zaktualizowane pakiety, z których będziemy korzystać w naszej aplikacji.

Cordova emuluje Androida

Widzimy, jak powstał katalog błędna aplikacja, w strukturze aplikacji i tam możemy znaleźć następującą treść.
W folderze platformy Zawiera niezbędne pliki, aby Cordova mogła wchodzić w interakcje z różnymi urządzeniami, tutaj dodamy platformy, na których chcemy przetestować naszą aplikację.
Przykład z terminala wykonamy następujące polecenie, aby korzystać z platformy Android

platforma cordova dodaje androida

Rezultatem będzie:

 # / projects / misapp / www $ cordova platform add android Tworzenie projektu android… Tworzenie projektu Cordova na platformę Android: Ścieżka: platformy / android Pakiet: com.tutoriales.misapp Nazwa: MiApp01 Android target: android-19 Kopiowanie plików szablonów… Projekt pomyślnie utworzony. 

To skonfiguruje prawidłowy emulator dla Wersja Androda 19 czym on jest Wersja API 19 lub też Android 4.4 (KITKAT), to znaczy, że możemy emulować każde urządzenie, które działa w tej wersji lub starszej. Niektóre obsługiwane platformy są Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, W tym samouczku skupimy się na Androidzie.
W książce adresowej www To tam będzie rozwijana sama aplikacja, będą hostowane pliki HTML, CSS, obrazy i Javascript oraz wszystkie niezbędne zasoby dla naszej aplikacji, pamiętaj, że jest to strona internetowa, która będzie działała natywnie w obrębie serwera, a także wbudowana przeglądarka internetowa, która będzie działać jako natywna aplikacja na Androida.
Kiedy tworzymy nasz projekt w katalogu www, zostanie utworzona ogólna struktura projektu zdefiniowany kodem niezbędnym do uruchomienia prostej aplikacji typu "Witaj świecie„Mamy więc przykład lub szablon aplikacji wykonywalnej do sprawdzenia, czy działa przed programowaniem, jednak aby ją uruchomić musimy najpierw dodać platformę lub platformy, na przykład jeśli chcemy przetestować ją na urządzeniach z Androidem i iOS użyj następującego polecenia:
Dla Android

cordova buduje Androida

Dla ios

Cordova kompiluje iOS

Za każdym razem, gdy wykonamy polecenie w katalogu aplikacji, będzie wiedział, że jest to aplikacja do skompilowania. Po skompilowaniu do katalogu platformy / platformy / android / ant-build / wygeneruje dla nas pliki.

CordovaApp-debug.apk

Który będzie instalowalnym i wykonywalnym plikiem apk na dowolnym urządzeniu z Androidem. Aby go uruchomić, katalog aplikacji musi mieć pełne uprawnienia dostępu. Teraz wykonamy go po raz pierwszy z emulatorem do tego piszemy w terminalu.

Cordova emuluje Androida

Widzimy ogólne urządzenie, które pokazuje aplikację, klikamy na nie i widzimy domyślną aplikację Apache.
Teraz możemy rozpocząć tworzenie naszej aplikacji edytując plik index.html znajdujący się w katalogu www. Kod jest prosty, meta wykrywa typ urządzenia, okienka ekranu dostosowują zawartość do rozdzielczości i rozmiaru ekranu urządzenia.
Reszta kodu to HTML5, plik cordoba.js będzie miał konfigurację serwera, a plik index.js będzie miejscem, w którym zaprogramujemy nasze skrypty, aby nadać aplikacji interaktywność.

 Miapp01
Połączenie z urządzeniem
Urządzenie jest gotowe
Dokonajmy pewnych zmian w Html5 i CSS3 do przetestowania, a także przetestujemy inne urządzenie Stwórzmy formularz z dwoma polami wewnątrz warstwy aplikacjiNazwa:
E-mail:
Szukamy folderu css w pliku index.css i dodamy następujący kod, aby stylizować przycisk .btn {background: # 3498db; obraz w tle: -webkit-linear-gradient (góra, # 3498db, # 2980b9); obraz w tle: -moz-linear-gradient (góra, # 3498db, # 2980b9); obraz w tle: -ms-linear-gradient (góra, # 3498db, # 2980b9); obraz w tle: -o-linear-gradient (góra, # 3498db, # 2980b9); obraz tła: gradient liniowy (do dołu, # 3498db, # 2980b9); -webkit-obramowanie-promień: 28; -moz-border-promień: 28; promień obramowania: 28px; rodzina czcionek: Arial; kolor: #ffffff; rozmiar czcionki: 20px; padding: 10px 20px 10px 20px; dekoracja tekstu: brak; } .btn: hover {tło: # 3cb0fd; obraz w tle: -webkit-linear-gradient (góra, # 3cb0fd, # 3498db); obraz w tle: -moz-linear-gradient (góra, # 3cb0fd, # 3498db); obraz w tle: -ms-linear-gradient (góra, # 3cb0fd, # 3498db); obraz w tle: -o-linear-gradient (góra, # 3cb0fd, # 3498db); obraz w tle: gradient liniowy (do dołu, # 3cb0fd, # 3498db); dekoracja tekstu: brak; } 

Po dokonaniu modyfikacji zapisujemy pliki i uruchamiamy ponownie poleceniem cordova emulate android, wcześniej skonfigurowaliśmy inne urządzenie w Menedżerze urządzeń Android.

POWIĘKSZAĆ

W końcu nasze zmiany działają, w innym samouczku zobaczymy, jak tworzyć różne aplikacje o większej złożoności.
Do tej pory widzimy, jak stworzyć aplikację za pomocą HTML5, CSS3 i Javascript lub Komórka JQuery dla różnych urządzeń mobilnych, niezależnie od tego, czy jest to telefon komórkowy, czy telewizor z systemem Android. Bardzo ważnym aspektem, o którym należy pamiętać, jest to, że cały projekt powinien być postrzegany jako elastyczny lub responsywny.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt