Przykłady wykorzystania technologii i tworzenia algorytmów dla aplikacji internetowych

Transkrypt

1 Przykłady wykorzystania technologii i tworzenia algorytmów dla aplikacji internetowych Andrzej P.Urbański Wydział Informatyki, Instytut Informatyki Politechnika Poznańska, Centrum Wykładowe

2 Definicja aplikacji Aplikacja = program komputerowy Pewien kod, który wykonuje komputer tworząc proces(y) usługujące ludziom lub innym aplikacjom Np. : edytor graficzny pozwala ludziom tworzyć i przetwarzać rysunki, ale dzięki np. OLE automation mogą tworzyć rysunki inne programy, dzięki czemu są prostsze do zrobienia System operacyjny pozwala programom uniezależnić się od różnych typów urządzeń zewnętrznych

3

4 Co może wykonywać aplikacja? Wyświetlać na monitorze, drukować na drukarce Nadsłuchiwać jaki klawisz naciśnie użytkownik, jaki ruch myszą wykona lub jaki gest na touchpadzie Maca Sterować bronią(zasieki w komunistycznych Niemczech i Korei Północnej), w tym bronią masowego rażenia Sterować produkcją, w tym produkcją na zlecenie Sterować autonomicznym robotem Generować zapachy, wąchać Odczytywać i generować kod DNA organizmu np. człowieka Odczytywać ludzkie myśli i intencje np. sterując wózkiem Generować obrazy i inne zmysły wprost w ludzkim mózgu

5 Jak może się wykonywać aplikacja? Wsadowo użytkownik daje dane i po tygodniu odbiera wyniki (doświadczenia studenta z lat 70-tych) Interaktywnie pokazuje użytkownikowi wyniki(np. zaproszenie do wypowiadania się) i pobiera od niego dane do działania Współbieżna interakcja z użytkownikiem aplikacja działa nie czekając na użytkownika, pozwala mu przerywać zasypywanie go wynikami i kontynuować obliczenia dla zmodyfikowanych danych Obliczenia równoległe pozwalają wykorzystać moc wielu procesorów(rdzeni) dla przyspieszenia działania jednej aplikacji (najszybszy superkomputer Jaguar Cray ma ¼ mln rdzeni) Dla zrównoleglenia obliczeń tworzy się na bieżąco odpowiednią liczbę procesorów: Komputery DNA, Komputery kwantowe

6 Definicja aplikacji internetowej/intranetowej Pewien kod tworzący proces(y) zdolny reagować na zdarzenia w sieci i lub wysyłać żądania przez sieć, Często rozproszony w sieci i przez nią współpracujący, Często złożony z zapisów w różnych językach programowania, Zazwyczaj tworzony przez wiele osób, który jest zdolny usługiwać ludziom lub innym aplikacjom w realizacji określonego celu

7 Podział aplikacji internetowych 1 Programy udostępniane przez usługę telnet Programy udostępniane przez usługę ssh Programy X-windows dostępne przez telnet Para komunikujących się przez sieć programów w ustalonym protokole: Serwer nasłuchujący na specjalizowanym porcie aplikacji klienckiej

8 Podział aplikacji internetowych 2 Aplikacje przeglądarkowe Oparte na natywnym interpreterze przeglądarek(html/javascript) Oparte na interpreterze Java u klienta (aplety Java) Oparte na plug-in FLASH Oparte na innych plug-inach np.vrml

9 Podział aplikacji internetowych 3 Aplikacje(lub ich część)realizowane na serwerze Skrypty CGI w języku PEARL Skrypty PHP Servlety JAVA Skrypty Ruby Cold Fusion

10 Podział aplikacji internetowych 4 Serwerowe systemy zarządzania bazami danych Relacyjne bazy danych(język SQL) MySQL PostgreSQL DB/2.. Nierelacyjne bazy danych CASSANDRA

11 Typowa aplikacja przeglądarkowa Kod wykonywany w przeglądarce HTML Kod wykonywany w przeglądarce JavaScript Kod wykonywany Na serwerze Kod wykonywany Przez system Zarządzania Bazami danych Przeglądarka Serwer Baza danych

12 Poniższa aplikacja ma za zadanie odczytać wskazany tekst z bazy danych. Część dolna aplikacji wyświetla listę do wyboru o jaki tekst chodzi i jest napisana w HTML. Po wybraniu tekstu dzięki kodowi JAVASCRIPT następuje natychmiastowe ponowne uruchomienie tejże strony, ale już z parametrem umożliwiającym widoczne zadziałanie jej części górnej. Część górna aplikacji odwołuje się do bazy danych by pobrać i wyświetlić odpowiedni tekst.

13 <? $conn = mysql_connect('localhost','użytkownik','hasło'); mysql_query("use baza-danych"); $q=mysql_query("select * FROM teksty WHERE id=$x"); $r=mysql_fetch_array($q); echo $r['tresc'];?> <form name="radar"> <select class="type" onchange="var url=(options[selectedindex].value); location.href=url;"> <option value="testcb.php?x=0" >wybierz</option> <option value="testcb.php?x=21" >a</option> <option value="testcb.php?x=23">b</option> <option value="testcb.php?x=28" >c</option> <option value="testcb.php?x=24">d</option> </select></form>

14 działanie wyświetlanie Czy pierwsze wykonanie? TAK kliknięcie działanie NIE wyświetlanie Działanie wynikające ze sposobu kliknięcia kliknięcie działanie wyświetlanie

15 Tradycyjna technologia komunikacji z serwerem Element 1 strony Element 1 strony Element 2 strony Element 2 strony Element 3 strony Element 4 strony Strona pusta Element 5 strony Element 6 strony Zapytanie do serwera odpowiedź serwera Element 3 strony Element 4 strony Element 5 strony Element 6 strony Element 7 strony Element 7 strony Przeglądarka Serwer

16 Asynchroniczna technologia komunikacji z serwerem Element 1 strony Element 1 strony Element 2 strony Element 2 strony Element 3 strony Element 4 strony Zapytanie do serwera Element 3 strony Element 4 strony Element 5 strony Element 6 strony odpowiedź serwera Element 5 strony Element 6 strony Element 7 strony Element 7 strony Przeglądarka Serwer

17 Poniższa aplikacja (część literackiego serwisu społecznościowego) utrzymuje na ekranie użytkownika aktualną listę zalogowanych w serwisie użytkowników. Plik główny opisuje dowolnie złożoną stronę, która ma element aktualni i wywołuje cyklicznie co 20 sekund w sposób nienaruszający strony głównej skrypt users.php.

18 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; CHARSET=UTF-8"> <meta name="keywords" content="portal literacki, opowiadania, wiersze"> <meta name="description" content="społecznościowy serwis literacki." /> <script type="text/javascript" src="advajax.js"></script> <script type="text/javascript" src="load.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> </head> <?php echo"<body onload=\"lastright='".str_replace(" $_SERVER['REQUEST_URI'])."';user='$login'; password='$pass'; act('users.php'); rejestrujformularze(); setinterval(function(){odswierz();},20000); act('leftmenu.php?logowanie=ok');\" >";?> <div style="position:absolute; top:0px; right:0px; width:150px; padding:3px;" id="loadmark"></div> <div id="aktywni"></div><div id="srodek">właściwa część strony</div> </body> </html>

19 Skrypt users.php odświeża godzinę aktualnego użytkownika oraz pobiera z bazy danych listę użytkowników, którzy odświeżali swój stan nie dawniej niż 60 sekund wcześniej i aktualizując element aktualni strony głównej wyświetla ich na liście razem z przypisanymi im awatarami.

20 <?php echo"document.getelementbyid('aktywni').innerhtml = '"; $conn = mysql_connect('localhost','użytkownik','hasło'); mysql_query("use baza-danych"); mysql_query("update users SET data_s=unix_timestamp() WHERE login='$login' ); $zapytaniebl3=mysql_query("select users.login AS login, avatars.url AS url, users.avatar AS avatar FROM users, avatars where users.login=avatars.login AND users.avatar=avatars.id AND users.data_s>unix_timestamp()-60 order by users.login"); $ile=mysql_num_rows($zapytaniebl3); echo"<div class=\"button\"><p>zalogowanych($ile)</p></div> <ul class=\"m_list\">"; while ($rows2 = mysql_fetch_array($zapytaniebl3)){ $login_usr=$rows2['login']; $login_usr2=str_replace(" ","%20","$login_usr"); $urlek="profil.php?loginr=$login_usr2"; $url=$rows2["url"]; $login_usr1=":".substr($login_usr,0,18); if($rows2["avatar"]==0)$url="images/noav.jpg"; echo"<a href=\"$urlek\"><img src=\"$url\" width=\"15\" height=\"15\" border=\"0\"><font size=\"2\">$login_usr1</font></a> "; } echo"</ul>';";

21 Cykliczne wywołania skryptu Skrypt wyznaczający zalogowanych Lista nicków zalogowanych Strona w przeglądarce

22 Ewolucja witryn internetowych od niezmiennych dokumentów do dynamicznie zmieniających się w zależności od aktualnego użytkownika i innych okoliczności ekranów czyli zdalnych aplikacji

23 Coraz większa rola algorytmów W konstrukcji takich witryn Podobnie jak w konstrukcji złożonych programów działających na pojedynczym komputerze

24 Dlaczego warto poznawać i tworzyć algorytmy? Bo w przeciwieństwie do różnych technologii ta wiedza jest bardziej pewna. Często nowe technologie różnych firm to ślepe uliczki, porzucane po kilku latach eksperymentów. Dobry algorytm jest prawie tak samo trwały i piękny jak matematyka.

25 PROBLEM W czerwcu 2002 do większości polskich liceów były ogromne kolejki nieprzyjętych chętnych ponieważ uczniowie zgłosili swe kandydatury do wielu szkół naraz i najlepsi zostali przyjęci do kilku z nich blokując pozostałym miejsca. Wcześniej przyjmowano zgłoszenia tylko do jednego liceum naraz i nie było problemu.

26 Rozwiązanie Należy skonstruować system informatyczny, który zbierze podania od wszystkich uczniów w aglomeracji(a może nawet kraju) i przeprowadzając klasyfikację według kryteriów każdej ze szkół zapobiegnie jednoczesnemu przyjmowaniu kandydatów do wielu szkół na raz.

27 Gdzie wprowadzać W gimnazjum uczniowie deklarują jakie szkoły ich interesują i tam są wprowadzani. W domu przez internet każdy uczeń indywidualnie. W liceach, do których uczniowie kandydują.

28 Gimnazjum Składa listę Kandydat Składa dokumenty Liceum Punkty zasadnicze i lista kolejnych szkół Punkty dodatkowe System NABÓR Procedury odbioru zdalnie wprowadzanych danych Procedury zdalnego udostępniania danych przez Internet i SMSy Kandydat Sprawdza dane i wyniki Liceum Sprawdza dane i wyniki Organizator naboru Gimnazjum Niezrealizowany projekt autora z 2002 roku Procedura sprawiedliwego Rozdzielania kandydatów na szkoły Procedury zdalnego udostępniania wyników naboru przez Internet i SMSy

29 PROBLEM danych Jak spowodować, że system w przypadku, gdy uczeń może być przyjęty do kilku szkół naraz będzie wiedział jaką szkołę uczeń by wybrał?

30 SPOSÓB na problem danych Każdy uczeń podaje listę kolejno coraz mniej dla niego atrakcyjnych szkół. System będzie dbał o to by stosownie do posiadanych punktów kandydat dostał się do szkoły możliwie jak najwyżej na liście.

31 ALGORYTM UPROSZCZONY Ustawiamy uczniów w kolejności od najlepszego do najsłabszego. Pozwalamy wybierać szkoły w tej kolejności. Gdy uczeń chce wybrać szkołę, w której już brakuje miejsc to przechodzi do kolejnej na swojej liście preferencji.

32 WADA ALGORYTMU Algorytm uproszczony nie pozwala uwzględniać różnic w sposobie punktowania osiągnięć uczniów pomiędzy szkołami lub klasami profilowanymi.

33 ALGORYTM sklonowanych podań tzn.jeden uczeń składa tyle podań ile zadeklarował preferencji Każde podanie ustawia się na liście kolejnych do danej szkoły. Algorytm stopniowo usuwa podania, dla których uczeń ma podanie wyżej na preferencji już przyjęte do szkoły.

34 Var punkty:array [kandydaci] of array [szkoly] of real; Przy wcześniejszym zadeklarowaniu stałych i typów: const n=8; m=5; p=100; type kandydaci=1..n; szkoly=1..m; Var zgloszenia:array [kandydaci] of array [szkoly] of integer; Var limit: array [szkoly] of integer; var miejsca: array [1..100] of array [szkoly] of integer;

35 procedure dodaj_podanie(k:kandydaci;s:szkoly); var i,z,zz:integer; begin i:=1; while (miejsca[i,s]>0)and (punkty[k,s]<punkty[miejsca[i,s],s]) do i:=i+1; z:=miejsca[i,s]; miejsca[i,s]:=k; while miejsca[i+1,s]>0 do begin i:=i+1; zz:=miejsca[i,s]; miejsca[i,s]:=z; z:=zz; end; miejsca[i+1,s]:=z; end;

36 procedure ma_miejsce(k:kandydaci;s:szkoly); var pp,i,j:integer; begin pp:=zgloszenia[k,s]; for i:=1 to m do for j:=1 to p do if(miejsca[j,i]=k)and (zgloszenia[k,i]>pp) then usun_podanie(j,i); end;

37 procedure usun_podanie(l:integer; s:szkoly); var i:integer; begin for i:=l to p-1 do begin miejsca[i,s]:=miejsca[i+1,s]; if (miejsca[i,s]>0)and (limit[s]>=i) then ma_miejsce(miejsca[i,s],s); end; end;

38 Program główny begin for i:=1 to n do for j:=1 to m do if zgloszenia[i,j]>0 then dodaj_podanie(i,j); for j:=1 to m do for i:=1 to limit[j] do if miejsca[i,j]>0 then ma_miejsce(miejsca[i,j],j); writeln('wyniki naboru'); for j:=1 to m do begin write('szkola ',j,'['); for i:=1 to p do if miejsca[i,j]>0 then if limit[j]>=i then write(miejsca[i,j],'/',punkty[miejsca[i,j],j]:3:0,';') else write(-miejsca[i,j],'/',punkty[miejsca[i,j],j]:3:0,';'); writeln(']'); end; readln; end.

39 Przykładowe dane const zgloszenia:array [kandydaci] of array [szkoly] of integer= ((5,4,1,2,3), (1,5,4,3,2), (2,1,3,4,5), (4,2,1,3,5), (1,5,4,3,2), (2,1,3,4,5), (4,2,1,3,5), (2,3,1,4,5)); punkty:array [kandydaci] of array [szkoly] of real= ((180,190,187,182,183), (191,180,190,193,192), (182,181,183,184,185), (174,172,171,173,180), (191,180,180,193,192), (182,181,183,184,185), (174,172,171,173,190), (182,183,181,184,185)); limit: array [szkoly] of integer= (2,2,1,2,1);

40

41

42

43 ALGORYTM ruchomych podań proc AddToSchool(Cand,School); SortedQueue[School].Add(Cand,Rank(Cand)); if SortedQueue.Oversized then begin AddToSchool(SortedQueue[School].LastCand, SortedQueue[School].LastCand.NextSchool); SortedQueue[School].RemoveLast; end; end (* AddToSchool *); Session 2g, 27 October 2004 echallenges e-2004 Copyright 2004 NABÓR

44 Algorytm ruchomych podań jest lepszy od algorytmu sklonowanych podań bo eliminuje tzw. paradoks zamienionych preferencji, który prowadził do tego, że w pewnych przypadkach przedkładano preferencje szkół nad preferencjami uczniów.

45 Dopiero w trakcie prac nad zintegrowanym systemem naboru dla całej Politechniki poznańskiej okazało się, że podbny do ruchomych podań algorytm opublikowano w USA jeszcze w latach sześćdziesiątych. WNIOSEK Zawsze, nawet w przypadku najnowocześniejszych aplikacji internetowych, warto zarówno samemu konstruować jak najlepsze algorytmy jak poszukiwać ich w literaturze. Dlatego skupienie się olimpiady informatycznej wyłącznie na algorytmach ma sens.