PROJEKTOWANIE APLIKACJI INTERNETOWYCH

PROJEKTOWANIE APLIKACJI INTERNETOWYCH (WFAIS.IF-N016) dr inż. Marcin Zieliński Wykład dla kierunku: Informatyka Stosowana I rok, II stopień Rok akademicki: 2016/2017 - semestr letni WYKŁAD 1

Konsultacje Zakład Fizyki Jądrowej (ZFJ) Instytut Fizyki im. M. Smoluchowskiego ul. Łojasiewicza 11 Segment B pokój: B-2-33 (2 piętro) termin: środa 9:30-10:30 email: marcin.zielinski@uj.edu.pl web: http://koza.if.uj.edu.pl/~marcin

Organizacja kursu Kurs składa się z wykładu (30h) oraz ćwiczeń praktycznych w pracowni komputerowej (30h): Wykład: Poniedziałek 10:15-11:45 sala: A-1-04 Ćwiczenia: GRUPA 1: Poniedziałek 15:30-17:00 sala: G-1-10 Prowadzący: dr Tomasz Romańczukiewicz GRUPA 2: Poniedziałek 17:00-18:30 sala: G-1-10 Prowadzący: dr Tomasz Romańczukiewicz GRUPA 3: Poniedziałek 16:00-17:30 sala: G-1-03 Prowadzący: dr inż. Marcin Zieliński

Organizacja kursu Kurs składa się z wykładu (30h) oraz ćwiczeń praktycznych w pracowni komputerowej (30h): Wykład: Poniedziałek 10:15-11:45 sala: A-1-04 Ćwiczenia: GRUPA 1: Poniedziałek 15:30-17:00 sala: G-1-10 Prowadzący: dr Tomasz Romańczukiewicz Ćwiczenia dla wszystkich grup GRUPA 2: Poniedziałek 17:00-18:30 sala: G-1-10 Prowadzący: dr się Tomasz rozpoczną odromańczukiewicz następnego tygodnia tj. 6 marca 2017 r. GRUPA 3: Poniedziałek 16:00-17:30 sala: G-1-03 Prowadzący: dr inż. Marcin Zieliński

Organizacja kursu Informacje o kursie, zasady zaliczenia oraz materiały do wykładu będą dostępne na stronie kursu pod adresem: http://koza.if.uj.edu.pl/~marcin/dydaktyka

Warunki zaliczenia Ćwiczenia: - Nie więcej niż 2 nieusprawiedliwione nieobecności. - Przygotowanie projektów wykonanych indywidualnie oraz zespołowo wraz z dokumentacją projektową. Wykład: - Zaliczenie w formie testu na ocenę.

Warunki zaliczenia Ćwiczenia: I termin zaliczenia ćwiczeń: 30.06.2017 r. II termin zaliczenia ćwiczeń: 15.09.2017 r. Wykład: termin zaliczenia pisemnego na ocenę: 12.06.2017 r. (ostatni wykład)

Wprowadzenie. kilka pojęć abstrakcyjnych

Aplikacja Czym jest aplikacja? Ogólnie jest to samodzielny program pozwalający na wykonanie określonych czynności przez użytkownika, za pomocą zdefiniowanego interfejsu komunikacyjnego człowiek - komputer. Aplikacje są napisane są za pomocą języków programowania (np. C, C++, C#, Java) i najczęściej stanowią logicznie powiązany ze sobą zespół modułów, który każdy z osobna został stworzony do wykonywania określonego zadania.

Aplikacja Przykłady aplikacji: Monolityczna terminalowa Monolityczna okienkowa Monolityczna okienkowa Internetowa

Aplikacja APLIKACJA 1. Składa się i tworzy logiczna sieć współpracujących, rozproszonych serwisów. 2. Serwis to niezależny moduł, który ma dokładnie określony interfejs programistyczny, który może być wielokrotnie używany przez inne serwisy, oraz może być używany w różnych konfiguracjach uruchomieniowych: na tym samym komputerze, w komputerze w sieci lokalnej, w sieci Internet. 3. Wielokrotne użycie serwisu oznacza, że pojedyncze rozwiązanie biznesowe może wchodzić w skład wielu faktycznych aplikacji.

Model aplikacji (MA) APLIKACJA Użytkownik Warstwa prezentacji Widok danych Serwisy Logika biznesowa Warstwa biznesowa Logika danych Warstwa danych Baza danych

Model aplikacji (MA) Jaką funkcje spełnia model aplikacji: - Pozwala na ustalenie definicji, reguł i związków, które będą tworzyć strukturę aplikacji. - Służy jako baza wymiany idei podczas logicznego projektowania aplikacji (nacisk jest na poziom logiczny nie fizyczny - jaką strukturę ma aplikacja, a nie jak będzie implementowana). - Umożliwia spójne podejście do projektowania i budowy aplikacji. - Model buduje wspólne rozumienie aplikacji i określa robocze słownictwo do tworzenia aplikacji. - Używa projektowania komponentowego opartego na serwisach. APLIKACJA Użytkownik Widok danych Serwisy Logika biznesowa Logika danych Baza danych Warstwa prezentacji Warstwa biznesowa Warstwa danych

Serwisy Model aplikacji (MA) Widok danych Serwis użytkownika - interfejs użytkownika (UI ang. User Interface) służy do prezentacji danych w określonej formie oraz ich pozyskiwania od użytkownika. Interfejs może być wizualny (np. graficzny, tekstowy) lub programowy (API). Logika biznesowa Serwis biznesowy - zawiera w sobie logikę sterowania operacjami biznesowymi, realizuje zdefiniowane reguły biznesowe oraz zapewnia integralność transakcji w aplikacji. Jedną z najważniejszych funkcji logiki biznesowej jest transformowanie (przetwarzanie) danych przez stosowanie reguł biznesowych. Logika danych Serwis danych - pozwala na trwałe utrzymywanie danych aplikacji, na ich tworzenie, usuwanie, modyfikowanie i aktualizację i odczytywanie.

Model aplikacji (MA) APLIKACJA Użytkownik Widok danych Serwisy Logika biznesowa Logika danych Warstwa prezentacji Warstwa biznesowa Warstwa danych Baza danych Na tym kursie będziemy skupiać się na aplikacji jako całości poznając aspekty tworzenia każdej z warstw przedstawionych na diagramie. Do samego diagramu wrócimy bardziej dokładnie omawiając różne architektury tworzenia aplikacji internetowych.

Projektowanie Projektowanie pozwala na uniknięcie rozbieżności pomiędzy: oczekiwaniami i założeniami.. a... rzeczywistością...

Projektowanie PROJEKTOWANIE I TWORZENIE APLIKACJI (INTERNETOWYCH) 1. Identyfikacja potrzeby biznesowej klienta (identyfikacja problemu/zagadnienia). 2. Określenie szczegółowych funkcjonalności produktu końcowego. Określenie wymagań technologicznych i procesowych. Ocena ryzyka projektowego. 3. 4. Etapowa implementacja funkcjonalności i ich modyfikacja. 5. Testowanie tworzonego kodu. 6. Wdrożenie produktu. 7. Wsparcie po wdrożeniowe.

Projektowanie Ogólnie w złożonym procesie projektowania aplikacji (internetowych), można wyróżnić trzy etapy prac, które w dążeniu do końcowego produktu powtarzane są iteracyjnie: Projektowanie koncepcyjne Projektowanie logiczne Projektowanie fizyczne

Projektowanie Ogólnie w złożonym procesie projektowania aplikacji (internetowych), można wyróżnić trzy etapy prac, które w dążeniu do końcowego produktu powtarzane są iteracyjnie: Projektowanie koncepcyjne (ang. Artist rendering): Jest to etap w którym następuje identyfikacja potrzeb biznesowych klienta, oraz użytkownika końcowej aplikacji. W tym etapie należy określić co będzie robił użytkownik za pomocą stworzonej aplikacji i co jest niezbędne aby mógł to robić. W tym etapie należy wytworzyć zrozumiałe dla klienta i programistów modele, diagramy i scenariusze działania aplikacji. Projektowanie logiczne (ang. Blueprint): Etap pozwalający na spojrzenie na logikę aplikacji z perspektywy użytkownika z uwzględnieniem założeń biznesowych. Jednocześnie na tym etapie przygotowana jest szczegółowa organizacja budowanej aplikacji, tak aby spełniała wymagania biznesowe i użytkowe. Dodatkowo należy przygotować strukturę działania i komunikacji pomiędzy różnymi elementami aplikacji (trasy, API, etc). Projektowanie fizyczne (ang. Engineering drawing): Przygotowanie perspektywy wykorzystania dostępnych rozwiązań technologicznych do stworzenia aplikacji oraz ograniczeń jakie mogą wystąpić na etapie wdrożenia u klienta. Jednocześnie etap ten powinien przewidywać efektywność działania aplikacji oraz skalę wykorzystania przez docelowych użytkowników.

Projektowanie - ocena ryzyka Jednym z istotnych elementów projektowania i tworzenia aplikacji internetowych jest właściwe określenie i zaplanowanie kolejnych etapów prac projektowych, tak aby zminimalizować ryzyko niepowodzenia lub opóźnienia wykonania projektu. Ryzyko - jest to zagrożenie lub problem, które może się urzeczywistnić w trakcie procesu tworzenia aplikacji. Ocena ryzyka polega na identyfikowaniu potencjalnych przyczyn niepowodzenia projektu i podejmowaniu działań w celu zapobiegania lub minimalizowania wpływu ryzyka na projekt. Identyfikacja Analiza Planowanie Kontrola Śledzenie Aktywne zarządzanie ryzykiem obejmuje następujące etapy: 1. 2. 3. 4. 5. 6. Identyfikacja ryzyka. Analiza ryzyka. Planowanie obsługi zagrożenia. Śledzenie sytuacji zagrożenia. Kontrola, przeciwdziałanie. Zażegnanie ryzyka. Ryzyko zażegnane

Projektowanie - model procesów W projekcie model procesu wytwarzania aplikacji internetowej, określa kolejność działań od początku do zakończenia/. Podstawowe modele procesów projektowych to: Model kaskadowy Każdy etap zadań musi zostać zakończony przed rozpoczęciem kolejnej fazy. Używane są punkty kontrolne nazywane kamieniami milowymi (milestones). Zwykle różne zespoły projektowe prowadzą różne etapy projektu. Każdy etap musi zostać dokładnie udokumentowany. Krytyczne decyzje zapadają wcześniej. Testowanie odbywa się w ostatnim etapie projektu. Model spiralny Ciągła potrzeba poprawiania wymagań i oszacowań projektowych. Zwykle jeden zespół projektowy pracuje nad wszystkimi etapami. Oparty na więzi pomiędzy zespołem projektowym a klientem. Opiera się na kolejnych iteracjach w celu wprowadzania ulepszeń. Nie ma wyraźnie określonych kamieni milowych.

Projektowanie - model procesów Model kaskadowy Model spiralny Oba modele mają zalety dlatego najczęściej w projektowaniu i tworzeniu nowoczesnych aplikacji internetowych używa się podejścia hybrydowego, które nosi cechy obu modeli. Model hybrydowy zakłada przyrostowe i jednocześnie iteracyjne budowanie funkcjonalności aplikacji wzbogacone o częste punkty kontrolne tzw. kamienie milowe. Etap I Zespół razem z klientem określają wymagania biznesowe, kończy się kamieniem milowym akceptacji wizji produktu końcowego (np. aplikacji). Etap II Rozpisanie planu projektu, kończy się kamieniem milowym akceptacji planu. Etap III Faza tworzenia i budowy projektu, kończy się gdy produkt projektu (np. aplikacja) jest gotowy i może zostać poddany wdrożeniu. Etap IV Akceptacja, projekt kończy się akceptacją produktu, wypuszczeniem go na rynek lub wdrożeniem danej funkcjonalności.

Projektowanie - model procesów Rozwój projektu Funkcjonalność N I... II III IV Funkcjonalność 4 I II III IV Funkcjonalność 3 I II III IV Funkcjonalność 2 I II III IV Funkcjonalność 1 I II III IV Czas (t)

Aplikacja internetowa Czym jest aplikacja internetowa (webowa) i czym się różni od strony internetowej? Pojęcia te są bardzo ogólne i nie są jednoznaczne!!! Strona internetowa (Web page) Kolekcja logicznie połączonych ze sobą zasobów (najczęściej dokumentów napisanych w języku HTML oraz multimediów), znajdujących się na jednym serwerze (w konkretnej kartotece) obsługującym żądania za pomocą protokołu HTTP. Po stronie hosta użytkownika, strona internetowa jest otwierana i wyświetlana za pomocą przeglądarki internetowej. Aplikacja internetowa (Web application) Program komputerowy, który pracuje na serwerze i komunikuje się poprzez sieć komputerową internet z komputerem użytkownika wykorzystując przeglądarkę internetową która jest interaktywnym klientem aplikacji internetowej. Aplikacje mogą działać za pomocą mechanizmów np. CGI, JSP, ASP.NET, Node.js lub języków np. PHP, Java, C#, JavaScript. Mechanizm prezentacji danych w przeglądarce określa się czasem mianem cienkiego klienta (ang. thin client).

Aplikacja internetowa Zatem jak rozróżnić co jest stroną, a co aplikacją internetową? Najlepiej rozróżnić przez kryterium technologiczne: Strona internetowa (Statyczna strona WWW) - strona taka zawiera w kodzie dane, które są wyświetlane w przeglądarce internetowej. Zawartość strony nie zmienia się pod wpływem interakcji z użytkownikiem, zawsze wyświetlane są te same treści. Każda zmiana danych (treści strony) wymaga ingerencji programisty w kod strony. Użytkownik nie posiadający wiedzy na temat struktury strony oraz języka HTML nie będzie w stanie zmienić zawartości strony. Aplikacja internetowa (Dynamiczna strona WWW) - strona dynamiczna jest generowana przez serwer HTTP pod wpływem żądań przychodzących od klienta na podstawie przesłanych parametrów i zmiennych. Strony takie dostosowują swoją zawartość w zależności od działań użytkownika w przeglądarce. W takim wypadku zmiany stanu strony mogą być wykonywane po stronie użytkownika dzięku wykorzystanie języków skryptowych np. JavaScript lub po stronie serwera wykorzystując do tego celu języki takie jak PHP, Perl, Python. W nowoczesnych aplikacjach internetowych wykorzystywane są obie metody. Dodatkowo najczęściej dane (czyli zawartość strony) jest przechowywana w bazach danych (np. SQL), z których są pobierane w zależności od wywoływanych przez użytkownika żądań.

Aplikacja internetowa Przykłady stron i aplikacji internetowych:

Zalety aplikacji internetowych Aplikacja internetowa (Web application) Bezpieczeństwo - aplikacje internetowe są bezpieczne, ponieważ dane składowane i zabezpieczone są w sposób centralny. Dostępność - można korzystać w dowolnym miejscu, a do ich uruchomienia i obsługi wystarczy dostęp do urządzenia z Internetem i przeglądarką internetową. Niezależność sprzętowa - całkowicie niezależne od platform sprzętowych i systemów operacyjnych i przeglądarek klientów, którzy z nich korzystają. Łatwość rozbudowy i uaktualnienia - mogą być bez przerwy rozbudowywane i uaktualniane o dodatkowe funkcje, a zmiany na bieżąco będą dostępne dla klientów bez konieczności ich interwencji.

Przegląd technologii FRONT-END - pojęciowo odnosi się w technologiach internetowych do kodu wykonywanego po stronie użytkownika. W ogólności do tej kategorii można zaliczyć HTML, CSS oraz JavaScript. BACK-END - pojęciowo odnosi się w technologiach internetowych do kodu wykonywanego po stronie serwera. W ogólności do tej kategorii można zaliczyć PHP, Perl, CGI, Ruby, Java, C#, itp.

Przegląd technologii: Front-End Podstawowe technologie: HTML 5 CSS 3 (z Mediaqueries) JavaScript (ECMA6) Biblioteka jquery wraz dodatkowym pakietem jqueryui (User-Interface) Środowisko wprowadzające MVC i podejście Single Page Application (SPA) Biblioteka do tworzenia UI i zarządzania VDOM

Przegląd technologii: Back-End Podstawowa technologia serwerowa PHP oraz zintegrowane środowiska programistyczne: Symfony 2 Zend Framework 2 Środowisko Node.js do uruchamiania aplikacji na serwerze napisanych w języku JavaScript. Środowisko Ruby on Rails do tworzenia aplikacji klient-serwer w języku Ruby. Rozbudowane środowisko tworzenia aplikacji w języku C#. Rozbudowane środowisko tworzenia aplikacji w języku Java.

KONIEC WYKŁADU 1