Spisie treści
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.
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 AndroidaWidzimy, 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 AndroidaDla 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
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ść.
Miapp01Połą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Ć
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
