Projektowanie interfejsów użytkownika

Skrócony opis:

Celem zajęć jest przedstawienie zasad projektowania interfejsów użytkownika. Prezentowane są metody i techniki komunikacji człowiek - komputer. Omawiane są wzorce do wykorzystania zarówno w aplikacjach mobilnych i mediach społecznościowych, jak i w aplikacjach internetowych czy programach komputerowych. Laboratoria polegają na przygotowywaniu i zaprezentowaniu autoreferatu z zakresu konkretnej tematyki. Studenci otrzymują od prowadzącego materiały które stanowią podstawę autoreferatu i ćwiczeń. Ponadto, studenci wykonują ćwiczenia dotyczące odpowiednich wzorców projektowych w trakcie laboratorium jak i w samodzielnie w domu. Co więcej implementowane są rozwiązania typowych problemów występujących przy budowaniu interfejsów. Analizie i poprawie poddawane są przykładowe nieprawidłowo skonstruowane interfejsy.

[1] Kinetis Design Studio: nowe środowisko programistyczne dla fanów mikrokontrolerów KINETIS

Uwaga: jest pierwsza część artykułu, drugą opublikowalismy pod adresem .

Rynek mikrokontrolerów 32-bitowych zdominowany jest przez układy z rdzeniem Cortex-M. Jednym z liderów wśród producentów układów tego typu jest firma Freescale. W ofercie tej firmy można znaleźć rodzinę mikrokontrolerów Kinetis z rdzeniem ARM Cortex-M0+ oraz ARM Cortex-M4. Aplikacje dla tych układów do niedawna programiści mogli tworzyć przy użyciu jednego z pięciu środowisk programistycznych (IDE – Integrated Development Environment): CodeWarrior (firmy Freescale), TrueSTUDIO (Atollic), MULTI (Green Hills Software), Embedded Workbench for ARM (IAR Systems) oraz Microcontroller Development Kit (ARM Keil). W kwietniu firma Freescale zapowiedziała kolejny pakiet narzędziowy dla mikrokontrolerów Kinetis – Kinetis Design Studio.

W pierwszej częsci artykułu przedstawiamy cechy i budowę Kinetis Design Studio oraz opisujemy narzędzia udostępniane przez środowisko programistyczne.

Konkurenci: CodeWarrior vs Kinetis Design Studio

Z pewnością zastanawiać może czemu firma Freescale – dysponując autorskim środowiskiem programistycznym dla mikrokontrolerów Kinetis, jakim jest Code Warrior – zdecydowała się opracować kolejny pakiet narzędzi programistycznych. Producent wyjaśnia, że chciał stworzyć IDE, które będzie „skrojone” na miarę potrzeb mikrokontrolerów Kinetis. Dzięki temu Kinetis Design Studio jest bardziej praktyczne w użyciu i zajmuje mniej miejsca na dysku twardym komputera niż Code Warrior, który przeznaczony jest dla wielu rodzin mikrokontrolerów z oferty produktowej firmy Freescale. Drugim powodem powstania Kinetis Design Studio jest aspekt licencyjny. Code Warrior jest udostępniany bezpłatnie tylko w wersji z ograniczeniem wielkości kodu. Pełna, pozbawiona ograniczeń wersja jest natomiast płatna. Z kolei Kinetis Design Studio oferowany jest bezpłatnie w pełnej wersji.

Pomimo wymienionych powyżej różnić między Code Warriorem i Kinetis Design Studio nie sposób odnieść wrażenia, że są to środowiska bardzo do siebie podobne. Podobieństwo występuje między innymi na poziomie interfejsu graficznego użytkownika. Wynika to z zastosowania w obu rozwiązaniach Eclipse – zarówno Code Warrior jak i Kinetis Design Studio zostały stworzone w oparciu o tą platformę. To co łączy oba produkty to również zbliżona funkcjonalność. Jest tak, gdyż w sporej części te same narzędzia, które wykorzystano w Code Warriorze można też znaleźć w Kinetis Design Studio. W szczególności należy tu wymienić generator kodu o nazwie Processor Expert.

Według zapowiedzi producenta opracowanie Kinetis Design Studio nie oznacza wycofania wsparcia dla Code Warriora. Środowisko to dalej będzie rozwijane, jednak od teraz ma być postrzegane przede wszystkim nie jako pakiet narzędziowy do tworzenia aplikacji dla mikrokontrolerów Kinetis, a dla innych rodzin układów firmy Freescale: RS08, S08, ColdFire, ColdFire+ i S12Z. Rozwój CodeWarriora dla mikrokontrolerów Kinetis zostanie „zamrożony” na obecnym etapie.

Budowa Kinetis Design Studio

Podstawę Kinetis Design Studio stanowi Eclipse (wersja Kepler 4.3). Jest to napisana w języku Java otwarta (open-source) platforma, w oparciu o którą można tworzyć środowiska programistyczne. Eclipse samo w sobie nie dostarcza żadnych narzędzi programistycznych, oferuje jednak obsługę tak zwanych wtyczek (plug-ins). Wtyczki to narzędzia, które mogą by integrowane z Eclipse.

Chcąc pozostać w zgodzie z kolejnością czynności procesu tworzenia oprogramowania, jako pierwsze z narzędzi Kinetis Design Studio należy wymienić Processor Experta. Jest to generator kodu konfiguracyjnego dla mikrokontrolera. Narzędzie to pozwala za pomocą graficznego interfejsu użytkownika wygenerować pliki z kodem źródłowym, w których zaimplementowany jest interfejs programistyczny (API – Application Programming Interface) do zasobów wewnętrznych mikrokontrolera.

Kolejnym używanym przez programistę narzędziem Kinetis Design Studio jest edytor. Jak łatwo jest się domyślić pozwala on na pisanie kodu źródłowego aplikacji. Edytor Kinetis Design Studio pozwala pisać kod źródłowy w języku Assembler, C oraz C++.

Kod źródłowy nie jest interpretowalny dla układów elektronicznych, które operują na wartościach binarnych, zatem potrzebne jest narzędzie, które odpowiednio przetworzy kod z jednej postaci do drugiej. Tym narzędziem jest kompilator. Tłumaczy on pliki zawierające kod źródłowy na pliki z kodem maszynowym. W przypadku Kinetis Design Studio zastosowano kompilator GCC (GNU Compiler Collection).

Jeśli podczas kompilacji błędy nie wystąpią, dalej pliki z kodem maszynowym są konsolidowane w jeden plik wykonywalny. Za realizację tego zadania odpowiada linker. Plik wykonywalny w zapisywany jest do pamięci mikrokontrolera. Za poprawne wykonanie tej czynności odpowiada programator.

Ostatnim z narzędzi jest debuger. Debugowanie, tłumaczone czasem jako odrobaczanie lub odpluskowanie, to proces systematycznego redukowania liczby błędów w oprogramowaniu. Zasada działania debugera jest prosta. Pozwala on wykonywać kod stopniowa, a nawet krok po kroku, jednocześnie pozwalając na podgląd stanu systemu, w tym np. rejestrów mikrokontrolera i zmiennych. Dzięki temu programista może szczegółowo analizować zachowanie aplikacji, co bardzo pomaga w wychwyceniu różnego rodzaju nieprawidłowości, a w konsekwencji ich usunięciu. Kinetis Design Studio wykorzystuje debuger GDB (GNU Project debugger). Obsługiwane przez debuger interfejsy sprzętowe to: Segger J-Link, P&E Multilink oraz CMSIS-DAP.

Ponadto elementem, który można doinstalować w formie wtyczki do środowiska Kinetis Design Studio jest system operacyjny czasu rzeczywistego (RTOS – Real Time Operating System). Może to być produkt wspierany od dawna przez firmę Freescale o nazwie MQX lub popularnie stosowany w różnych systemach wbudowanych FreeRTOS.

Ostatnim nieomówionym dotąd komponentem składającym się na Kinetis Design Studio jest newlib/newlib-nano. Jest to biblioteka implementująca standard języka C.

Pakiet Kinetis Design Studio został dostosowany do pracy na dwóch obecnie najpopularniejszych systemach operacyjnych: Windows (wersje 7 i 8, zarówno 32- jak też 64-bitowe) oraz Linux (Ubuntu, Redhat, Centos).

Schemat blokowy przedstawiający budowę Kinetis Design Studio przedstawiono na rysunku 1.

Rys. 1. Schemat budowy środowiska Kinetis Design Studio

Tworzenie aplikacji dla mikrokontrolera

Proces tworzenia aplikacji w programie Kinetis Design Studio można zasadniczo podzielić na trzy etapy. W pierwszym etapie programista korzystając z narzędzia Processor Expert tworzy interfejs programistyczny do peryferiów mikrokontrolera, których użycia wymaga aplikacja. W drugim etapie programista pisze kod źródłowy aplikacji w oparciu o wcześniej wygenerowany interfejs do peryferiów. W trzecim etapie programista sprawdza poprawność działania aplikacji poprzez uruchomienie jej i debugowanie na platformie sprzętowej.

W tym miejscu należy wprowadzić pojęcie perspektywy. Perspektywa to mechanizm Eclipse określający jakie okna narzędziowe są w danej chwili widoczne. Można zatem powiedzieć, że perspektywa dostosowuje środowisko programistyczne do rodzaju czynności wykonywanej przez programistę. Srodowisko Kinetis Design Studio udostępnia osobną perspektywę dla każdego z wcześniej opisanych etapów tworzenia aplikacji. Są to perspektywy Hardware, C/C++ oraz Debug odpowiednio dla pierwszego, drugiego i trzeciego etapu tworzenia aplikacji. Wybranie perspektywy odbywa się przez naciśnięcie na odpowiadającą jej ikonę w panelu wyboru perspektywy, który znajduje się w prawym górnym roku okna programu Kinetis Design Studio (rysunek 2). W dalszej części artykułu opisano każdą z tych perspektyw.

Rys. 2. Panel zmiany perspektywy w środowisku Kinetis Design Studio

Zacznijmy od perspektywy Hardware (rysunek 3). Dzięki niej programista może korzystać z Processor Experta i tworzyć przy jego pomocy interfejs programistyczny dla mikrokontrolera. Perspektywa Hardware udostępnia następujące okna:

okno Configuration Registers służące do podglądu zawartości rejestrów mikrokontrolera na etapie inicjalizacji jego peryferiów,

okno Processor przedstawiające w sposób graficzny model mikrokontrolera (lista peryferiów oraz układ wyprowadzeń),

okno Component Inspector pozwalające skonfigurować peryferia i dedykowany im interfejs programistyczny ,

okno Problems z listą błędów i ostrzeżeń będących wynikiem .

Rys. 3. Widok perspektywy Hardware środowiska Kinetis Design Studio

Najlepsze IDE dla Linuksa

Uwielbiam kodować i od czasu wprowadzenia zintegrowanego środowiska programistycznego, znanego również jako IDE, kodowanie stało się bardziej zabawnym zadaniem niż żmudnym. IDE lub edytory kodu źródłowego przenoszą zadanie programowania i kodowania na wyższy poziom i znacznie ułatwiają tworzenie wspaniałych aplikacji.

IDE zawiera wiele funkcji i wtyczek, które pomagają programistom kodować błąd programu lub bez błędów. Istnieją IDE dostępne w systemie Linux i jego popularnie używanych dystrybucjach, takich jak Ubuntu, ale mam zamiar przedstawić wam 10 najlepszych IDE.

Wymienione poniżej IDE są kompatybilne z kodowaniem w różnych powszechnie używanych językach programowania, takich jak C, C++ i Python. Więc zacznijmy.

1. Atom

Atom to pierwszy tego rodzaju edytor tekstu lub zintegrowane środowisko programistyczne, które można całkowicie zhakować. Jest to wieloplatformowy edytor z wbudowanym menedżerem pakietów. Oferuje nowoczesny interfejs użytkownika, który jest bardzo łatwy w użyciu, a programiści uznają go za bardzo łatwy w obsłudze.

Jest również dostarczany z funkcją automatycznego uzupełniania, która pomaga programistom szybciej pisać kod dzięki inteligentnemu i elastycznemu autouzupełnianiu. Możesz także podzielić jego interfejs na wiele okienek, aby porównać i edytować kod. Jest również wyposażony w funkcję wyszukiwania i zastępowania, która pomaga znajdować, wyświetlać podgląd i zamieniać tekst podczas pisania lub we wszystkich projektach, nad którymi pracujesz.

Interfejs jest dostarczany z 4 interfejsami użytkownika i 8 preinstalowanymi motywami składni w trybach ciemnym i jasnym.

Pobierz Atom stąd

2. Kod programu Visual Studio

Każdy zna Visual Studio Code, który Microsoft opracowuje dla Windows. Powodem, dla którego jest to moja lista, jest to, że nadal jest jednym z najlepszych na świecie, jeśli chodzi o edycję kodu źródłowego i programowanie aplikacji.

Nie ogranicza się do systemu Windows, ponieważ ma również pełne wsparcie dla systemu Linux i jego dystrybucji, takich jak Ubuntu. Jest to zaawansowany edytor kodu, który oferuje wszystkie funkcje, których programista lub koder oczekuje od IDE. Jednym z powodów, dla których programiści i popularni wśród nich nadal go używają, jest to, że zawiera różne rozszerzenia, które można wykorzystać do ulepszenia funkcji IDE.

Visual Studio Code to narzędzie typu open source, które jest również dostępne bezpłatnie dla wszystkich. Oprócz Windows i Linux działa również bez wysiłku na macOS, ponieważ jest to wieloplatformowe IDE.

Pobierz kod programu Visual Studio stąd

3. Wzniosły tekst

Sublime Text to jedno z najstarszych zintegrowanych środowisk programistycznych obsługujących wiele języków programowania i znaczników. Posiada zgrabny interfejs użytkownika i niezwykłe funkcje, dzięki czemu jest popularnym IDE wśród programistów i programistów.

Najnowsza wersja Sublime Text 4 zawiera nowe funkcje i ulepszenia, takie jak renderowanie GPU dla płynnego interfejsu użytkownika, obsługa procesorów Apple Silicon i Linux ARM64, wielokrotny wybór tabulatorów, kontekstowe autouzupełnianie, obsługa maszynopisu, jsx i tsx, ulepszony silnik podświetlania składni i całkowicie odświeżony użytkownik berło.

Pobranie zintegrowanego środowiska programistycznego jest całkowicie bezpłatne.

Pobierz Sublime Text stąd

4. Spacemacs

Spacemacs to oparta na społeczności platforma konfiguracyjna dla GNU Emacs. Współpracuje z Emacsem i Vimem, aby zaoferować programistom świetne środowisko programowania i kodowania.

Emacs to bardziej dopracowana wersja skupiająca się na ergonomii, mnemotechnice i spójności. Jest dostarczany z konfiguracją opartą na społeczności, która zapewnia wyselekcjonowane pakiety dostrojone przez zaawansowanych użytkowników, a błędy są natychmiast naprawiane dzięki szybkim aktualizacjom.

Jest to wieloplatformowe IDE z obsługą systemów Windows, MacOS i Linux.

Pobierz Spacemacs stąd

5. Wsporniki

Brackets to zintegrowane środowisko programistyczne typu open source, skupiające się głównie na tworzeniu stron internetowych. Jest to wieloplatformowy edytor kodu opracowany przez firmę Adobe Systems. Jest to nowoczesny edytor z pięknym i łatwym w obsłudze interfejsem.

Jak wspomniano wcześniej, jest on poświęcony tworzeniu stron internetowych; programiści front-end pokochają pracę na tym IDE. Jest to bardzo potężny edytor z funkcjami, takimi jak podświetlanie składni, edytory wbudowane, podgląd na żywo i obsługa preprocesorów.

Jest to lekki, ale potężny edytor kodu, który działa bez wysiłku na nowoczesnych i starszych komputerach.

Pobierz wsporniki stąd

6. Zaćmienie

Eclipse jest jednym z najpopularniejszych środowisk IDE wśród programistów i twórców stron internetowych. Możemy nawet nazwać to IDE programistycznym Java, ponieważ zawiera najnowszą obsługę Java 17 i JUnit 5.8 z niezbędnymi narzędziami programistycznymi.

Dzięki doskonałemu wsparciu społeczności zapewnia stabilną wydajność po wyjęciu z pudełka. Oprócz Javy Eclipse obsługuje również inne powszechnie używane języki programowania, takie jak Python, C, C++, JavaScript, PHP i wiele innych.

Jest to jedno z najnowocześniejszych i najbardziej zaawansowanych zintegrowanych środowisk programistycznych dostępnych dla systemu Linux i jego dystrybucji, takich jak Ubuntu i LinuxMint.

Jest to darmowe IDE o otwartym kodzie źródłowym, które oferuje świetne funkcje i narzędzia programistyczne dla front-endu.

Pobierz Eclipse stąd

7. Apache Netbeans

Apache Netbeans to wieloplatformowe zintegrowane środowisko programistyczne dla Javy; Oferuje edytory, kreatory i szablony ułatwiające tworzenie aplikacji i aplikacji internetowych w różnych językach, takich jak Java, PHP, HTML 5, CSS i wiele innych.

Jest to wieloplatformowe IDE; można go łatwo zainstalować w dowolnym systemie operacyjnym z Javą, takim jak Windows, Mac OSX i Linux. Napisz raz i wykonuj w dowolnym miejscu funkcje, które działają bez wysiłku dzięki NetBeans.

Oferuje również funkcje, takie jak podświetlanie kodu źródłowego, zarówno składniowo, jak i semantycznie, oraz potężne narzędzia.

Pobierz Apcahe Netbeans stąd

8. Intellij POMYSŁ

Opracowany przez JetBrains, Intellij IDEA to zintegrowane środowisko programistyczne napisane w Javie. Jest to doskonałe IDE do tworzenia oprogramowania komputerowego. Oferuje takie funkcje, jak natychmiastowe i sprytne uzupełnianie kodu, analiza kodu w locie oraz niezawodne narzędzia do refaktoryzacji, które pomagają zmaksymalizować produktywność programistów.

Oferuje doskonałe wrażenia dla użytkownika końcowego po wyjęciu z pudełka z różnymi obsługiwanymi językami i frameworkami. Jest to nowoczesne IDE z nowoczesnym interfejsem użytkownika, który jest bardzo łatwy w użyciu nawet dla początkujących użytkowników. Jest to bardzo popularne IDE wśród programistów JAVA.

Pobierz Intellij IDEA stąd

Są to więc najlepiej zintegrowane środowisko programistyczne dla twórców stron internetowych i aplikacji korzystających z Linuksa i jego dystrybucji, takich jak Ubuntu i LinuxMint. Wszystkie wymienione tutaj IDE są idealne zarówno dla nowych, jak i profesjonalnych programistów i programistów.

Jarosław Kułak
Jarosław Kułak

Leave a Comment