Ten przewodnik nauczy Cię, jak utworzyć aplikację hybrydową przy użyciu popularnej platformy PhoneGap do tworzenia aplikacji. Zamierzamy przekształcić Twoją witrynę internetową w instalowalny plik .apk (aplikacja na Androida), który można zainstalować na dowolnym telefonie z systemem Android. Po uruchomieniu aplikacja po prostu otworzy Twoją witrynę w natywnej przeglądarce WebView systemu Android, ale pojawi się jako aplikacja pełnoekranowa - bez paska nawigacji z adresem URL ani żadnych innych wskazówek, że witryna jest po prostu prezentowana w przeglądarce.
Wymagania
Twoja własna strona internetowa (aby postępować zgodnie z tym przewodnikiem, możesz po prostu założyć darmowego bloga WordPress)
Konto GitHub
Konto PhoneGap
Notepad ++ (lub podobne oprogramowanie do edycji tekstu, które rozpoznaje kod)
Oprogramowanie do edycji zdjęć do tworzenia ikon aplikacji (Photoshop, GIMP itp.)
Szablony kodowania
Są to szablony kodu, których możesz użyć na potrzeby tego przewodnika - pochodzą one z mojej własnej aplikacji opracowanej za pomocą PhoneGap, ale usunąłem je z moich danych osobowych. Skonfigurowanie ich od podstaw z wszystkimi poprawnymi parametrami zajęło mi wiele dni rozwiązywania problemów, więc udostępniam je dla Twojej wygody. Nie ma za co!
> Config.XML
> Index.HTML
Pierwsze kroki
Utwórz folder na pulpicie i nazwij go „ www: ' bez cudzysłowów. Będzie to główny katalog projektu, w którym program budujący PhoneGap będzie oczekiwał, że znajdzie wszystkie pliki Twojego projektu. Teraz utworzymy ikonę dla Twojej aplikacji.
Otwórz oprogramowanie do edycji zdjęć i utwórz nowy obraz w formacie .PNG. Twoje ustawienia obrazu powinny wyglądać następująco:
A teraz możesz narysować swoją ikonę, na przykład zrobię mały przycisk:
Rozmiar obrazu zależy od ekranu telefonu, ale jeśli zamierzasz opracować aplikację na wiele urządzeń, oczywiście utworzysz wiele rozmiarów tej samej ikony. Oto tabela używanych rozmiarów obrazów:
36 × 36 (120 dpi / LDPI)
48 × 48 (160 dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320 dpi / XHDPI)
144 × 144 (480 dpi / XXHDPI)
192 × 192 (640 dpi / XXXHDPI)
Nie chcę spędzać zbyt dużo czasu na rozmowie o rozmiarach ekranu i DPI, po prostu wiem, że DPI w dużym stopniu koreluje z rozdzielczością ekranu. Telefon z rozdzielczością ekranu 1080 × 1920 będzie używał 480 dpi, ale tak nie jest koniecznie skorelowane dokładnie z rozmiarem ekranu. Telefon mógłby mieć ekran 5,2 ”lub 6” i mieć rozdzielczość 1080 × 1920. Ale ten przewodnik nie dotyczy ekranów smartfonów, więc przejdźmy dalej.
Po narysowaniu ikony zapisz ją jako icon.png i przenieś go do folderu www:. To stanie się domyślna ikonę Twojej aplikacji. Jeśli chcesz utworzyć ikony w różnych rozmiarach, które będą pasowały do rozdzielczości ekranu użytkownika, możesz zapisać ikonę w różnych rozmiarach i nazwach, na przykład Icon144.png, Icon192.png, Icon96.png i tak dalej. Następnie możesz edytować plik Config.xml plik, aby wskazywał na każdą ikonę. Przejdźmy dalej.
Teraz, gdy masz ikonę swojej aplikacji, potrzebujesz obrazu powitalnego. Jest to w zasadzie ekran ładowania, podobny do tapety wyświetlanej przed załadowaniem aplikacji. Rozmiary obrazów powitalnych działają na tej samej zasadzie co ikony, ale są nieco większe. Oto tabela:
- LDPI:
- Portret: 200x320px
- Krajobraz: 320x200px
- MDPI:
- Portret: 320x480px
- Krajobraz: 480x320px
- HDPI:
- Portret: 480x800 pikseli
- Krajobraz: 800x480px
- XHDPI:
- Portret: 720px1280px
- Krajobraz: 1280x720px
- XXHDPI:
- Portret: 960px1600px
- Krajobraz: 1600x960px
- XXXHDPI:
- Portret: 1280px1920px
- Krajobraz: 1920x1280px
Stwórz więc swój obraz powitalny w rozdzielczości dla swojego urządzenia, zapisz go jako Splash.png a następnie przenieś go do folderu swojego projektu. Świetnie, masz teraz ikonę swojej aplikacji i obraz powitalny. Przejdźmy do konfiguracji plików konfiguracyjnych i indeksowych.
Index.HTML i Config.XML Explained
Plik config.xml jest tym, co ustawia środowisko kompilacji (Android, iPhone, Windows Phone), lokalizacje ikon i powitań oraz wtyczki Apache Cordova, których chcesz użyć w swojej aplikacji.
Otwórz szablon, który dostarczyłem w Notepad ++, a zobaczysz te linie u góry:
Zaktualizuj te pola swoimi informacjami, ale pozostaw pola „preferencji” w spokoju. Reszta pliku konfiguracyjnego jest oczywista, jeśli spojrzysz tylko na wartości. Na przykład nazwa preferencji = „pełny ekran” mówi aplikacji, aby uruchomiła się jako aplikacja pełnoekranowa. Zostaw wszystko w spokoju, z wyjątkiem ostatniej wartości na dole pliku:
Zmień go na rzeczywisty adres URL witryny. Umożliwi to użytkownikowi aplikacji pełne poruszanie się po Twojej witrynie i tylko po niej - nie może opuścić Twojej witryny podczas korzystania z aplikacji. Oczywiście aplikacja nie będzie miała paska nawigacji adresu URL, nie jest to nawet problemem, ale zapewnia również, że użytkownik ma dostęp do wszystkich stron w Twojej witrynie. * Po adresie URL witryny to dzika karta , co w żargonie kodowania oznacza, że zaakceptuje wszystko, co zostanie wprowadzone w miejsce znaku *.
Oczywiście, jeśli chcesz ograniczyć użytkownika tylko do niektórych stron w swojej witrynie, możesz dodać oddzielne wartości, takie jak:
Przejdźmy do Index.html plik, to chleb powszedni, dzięki któremu aplikacja faktycznie działa. Otwórz go w Notepad ++ i zmień język dokumentu na HTML. To, co w zasadzie robi index.html, to poinformowanie przeglądarki Android, jak wyświetlić Twoją witrynę - w dostarczonym przeze mnie szablonie znajdują się tagi, które pozwalają usunąć pasek nawigacji adresu URL z przeglądarki, zezwolić przyciskowi „Wstecz” na telefonie, aby zamknąć aplikację i uruchomić aplikacja po wyświetleniu ekranu powitalnego. Linia, którą chcesz zmienić, jest tutaj:
var url = „http://twoja_witryna.com”
Tworzenie aplikacji w PhoneGap Build
Więc zaloguj się na swoje konto GitHub i przejdź do strony głównej repozytorium. Pod nazwą repozytorium kliknij „Prześlij pliki” i przeciągnij folder projektu do ekranu drzewa plików. Teraz wpisz wiadomość o zatwierdzeniu u dołu, na przykład „ moja pierwsza próba aplikacji ” . Na koniec kliknij Zatwierdź zmiany.
Teraz przejdź do PhoneGap Build i zaloguj się. Teraz kliknij przycisk „Nowa aplikacja” na stronie tworzenia. Zostaniesz poproszony o podanie ścieżki do repozytorium GitHub, więc zrób to, a następnie kliknij „Pobierz z repozytorium .git”.
Teraz z powrotem na głównej stronie kompilacji kliknij „Aktualizuj kod” i „Pobierz najnowsze”.
Na koniec kliknij „Buduj”. Skompiluje aplikację do pliku .apk, a następnie przedstawi opcję pobrania .apk. Możesz teraz pobrać ten plik .apk na swój komputer i przenieść go do telefonu, a następnie zainstalować go stamtąd. Alternatywnie możesz użyć telefonu do zeskanowania kodu QR na ekranie komputera, aby automatycznie zainstalować plik .apk na urządzeniu z systemem Android.
Otóż to! A teraz wyjaśnijmy kilka ważnych rzeczy:
- To był niezwykle uproszczony przewodnik, który przeprowadził Cię przez proces tworzenia najbardziej podstawowych aplikacji hybrydowych. Ludzie zazwyczaj nie umieszczają swoich witryn w natywnej przeglądarce i nie przedstawiają ich jako aplikacji na Androida w sklepie Google Play. Ale teraz, gdy wiesz, jak to zrobić, możesz zacząć czytać dokumentację PhoneGap, jak dostosować swoją aplikację i dodać do niej dużo smaku, aby mieć nadzieję, że możesz stworzyć faktycznie przydatną aplikację.
- Po drugie, Google Play zakazuje tego rodzaju tworzenia aplikacji do tworzenia aplikacji ze schematem linków wyłącznie w celu uzyskania przychodów. Nie możesz więc utworzyć aplikacji o nazwie „Zarabiaj dziś!” która otwiera witrynę całkowicie pełną reklam i gromadzi przychody z reklam. Zostaniesz wyrzucony ze sklepu Google Play.
