W tym artykule rozpoczniemy tworzenie zdalnej stacji pogodowej. Zamysł projektu opiera się na komunikacji aplikacji mobilnej z bazą danych, z której sczytywane będą wartości przesłane z różnych czujników za pomocą modułu WiFi ESP8266.
Tworzenie projektu rozpoczniemy od stworzenia bazy danych, która będzie przechowywała dane wysłane z czujników. Skorzystamy z narzędzia Google Firebase, które umożliwia przesyłanie i odczytywanie danych z bazy, bez konieczności tworzenia serwera. Wchodzimy na stronę https://firebase.google.com/ i wybieramy przycisk “Get started“. Logujemy się za pomocą swojego konta google, a następnie wybieramy opcję dodania nowego projektu.
Po dodaniu nowego projektu z menu widocznego po lewej stronie wybieramy opcję “Realtime Database“. Tworzymy nową bazę danych, która będzie na bieżąco pobierała i aktualizowała dane wysyłane za pośrednictwem innych urządzeń.
Po stworzeniu bazy przechodzimy do zakładki rules, gdzie zmieniamy wartość .read and .write z false na true. Jest to niezwykle istotne, ponieważ w przeciwnym wypadku nie będziemy mieli dostępu do odczytu i zapisywania danych do bazy.
Po stworzeniu bazy możemy przejść do stworzenia aplikacji mobilnej, która docelowo będzie się z nią komunikowała. Na potrzeby projektu skorzystamy z darmowego narzędzia Android Studio. Po pobraniu narzędzia ze strony producenta, przechodzimy do stworzenia nowego projektu.
Na początku wybieramy interesujący nas startowy widok aplikacji. Początkowo sprawdzamy jedynie poprawność łączenia z bazą, więc wystarczy “Empty Activity”.
Następnie nazywamy dowolnie naszą aplikację i kopiujemy wartość w polu package name, ponieważ będzie nam potrzebna na etapie łączenia projektu z bazą.
Jeżeli wszystko odbyło się pomyślnie, to ujrzymy okno z wygenerowanym projektem.
Teraz zajmiemy się łączeniem projektu ze stworzoną bazą. Wracamy do przeglądarki i wchodzimy w nasz projekt w Firebase. Klikamy w widniejący na środku przycisk z logiem Android, który przekieruje nas do okna opisującego w kolejnych krokach proces łączenia z bazą.
W pierwszym kroku w polu Android package name wklejamy skopiowany wcześniej package name naszej aplikacji, a w polu app nickname nazwę naszego projektu.
W kolejnym kroku modyfikujemy odpowiednio plik build.gradle znajdujący się w folderze z naszym projektem.
Następnie wchodzimy w folder app i modyfikujemy znajdujący się tam plik o tej samej nazwie co poprzedni.
Pomijamy krok mówiący o wklejeniu odpowiedniego pliku do naszego projektu. Po prawidłowym zaimplementowaniu bazy danych do projektu, przechodzimy do stworzenia naszej aplikacji. W tym celu należy wybrać główny plik naszego projeku MainActivity znajdujący się w folderze main->java i klikając opcję Refactor->Renamefile zmieniamy rozszerzenie naszego pliku na MainActivity.java. Zmieniamy znajdujący się w środku kod, na następujący :
Początkowo będą występować błędy, natomiast z chwilą stworzenia odpowiednich elementów, wszystkie zostaną poprawione. W kolejnym kroku zajmiemy się tworzeniem odpowiednich komponentów umieszczonych na widoku głównym naszej aplikacji. Wybieramy folder res->layout->activity_main.xml.
Ukaże nam się okno z widokiem naszej aplikacji. Za pomocą zakładek widocznych poniżej, możemy przeskakiwać między widokiem telefonu a wygenerowanego kodu.
W polu tekstowym wpisujemy nazwę naszej aplikacji, a następnie palety elementów wybieramy przycisk oraz editText. Jeżeli nie możemy znaleźć odpowiednich pól, to możemy je wyszukać klikając na lupę.
Bardzo istotną sprawą jest to, aby każdy z nowo dodanych spozycjonować względem obrysu ekranu. Brak wyboru tej opcji spowoduje, że wszystkie elementy będą na siebie nachodzić w lewym górnym rogu ekranu. W tym celu klikamy prawym przyciskiem myszki w dany element i z pola Constrain klikamy w każdą z dostępnych opcji (parent top, bottom, start, end).
Po naniesieniu odpowiednich elementów, klikamy w zakładkę code dzięki której przejdziemy do widoku wygenerowanego kodu. Najistotniejszym parametrem jest pole android:id, którego wartość posłuży nam do odniesienia się do danego elementu. Po ciągu znaków @+id/ wpisujemy nazwę danego bloku, dla której będziemy się odnosić do naszego elementu.
Po stworzeniu elementów przechodzimy do pliku MainActivity.java. Przerabiamy nasz program wpisując następujący kod :
package com.example.stacjapogodowaajmaker; // Nazwa pakietu przy tworzeniu programu.
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
public class MainActivity extends AppCompatActivity {
EditText textPersonName; // Id naszego pola tekstowego
Button btnData; // id przycisku
int i = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
FirebaseDatabase database = FirebaseDatabase.getInstance();
DatabaseReference myRef = database.getReference("message");
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textPersonName = (EditText) findViewById(R.id.editTextTextPersonName);
btnData = (Button) findViewById(R.id.buttonInsertData);
btnData.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
DatabaseReference myRef = database.getReference(i+" ");
myRef.setValue(textPersonName.getText().toString().trim());
i++;
}
});
}
}Następnie przechodzimy do dodania bazy danych do naszego Activity. Wybieramy lupę znajdującą się w prawym górnym rogu ekranu i wpisujemy frazę : “Firebase”.
Wybieramy opcję Realtime Database
Klikamy kolejno przyciski Connect to Firebase oraz Add to Realtime Database, co umożliwi nam połączenie pliku z bazą.
Jeżeli zrobiliśmy wszystko poprawnie, to w stworzonym w MainActivity kodzie, nie powinien znajdować się żaden błąd. Możemy przejść do uruchomienia stworzonej aplikacji. Skorzystamy z wbudowanego w Android Studio emulatora telefonu. W późniejszym etapie tworzenia naszej stacji pogodowej, aplikacja będzie znajdowała się bezpośrednio na naszym telefonie. Wybieramy opcję Device Menager.
Następnie klikamy create device. Następnie ukaże nam się okno wyboru telefonów, z którego wybieramy Pixel XL, po kliknięciu Next wybieramy z listy jedną z wersji systemu android. Ja wybrałem system API 32 natomiast, jeżeli pierwszy raz tworzycie wirtualne urządzenie, to należy najpierw pobrać system. Przy każdym kolejnym wyborze system będzie już dostępny.
Klikamy zieloną strzałkę jako przycisk RUN, a z listy urządzeń wybieramy stworzony telefon.
Pojawi się okno z naszą aplikacją. Możemy teraz wpisać dowolną wartość w polu tekstowym i wysłać ją do bazy za pomocą przycisku.
Podsumowując powyższy artykuł, udało nam się wykonać pierwszy krok do zrealizowania projektu zdalnego odczytu wskazań czujników za pomocą aplikacji mobilnej. Poprawne skomunikowanie aplikacji z bazą danych otwiera nam szeroką gammę możliwości dowolnego zapisu i odczytu danych z naszej bazy w czasie rzeczywistym.
W kolejnym artykule zajmiemy się komunikacją modułu ESP8266 z naszą bazą danych poprzez odczyt wskazań z prostego czujnika. Uzyskane w ten sposób dane następnie wyświetlimy w naszej aplikacji.
