Praktyka programowania

1) Samodzielne egzystowanie wirtualnego świata

Dwie technologie zmieniły na zawsze świat programowania. W aspekcie użytkowym jest to internet. W aspekcie technicznym są to tak zwane wyjątki.

Jak działały programy przed zmianą o której mowa? Wykonywały się instrukcja po instrukcji od pierwszej aż do ostatniej, chyba że ….. Chyba, że wydarzył się błąd. Sytuacja której programista nie przewidział. Wtedy program natychmiast kończył działanie i przeważnie był usuwany z pamięci komputera. Zakładano, że użytkownika nie interesują błędne wyniki obliczeń, więc jeśli nie można osiągnąć poprawnych, to dalsze działanie programu nie ma sensu.

Twórcy internetu od samego początku przyjęli odmienną koncepcję: lepsza częściowa informacja, niż żadna. Jeśli więc opis strony internetowej jest niepoprawny, to i tak zostaje wyświetlony. Chyba, że nie można w ogóle uzyskać danych do wyświetlenia strony – wtedy też jest wyświetlany komunikat, ale przeglądarka internetowa uznaje, że „nic się nie stało” i działa nadal.

Inna sfera zastosowań, w której nie można beztrosko powiedzieć: „spróbujmy jeszcze raz” są systemy sterowania. Błąd w systemie sterowania statkiem kosmicznym nie może powodować jego zakończenia! Dlatego programiści wymyślili wyjątki: czyli obsługę błędu lub awarii.

Kod programu umieszcza się w blokach zakończonych obsługą różnych wyjątkowych sytuacji:

wykonuj:
  blok instrukcji
w razie sytuacji wyjątkowej wykonaj:
  inny blok instrukcji

Na przykład (blok obsługi wyjątków w Pythonie znaczymy słowami try i except):

 try:
   liczba =int(input("Proszę podać liczbę: "))
   odwrotnosc = 1/liczba
   print('jej odwrotność wynosi %s' % odwrotnosc)
 except ValueError:
   print('to nie jest poprawna liczba')
 except ZeroDivisionError:
   print('Chyba nie chcesz dzielić przez zeoro?')
 except Exception as wyjatek:
   print('Jakiś nieznany błąd %s' % wyjatek)

Warto sobie uruchomić konsolę iPython (może być w przeglądarce: https://www.tutorialspoint.com/ipython_terminal_online.php) i popróbować.

Skąd się biorą te dziwne nazwy – jak ‘ZeroDicisionError’? Tworzą je programiści (w tym wypadku twórcy języka Python). Nie ma tych nazw zbyt wiele – więc łatwo je przyswoić.

Mamy więc oczekiwanie, że programy zawsze będą działały sensownie i możliwości spełnienia tych oczekiwań….

Jak jednak zmusić wszystkich programistów do stosowania wyjątków? Wszyscy nie muszą. Świat programów został poszatkowany na drobne fragmenty i zdecydowana większość z nich jest obecnie pisana w językach skryptowych (takim językiem jest też Python). Interpreter skryptu zawsze działa sensownie – co najwyżej może zapytać, czy nadal chcesz próbować uruchomić błędny skrypt (tak czasem bywa w przeglądarkach internetowych). Wiele programów działa nieprzerwanie całymi latami (już nawet system Windows przestał straszyć użytkowników „niebieskim ekranem”). Świat wirtualny zyskał stabilność (samodzielność), a rolą programistów jest stałe jego ulepszanie (poprzez wymianę fragmentów) ….

2) Struktury wypierają algorytmy

Naturalnym kierunkiem rozwoju jest w tej sytuacji stopniowe przechodzenie od opisu algorytmów (jak coś ma być wykonane) do opisu struktur (jakich własności systemu/programu oczekujemy). Na przykład twórcy prostych stron internetowych w ogóle nie zajmują się tym, jak je wyświetlić, tylko opisują to, co ma być wyświetlone. Służy do tego język XML (w przypadku stron – jego odmiana HTML). Język taki składa się z zagnieżdżonych znaczników (ang. „tag”). Na przykład:

<obraz>
<plik-obrazu>
 plik.jpg
</plik-obrazu>
<wysokosc>
 60
</wysokosc>
</obraz>

Zauważmy, że każdy blok zaczyna się i kończy znacznikiem ujętym w ostre nawiasy <>. Z tym, że na końcu jest dodatkowo /. Znaczniki mogą być wielokrotnie zagnieżdżane. Pewne uproszczenie tego zapisu uzyskano dzięki stosowaniu atrybutów znaczników:

<obraz plik-obrazu="plik.jpg" wysokosc=”60”>
</obraz>

Jak widać – w miejsce zagnieżdżonych znaczników wpisuje się nazwy atrybutów i ich wartość w cudzysłowach.

Jakie mogą być nazwy znaczników i atrybutów? W języku XML w zasadzie dowolne. Jednak program który taki zapis przetwarza musi je „rozumieć”. Dlatego tworzy się standardy takie jak HTML. Zapis obrazka w HTML nie może wyglądać jak powyżej, ale musi być zgodny ze standardem:

<img src="plik.jpg" height="60">
</img>

3) Struktury mają charakter obiektowy

Co opisuje język HTML? Wiadomo: wygląd strony. Nie jest to określenie ścisłe. Na podstawie HTML tworzone jest drzewo obiektów (drzewo DOM), które może być modyfikowane skryptami w języku JavaScript oraz opisem wyglądu (tak zwany arkusz stylów CSS). Dopiero takie zmienione drzewo obiektów jest przetwarzane (renderowane) na obraz strony.

Obiekty

Programowanie obiektowe jest nieco podobne do układania programów z bloczków. Nic więc dziwnego, że powstała układanka na bazie oprogramowania Blockly, o którym wcześniej była mowa, ukazująca istotę takiego budowania obiektów. Układanka ta została udostępniona na stronie: http://otwartaedukacja.pl/programowanie/bl/puzzle.html?lang=pl (nieco inną wersję można znaleźć na stronie LO w Toruniu: http://www.vlo.torun.pl/page/blockly/apps/puzzle/index.html?lang=pl).

Obiektami operuje się właśnie tak, jak pokazano w tej układance: wypełniając ich właściwości (jak na przykład ilość nóg). W programowaniu poza właściwościami obiektów występują metody ich zmian – czyli funkcje wewnątrz obiektu, operującą na zawartych w nim właściwościach.

Na przykład obiekt opisujący samochód będzie miał własności takie jak drzwi, koła, szyby etc… Metodą zmiany może być komenda uruchomienia wydawana przez przekręcenie kluczyka w stacyjce.

Więcej szczegółów na temat programowania obiektowego znajdziesz w rozdziale „Świat obiektów” podręcznika „Uczymy się programować w Pythonie”.

4) JSON – najprostszy opis obiektów

Komunikacja w internecie odbywa się głównie poprzez wysyłanie zapytań o stronę i odczytanie uzyskanego zapisu w postaci HTML, CSS, JavaScript. Coraz więcej stron jest jednak tak złożonych, że nie opłaca się przesyłanie całego obrazu gdy tylko coś ulegnie zmianie. Najczęściej przesyła się małe porcje informacji, których opis za sprawą Google został bardzo uproszczony.

Weźmy na przykład kursy walut NBP. Gdy wpiszesz w przeglądarce http://api.nbp.pl/api/exchangerates/rates/a/eur/, dostaniesz aktualny kurs waluty euro (z tabeli A) w standardzie XML. Ten sam kurs można jednak pobrać w postaci zdefiniowanego przez Google standardu Json: http://api.nbp.pl/api/exchangerates/rates/a/eur/?format=json

Widzisz różnicę?

Prościej chyba się nie da (opis struktury na stronach NBP):

{
"table":"A",
"currency":"euro",
"code":"EUR",
"rates":[
  {"no":"244/A/NBP/2017",
   "effectiveDate":"2017-12-18",
   "mid":4.2134}
 ]
}

Taki zapis składa się z zagnieżdżonych struktur (zwanych w językach programowania także tablicami asocjacyjnymi) oraz list (tablic). Listy to ciąg wartości ujętych w nawiasy kwadratowe []. Struktury to ciąg par (klucz: wartość) ujęty w nawiasy klamrowe {}. W obu ciągach elementy są rozdzielane przecinkami.

Równie proste może być pobieranie tych danych na stronie przy pomocy JavaScript – ale pod warunkiem, że skorzystamy z biblioteki jquery (https://jquery.com/). Nie musimy jej ściągać na swój komputer, bo jest stale dostępna w internecie (zob. https://code.jquery.com/). Wystarczy skopiować na swoją stronę coś takiego:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Kompletny przykład:

<html>

<body>
  Wartość aktualnego kursu euro wg NBP:
  <span id="kurs">???</span>
  <br />
  <button id="pobierz">Pobierz Kurs</button>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"   
   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous">
  </script>
  <script>
    $(document).ready(function() {
      $("#pobierz").on("click", function(event) {
        $.ajax({
          url: "http://api.nbp.pl/api/exchangerates/rates/a/eur/",
          type: 'GET',
          data: {
            'format': 'json'
          },
          dataType: 'json',
          success: function(wynik) {
            //            alert('Data: ' + wynik.rates[0].mid);
            $('#kurs').text(wynik.rates[0].mid);
          },
          error: function(request, error) {
            alert("Nie udało się: " + error);
          }
        });
      })
    });
  </script>
</body>

</html>

Objaśnienie:

  • <body> - początek strony

  • <span id="kurs"> -znacznik span wyróżnia fragment tekstu; dzięki opatrzeniu go atrybutem id (identyfikator) – możemy łatwo go zlokalizować na stronie

  • <br /> - znacznik przejścia do nowego wiersza (<br > to skrót od <br><br>)

  • <button id="pobierz"> -znacznik przycisku o identyfikatorze „pobierz”

  • <script src= … > - dołączenie zewnętrznego skryptu (zewnętrznej biblioteki)

  • <script> - zdefiniowanie własnego skryptu

  • $ - funkcja zdefiniowana w bibliotece jQuery – pozwala przetwarzać drzewo DOM strony (odwołuje się do jego obiektów)

  • $(document).ready(function() { … }) - zdefiniowanie bloku instrukcji (funkcji), które mają być wykonane po załadowaniu strony (ready);

  • $("#pobierz") – zwraca obiekt odnoszący się do elementu strony z identyfikatorem ‘pobierz’

  • $(x).on("click", function(event) { … }) - zdefiniowanie funkcji wywoływanej po kliknięciu (click) w element strony (on …. event – zdarzenie kliknięcia)

  • $.ajax({ … }) - komunikacja z serwerem – pobieranie danych; { … } - opis komunikacji:

    url: adres,

    type: sposób komunikacji (GET/POST),

    data: { 'format': 'json' }, - parametry (format=json)

    dataType: 'json', - spodziewany rodzaj otrzymanych danych

    sukces: funkcja wykonywana po uzyskaniu danych

    error: funkcja wykonywana w razie błędu

  • $('#kurs').text(‘wartosc’) –wpisanie do elementu (DOM)o identyfikatorze ‘kurs’ tekstu

  • wynik.rates[0].mid – pobranie wartości z obiektu na który zostanie przetworzonytekst uzyskany z NBP (zob. wyżej). Po kolei:rates = element struktury o kluczu ‘rates’, [0] – pierwszy element listy (numerowane od zera), mid – wartość elementu o kluczu mid

  • alert – wyświetlenie komunikatu

Co dalej?

Jeśli zainteresował Cię powyższy przykład i chciałbyś zgłębiać tworzenie dynamicznych stron internetowcy – zapraszamy do zapoznania się ze skryptem https://www.gitbook.com/book/galicea/tworzenie-nowoczesnych-aplikacji-internetowych/details (na stronach otwartaedukacja.pl zostanie wkrótce uruchomiony kurs e-learningowy obejmujący tą tematykę).