Wysyłanie push notyfikacji do aplikacji na androidzie [Out Of the box Project]

Wstęp

Często zdarza się, że chcemy dostać powiadomienie na telefon, gdy w naszym ESP (lub RPi) dojdzie do jakiegoś zdarzenia, i to bez względu czy aplikacja jest akurat uruchomiona, albo gdy telefon jest wygaszony. W tym kursie pokaże jak to osiągnąć za pomocą push notyfikacji ( całość działa na androidzie, a wszystkie linki do otworzenia w smartphonie otwieraj najlepiej w przeglądarce chrome – ma najlepsze jak dotąd wsparcie dla aplikacji PWA i push notyfikacji z nich )

Całość kursu jak zwykle w kursach typu Out of the box “do wyklinania” – nie trzeba pisać kodu – jednak bardziej zaawansowani mogą w łatwy sposób (edycja html, javascript, manifestów) w pełni modyfikować aplikację. Ostanio preferuje ten rodzaj kursów, bo najlepiej się sprawdzają – dostajecie coś działającego od razu, a potem możecie dowolnie się tym bawić 😉

O aplikacji PWA można przeczytać w artykule na temat aplikacji PWA w RemoteMe,  jak również o notyfikacjach w systemie RemoteMe

Zaczynamy

W systemie RemoteMe klikamy:

w zakładce Connections mamy schemat połączeń:

 

Łączymy przycisk i diodę wg schematu ( możecie użyć dowolnego modułu z ESP lub ESP32)

W kroku Build It uzupełniamy nazwę sieci i hasło (możecie potem uzupełnić bezpośrednio w kodzie w arduino IDE)

 

Następnie klikamy “Next Step” dopóki nie dojdziemy do kroku ostatniego.

W którym klikamy “Build Project“: (stworzy to odpowiednie pliki i urządzenie webPage – do odbioru notyfikacji)

Ściągamy, wypakowujemy, otwieramy w “arduino IDE” i wgrywamy do ESP pamiętając wcześniej  o zainstalowaniu bilbiotek wypisanych w oknie, które się pojawiło w czasie ściągania źródeł.

Po wgraniu programu i uruchomieniu po chwile ikona naszego urządzenia zmieni się na połączoną:

Teraz pora na zainstalowanie aplikacji Android klikamy na ikonkę do instalacji na smartphonie, wybieramy Android:

Następnie w oknie, które się pojawiło klikamy Configure, skanujemy kod QR który się pojawi i otwieramy w smartphonie najlepiej w przeglądarce Chrome.

Przeglądarka zapyta nas, czy dodać aplikacje do głównego ekranu, i czy chcemy otrzymywać push notyfikacje – zgadzamy się. ( więcej o instalacji tutaj i tutaj )

Na naszym ekranie domowym pojawi się aplikacja (ikonkę możecie sobie łatwo zmienić – podmieniajaąc plik ikon i wgrywając aplikacje ponownie )) :

a po jej otwarciu:

Ważne, żeby ikonka notyfikacji byłą zielona i znikła – oznacza to, że notyfikacje działają, jeżeli nie – klikamy na dzwoneczek lub odświeżamy aplikację (przeciągając palcem z samej góry na dół).

Zamykamy aplikacje.

Po kliknięciu na przycisk przy ESP, dioda zmieni stan na przeciwny, a na telefonie otrzymamy notyfikacje:

Żeby mieć również nityfikacje na PC kopiujemy link z instalacji aplikacji na androidzie:

I otwieramy w przeglądarce na PC

Jak zajdzie potrzeba usunięcia notyfikacji tutaj w sekcji “Zarządzanie instancjami aplikacji gdzie jest wysyłana notyfikacja”napisałem jak to zrobić

Podsumowanie

Kod na ESP posiada komentarze, gdzie zostały omówione bardziej skomplikowane fragmenty, zachęcam do modyfikacji i zabawy projektem 🙂

 

Pozdrawiam,

Maciek