Skip to content

Jak stworzyć progresywną aplikację internetową (PWA) od podstaw jak ekspert? – Przewodnik krok po kroku

3 de marzec de 2021

Praca programisty aplikacji internetowych jest obecnie jednym z najbardziej poszukiwanych zawodów, co czyni ją obecnie jedną z najbardziej dochodowych. Dlatego ważne jest, aby dowiedzieć się więcej o programowanie aplikacji myślących o przyszłości, aby była to Twoja praca.

Chcesz nauczyć się programować PWA? W takim razie jesteś we właściwym miejscu, ponieważ w tym artykule nauczymy Cię wszystkiego, czego potrzebujesz, aby nauczyć się je wykonywać. Korzystając z naszego przewodnika w bardzo krótkim czasie będziesz mógł zostać ekspertem programistą i będziesz w stanie stworzyć dowolną aplikację internetową.

Co to jest aplikacja progresywna i jej podstawowe składniki?

Aplikacja progresywna to narzędzie komputerowe zaprogramowane przy użyciu języka internetowego, takiego jak HTML5 zachowywać się jak aplikacja mobilna. Pozwala to użytkownikowi mieć cechy tego systemu, takie jak możliwość korzystania z niego bez konieczności połączenia z Internetem.

Głównymi składnikami aplikacji progresywnych są 4 manifest, plik Usługi pracownicze, ikona i serwer. Każda część jest niezbędna do prawidłowego działania aplikacji i bez nich nie będziesz mógł korzystać z Aplikacji z poziomu wyszukiwarki. Mają też kilka różnic w stosunku do aplikacji natywnych

Co jeszcze jest potrzebne?

Ten punkt jest nieco oczywisty, ale warto podkreślić, zanim pokażemy kroki, które należy wykonać, aby mieć wiedzę programistyczną, aby stworzyć Aplikacja. Jeśli nie masz takiej wiedzy, programowanie aplikacji będzie bardzo trudne lub wręcz niemożliwe, ale jeśli umiesz programować, nie będzie problemu.

O ile masz podstawową wiedzę na temat programowania w HTML5, CSS LUB JavaScript Wystarczy, że zrozumiesz kroki, które zamierzamy Ci pokazać. A jeśli nie wiesz, nie zniechęcaj się, możesz nauczyć się podstaw programowania i wrócić do tego artykułu w przyszłości.

Jak stworzyć aplikację progresywną?

Zacznijmy od przewodnika, tym razem pokażemy Ci przykład, abyś mógł lepiej zrozumieć, jak powstają Aplikacje. Mamy zamiar stworzyć aplikację do prognozowania pogody, więc postępuj zgodnie z instrukcjami, aby nie robić żadnych problemów.

Krok 1

Pierwszą rzeczą, którą powinieneś zrobić, jest zakup serwera, który dostarcza dane meteorologiczne, takie jak Dark Sky Api. Po prostu wejdź na jego oficjalną stronę, zarejestruj się i poproś o klucz, aby dostarczyli Ci dane do Twojej aplikacji.

Gdy masz już klucz, sprawdź, czy wszystko działa poprawnie, a jednym ze sposobów jest wejście w ten link „Https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319”. Pamiętaj, aby wprowadzić klucz, który otrzymałeś w linku, który Ci daliśmy w części, w której jest napisane „Tutaj hasło”, a jeśli wszystko pójdzie dobrze, poda Ci prognozę dla Nowego Jorku.

Krok 2

Następną rzeczą będzie zdobycie kodu, którego będziesz używał do stworzenia aplikacji, do tego użyjesz repozytorium z Glitch, czyli strony, na której programiści wymieniają się informacjami. Wejdź więc na „Glitch.com” i kliknij „Nowy projekt” i wprowadź opcję o nazwie „Klonuj z repozytorium Git”.

Gdy to zrobisz, pojawi się wyskakujące okienko, w którym należy wprowadzić adres internetowy „https://github.com/googlecodelabs/your-first-pwapp.git”. Po wejściu tam wejdziesz do repozytorium, w którym będziesz mieć wszystko co potrzebne do pracy.Pierwszą rzeczą jaką powinieneś zrobić to udać się do pliku .env.

Krok 3

Znajdziesz tam sekcję o nazwie DARKSKY_API_KEY = „KeyHere” gdzie musisz wpisać hasło otrzymane w poprzednim kroku. Następną rzeczą, którą powinieneś zrobić, jest naciśnięcie w miejscu, w którym jest napisane „Pokaż swoją aplikację”, aby przetestować aplikację i sprawdzić, czy działa poprawnie.

I w zasadzie w ten sposób możesz tworzyć aplikacje progresywne, pozostaje tylko kontynuować programowanie w tym kodzie lub tworzyć własne. Pamiętaj, że aby uniknąć awarii w systemie, zawsze dobrze jest przeprowadzać Audyty, a my Ci w tym pomożemy.

Wykonuj audyty za pomocą narzędzi Lightho

Lightho to bardzo przydatne narzędzie, które pomaga w przeprowadzaniu audytu tego typu aplikacji, dzięki czemu zarządzanie błędami w kodzie staje się znacznie łatwiejsze. Musisz tylko otworzyć projekt w nowej karcie, a następnie otworzyć Chrome DevTools i przejdź do opcji audytów, aby to zrobić.

Dzięki temu możesz zobaczyć wszystko błędy programistyczne aplikacji, abyś mógł je poprawić, więc korzystaj z tego wspaniałego narzędzia w najlepszy możliwy sposób.

dołącz do naszego kanału telegram