
Effective User Flow design is essential for any EV charging station, especially
in a world of growing user expectations. The key is to understand the needs and
limitations of drivers and implement solutions that combine simplicity,
flexibility, and innovation. Let’s see how this approach looks in practice,
based on specific data and UX/UI best practices.

## Focus on the user's goal: fast and hassle-free charging

Business context:

Every charging station customer expects, above all, a fast and reliable charging
process.
[According to a 2020 McKinsey & Company report, the speed and convenience of charging are among the key factors influencing consumer acceptance of electric vehicles, and 70% of current electric vehicle owners are dissatisfied with the existing charging infrastructure.](https://www.mckinsey.com/features/mckinsey-center-for-future-mobility/our-insights/exploring-consumer-sentiment-on-electric-vehicle-charging)
If the UX is chaotic or requires too many steps, we risk losing customers and
their loyalty.

Elements of success:

- Eliminate unnecessary steps: Once the vehicle is connected, the process begins
  automatically, without any additional clicks or screens.
  [According to research by Nielsen Norman Group, simplifying the user interface and reducing unnecessary steps can significantly increase user satisfaction.](https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/)

- Simplified payment: Users can choose a convenient method: NFC, QR code or a
  dedicated app. This flexibility meets a variety of needs and scenarios,
  [reducing the average payment method selection time to less than 10 seconds.](https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/)

<ContentCard>
### UX example

Imagine plugging your car into a charging station and thanks to Plug & Charge
technology based on the ISO 15118 standard, the system automatically recognizes
your vehicle and initiates payment. Charging begins within seconds, and the
entire process takes less than 10 seconds.

</ContentCard>

## Minimizing user effort (Effortless Experience)

Automation of key stages:

- Automatic start and end of charging: Integration with the vehicle system
  allows for automatic management of the charging process, reducing user
  interaction to a minimum.

- Seamlessly switch between modes: Users can easily change payment methods or
  manually complete charging via an intuitive interface that meets WCAG 2.1
  accessibility standards.

Personalization as added value:

- For app users: Saved payment details and charging preferences enable
  lightning-fast session initiation. Interface response time is less than 300
  ms, significantly improving user experience.
- For those without an app: The system offers a responsive mobile site with a
  load time of less than 1 second, allowing for quick and convenient one-time
  payments.

<ContentCard>

### Business case

[According to Gartner's research](https://appexchange.salesforce.com/partners/servlet/servlet.FileDownload?file=00P3A00000nkp79UAA),
low-effort interactions cost the company 37% less than those that are more
engaging for the customer.

</ContentCard>

## Transparency and control (Empower the User)

Real-time monitoring:

- Live stats: Station displays and the app show live data – from charge level to
  session cost. Information updated every second allows the customer to have
  full control and make informed decisions.

Flexible session ending:

- User Control: User can end charging at any time or let the system do it
  automatically once a full charge is achieved.
- Clear messaging: Clear information about potential additional fees eliminates
  concerns about unforeseen costs, building brand trust.

<ContentCard>
### Why does it work?

Transparency builds trust in the brand.
[PwC's 2018 'Future of Customer Experience' report](https://www.pwc.de/de/consulting/pwc-consumer-intelligence-series-customer-experience.pdf),
shows that 73% of consumers consider customer experience to be a key factor in
their purchasing decisions.

</ContentCard>

### What does this user flow look like in practice?

Arrival at the station and connection of the vehicle:

- Intuitive interaction: Visual cues and clear labeling guide the user to the
  right charging point. The process starts automatically after connection,
  eliminating the need for additional actions.

![User Guidelines](/blog/ev_station_ux/-theme-/1.png)

Selecting a payment method:

- Flexible options: Thanks to NFC, QR codes and the app, the station serves both
  new and regular customers.
  [Usability tests indicate that simplified interfaces can reduce the time it takes users to complete tasks and translate into significant savings for the company.](https://www.nngroup.com/articles/iterative-design/)

![Payment Method Variants](/blog/ev_station_ux/-theme-/2.png)

Monitoring the charging process:

- Real-time data: The station and app provide information about charging
  progress. The charge level, estimated time to completion and current cost are
  clearly visible, eliminating uncertainty and increasing user comfort.

![Monitoring service implementation](/blog/ev_station_ux/-theme-/3.png)

End of session and settlement:

- Flexible termination options: Users can terminate the charge manually or let
  the system do it automatically. Immediate charging and emailing of proof of
  transaction ensure the process is completed to the customer's satisfaction.

![Payment and final steps](/blog/ev_station_ux/-theme-/4.png)

What makes this User Flow effective?

- Simple navigation: Each step leads seamlessly to the next, without unnecessary
  downtime or complications.
- Reduce uncertainty: Real-time information builds trust and reduces user
  anxiety.
- Flexibility for different users: The system works for both app and one-time
  customers.

<ContentCard>
### Business summary

A well-designed UX not only streamlines the charging process, but also increases
customer loyalty and optimizes operating costs.
[According to NNGROUP research, 70% of customers prefer interfaces with high usability.](https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/)

</ContentCard>

### Make it work for your own situation

If you want to apply the above principles to your app, service or business, now
is the perfect time to do so. Analyze your current user flow and identify areas
that can be improved. Remember that even small changes can significantly improve
the user experience and bring measurable business benefits.

### Feel free to contact us!

If you need professional support in UX optimization, contact us. Together we
will create solutions that will satisfy your customers and contribute to the
success of your business.

UX/UI Pro-Tips for Designers:

- Minimal UI load time: Aim for a response time of less than 300ms to keep
  interactions fluid and frustration-free.
- Size of key interface elements: Make sure buttons and interactive elements are
  at least 44px to improve accessibility and user experience.
- Usability testing: They regularly conduct tests with real users to identify
  potential barriers and eliminate them quickly.

## Summary

Integrating simplicity, flexibility and innovation in User Flow design for EV
charging stations is key to success in the dynamically developing
electromobility market. Focusing on the real needs of users and applying best
UX/UI practices allows you to create an experience that will not only satisfy
customers but also bring tangible business benefits.


Integrating simplicity, flexibility and innovation in User Flow design for EV charging stations is key to success in the dynamically developing electromobility market. Focusing on the real needs of users and applying best UX/UI practices allows you to create an experience that will not only satisfy customers but also bring tangible business benefits.


User Flow Success: How Does UX Work at EV Charging Stations?


Efektywne projektowanie User Flow to podstawa dla każdej stacji ładowania
pojazdów elektrycznych, szczególnie w świecie rosnących oczekiwań użytkowników.
Kluczem jest zrozumienie potrzeb i ograniczeń kierowców oraz wdrożenie
rozwiązań, które łączą prostotę, elastyczność i innowacyjność. Sprawdźmy, jak
takie podejście wygląda w praktyce, bazując na konkretnych danych i najlepszych
praktykach UX/UI.

## Skoncentrowanie na celu użytkownika: szybkie i bezproblemowe ładowanie

Kontekst biznesowy:

Każdy klient stacji ładowania oczekuje przede wszystkim szybkiego i niezawodnego
procesu ładowania.
[Według raportu McKinsey & Company z 2020 roku, szybkość i wygoda ładowania są jednymi z kluczowych czynników wpływających na akceptację pojazdów elektrycznych przez konsumentów, oraz 70% obecnych właścicieli pojazdów elektrycznych jest niezadowolonych z istniejącej infrastruktury ładowania.](https://www.mckinsey.com/features/mckinsey-center-for-future-mobility/our-insights/exploring-consumer-sentiment-on-electric-vehicle-charging)
Jeśli UX będzie chaotyczny lub wymagał zbyt wielu kroków, ryzykujemy utratę
klientów oraz ich lojalności.

Elementy sukcesu:

- Eliminacja zbędnych działań: Po podłączeniu pojazdu proces rozpoczyna się
  automatycznie, bez dodatkowych kliknięć czy ekranów.
  [Zgodnie z badaniami Nielsen Norman Group, uproszczenie interfejsu użytkownika i redukcja zbędnych kroków może znacząco zwiększyć satysfakcję użytkowników.](https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/)

- Uproszczona płatność: Użytkownicy mogą wybrać wygodną metodę: NFC, kod QR lub
  dedykowaną aplikację. Ta elastyczność odpowiada na różnorodne potrzeby i
  scenariusze,
  [skracając średni czas wyboru metody płatności poniżej 10 sekund.](https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/)

<ContentCard>
### Przykład UX

Wyobraź sobie, że podłączasz auto do stacji, a dzięki technologii Plug & Charge
opartej na standardzie ISO 15118, system automatycznie rozpoznaje Twój pojazd i
inicjuje płatność. Ładowanie rozpoczyna się w ciągu kilku sekund, a cały proces
trwa mniej niż 10 sekund.

</ContentCard>

## Minimalizacja wysiłku użytkownika (Effortless Experience)

Automatyzacja kluczowych etapów:

- Automatyczne rozpoczęcie i zakończenie ładowania: Integracja z systemem
  pojazdu pozwala na automatyczne zarządzanie procesem ładowania, co redukuje
  interakcje użytkownika do minimum.

- Bezproblemowe przełączanie między trybami: Użytkownik może łatwo zmienić
  metodę płatności lub ręcznie zakończyć ładowanie za pomocą intuicyjnego
  interfejsu, który spełnia standardy WCAG 2.1 w zakresie dostępności.

Personalizacja jako wartość dodana:

- Dla użytkowników aplikacji: Zapisane dane płatności i preferencje ładowania
  umożliwiają błyskawiczne inicjowanie sesji. Czas reakcji interfejsu wynosi
  poniżej 300 ms, co znacząco poprawia doświadczenie użytkownika.
- Dla osób bez aplikacji: System oferuje responsywną stronę mobilną z czasem
  ładowania poniżej 1 sekundy, co pozwala na szybkie i wygodne płatności
  jednorazowe.

<ContentCard>

### Case biznesowy

[Według badań Gartnera](https://appexchange.salesforce.com/partners/servlet/servlet.FileDownload?file=00P3A00000nkp79UAA),
interakcje wymagające niskiego wysiłku kosztują firmę o 37% mniej niż te, które
są dla klienta bardziej angażujące.

</ContentCard>

## Transparentność i kontrola (Empower the User)

Monitorowanie w czasie rzeczywistym:

- Live stats: Wyświetlacze stacji i aplikacja pokazują dane na żywo – od poziomu
  naładowania po koszt sesji. Aktualizacja informacji co sekundę pozwala
  klientowi na pełną kontrolę i podejmowanie świadomych decyzji.

Elastyczne zakończenie sesji:

- Kontrola użytkownika: Użytkownik może zakończyć ładowanie w dowolnym momencie
  lub pozwolić systemowi zrobić to automatycznie po osiągnięciu pełnego
  naładowania.
- Klarowne komunikaty: Jasne informacje o ewentualnych dodatkowych opłatach
  eliminują obawy o nieprzewidziane koszty, budując zaufanie do marki.

<ContentCard>
### Dlaczego to działa

Transparentność buduje zaufanie do marki.
[Raport PwC 'Future of Customer Experience' z 2018 roku](https://www.pwc.de/de/consulting/pwc-consumer-intelligence-series-customer-experience.pdf)
wskazuje, że 73% konsumentów uważa doświadczenie klienta za kluczowy czynnik w
decyzjach zakupowych.

</ContentCard>

### Jak wygląda ten user flow w praktyce?

Przybycie na stację i podłączenie pojazdu:

- Intuicyjność interakcji: Wizualne wskazówki i czytelne oznaczenia prowadzą
  użytkownika do właściwego punktu ładowania. Proces rozpoczyna się
  automatycznie po podłączeniu, eliminując konieczność dodatkowych działań.

![Wskazówki dla użytkownika](/blog/ev_station_ux/-theme-/1.png)

Wybór metody płatności:

- Elastyczne opcje: Dzięki opcji NFC, kodów QR oraz aplikacji stacja obsługuje
  zarówno nowych, jak i stałych klientów.
  [Testy użyteczności wskazują, że uproszczone interfejsy mogą skrócić czas wykonywania zadań przez użytkowników i przełożyć się na spore oszczędności dla firmy.](https://www.nngroup.com/articles/iterative-design/)

![Warianty metod płatności](/blog/ev_station_ux/-theme-/2.png)

Monitorowanie procesu ładowania:

- Dane na bieżąco: Stacja oraz aplikacja informują o postępach ładowania. Poziom
  naładowania, szacowany czas do zakończenia i aktualny koszt są wyraźnie
  widoczne, co eliminuje niepewność i zwiększa komfort użytkownika.

![Monitorowanie realizacji usługi](/blog/ev_station_ux/-theme-/3.png)

Zakończenie sesji i rozliczenie:

- Elastyczne opcje zakończenia: Użytkownik może zakończyć ładowanie ręcznie lub
  pozwolić systemowi zrobić to automatycznie. Natychmiastowe naliczenie opłat i
  przesłanie dowodu transakcji na e-mail zapewnia zamknięcie procesu w sposób
  satysfakcjonujący dla klienta.

![Płatność i ostatnie kroki](/blog/ev_station_ux/-theme-/4.png)

Co sprawia, że ten User Flow jest efektywny?

- Prosta nawigacja: Każdy krok płynnie prowadzi do następnego, bez zbędnych
  przestojów czy komplikacji.
- Redukcja niepewności: Informacje w czasie rzeczywistym budują zaufanie i
  zmniejszają obawy użytkownika.
- Elastyczność dla różnych użytkowników: System działa zarówno dla klientów z
  aplikacją, jak i dla tych, którzy korzystają z jednorazowych opcji.

<ContentCard>
### Podsumowanie biznesowe

Dobrze zaprojektowany UX nie tylko usprawnia proces ładowania, ale też zwiększa
lojalność klientów i optymalizuje koszty operacyjne.
[Według badania NNGROUP, 70% klientów preferuje interfejsy o wysokiej użyteczności.](https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/)

</ContentCard>

### Weź to na swój grunt!

Jeśli chcesz zastosować powyższe zasady w swojej aplikacji, serwisie lub
biznesie, teraz jest idealny moment, aby to zrobić. Przeanalizuj obecny user
flow i zidentyfikuj obszary, które można usprawnić. Pamiętaj, że nawet
niewielkie zmiany mogą znacząco poprawić doświadczenie użytkowników i przynieść
wymierne korzyści biznesowe.

### Zapraszamy do kontaktu!

Jeśli potrzebujesz profesjonalnego wsparcia w optymalizacji UX, skontaktuj się z
nami. Wspólnie stworzymy rozwiązania, które zadowolą Twoich klientów i
przyczynią się do sukcesu Twojego biznesu.

Pro-tipy UX/UI dla projektantów:

- Minimalny czas ładowania interfejsu: Dąż do czasu reakcji poniżej 300 ms, aby
  interakcje były płynne i nie powodowały frustracji.
- Rozmiar kluczowych elementów interfejsu: Upewnij się, że przyciski i elementy
  interaktywne mają co najmniej 44 px, co poprawia dostępność i komfort
  użytkowania.
- Testy użyteczności: Regularnie przeprowadzaj testy z rzeczywistymi
  użytkownikami, aby identyfikować potencjalne bariery i szybko je eliminować.

## Podsumowanie

Integracja prostoty, elastyczności i innowacyjności w projektowaniu User Flow
dla stacji ładowania EV jest kluczem do sukcesu w dynamicznie rozwijającym się
rynku elektromobilności. Skupienie się na rzeczywistych potrzebach użytkowników
i zastosowanie najlepszych praktyk UX/UI pozwala stworzyć doświadczenie, które
nie tylko zadowoli klientów, ale także przyniesie wymierne korzyści biznesowe.


Integracja prostoty, elastyczności i innowacyjności w projektowaniu User Flow dla stacji ładowania EV jest kluczem do sukcesu w dynamicznie rozwijającym się rynku elektromobilności. Skupienie się na rzeczywistych potrzebach użytkowników i zastosowanie najlepszych praktyk UX/UI pozwala stworzyć doświadczenie, które nie tylko zadowoli klientów, ale także przyniesie wymierne korzyści biznesowe.


User Flow Success: Jak Działa UX w Stacjach Ładowania EV?


The IT world is complicated, full of jargon and advanced technical terms. For
people not aware of sophisticated details developers language sounds like a
never ending stream of magic spells. On the other hand, developers find it hard
to describe complex systems using simple words. To help you find yourself in the
overwhelming world of IT, I created a series of posts addressing the most
important attributes of most significant programming languages.

## What is JavaScript?

JavaScript is an immensely popular and rather well thought of general purpose
programming language. Throughout the area of web development it is close to
monopolists. The only other language competing with JavaScript is TypeScript,
but in fact, it is only an extension of JavaScript.

Mobile apps and backend solutions can be developed in JavaScript as well. In
these fields, developers value JavaScript for fast start-up and portability.

When speaking about JavaScript it is especially important to distinguish it from
Java. Actually, they have very little in common, apart from the name.

Most important JavaScript’s attributes could be described in a few short
technical terms, which sounds very mysterious for people without experience in
the IT world. All of those attributes can be explained in a more straightforward
way, using some clever analogies.

![Full size JavaScript logo](/blog/javascript/js.svg)

## JavaScript is interpreted

JavaScript is an interpreted programming language. Sometimes, it is called a
script which is a shorthand for an interpreted programming language. Its name
originates from that fact. By contrast, Java is a compiled programming language.
Compiled is the opposite of interpreted.

Programs written in an interpreted programming language are executed directly
using code written by the developer. A computer cannot understand JavaScript
directly, hence you need an interpreter as an intermediary.

To run JavaScript code you need an interpreter, sometimes called an engine. It
translates your code into simple instructions, which can actually be executed by
the processor. JavaScript engines are embedded into all modern web browsers.
JavaScript programs can be run without a browser using Node interpreter.

Because JavaScript programs cannot be run directly on the CPU, they are slightly
slower in comparison to ones written in compiled programming languages.
Fortunately, the difference is negligible in most day-to-day use cases.
Throughout the area of JavaScript most common applications, the most important
features are: scalability, start-up time and support for asynchronous
programming. Apart from that, if you really need great performance from your
JavaScript application, you can integrate some modules written in faster
language into it.

Last but not least, JavaScript requires the interpreter to be present on the
target platform. It is available on all major kinds of computers and operating
systems, thanks to JavaScript's massive popularity. The requirement is worth
noting, when you consider writing in JavaScript for some niche, less popular
platforms like embedded systems.

![JavaScript code on computer screen](/blog/javascript/code.jpg)

## Summary

JavaScript is one of the most popular modern programming languages. If you have
any contact with the IT world, you will surely stumble upon JavaScript at some
point in time. I believe my guide will help you understand JavaScript
characteristics and how it differs from other programming languages.

If you like this post, check out others in Blues Brackets’ blog and visit our
Facebook or LinkedIn. We post similar articles on the regular basis :}


JavaScript is an immensely popular and rather well thought of general purpose programming language. Throughout the area of web development it is close to monopolists. The only other language competing with JavaScript is TypeScript, but in fact, it is only an extension of JavaScript.

What does it mean 'JavaScript is interpreted'?


IT to specyficzny świat pełen żargonu oraz skomplikowanych technicznych
sformułowań. Dla osób nie znających szczegółów technicznych język programistów
brzmi jak ciąg magicznych zaklęć, a z drugiej strony programistom trudno jest
opisać złożone systemy za pomocą prostych słów. Aby pomóc Ci odnaleźć się w
świecie IT, na blogu przygotowałem dla Ciebie serię wpisów opisujących
najważniejsze cechy najpopularniejszych języków programowania.

## Co to jest JavaScript?

JavaScript to niezwykle popularny i raczej lubiany język programowania ogólnego
zastosowania. W obszarze programowania aplikacji webowych jest praktycznie
monopolistą. Jedynym poważnym konkurentem jest dla niego TypeScript, który
jednak jest tylko rozszerzeniem JavaScriptu.

JavaScript może służyć również do tworzenia aplikacji mobilnych oraz rozwiązań
backend. W tych przypadkach ważne jest jednak, aby odróżnić go od Javy, z którą
ma niewiele wspólnego. Nazwa to ich najważniejsze podobieństwo.

Najistotniejsze cechy JavaScriptu można opisać w kilku krótkich technicznych
sformułowaniach, które brzmią bardzo tajemniczo dla osób, które nie mają
doświadczenia w świecie IT. Wszystkie te cechy da się jednak wyjaśnić w bardziej
przystępny sposób korzystając z kilku prostych analogii.

![Kompletne logo JavaScript](/blog/javascript/js.svg)

## JavaScript jest interpretowany

JavaScript jest interpretowanym językiem programowania. Czasami określa się go
również skryptowym językiem programowania, ale w potocznym języku są to
synonimy. Nazwa JavaScript pochodzi od właśnie od tej cechy języka.
Przeciwieństwem interpretowanych języków programowania są języki kompilowane np.
Java.

Programy napisane w interpretowanym języku programowania są wykonywane
bezpośrednio z kodu, który pisze programista. Ponieważ procesor komputera nie
rozumie języka JavaScript bezpośrednio, do uruchomienia programu konieczny jest
jeszcze interpreter.

Do uruchomienia programu napisanego w JavaScript konieczny jest interpreter,
zwany również silnikiem, który na bieżąco tłumaczy kod na operacje, który ma
wykonać procesor. Interpretery są wbudowane we wszystkie nowoczesne przeglądarki
internetowe. Programy napisane w JavaScript możemy również uruchomić za pomocą
interpretera Node, bez przeglądarki internetowej.

Z powodu konieczności użycia interpretera, programy napisane w JavaScript są
wolniejsze niż programy napisane w kompilowanych językach. Na szczęście ta
różnica jest bez znaczenia w większości codziennych zastosowań. W obszarach, w
których JavaScript jest najczęściej wykorzystywany ważniejsze są: szybkość
uruchomienia programu oraz skalowalność. Oprócz tego istnieją narzędzia, które
pozwalają zintegrować z programem napisanym w JavaScript moduły napisane w innym
języku programowania, w miejscach wymagających największej wydajności.

Ponadto JavaScript wymaga, żeby na komputerze, na którym docelowo chcemy
uruchomić program, był dostępny interpreter. Ze względu na ogromną popularność
JavaScriptu, interpreter jest dostępny na wszystkie liczące się rodzaje
komputerów oraz systemy operacyjne. Warto jednak pamiętać o tym wymaganiu,
decydując się na pisanie oprogramowania w JavaScripcie na niszowe platformy,
takie jak systemy wbudowane.

![JavaScript code on computer screen](/blog/javascript/code.jpg)

## Podsumowanie

JavaScript to jeden z najbardziej popularnych współczesnych języków
programowania. Jeżeli masz styczność ze światem IT, prędzej lub później na pewno
zetkniesz się z JavaScriptem. Mam nadzieję, że mój przewodnik pomoże Ci
zrozumieć czym charakteryzuje się JavaScript i co go odróżnia od innych języków
programowania.

Jeżeli podobał Ci się ten wpis, sprawdź inne w zakładce blog oraz zajrzyj na
Facebooka i LinkedIn bluesBrackets, gdzie regularnie publikujemy artykuły takie
jak ten :}


JavaScript to niezwykle popularny i raczej lubiany język programowania ogólnego zastosowania. W obszarze programowania aplikacji webowych jest praktycznie monopolistą. Jedynym poważnym konkurentem jest dla niego TypeScript, który jednak jest tylko rozszerzeniem JavaScriptu.

Co to znaczy, że JavaScript jest interpretowany?


Recently, we decided it was time to redo our own webpage to make it more modern
and compelling. We used this opportunity to showcase some of the latest tools
and technologies we like to use for projects like this. In the ever-evolving
landscape of web development, it is crucial to stay up to date with the latest
developments, but it's also important to know which of them are worth using. We
believe that **the most important metrics are efficiency, development costs, and
time to market**. Here are five of the most interesting modern web technologies
that we used for this project.

## 1. CSS Houdini API

The **CSS Houdini API** is opening completely new ways to approach animations
and styling in web development. Houdini opens the "black box" of CSS, allowing
developers to directly interact with the browser’s rendering engine. This means
that **effects previously deemed too complex or performance-intensive to
implement can now be created** directly with CSS—eliminating the need for
JavaScript workarounds.

For example, with Houdini, we can animate backgrounds, such as gradient shifts,
entirely in CSS, which **reduces code complexity and boosts page performance**.
Not only does this result in smoother animations, but it also **improves load
times and SEO** compared to traditional workarounds like pre-rendered videos.
**Modern browsers already support many Houdini features**, making it **ready for
production today**. The possibilities for creative, lightweight visual effects
are endless!

Below is a simple example of how Houdini can be used to create a custom
background animation:

<HoudiniDemo />

## 2. Dynamic Graphics with React and SVG

**SVG** (_Scalable Vector Graphics_) combined with React is a powerful way to
create dynamic, responsive visuals on your website. SVGs are vector-based, which
means they **scale perfectly at any size** without losing quality—unlike raster
formats like PNG or JPEG.

When paired with React, SVG elements can be **programmatically generated** and
made **interactive**, responding to users' device dimensions and user actions
like clicks and scrolls. This approach allows developers to build reusable,
animated components that remain **lightweight and optimized for performance**.
Using server-side rendering (SSR) in React further enhances the performance,
ensuring a seamless user experience across devices.

Here's an example of a simple SVG component created with React:

<SVGDemo />

## 3. MDX: Flexibility for Content Management

**MDX** is a unique format that merges Markdown with JSX, striking a balance
between traditional content management systems (CMS) and completely code-driven
content creation. MDX **allows non-technical users to write content** using
simple Markdown while **giving developers the power to extend its capabilities**
with dynamic, interactive components.

By using MDX, we can create **content that goes beyond static text**,
incorporating custom elements like **charts, widgets, and code blocks**. It also
**integrates seamlessly with CMS** workflows, offering the best of both
worlds—easy content management with the flexibility of custom components. It's
an efficient way to **keep content engaging** while reducing the complexity of
the editing process.

Actually, this blog post is written in MDX, showcasing the flexibility and power
of this format. Here's an example of how the previous section of this article
looks in MDX:

```md
## 2. Dynamic Graphics with React and SVG

**SVG** (_Scalable Vector Graphics_) combined with React is a powerful way to
create dynamic, responsive visuals on your website. SVGs are vector-based, which
means they **scale perfectly at any size** without losing quality—unlike raster
formats like PNG or JPEG.

When paired with React, SVG elements can be **programmatically generated** and
made **interactive**, responding to users' device dimensions and user actions
like clicks and scrolls. This approach allows developers to build reusable,
animated components that remain **lightweight and optimized for performance**.
Using server-side rendering (SSR) in React further enhances the performance,
ensuring a seamless user experience across devices.

Here's an example of a simple SVG component created with React:

<SVGDemo />
```

## 4. Server-Side Rendering with Next.js

**Server-Side Rendering** (SSR) is a technique that pre-renders web pages on the
server before sending them to the client. Unlike traditional SPAs (Single Page
Applications), where content is rendered in the browser, SSR delivers content
directly from the server, resulting in **faster initial load times and improved
SEO**.

Using Next.js for SSR brings additional benefits like **automatic image
optimization**, prefetching, and efficient server-side caching. It combines the
**best of traditional static websites with the interactivity of SPAs**,
providing a fast, SEO-friendly experience with **seamless navigation** and user
interaction. Whether it's an e-commerce site or a marketing page, SSR can
significantly enhance your web experience.

![Great Largest Contentful Paint score](/blog/modern_web_tech/lcp.png)

**LCP** (_Largest Contentful Paint_) is a key metric for measuring page load
performance. It represents the time it takes for the largest content element to
be rendered on the screen. The LCP score for this page is ~100ms, which is
considered excellent and is a result of using Next.js for server-side rendering.
This ensures that the page loads quickly and provides a smooth user experience.

## 5. tRPC: Faster API Development with Fewer Bugs

API development has long been dominated by REST, but tRPC is a step forward,
eliminating boilerplate and providing seamless type safety between server and
client. With tRPC, there’s no need to create repetitive endpoints or
serializers—changes made on the server are automatically reflected on the
client, **saving time and reducing errors**.

tRPC's type safety ensures that types are shared across the entire codebase,
minimizing the chances of bugs and keeping your application in sync. Even if
you're currently using REST, tRPC can complement existing environments without
compatibility issues, making it an **excellent option for projects looking to
increase efficiency**.

## Podsumowanie

These five technologies are reshaping the web development landscape by reducing
complexity, enhancing performance, and improving the overall user experience.
Whether you're interested in cutting-edge animations with Houdini, dynamic
graphics with SVG and React, or streamlining your API development with tRPC,
these tools can take your next project to the next level.


Here are five of the most interesting modern web technologies that we find useful for web development projects. We used them to create our own webpage, and we are very happy with the results.

5 Modern Web Technologies For Efficient Development


Niedawno odnawialiśmy naszą stronę internetową, aby była bardziej atrakcyjna i
nowoczesna. Wykorzystaliśmy tę okazję, aby zaprezentować niektóre z najnowszych
narzędzi i technologii, których często używamy w takich projektach. W świecie
IT, gdzie technologia zmienia się z tygodnia na tydzień kluczowe jest, aby być
na bieżąco z nowinkami, ale równie ważne jest, aby wiedzieć, które z nich warto
stosować. Uważamy, że **najważniejszymi metrykami są efektywność, koszty rozwoju
oraz czas wprowadzenia produktu na rynek**. Oto pięć najciekawszych nowoczesnych
technologii webowych, których użyliśmy na naszej nowej stronie internetowej.

## 1. CSS Houdini API

**CSS Houdini API** otwiera zupełnie nowe sposoby podejścia do animacji i styli
w aplikacjach webowych. Houdini otwiera "czarną skrzynkę" CSS, umożliwiając
deweloperom bezpośrednią interakcję z silnikiem renderowania przeglądarki.
Oznacza to, że **efekty wcześniej uznawane za zbyt skomplikowane lub zbyt
kosztowne wydajnościowo są teraz możliwe do implementacji** bezpośrednio za
pomocą CSS — eliminując potrzebę obejść z wykorzystaniem JavaScriptu.

Na przykład, dzięki Houdini możliwe są animacje tła, takie jak przesunięcia
gradientów, używając jedynie CSS, co **redukuje złożoność kodu i zwiększa
wydajność strony**. Rezultatem są płynniejsze animacje, ale także **poprawa
czasu ładowania i SEO** w porównaniu do tradycyjnych sposobów implementacji,
takich jak wstępnie renderowane pliki video. **Nowoczesne przeglądarki już teraz
wspierają wiele funkcji Houdini API**, co sprawia, że jest to technologia
**gotowa do zastosowania na produkcji już dziś**.

Poniżej znajduje się prosty przykład użycia Houdini API do stworzenia
niestandardowej animacji tła:

<HoudiniDemo />

## 2. Dynamiczna grafika z React i SVG

**SVG** (_Scalable Vector Graphics_) w połączeniu z React to sprytne narzędzie
do tworzenia dynamicznych, responsywnych wizualizacji na Twojej stronie
internetowej. SVG to format grafiki wektorowej, co oznacza, że **skaluje się
idealnie do każdego rozmiaru i rozdzielczości** ekranu bez utraty jakości — w
przeciwieństwie do formatów rastrowych, takich jak PNG czy JPEG.

W połączeniu z React elementy SVG mogą być **generowane za pomocą kodu**,
parametryzowane i **interaktywne**, reagując na wymiary ekranu urządzeń
użytkowników końcowych oraz akcje, takie jak kliknięcia i przewijanie. To
podejście pozwala deweloperom tworzyć wielokrotnego użytku, animowane
komponenty, które pozostają **lekkie i zoptymalizowane pod kątem wydajności**.
Użycie renderowania po stronie serwera (SSR) w połączeniu z React dodatkowo
zwiększa wydajność, zapewniając płynne doświadczenie użytkownika na różnych
urządzeniach.

Oto przykład prostego komponentu SVG stworzonego z React:

<SVGDemo />

## 3. MDX: Elastyczność w zarządzaniu treścią

**MDX** to unikalny format, który łączy Markdown z JSX, zapewniając równowagę
między tradycyjnymi systemami zarządzania treścią (CMS) a całkowicie opartym na
kodzie tworzeniem treści. MDX **pozwala użytkownikom nietechnicznym pisać
treści** za pomocą prostego formatu, jednocześnie **dając deweloperom możliwość
rozszerzenia jego możliwości** za pomocą dynamicznych, interaktywnych
komponentów.

Korzystając z MDX, możemy tworzyć **treści, które składają się nie tylko ze
statycznego tekstu**, włączając w to niestandardowe elementy, takie jak
**wykresy, widżety i bloki kodu**. MDX **świetnie integruje się płynnie z
systemami CMS**, oferując najlepsze z obu światów — łatwe zarządzanie treścią i
elastyczność niestandardowych komponentów. To efektywny sposób na **ciekawą i
bogatą w efekty ** treść, jednocześnie zmniejszając złożoność procesu edycji.

Co ciekawe artykuł który czytasz jest napisany w MDX i jest demonstracją
możliwości tego formatu. Oto przykład, jak wygląda poprzednia sekcja tego
artykułu w MDX:

```md
## 2. Dynamiczna grafika z React i SVG

**SVG** (_Scalable Vector Graphics_) w połączeniu z React to sprytne narzędzie
do tworzenia dynamicznych, responsywnych wizualizacji na Twojej stronie
internetowej. SVG to format grafiki wektorowej, co oznacza, że **skaluje się
idealnie do każdego rozmiaru i rozdzielczości** ekranu bez utraty jakości — w
przeciwieństwie do formatów rastrowych, takich jak PNG czy JPEG.

W połączeniu z React elementy SVG mogą być **generowane za pomocą kodu**,
parametryzowane i **interaktywne**, reagując na wymiary ekranu urządzeń
użytkowników końcowych oraz akcje, takie jak kliknięcia i przewijanie. To
podejście pozwala deweloperom tworzyć wielokrotnego użytku, animowane
komponenty, które pozostają **lekkie i zoptymalizowane pod kątem wydajności**.
Użycie renderowania po stronie serwera (SSR) w połączeniu z React dodatkowo
zwiększa wydajność, zapewniając płynne doświadczenie użytkownika na różnych
urządzeniach.

Oto przykład prostego komponentu SVG stworzonego z React:

<SVGDemo />
```

## 4. Renderowanie po stronie serwera (SSR) z Next.js

**Renderowanie po stronie serwera** (SSR) to technika, która wstępnie renderuje
strony internetowe na serwerze, zanim zostaną wysłane do klienta. W
przeciwieństwie do tradycyjnych SPA (Single Page Applications), gdzie treść jest
renderowana w przeglądarce, SSR dostarcza treść bezpośrednio z serwera, co
skutkuje **szybszym czasem początkowego ładowania i lepszym SEO**.

Korzystanie z Next.js do implementacji SSR przynosi dodatkowe korzyści, takie
jak **automatyczna optymalizacja obrazów**, prefetching i efektywne buforowanie
po stronie serwera. W ten sposób łączymy **najlepsze cechy tradycyjnych
statycznych stron z interaktywnością nowoczesnych SPA**, zapewniając szybkie,
przyjazne dla SEO doświadczenie z **płynną nawigacją** i interakcją użytkownika.
Niezależnie od tego, czy budujemy to stronę e-commerce, landingpage, czy
skomplikowaną aplikację webową, SSR może znacznie poprawić wrażenia z
użytkowania usługi.

![Świetny wynik Largest Contentful Paint](/blog/modern_web_tech/lcp.png)

**LCP** (_Largest Contentful Paint_) to kluczowa metryka do pomiaru wydajności
ładowania strony. Reprezentuje czas potrzebny na wyrenderowanie największego
elementu treści na ekranie. Wynik LCP dla tej strony to około 100 ms, co jest
uważane bardzo dobrym wynikiem. Tak dobry rezultat to zasługo renderowania po
stronie serwera w Next.js. Dzięki temu strona ładuje się szybko i zapewnia
płynne doświadczenie użytkownika.

## 5. tRPC: Szybszy rozwój API z mniejszą liczbą błędów

Rozwój API od dawna zdominowany jest przez REST. tRPC to nowa technologia,
eliminująca zbędny kod i zapewniająca bezpieczeństwo typów pomiędzy aplikacją
serwerową a kliencką. Dzięki tRPC nie ma potrzeby tworzenia powtarzających się
endpointów czy parserów — zmiany wprowadzone na serwerze są automatycznie
odzwierciedlane na po stronie aplikacji klienckiej, **oszczędzając czas
programisty i redukując ilość błędów**.

tRPC zapewnia bezpieczeństwo typów, co oznacza, że typy są współdzielone w całej
bazie kodu, minimalizując ryzyko błędów i utrzymując spójność. tRPC jest
rozszerzeniem sprawdzonego podejścia REST, dzięki czemu działa wszędzie tam,
gdzie działa REST, bez ryzyka problemów z kompatybilnością. Co więcej możliwe
jest stopniowe przejście z REST na tRPC.

## Podsumowanie

Wierzymy, że nowoczesne technologie mogą znacznie przyspieszyć rozwój aplikacji
webowych, jednocześnie zapewniając lepszą funkcjonalność i wydajność. Śledzenie
nowości w świecie IT jest kluczowe, ale równie ważne jest umiejętne wybieranie
technologii, które najlepiej pasują do potrzeb klienta.


Oto pięć najciekawszych nowoczesnych technologii webowych, które świetnie pasują do nowoczesnych aplikacji webowych. Użyliśmy ich do stworzenia naszej własnej strony i jesteśmy bardzo zadowoleni z wyników.

5 nowoczesnych technologii webowych zorientowanych na szybki development


## Software Updates

Modern embedded solutions, ranging from IoT trackers to advanced industrial
embedded systems, increasingly rely on software. Introducing features that
enable users to update software after a device has been manufactured has become
a standard practice, delivering **significant business and technological
benefits**. For manufacturers of new embedded devices, implementing effective
update mechanisms can be a decisive factor in gaining a competitive edge.

### Fixing Issues Without a Service Visit

**The ability to remotely fix software issues significantly reduces the risk of
delivering a device with a software bug to the customer**. This eliminates the
need for service campaigns or sending a technician to the customer, dramatically
reducing technical support costs and enhancing user satisfaction.

For instance, many modern devices are shipped with a mobile app that performs a
software update during the device's first use after unboxing, a process known as
provisioning. As a result, **the user receives a fully functional device with
all known issues already resolved**, even if the device was manufactured months
before its first use.

### Adding New Features and Quickly Adopting New Versions

Remote updates **enable the introduction of new features to devices that have
already been manufactured and sold**, which can attract new customers or
increase the satisfaction of existing users. It also presents **an excellent
opportunity to offer paid updates, creating an additional revenue stream**.

Moreover, an easy, fast, and user-friendly update process encourages users to
adopt the latest version. New features and improvements to existing
functionalities further motivate users to update their devices themselves. As a
result, **a larger portion of devices operate on the latest, most refined
version, reducing the costs of supporting and maintaining older versions**.

### Starting Production Before Finalizing Development

Thanks to the ability to perform automatic remote updates or user-initiated
updates, it is possible to **initiate device production without completing the
final version of the software**. The software only needs to be developed enough
to allow for an update to the desired version before the device's first use by
the customer.

The production and distribution process for devices often takes several months,
and in a traditional approach, these two steps must occur sequentially.
Leveraging the capability to update devices after production allows the entire
process to be parallelized. **The time saved can be used to reduce the product's
time-to-market or to develop additional functionalities**.

## Updates in the Embedded World

The traditional approach to uploading software to a microcontroller's memory
involves using a dedicated programmer. This method is primarily used during
production and development stages. An additional advantage of this approach is
the ability to repair a device with damaged memory, commonly referred to as
"bricked."

However, due to the need for specialized equipment, this method is not practical
when the operator is the end-user. For this reason, more accessible alternatives
are typically used in practice.

### Wired Update

One of the simplest solutions is a wired update, which typically allows the
process to be performed via a serial port or USB port. This enables **users to
carry out the operation using their own equipment**. Occasionally, solutions
using USB storage devices, such as flash drives, are also employed.

The advantage of this approach is its **low additional implementation cost**,
especially in cases where the device lacks other communication interfaces that
could be used for updates. The only tool a user needs to perform the update is a
computer with a USB port.

### Wireless Update

If a device supports wireless connectivity, this communication channel can be
used to perform software updates. This is often the most convenient method for
users.

**For devices equipped with Bluetooth, adding software update functionality to
the accompanying mobile app is an excellent solution.** This approach
significantly enhances the user experience (UX). A manufacturer-controlled app
can **automate the process of downloading the latest software version from
servers and notify users about available updates in a convenient manner.**
Features such as progress bars, estimated time to completion, and marketing
content can further enrich the mobile app.

Devices that connect directly to the internet, for example via WiFi, LTE, LoRa,
or other technologies, enable fully automated updates without user intervention.
**This is an ideal solution for applications operating in hard-to-reach or
remote locations, such as wind farms or weather stations.**

### Advanced scenarios

Some advanced wireless communication protocols support innovative update
procedures for connected devices. One such solution is Bluetooth Mesh, where
devices share new software versions among themselves without the need for a
central hub. This allows the update to reach every node in the network, even
those outside direct range.

The process begins with a notification about the available update, which devices
verify for compatibility and necessity. The firmware is then distributed in
small chunks that traverse the network with the help of intermediary devices.
Once all chunks reach the recipient, the software is reassembled, validated for
integrity, and installed. The greatest advantage of this approach is its
scalability. By leveraging network-wide propagation, **it becomes possible to
update thousands of devices simultaneously** without overloading a single point.

<ContentCard>
### Useful Definitions

**DFU (Device Firmware Update)** - The process of updating a device's firmware,
typically performed with the help of a bootloader. It allows installing new
software without reprogramming the device from scratch.

**OTA (Over-the-Air)** - Updating a device's software wirelessly, without
requiring a physical connection, using technologies such as WiFi, Bluetooth, or
cellular networks.

**OTAU (Over-the-Air Update)** - An extension of the OTA concept, emphasizing
the full process of software updates, from transmitting the new version to its
installation on the device.

**FOTA (Firmware Over-the-Air)** - A specific type of OTA focused exclusively on
firmware, the core software that controls hardware operation.

</ContentCard>

## DFU in Low-Power IoT Devices

The principle of software updates is similar across all microcontrollers that
support running only bare-metal applications or an RTOS. Examples of such device
families include [Nordic nRF](https://www.nordicsemi.com/),
[STM32](https://www.st.com/en/microcontrollers-microprocessors/stm32-32-bit-arm-cortex-mcus.html),
[ESP32](https://www.espressif.com/en/products/socs/esp32), and others. Due to
the lack of an operating system, the responsibility for executing the update
process directly in the device's memory lies entirely with the programmer.

### Bootloader

A bootloader is essential for performing firmware updates. It is a special
program that runs during the device's startup and then initializes the main
application. The bootloader is a separate application stored in the device's
memory.

Typically, the bootloader cannot be updated, as it becomes immutable once
written to the device by the manufacturer. This immutability allows it to
securely store cryptographic keys. **The bootloader can be used to verify the
digital signature of an application using public-key cryptography.**

A digital signature is used to verify the origin of the application on the
device. To enable updates with a digital signature, the manufacturer generates a
private key, which is used to derive a corresponding public key. During
production, the public key is embedded in the bootloader, while updates are
signed with the private key. **When the device receives an update, the
bootloader can verify its authenticity by checking the signature against the
public key stored on the device.** This security measure is critical to mitigate
the risk of application tampering during the update process.

Additionally, the bootloader can provide other safeguards, such as preventing
the installation of an older version of the software than the one currently
installed on the device.

### Reliability

An unexpected interruption during the update process or accidentally uploading
an incorrect application image can render the device inoperable, preventing it
from receiving another image. To ensure the reliability of the process and
enable firmware updates while the application is running, the device's memory is
divided into slots that store both the current and the new application images.
**If, after downloading, the application image is found to have an invalid
signature, is corrupted, or fails to run, the device can still revert to the
previous image.**

Using a dual-slot mechanism reduces the amount of memory available for the
application on the device by half. If the available memory proves insufficient,
it is possible to use compression for one of the images or dynamically partition
the device's memory. In cases where the microcontroller's entire memory must be
allocated for the application, the new image can be stored in external FLASH
memory.

### Flexibility

Various configurations of the process allow updates to be performed even in
complex scenarios. **It is possible to receive updates for other
microcontrollers through a selected channel via the main microcontroller.** The
images can also be used to update components such as modems or audio codecs and
may include other types of data, such as application translation information.

## Mobile Application

If a device cannot download updates directly from the internet but is equipped
with Bluetooth, it is possible to perform wireless firmware updates using the
manufacturer's mobile application. The app can include various **additional
user-supporting features, such as automatic update downloads and
notifications.** It is also possible to **make the update process conditional on
user payment or account verification.**

Updates can be performed from both Android and Apple devices. Although both
platforms require separate implementations, it is typically unnecessary to
create entirely separate apps for iOS and Android. **A hybrid application can be
developed, allowing most of the code to be shared between platforms.** Examples
of hybrid application technologies include Flutter and React Native.

## Backend

The part of the application that runs on the device manufacturer's server is the
backend. New firmware versions must be made available online. **It is also
possible to collect statistics on the update process for all manufactured
devices.** If user authorization is required for the update, the backend is
responsible for storing user account data and managing payments or billing.

The infrastructure hosting the server application can either be maintained as a
physical server at the manufacturer's premises or on a virtual server with any
cloud service provider. This flexibility allows for **cost-effective maintenance
of a small server or rapid scaling to a full cluster** to handle very high
traffic when necessary.

## CICD

Performing remote software updates requires special attention from the
development team. Deciding to release an update to users involves ensuring that
the update will not degrade the functionality of the target device. It is also
necessary to perform numerous repetitive tasks, such as publishing the new
application image.

**To prevent errors and reduce the costs associated with updates, a Continuous
Integration and Continuous Delivery (CI/CD) system is configured.** A collection
of scripts automating various tasks, automated tests, and proper workflow
organization ensures that the application works correctly after every update and
facilitates frequent releases of new software versions.

## How It Works at bluesBrackets

**We specialize in building mobile and embedded solutions** that cover the
entire range of advanced projects. Through a comprehensive approach and the
integration of the entire technology stack, we’ve expanded the traditional
"full-stack" approach to include embedded solutions. This eliminates time wasted
on communication between teams, ensuring every system component is developed
with consideration for all others.

With us, you can consult on the entire project — from selecting a
microcontroller to deploying the backend on cloud providers like AWS.
Implementation is handled by a cohesive team of specialists focused on
optimizing the process.


Learn how firmware updates work in embedded devices. Discover their types, pros and cons, and how you can leverage them to grow your business.

Remote Updates for Embedded Devices


## Aktualizacje oprogramowania

Współczesne rozwiązania embedded, od trackerów IoT po zaawansowane przemysłowe
systemy wbudowane, w coraz większym stopniu polegają na oprogramowaniu.
Wprowadzenie funkcji umożliwiających aktualizację oprogramowania przez
użytkownika po wyprodukowaniu urządzenia stało się standardem, który przynosi
**ogromne korzyści biznesowe i technologiczne**. Dla producentów nowych urządzeń
embedded wdrożenie odpowiednich mechanizmów aktualizacji może być decydującym
czynnikiem przewagi konkurencyjnej.

### Naprawa błędów bez wizyty w serwisie

**Możliwość zdalnej naprawy oprogramowania znacząco zmniejsza ryzyko związane z
dostarczeniem klientowi urządzenia z błędem w oprogramowaniu**. Eliminuje to
konieczność przeprowadzania akcji serwisowej lub wysyłania serwisanta do
klienta. To znacząco redukuje koszty wsparcia technicznego i zwiększa
satysfakcję użytkowników.

Na przykład wiele nowoczesnych urządzeń jest dostarczanych z aplikacją mobilną,
która przeprowadza aktualizację oprogramowania podczas pierwszego uruchomienia
urządzenia po wyjęciu z pudełka, tak zwanego provisioningu. Dzięki temu
**użytkownik od razu otrzymuje pełnowartościowy sprzęt z usuniętymi wszystkimi
dotychczas znanymi błędami**, pomimo że urządzenie mogło być wyprodukowane wiele
miesięcy przed pierwszym użyciem.

### Dodawanie nowych funkcjonalności oraz szybka adopcja nowych wersji

Zdalne aktualizacje **umożliwiają wprowadzanie nowych funkcjonalności do już
wyprodukowanych i sprzedanych urządzeń**, co może przyciągnąć nowych klientów
lub zwiększyć zadowolenie obecnych użytkowników. To również **doskonała okazja
do sprzedaży płatnych aktualizacji i uzyskania dodatkowego źródła przychodów**.

Dodatkowo, łatwa, szybka i wygodna ścieżka aktualizacji oprogramowania zachęca
użytkowników do korzystania z najnowszej wersji. Nowe funkcjonalności oraz
poprawa jakości istniejących funkcji również przekonują użytkowników do
samodzielnego aktualizowania urządzeń. Dzięki temu **większa część sprzętu
działa na najnowszej, najbardziej dopracowanej wersji, co obniża koszty wsparcia
i utrzymania starszych wersji**.

### Rozpoczęcie produkcji przed zakończeniem developmentu

Dzięki możliwości automatycznej aktualizacji zdalnej lub wykonywanej przez
użytkownika możliwe jest **zlecenie produkcji urządzeń bez konieczności
ukończenia finalnej wersji oprogramowania**. Wystarczy, że oprogramowanie będzie
wystarczająco rozwinięte, aby umożliwić aktualizację do pożądanej wersji przed
pierwszym użyciem przez użytkownika.

Proces produkcji i dystrybucji urządzeń zwykle trwa nawet kilka miesięcy, a w
tradycyjnym podejściu te dwa kroki muszą odbywać się w odpowiedniej kolejności.
Wykorzystanie możliwości przeprowadzenia aktualizacji po wyprodukowaniu
urządzenia pozwala zrównoleglić cały proces. **Zyskany czas można przeznaczyć na
skrócenie czasu wprowadzenia produktu na rynek (time to market) lub na rozwój
dodatkowych funkcjonalności**.

## Aktualizacja w świecie embedded

Klasyczne podejście do wgrywania oprogramowania do pamięci mikrokontrolera
polega na programowaniu z użyciem dedykowanego programatora. Takie rozwiązanie
znajduje zastosowanie głównie na etapie produkcji oraz podczas developmentu.
Zaletą tego podejścia jest również możliwość naprawienia urządzenia z uszkodzoną
pamięcią, czyli tak zwanego "zbrickowanego".

Niestety, ze względu na konieczność użycia specjalistycznego sprzętu, metoda ta
nie jest praktyczna, gdy operatorem ma być sam użytkownik. Dlatego w praktyce
stosuje się inne, bardziej dostępne rozwiązania.

### Aktualizacja przewodowa

Jednym z najprostszych rozwiązań jest aktualizacja przewodowa, która zazwyczaj
umożliwia przeprowadzenie procesu przez port szeregowy lub port USB. Dzięki temu
**użytkownik może wykonać operację z użyciem swojego własnego sprzętu**. Czasami
spotyka się również rozwiązanie wykorzystujące pamięci USB, takie jak pendrive.

Zaletą tego rodzaju rozwiązań jest **niski dodatkowy koszt implementacji**,
szczególnie w sytuacjach, gdy urządzenie nie ma innego interfejsu
komunikacyjnego, który mógłby zostać wykorzystany do aktualizacji. Jedynym
narzędziem, jakiego potrzebuje użytkownik do przeprowadzenia aktualizacji, jest
komputer z gniazdem USB.

### Aktualizacja bezprzewodowa

Jeżeli urządzenie dysponuje łącznością bezprzewodową, można wykorzystać ten
kanał komunikacji do przeprowadzenia aktualizacji oprogramowania. Zwykle jest to
sposób najwygodniejszy dla użytkownika.

**Dla urządzeń wyposażonych w Bluetooth dobrym rozwiązaniem jest dodanie
funkcjonalności aktualizacji oprogramowania do towarzyszącej aplikacji
mobilnej**. Takie podejście daje duże możliwości poprawy doświadczenia
użytkownika (UX). Aplikacja, nad którą kontrolę ma producent urządzenia,
**pozwala zautomatyzować proces pobierania najnowszej wersji oprogramowania z
serwerów oraz umożliwia wygodne powiadamianie użytkownika o dostępności nowej
aktualizacji**. Pasek postępu, szacunkowy czas do zakończenia oraz zawartość
marketingowa to dodatkowe elementy, które mogą wzbogacić aplikację mobilną.

Urządzenia bezpośrednio łączące się z internetem, np. poprzez WiFi, LTE, LoRa i
inne, umożliwiają przeprowadzenie aktualizacji zupełnie automatycznie, bez
udziału użytkownika. **Jest to bardzo dobre rozwiązanie dla aplikacji
działających w trudno dostępnych lub odległych miejscach, takich jak farmy
wiatrowe czy stacje pogodowe**.

### Zaawansowane scenariusze

Niektóre zaawansowane protokoły komunikacji bezprzewodowej umożliwiają
przeprowadzenie bardzo ciekawych procedur aktualizacji urządzeń, które są do
nich podłączone. Jednym z takich rozwiązań jest Bluetooth Mesh, w którym
urządzenia przekazują nową wersję oprogramowania między sobą, bez konieczności
łączenia się z centralnym urządzeniem. Dzięki temu nowe oprogramowanie może
dotrzeć do każdego węzła w sieci, nawet tych znajdujących się poza bezpośrednim
zasięgiem.

Proces zaczyna się od przesłania informacji o dostępnej aktualizacji, którą
urządzenia sprawdzają pod kątem zgodności i potrzeby instalacji. Firmware jest
następnie rozsyłany w małych fragmentach, które przemieszczają się przez całą
sieć dzięki pośrednictwu innych urządzeń. Gdy wszystkie fragmenty dotrą do
odbiorcy, oprogramowanie jest składane w całość, sprawdzane pod kątem
poprawności i instalowane. Największym atutem takiego rozwiązania jest jego
skalowalność. Dzięki propagacji przez całą sieć **możliwe jest zaktualizowanie
tysięcy urządzeń jednocześnie**, bez obciążania jednego punktu.

<ContentCard>
### Przydatne definicje

**DFU (Device Firmware Update)** - Proces aktualizacji firmware'u urządzenia,
który zazwyczaj odbywa się z pomocą bootloadera i umożliwia instalację nowego
oprogramowania bez konieczności programowania urządzenia od podstaw.

**OTA (Over-the-Air)** - Aktualizacja oprogramowania urządzenia przez sieć
bezprzewodową, bez konieczności fizycznego podłączenia, np. przez Wi-Fi,
Bluetooth lub sieci komórkowe.

**OTAU (Over-the-Air Update)** - Rozszerzenie pojęcia OTA, podkreślające, że
chodzi o pełny proces aktualizacji oprogramowania, od przesłania nowej wersji do
instalacji na urządzeniu.

**FOTA (Firmware Over-the-Air)** - Specyficzny rodzaj OTA, dotyczący wyłącznie
firmware'u - podstawowego oprogramowania kontrolującego działanie sprzętu.

</ContentCard>

## DFU w urządzeniach low-power IoT

Zasada działania aktualizacji oprogramowania jest podobna dla wszystkich
mikrokontrolerów, które umożliwiają uruchamianie jedynie aplikacji bare-metal
lub systemu RTOS. Przykładowymi rodzinami takich urządzeń są:
[Nordic nRF](https://www.nordicsemi.com/),
[STM32](https://www.st.com/en/microcontrollers-microprocessors/stm32-32-bit-arm-cortex-mcus.html),
[ESP32](https://www.espressif.com/en/products/socs/esp32) i inne. Ze względu na
brak systemu operacyjnego, odpowiedzialność za przeprowadzenie procesu
bezpośrednio w pamięci urządzenia spoczywa na programiście.

### Bootloader

Do przeprowadzenia aktualizacji firmware'u niezbędny jest bootloader. Jest to
specjalny program, który uruchamia się podczas startu urządzenia, a następnie
inicjuje właściwą aplikację. Bootloader jest osobną aplikacją przechowywaną w
pamięci urządzenia.

Zazwyczaj bootloader nie może zostać zaktualizowany, ponieważ po zapisaniu na
urządzeniu przez producenta staje się niezmienialny. Dzięki tej właściwości
można w nim bezpiecznie przechowywać klucze kryptograficzne. **Bootloader może
być wykorzystywany do weryfikacji podpisu cyfrowego aplikacji za pomocą
kryptografii klucza publicznego**.

Podpis cyfrowy służy do weryfikacji pochodzenia aplikacji na urządzeniu. Aby
umożliwić aktualizację z podpisem cyfrowym, producent generuje klucz prywatny, z
którego powstaje powiązany klucz publiczny. Podczas produkcji klucz publiczny
jest wgrywany do bootloadera, natomiast aktualizacje są podpisywane kluczem
prywatnym. **Gdy urządzenie otrzyma aktualizację, bootloader może zweryfikować
jej autentyczność, sprawdzając zgodność podpisu z kluczem publicznym zapisanym w
urządzeniu**. Takie zabezpieczenie jest kluczowe ze względu na ryzyko podmiany
aplikacji podczas procesu aktualizacji.

<ContentCard>
### Dodatkowe zabezpieczenia

Bootloader może oferować również inne zabezpieczenia, np. uniemożliwiać
uruchomienie starszej wersji oprogramowania niż obecnie zainstalowana na
urządzeniu.

</ContentCard>

### Niezawodność

W przypadku nieplanowanego przerwania aktualizacji podczas jej trwania lub
omyłkowego wgrania nieprawidłowego obrazu aplikacji, może dojść do zablokowania
urządzenia, uniemożliwiając odbiór kolejnego obrazu. Aby zapewnić niezawodność
procesu oraz umożliwić pobieranie aktualizacji firmware'u podczas działania
aplikacji, pamięć urządzenia jest dzielona na sloty, w których przechowywane są
aktualny i nowy obraz aplikacji. **Jeżeli po pobraniu aplikacji okaże się, że
podpis jest nieprawidłowy, obraz jest uszkodzony lub aplikacja nie uruchamia
się, wciąż możliwy jest powrót do poprzedniego obrazu**.

Zastosowanie mechanizmu z dwoma slotami powoduje, że ilość pamięci dostępnej na
aplikację w urządzeniu spada o połowę. Jeśli okaże się, że ilość dostępnej
pamięci jest zbyt mała, możliwe jest zastosowanie kompresji jednego z obrazów
lub dynamicznego partycjonowania pamięci urządzenia. W przypadku, gdy cała
pamięć mikrokontrolera musi zostać wykorzystana na aplikację, możliwe jest
również przechowywanie nowego obrazu w zewnętrznej pamięci FLASH.

### Elastyczność

Różne konfiguracje procesu umożliwiają przeprowadzenie aktualizacji w
skomplikowanych przypadkach. **Możliwe jest odebranie aktualizacji dla innych
mikrokontrolerów poprzez wybrany kanał** za pośrednictwem głównego
mikrokontrolera. Obrazy mogą być również wykorzystywane do aktualizacji modemu
lub kodeka audio, a także mogą zawierać inne dane, np. informacje dotyczące
tłumaczenia aplikacji.

## Aplikacja mobilna

Jeżeli urządzenie nie ma możliwości pobrania aktualizacji bezpośrednio z
internetu, ale jest wyposażone w Bluetooth, możliwe jest przeprowadzenie
bezprzewodowej aktualizacji firmware'u za pomocą aplikacji mobilnej producenta
urządzenia. W aplikacji mogą zostać zaimplementowane różne **dodatkowe
funkcjonalności wspomagające użytkownika, takie jak automatyczne pobieranie
aktualizacji i powiadomienia**. Możliwe jest również **uzależnienie możliwości
aktualizacji od rozliczenia z użytkownikiem**.

Aktualizacja jest możliwa zarówno z urządzeń z Androidem, jak i ze sprzętu
Apple. Pomimo że obie platformy wymagają osobnej implementacji, zazwyczaj nie
jest konieczne tworzenie osobnych aplikacji na iOS i Androida. **Możliwe jest
stworzenie aplikacji hybrydowej, w której większość kodu będzie współdzielona
między platformami**. Przykładami technologii aplikacji hybrydowych są Flutter i
React Native.

## Backend

Część aplikacji, która działa na serwerze producenta urządzenia to backend.
Kolejne wersje oprogramowania muszą być udostępniane online. **Możliwe jest
również zbieranie statystyk dotyczących procesu aktualizacji wszystkich
wyprodukowanych urządzeń**. Jeżeli do przeprowadzenia aktualizacji niezbędna
jest autoryzacja użytkownika, backend odpowiada również za przechowywanie danych
kont użytkowników oraz rozliczenia.

Infrastruktura, na której działa aplikacja serwerowa, może być utrzymywana jako
fizyczny serwer w siedzibie producenta lub na wirtualnym serwerze u dowolnego
dostawcy usług chmurowych. Oznacza to, że w zależności od potrzeb **możliwe jest
tanie utrzymywanie niewielkiego serwera lub szybkie skalowanie rozwiązania do
całego klastra** w przypadku konieczności obsługi bardzo dużego ruchu.

## CICD

Wykonywanie zdalnych aktualizacji oprogramowania wymaga szczególnej uwagi od
zespołu developerskiego. Podjęcie decyzji o wysłaniu aktualizacji do użytkownika
wiąże się z koniecznością przetestowania, czy aktualizacja nie pogorszy
działania docelowego urządzenia. Niezbędne jest również przeprowadzenie wielu
innych powtarzalnych czynności, takich jak udostępnienie nowego obrazu
aplikacji.

**Aby zapobiec błędom i obniżyć koszty przeprowadzania aktualizacji,
konfigurujemy system Continuous Integration i Continuous Delivery (CI/CD)**.
Zbiór skryptów automatyzujących różne zadania, testy automatyczne oraz
odpowiednia organizacja pracy zapewniają, że aplikacja działa poprawnie po
każdej aktualizacji i umożliwiają częste wydawanie kolejnych wersji
oprogramowania.

## Jak to wygląda w bluesBrackets?

**Specjalizujemy się w budowaniu rozwiązań mobilnych i embedded**, które
pokrywają cały zakres zaawanasowanych projektów. Dzięki kompleksowemu podejściu
i opracowaniu całego stosu technologicznego do standardowego podejścia
"fullstack" udało nam się dopisać rozwiązania embedded. Nie tracimy czasu na
komunikację pomiędzy zespołami, a każdy element systemu powstaje z uzględnieniem
wszystkich innych.

Z nami skonsultujesz cały projekt od wyboru mikrokontrolera do wdrożenia
backendu u dostawcy rozwiązań chmurowych typu AWS, a implementacją będzie
zajmował się zgrany zespół specjalistów nastawiony na optymalizację procesu.


Dowiedz się, jak działają aktualizacje firmware'u w urządzeniach embedded. Poznaj ich rodzaje, wady i zalety oraz sposoby, w jakie możesz je wykorzystać do rozwoju swojego biznesu.

Zdalne aktualizacje urządzeń embedded


IT is a characteristic world full of jargon and complicated technical terms. For
people not aware of advanced details developers language sounds like a never
ending stream of magic spells. On the other hand, developers find it hard to
describe complex systems using simple words. To help you find yourself in the
overwhelming world of IT I created a series of posts addressing the most
important attributes of most significant programming languages.

## What is Python?

Python is a modern and popular general purpose programming language. It is one
of the most popular programming languages. It was designed with clarity and
readability in mind. Python’s name was inspired by Monty Python’s Flying Circus.

Most important Python’s attributes could be described in a few short technical
terms, which sounds very mysterious for people without experience in the IT
world. All of those attributes can be explained in a more straightforward way
using some clever analogies.

![Full size python logo](/blog/python/python.svg)

## Python is high-level

Python is a high-level programming language. What does it mean? Developers
distinguish high- and low-level programming languages to describe how well they
abstract computers’ internal details for them.

To put it simply, the more high-level the language is, the less things there are
for developers to care about. In exchange they can put their effort into
implementation of the business logic, which is what customers pay for in the
end.

An interesting analogy to high- and low-level programming languages are cars
with manual and automatic gearboxes. Manual box is more low-level than automatic
in a sense the driver has to drive cars’ mechanisms in a much more direct way.
He has to be more aware of how the car internally works too. Usually it means a
person able to drive manuals can drive automatic with very little adaptation.

Python offers a number of tools, which are not derived directly from a
computers’ principle of operation. Automatic memory management and lambda
functions are examples of such features. I will be writing about them in future
posts.

Rust, C and Assembler, among others, are examples of low-level languages. They
require more skill and better familiarity with computers’ principle of operation
and particular platform specificity from the developer. That is why low-level
programming languages are considered hard.

![JavaScript code on computer screen](/blog/python/code.jpg)

## Summary

Python is one of the most popular modern programming languages. If you have any
contact with the IT world, you will stumble upon Python at some point in time. I
believe my guide will help you understand Python’s characteristics and how it
differs from other programming languages.

If you like this post, check out others in Blues Brackets’ blog and visit our
Facebook and LinkedIn. We post similar articles on the regular basis :}


Python is a modern and popular general purpose programming language. It is one of the most popular programming languages. It was designed with clarity and readability in mind. Python’s name was inspired by Monty Python’s Flying Circus.

What does it mean 'Python is high-level'?


IT to specyficzny świat pełen żargonu oraz skomplikowanych technicznych
sformułowań. Dla osób nie znających szczegółów technicznych język programistów
brzmi jak ciąg magicznych zaklęć, a z drugiej strony programistom trudno jest
opisać złożone systemy za pomocą prostych słów. Aby pomóc Ci odnaleźć się w
świecie IT na blogu przygotowałem dla Ciebie serię wpisów opisujących
najważniejsze cechy najpopularniejszych języków programowania.

## Czym jest Python?

Python to nowoczesny i lubiany język programowania ogólnego zastosowania. Jest
jednym z najbardziej popularnych języków programowania. Został zaprojektowany z
myślą o dużej czytelności kodu. Nazwa Python jest nawiązaniem do Latającego
Cyrku Monty Pythona.

Najważniejsze cechy Pythona można opisać w kilku krótkich technicznych
sformułowaniach, które brzmią bardzo tajemniczo dla osób, które nie mają
doświadczenia w świecie IT. Wszystkie te cechy da się jednak wyjaśnić w bardziej
przystępny sposób korzystając z kilku prostych analogii.

![Kompletne logo Python](/blog/python/python.svg)

## Python jest wysokopoziomowy

Python jest wysokopoziomowym językiem programowania. Co to oznacza? Programiści
rozróżniają wysoko- i niskopoziomowe języki programowania opisując to, jak
bardzo ukrywają one przed nimi detale działania komputera.

W największym uproszczeniu im bardziej wysokopoziomowy jest język tym mniej jest
rzeczy którymi musi przejmować się programista. W zamian może on poświęcić swój
czas na implementację logiki biznesowej, czyli tego czego od oprogramowania
wymaga klient.

Ciekawą analogią do nisko- i wysokopoziomowego języka programowania jest
samochód z manualną i automatyczną skrzynią biegów. Manualna skrzynia jest
bardziej niskopoziomowa niż automatyczna, ponieważ sprawia, że kierowca musi
bardziej bezpośrednio sterować mechanizmami samochodu. Zwykle oznacza to też, że
osobie która potrafi prowadzić samochód z manualną skrzynią łatwiej jest
przestawić się na automatyczną, niż odwrotnie.

Python oferuje wiele narzędzi, które nie wynikają bezpośrednio z zasady
działania komputera. Przykładem takich funkcjonalności są między innymi
automatyczne zarządzanie pamięcią oraz funkcje lambda, o których przeczytasz w
kolejnych wpisach.

W odróżnieniu od Pythona mniej wysokopoziomowymi językami są na przykład Rust, C
lub Assembler. Wymagają one od programisty dobrego zrozumienia zasady działania
komputera oraz konkretnej platformy na które powstaje oprogramowanie. Z tego
powodu niskopoziomowe języki są uważane za trudne.

![JavaScript code on computer screen](/blog/python/code.jpg)

## Podsumowanie

Python to jeden z najbardziej popularnych nowoczesnych języków programowania.
Jeżeli masz styczność ze światem IT, prędzej lub później na pewno zetkniesz się
z Pythonem. Mam nadzieję, że mój przewodnik pomoże Ci zrozumieć czym
charakteryzuje się Python i co go odróżnia od innych języków programowania.

Jeżeli podobał Ci się ten wpis sprawdź inne w zakładce blog oraz zajrzyj na
Facebooka oraz LinkedIn Blues Brackets gdzie regularnie publikujemy artykuły
takie jak ten :}


Python to nowoczesny i lubiany język programowania ogólnego zastosowania. Jest jednym z najbardziej popularnych języków programowania. Został zaprojektowany z myślą o dużej czytelności kodu. Nazwa Python jest nawiązaniem do Latającego Cyrku Monty Pythona.

Co to znaczy, że Python jest wysokopoziomowy?


## Modern Software in Automotive

Research shows that modern infotainment systems and the integration of mobile
applications with embedded systems in contemporary cars play a significant role
in the sale of new vehicles. According to
[one report](https://www.mckinsey.com/industries/automotive-and-assembly/our-insights/car-connectivity-what-consumers-want-and-are-willing-to-pay),
as many as **90% of vehicles sold in 2030 will be connected to the internet**,
and **40% of customers would consider purchasing a car from a different brand if
it offers better IT solutions**.

However, customer satisfaction is not the only reason why car manufacturers
decide to introduce modern IT systems. Post-sale benefits for manufacturers, who
can stay in touch with the customer by offering new services and products, also
play a role. Additionally, manufacturers can remotely update the software in the
car and monitor its technical condition and usage. According to
[researchers from ABI Research](https://ieee-denver.org/wp-content/uploads/sites/23/2021/10/ABI_Research_The_Future_of_Automotive_Connectivity.pdf),
**the market for remote software update services in cars has the potential to
reach over 20 billion dollars by 2030**.

## The Camper Market in the Context of Modern IT Solutions

Similar to passenger cars, the camper market is also benefiting from modern IT
solutions. Contemporary campers are equipped with infotainment systems, air
conditioning, heating, and safety systems, which are usually integrated only
with functions provided by the chassis manufacturer. Camper bodies consist of
many different devices that require monitoring and control:

- **White, gray, and black water tanks**: These require level monitoring to
  avoid unexpected depletion. Additionally, water tanks have valves that can be
  electrically controlled.
- **Gas bottles**: These require monitoring of supply levels and valve control
  to prevent leaks.
- **Refrigerators**: These need temperature control based on weather conditions
  and power supply, as well as the ability to notify if the door is left open.
- **Heating**: This requires temperature control and fuel level monitoring.
  Additionally, the heating system can be integrated with the air conditioning
  system. A mobile app can allow remote control of heating before returning to
  the camper.
- **Movable elements**: Such as awnings, stairs, etc., require control for
  extending and retracting.
- **Hotel batteries**: These require charge level monitoring and management of
  parking power. Additionally, batteries can be charged using photovoltaic
  panels, and their power can be displayed in the app.

![Warn camper interior with tablet acting as control panel](/blog/smart_camper/interior_1.png)

Campers, campervans, and caravans share many similarities with another market of
advanced IT solutions - smart homes. In both cases, we are dealing with a living
space equipped with many electronic devices that can be integrated and
controlled via a single system. Such integration allows for **increased user
comfort and the addition of entirely new functions** that would not be possible
with separate systems.

Currently, there are not many solutions on the market that offer full
integration of electronic systems in campers. Usually, such solutions are
offered only by the largest manufacturers who closely cooperate with chassis
manufacturers. An example of a vehicle with such solutions is the Volkswagen
California, which offers control of all body functions via a single factory
system. Smaller companies that build campers usually do not have the capability
to offer such solutions.

## Benefits for Manufacturers and Users

### Usage Statistics

Smart systems can collect data on vehicle usage, such as the frequency of using
individual functions, the ratio of driving time to the use of body functions,
the state of water or gas tanks, and more. This **allows the manufacturer to
better understand the user's needs** and tailor the offer to actual needs based
on data.

### Cost Reduction

Integrating electronic systems in a camper allows for replacing many physical
devices with a single system that can control all body functions. This means
**the manufacturer does not have to design and produce many individual
devices**, significantly reducing project and production costs. Moreover, the
manufacturer can transfer the control of some functions to a mobile application,
completely eliminating physical control units.

### Predictive Maintenance and Repairs

Modern IT systems allow for monitoring the technical condition of the vehicle
and service intervals. This enables **the manufacturer to predict when a
component requires service or replacement**, allowing for planned maintenance in
advance. Additionally, the manufacturer can remotely diagnose faults and send
software updates.

### User Satisfaction and Additional Revenue Streams

Notifications about upcoming service dates and available software updates can be
sent to the user via a mobile application, creating an **additional channel for
selling services**. Offering authorized service services can increase customer
satisfaction and manufacturer profits.

### Remote Software Updates

Remote software updates allow for quick responses to software errors and the
introduction of new functions without the need for a service visit.
Additionally, remote software updates enable the production of vehicles with
beta software versions that can be updated later. This **allows the manufacturer
to bring a new vehicle model to market faster**.

## System Implementation

Integrating many electronic systems in a camper into a single central system
requires experience in various fields, such as embedded systems, industrial
communication protocols like CAN, mobile application programming, and consumer
wireless communication systems like Bluetooth. The visual and user experience
(UX/UI) aspects should also not be overlooked.

![Modern camper interior with tablet acting as control panel](/blog/smart_camper/interior_2.png)

### Central Control Unit

The central control unit is the heart of the smart camper system. It is
extremely important for the device to be energy-efficient and reliable. It
should support communication protocols to communicate with various devices that
make up the camper body:

- **CAN/LIN** - Controller Area Network, Local Interconnect Network, a standard
  in automotive, enabling communication between devices in the vehicle. In the
  case of a camper, CAN can be used to communicate with the chassis on which the
  camper is built.
- **Modbus** - a communication protocol used in industry, enabling communication
  between devices. Modbus can be used to communicate with devices such as
  heating controllers, refrigerators, etc.
- **RS-485** - a serial communication standard, enabling communication between
  devices over long distances. In the case of a camper, RS-485 can be used to
  communicate with external devices such as photovoltaic panels, awning
  controllers, etc.
- **Bluetooth** - a wireless communication technology, enabling communication
  with mobile devices such as smartphones and tablets. Bluetooth can be used for
  remote control of body functions and reading data via a mobile application.
- **Wi-Fi** - a wireless communication technology, enabling communication with
  external devices such as routers, servers, etc. Wi-Fi can be used to control
  body functions and read data via a mobile application, but also as an internet
  source for camper users.
- **LTE-M** - a wireless communication technology, enabling devices to
  communicate with the internet via a cellular network. LTE-M can be used for
  remote control of body functions when Bluetooth or Wi-Fi coverage is
  insufficient.

Depending on the needs, the unit can be based on a **mini-computer such as
Raspberry Pi, BeagleBone, or similar Linux-based systems**. These devices are
very **versatile and have high computational capabilities**. This allows them to
support standard technologies such as Java, Python, Node.js, etc. This makes it
possible to use ready-made libraries and frameworks, speeding up the
implementation process.

An alternative is a microcontroller such as **ESP32, STM32, Nordic nRF52**,
which is much more **energy-efficient and cheaper** but has limited
computational capabilities. Implementation on a microcontroller requires more
low-level programming in languages such as C, C++, or Assembler, which increases
implementation costs.

The central unit can be connected to devices that make up the camper body, such
as:

- White, gray, and black water level sensors with valve control,
- Gas bottle fill level sensor,
- Waeco refrigerator control,
- Truma, Webasto, or Eberspächer heating control,
- Built-in audio system,
- Lighting system,
- Suspension leveling,
- Alarm system,
- Control of retractable elements such as awnings, stairs, etc.,
- Parking power system with battery charge level monitoring and solar panel
  support,
- And many others.

### Tablet or Touch Screen

A tablet or touch screen integrated into the body connects to the central
control unit and allows for controlling body functions and reading data.
Depending on the needs, the screen can be based on Android, iOS, or Linux, and
the application can be written in technologies such as Flutter, React Native, or
React. Part of the application code can be shared with the mobile application.

It is important for the screen to be energy-efficient, weather-resistant, and
have appropriate brightness and resolution. Additionally, the application and
hardware should be designed to ensure smooth operation and not degrade over
time.

![Tablet with camper control app running](/blog/smart_camper/tablet.png)

### Mobile Application

The mobile application should connect to the central control unit via Bluetooth
or Wi-Fi and allow for remote control of body functions, reading sensor data,
and accessing user manuals. Additionally, the application can feature an
**intelligent assistant based on artificial intelligence** to help the user
operate the camper and suggest additional services.

On the other hand, the mobile application connects to the backend
infrastructure, sending data from the camper and receiving notifications from
the manufacturer and marketing materials. It is also possible to equip the
system with internet connectivity, allowing for remote control and monitoring of
the camper from anywhere.

![Smartphone with camper control app running](/blog/smart_camper/mobile.png)

### Backend Infrastructure

The backend infrastructure collects data from the camper and the mobile
application and serves as a database powering the mobile application and
enabling the creation of a CRM system to **manage customers and offer additional
services**. Additionally, the backend infrastructure can be used for data
analysis and report generation to better understand customer needs.

## Our Experience

In our team, we combine expertise in embedded systems, mobile and web
applications, and backend systems. We place particular emphasis on UX/UI design
to ensure the best user experience, as **we know that even the best
implementation will not yield the desired results if it is not properly
designed**.

Our multidisciplinary team, combining competencies from many fields, allows us
to execute projects faster and more efficiently because we do not have to rely
on external subcontractors. This saves time and money for the client while
ensuring the highest quality of execution.

## Summary

Integrating electronic systems in a camper increases user comfort, reduces
production and service costs, and adds new functions that would not be possible
with separate systems. This allows the manufacturer to better understand user
needs, predict maintenance and repairs, and offer additional services that
increase customer satisfaction and manufacturer profits.


Modern IT technologies in automotive and campers increase user comfort, reduce production and service costs, and open new revenue streams for manufacturers, while also increasing customer satisfaction.

Benefits of Integrating IT Systems in Campers: From Increased Comfort to Cost Reduction


## Nowoczesne oprogramowanie w motoryzacji

Badania pokazują, że nowoczesne systemy inforozrywki oraz integracja aplikacji
mobilnych z systemami wbudowanymi we współczesne samochody odgrywają szczególną
rolę w sprzedaży nowych pojazdów. Według
[jednego z raportów](https://www.mckinsey.com/industries/automotive-and-assembly/our-insights/car-connectivity-what-consumers-want-and-are-willing-to-pay),
aż **90% pojazdów sprzedanych w 2030 roku będzie połączonych z internetem**, a
**40% klientów rozważa zakup samochodu innej marki, jeśli będzie oferował on
lepsze rozwiązania IT**.

Jednak nie tylko zadowolenie klientów jest powodem, dla którego producenci
samochodów decydują się na wprowadzenie nowoczesnych systemów IT. Wpływ na to
mają również posprzedażowe korzyści dla producentów, którzy mogą pozostać w
kontakcie z klientem, oferując mu nowe usługi i produkty. Poza tym producenci
mogą zdalnie aktualizować oprogramowanie w samochodzie oraz monitorować jego
stan techniczny i sposób użytkowania. Według
[badaczy z ABI Research](https://ieee-denver.org/wp-content/uploads/sites/23/2021/10/ABI_Research_The_Future_of_Automotive_Connectivity.pdf),
**rynek usług zdalnych aktualizacji oprogramowania w samochodach ma szansę
osiągnąć wartość ponad 20 miliardów dolarów w 2030 roku**.

## Rynek kamperów w kontekście nowoczesnych rozwiązań IT

Podobnie jak w przypadku samochodów osobowych, również rynek kamperów zyskuje na
popularności dzięki nowoczesnym rozwiązaniom IT. Współczesne kampery są
wyposażone w systemy inforozrywki, klimatyzację, ogrzewanie oraz systemy
bezpieczeństwa, które jednak zwykle są zintegrowane jedynie z funkcjami
pochodzącymi od producenta podwozia. Zabudowy kamperowe składają się z wielu
różnych urządzeń, które wymagają obsługi oraz monitorowania:

- **zbiorniki wody białej, szarej i czarnej**: wymagają monitorowania poziomu,
  aby uniknąć niespodziewanego wyczerpania. Ponadto zbiorniki wody posiadają
  zawory, które mogą być sterowane elektrycznie.
- **butle z gazem**: wymagają monitorowania poziomu zapasów oraz sterowania
  zaworem w celu zabezpieczenia przed wyciekiem.
- **lodówki**: potrzebują możliwości sterowania temperaturą w zależności od
  warunków atmosferycznych oraz zasilania, oprócz tego wymagają możliwości
  poinformowania o pozostawionych otwartych drzwiach.
- **ogrzewanie**: wymaga możliwości sterowania temperaturą oraz monitorowania
  poziomu paliwa. Ponadto system ogrzewania może być zintegrowany z systemem
  klimatyzacji. Aplikacja mobilna może pozwalać na zdalne sterowanie ogrzewaniem
  przed powrotem do kampera.
- **ruchome elementy**: takie jak markiza, schody, itp., wymagają możliwości
  sterowania ich wysuwaniem i chowaniem.
- **akumulatory hotelowe**: wymagają monitorowania poziomu naładowania oraz
  zarządzania zasilaniem postojowym. Ponadto akumulatory mogą być ładowane za
  pomocą paneli fotowoltaicznych, ich moc może być przedstawiona w aplikacji.

![Klimatyczne wnętrze kampera z tabletem w roli centrum sterowania](/blog/smart_camper/interior_1.png)

Kampery, kampervany oraz przyczepy kempingowe łączy wiele z innym rynkiem
zaawansowanych rozwiązań IT – smart home. W obu przypadkach mamy do czynienia z
przestrzenią mieszkalną, wyposażoną w wiele urządzeń elektronicznych, które mogą
być zintegrowane ze sobą i sterowane za pomocą jednego systemu. Taka integracja
pozwala na **zwiększenie komfortu użytkowania oraz dodanie zupełnie nowych
funkcji**, które nie byłyby możliwe w przypadku oddzielnych systemów.

Obecnie na rynku nie ma wielu rozwiązań, które oferują pełną integrację systemów
elektronicznych w kamperach. Zwykle takie rozwiązania oferowane są jedynie przez
największych producentów, którzy ściśle współpracują z producentami podwozi.
Przykładem pojazdu z takimi rozwiązaniami jest Volkswagen California, który
oferuje obsługę wszystkich funkcji zabudowy za pomocą jednego fabrycznego
systemu. Mniejsze firmy zajmujące się zabudową kamperów zwykle nie mają
możliwości oferowania takich rozwiązań.

## Korzyści dla producentów i użytkowników

### Statystyki użytkowania

Inteligentne systemy mogą zbierać dane o sposobie użytkowania pojazdu, takie jak
częstotliwość korzystania z poszczególnych funkcji, stosunek czasu jazdy do
czasu użytkowania funkcji zabudowy, stan zbiorników wody czy gazu i inne. Dzięki
temu **producent może lepiej zrozumieć potrzeby użytkownika** i dostosować
ofertę do rzeczywistych potrzeb, opierając się na danych.

### Redukcja kosztów

Integracja systemów elektronicznych w kamperze pozwala na zastąpienie wielu
fizycznych urządzeń jednym systemem, który może sterować wszystkimi funkcjami
zabudowy. Dzięki temu **producent nie musi projektować i produkować wielu
indywidualnych urządzeń**, co pozwala na znaczną redukcję kosztów projektu i
produkcji. Co więcej, producent może przenieść obsługę części funkcji do
aplikacji mobilnej, całkowicie rezygnując z fizycznych centralek.

### Przewidywanie serwisów i napraw

Nowoczesne systemy IT pozwalają na monitorowanie stanu technicznego pojazdu oraz
interwałów serwisowych. Dzięki temu **producent może przewidzieć, kiedy dany
podzespół wymaga serwisu lub wymiany**, co pozwala na zaplanowanie serwisu z
wyprzedzeniem. Co więcej, producent może zdalnie diagnozować usterki i przesyłać
aktualizacje oprogramowania.

### Zadowolenie użytkownika i dodatkowe źródło przychodów

Powiadomienia o zbliżającym się terminie serwisu oraz dostępnych aktualizacjach
oprogramowania mogą być przesyłane do użytkownika za pomocą aplikacji mobilnej,
tworząc **dodatkowy kanał sprzedaży usług serwisowych**. Proponowanie
użytkownikowi usług autoryzowanego serwisu może zwiększyć zadowolenie klienta
oraz zyski producenta.

### Zdalne aktualizacje oprogramowania

Zdalne aktualizacje oprogramowania pozwalają na szybką reakcję na błędy
oprogramowania oraz wprowadzanie nowych funkcji bez konieczności wizyty w
serwisie. Oprócz tego zdalne aktualizacje oprogramowania pozwalają na
rozpoczęcie produkcji pojazdów z oprogramowaniem w wersji beta, które może być
aktualizowane w późniejszym terminie. Dzięki temu **producent może szybciej
wprowadzić nowy model pojazdu na rynek**.

## Implementacja systemu

Integracja wielu systemów elektronicznych w kamperze w jeden centralny system
wymaga doświadczenia w wielu dziedzinach, takich jak systemy wbudowane,
przemysłowe protokoły komunikacyjne, takie jak CAN, programowanie aplikacji
mobilnych oraz konsumenckie systemy łączności bezprzewodowej, takie jak
Bluetooth. Nie można zapominać również o aspekcie wizualnym i użytkowym UX/UI.

![Nowoczesne wnętrze kampera z tabletem w roli centrum sterowania](/blog/smart_camper/interior_2.png)

### Centralna jednostka sterująca

Centralna jednostka sterująca jest sercem systemu smart kampera. Niezwykle ważne
jest, aby urządzenie było energooszczędne i niezawodne. Powinno umożliwiać
obsługę protokołów komunikacyjnych aby móc komunikować się z różnymi
urządzeniami, które składają się na zabudowę kampera:

- **CAN/LIN** - Controller Area Network, Local Interconnect Network, standard w
  motoryzacji, umożliwiający komunikację między urządzeniami w pojeździe. W
  przypadku kampera, CAN może być wykorzystywany do komunikacji z podwoziem na
  którym zbudowany jest kamper.
- **Modbus** - protokół komunikacyjny wykorzystywany w przemyśle, umożliwiający
  komunikację między urządzeniami. Modbus może być wykorzystywany do komunikacji
  z urządzeniami takimi jak sterowniki ogrzewania, lodówki, itp.
- **RS-485** - standard komunikacji szeregowej, umożliwiający komunikację między
  urządzeniami na duże odległości. W przypadku kampera, RS-485 może być
  wykorzystywany do komunikacji z urządzeniami zewnętrznymi, takimi jak panele
  fotowoltaiczne, sterowniki markizy, itp.
- **Bluetooth** - technologia łączności bezprzewodowej, umożliwiająca
  komunikację z urządzeniami mobilnymi, takimi jak smartfony i tablety.
  Bluetooth może być wykorzystywany do zdalnego sterowania funkcjami zabudowy
  oraz odczytu danych przez aplikację mobilną.
- **Wi-Fi** - technologia łączności bezprzewodowej, umożliwiająca komunikację z
  urządzeniami zewnętrznymi, takimi jak routery, serwery, itp. Wi-Fi może być
  wykorzystywane do sterowania funkcjami zabudowy oraz odczytu danych przez
  aplikację mobilną, ale również jako źródło internetu dla użytkowników kampera.
- **LTE-M** - technologia łączności bezprzewodowej, umożliwiająca urządzeniom
  komunikację z internetem za pomocą sieci komórkowej. LTE-M może być
  wykorzystywane do zdalnego sterowania funkcjami zabudowy w sytuacji kiedy
  zasięg Bluetooth lub Wi-Fi jest niewystarczający.

W zależności od potrzeb jednostka może być oparta o mini komputer taki jak
**Raspberry Pi, BeagleBone lub podobne oparte o system Linux**. Takie urządzenia
są bardzo uniwersalne i mają duże możliwości obliczeniowe. Dzięki temu mogą
obsługiwać standardowe technologie takie jak Java, Python, Node.js, itp. Dzięki
temu możliwe jest wykorzystanie gotowych bibliotek oraz frameworków, co
przyspiesza proces implementacji.

Alternatywą jest mikrokontroler taki jak **ESP32, STM32, Nordic nRF52**, który
jest o wiele bardziej **energooszczędny i tańszy**, ale ma ograniczone
możliwości obliczeniowe. Implementacja na mikrokontrolerze wymaga bardziej
niskopoziomowego programowania w językach takich jak C, C++ lub Assembler, co
podnosi koszty implementacji.

Do jednostki centralnej można podłączyć urządzenia składające się na zabudowę
kampera, takie jak:

- czujnik poziomu wody białej, szarej i czarnej oraz zawory sterujące,
- czujnik poziomu zapełnienia butli z gazem,
- sterowanie lodówką Waeco oraz czujnik drzwi,
- sterowanie ogrzewaniem Truma, Webasto lub Eberspächer,
- wbudowany system audio,
- system oświetlenia,
- poziomowanie zawieszenia pneumatycznego,
- system alarmowy,
- sterowanie wysuwanymi elementami takimi jak markiza, schody, itp.,
- system zasilania postojowego z monitorowaniem poziomu naładowania akumulatorów
  oraz obsługą paneli fotowoltaicznych,
- oraz wiele innych.

### Tablet lub ekran dotykowy

Tablet lub ekran dotykowy, stanowiący element zabudowy, łączy się z centralną
jednostką sterującą oraz umożliwia sterowanie funkcjami zabudowy oraz odczyt
danych. W zależności od potrzeb ekran może być oparty o system Android, iOS lub
Linux, a aplikacja może być napisana w technologiach takich jak Flutter, React
Native lub React. Część kodu aplikacji może być współdzielona z aplikacją
mobilną.

Ważne jest, aby ekran był energooszczędny, odporny na warunki atmosferyczne oraz
miał odpowiednią jasność i rozdzielczość. Ponadto aplikacja i hardware powinny
być zaprojektowane w taki sposób, aby płynność obsługi była odpowiednia i nie
pogarszała się wraz z upływem czasu.

![Tablet z uruchomioną aplikacją do sterowania zabudową kamperową](/blog/smart_camper/tablet.png)

### Aplikacja mobilna

Aplikacja mobilna powinna łączyć się z centralną jednostką sterującą za pomocą
Bluetooth lub Wi-Fi oraz umożliwiać zdalne sterowanie funkcjami zabudowy, odczyt
danych z czujników oraz dostęp do instrukcji obsługi. Ponadto w aplikacji może
być dostępny **inteligentny asystent oparty na sztucznej inteligencji**, który
pomoże użytkownikowi w obsłudze kampera oraz zaproponuje dodatkowe usługi.

Z drugiej strony aplikacja mobilna łączy się z infrastrukturą backendową,
wysyłając dane z kampera oraz otrzymując powiadomienia od producenta oraz
materiały marketingowe. Możliwe jest również wyposażenie systemu w łączność
internetową, co pozwoli na zdalne sterowanie i monitoring kampera z dowolnego
miejsca.

![Aplikacja mobilna z uruchomioną aplikacją do sterowania zabudową kamperową](/blog/smart_camper/mobile.png)

### Infrastruktura backendowa

Infrastruktura backendowa zbiera dane napływające z kampera oraz aplikacji
mobilnej oraz stanowi bazę danych zasilającą aplikację mobilną oraz pozwala na
zbudowanie systemu CRM, który umożliwia na **zarządzanie klientami oraz
oferowanie im dodatkowych usług**. Ponadto infrastruktura backendowa może być
wykorzystana do analizy danych oraz tworzenia raportów, które służą do lepszego
zrozumienie potrzeb klientów.

## Nasze doświadczenie

W naszym zespole łączymy kompentencje z zakresu systemów wbudowanych, aplikacji
mobilnych i webowych oraz systemów backendowych. Stawiamy szczególny nacisk na
projekt UX/UI, aby zapewnić jak najlepsze doświadczenie użytkownika, ponieważ
**wiemy, że nawet najlepsza implementacja nie przyniesie oczekiwanych
rezultatów, jeżeli nie będzie odpowiednio zaprojektowana**.

Nasz multidyscyplinarny zespół łączący kompetencje z wielu dziedzin pozwala nam
na szybszą i bardziej efektywną realizację projektów, ponieważ nie musimy
polegać na zewnętrznych podwykonawcach. Oszczędzamy w ten sposób czas i
pieniądze klienta, a jednocześnie zapewniamy najwyższą jakość wykonania.

## Podsumowanie

Integracja systemów elektronicznych w kamperze pozwala na zwiększenie komfortu
użytkowania, redukcję kosztów produkcji i serwisu oraz dodanie nowych funkcji,
które nie byłyby możliwe w przypadku oddzielnych systemów. Dzięki temu producent
może lepiej zrozumieć potrzeby użytkownika, przewidywać serwisy i naprawy oraz
oferować dodatkowe usługi, które zwiększają zadowolenie klienta oraz zyski
producenta.


Nowoczesne technologie IT w motoryzacji i kamperach zwiększają komfort użytkowania, obniżają koszty produkcji i serwisu, a także otwierają nowe źródła przychodów dla producentów, zwiększając jednocześnie zadowolenie klientów.


Korzyści z integracji systemów IT w kamperach: Od zwiększonego komfortu do obniżenia kosztów


## Introduction to Functionality

### Notifications and Dynamic Island in the Pet-Tech Industry

In the world of mobile applications, UX (User Experience) and UI (User
Interface) play a crucial role in attracting and retaining users. Research shows
that apps that fail to meet UX expectations
[**are abandoned by 25% of users after the first use**](https://www.analyticodigital.com/blog/increase-app-engagement).
New features offered by Apple, such as widgets and Dynamic Island in iOS, open
innovative ways to create more intuitive and engaging interfaces. When enhancing
pet tracking apps using Dynamic Island, proper utilization of these features can
significantly simplify users' lives and make apps more dynamic and modern, which
is particularly important in the growing Pet-Tech market,
[**expected to reach a value of 20 billion USD by 2025**](https://www.prnewswire.com/news-releases/pet-tech-market-to-surpass-usd-20-billion-by-2025-global-market-insights-inc-300892272.html).

### Data at Your Fingertips

Widgets, notifications, and Dynamic Island are much more than just quick access
to information—they are key elements of UX best practices for pet tracking apps,
allowing users to stay connected with critical data without even opening the
app. In pet tracking apps, widgets can provide data such as the pet's current
location, the battery level of the GPS collar, or the distance traveled by the
pet throughout the day. This allows users to continuously monitor their pet's
status, which leads to higher engagement—push notifications, like those provided
by widgets,
[**can increase user engagement by up to 88%**](https://www.invespcro.com/blog/push-notifications/).

![Low battery warning for a dog collar displayed on a smartphone screen](/blog/widgets_for_pet_tracking/battery_life.png)

<ContentCard>
### How Can It Work in Practice?

Your dog has left the safe zone. Instead of a standard notification, Dynamic
Island can instantly display an expandable alert that you can extend into a map
view. This way, users can quickly see where their pet is and take immediate
actions such as sending a return command or activating a sound signal on the
collar.

</ContentCard>

### UX Benefits

- **Instant Access:** Users have full control over the situation thanks to quick
  and direct information about the pet's location.
- **Speed of Reaction:** In critical situations, such as a dog escaping beyond
  the fence, Dynamic Island not only notifies about the problem but also
  provides tools for quick action—users can see the dog's exact location and
  take immediate steps.
- **Stress Reduction:** Interactive notifications in Dynamic Island can help
  users react quickly, which reduces stress levels in critical situations.

## UX/UI Principles for Widget Design

Designing widgets for iOS requires adhering to several key UX/UI principles to
ensure users have quick access to essential information without opening the app.
Apple's key guidelines for widgets help create more intuitive, readable, and
effective interfaces, which in dedicated GPS pet collar solutions translate into
improved comfort and user engagement.

### Information Hierarchy

One of the fundamental principles of widget design is a clear information
hierarchy. Critical elements, such as the pet's location or the battery level of
the GPS collar, should be at the very top of the widget. This structure ensures
that users do not have to search through the widget to access key information—it
is immediately visible.

According to Apple guidelines, the information hierarchy should be constructed
with consideration for text size, style, and contrast against the background.
Key information should be presented in larger font (**Apple recommends 17 pt for
primary information**), making it instantly recognizable. For more advanced
data, such as the distance covered by the pet, visual indicators like progress
bars or status icons should be used for easy understanding.

### Glanceability Principle

Widgets must be designed in such a way that users can assess the situation **in
less than 5 seconds—this is called glanceability**. This is especially crucial
for pet tracking apps, where a quick response to information about the pet's
location can be critical.

Designing widgets with large, clear numbers and simple indicators that
immediately catch the eye is key. Color-coded status indicators can further help
users quickly assess the situation. For example:

- **Green** may suggest that the dog is nearby.
- **Red** might indicate that the pet has left the safe zone or that the GPS
  collar battery is low.

Minimalism is essential—avoid overloading the widget with unnecessary details
that could hinder quick understanding.

![Map showing pet location and GPS collar battery status](/blog/widgets_for_pet_tracking/never_lose_track.png)

### Adaptation to Different Sizes

Widgets on iOS are available in three basic sizes: small, medium, and large.
Each of these formats requires proper UI adjustments to ensure that key data is
clearly visible regardless of the widget size. In smaller widgets, it may be
necessary to limit the amount of information presented, so it is best to focus
on **the most critical data** (e.g., location and battery status). In larger
widgets, additional details such as pet activity history or notifications from
recent hours can be added, which may significantly enhance pet GPS collar
applications.

### Consistency with the App

Visual elements of widgets, such as icon shapes, typography, and color palette,
should be taken directly from the app to the widget. This way, the user
immediately recognizes that the widget is part of the app, increasing trust in
its quality and ensuring a seamless experience without confusion or
inconsistency.

## Dynamic Island – Space for Advanced Interactions

Dynamic Island is an intelligent element in iOS that flexibly adapts to the
user's current activities, providing key information in real-time. You are
likely familiar with it from apps like **Wolt** or **Uber**, where it allows
real-time tracking of the courier or driver's route without needing to keep the
app open. Users can monitor delivery progress or see how far their driver is—all
at a glance.

Similarly, Dynamic Island can work perfectly in pet tracking apps. Imagine a
scenario where your dog leaves the safe zone—you immediately receive an alert on
your screen without interrupting your current activity. Dynamic Island delivers
all the necessary information when every second counts.

### Key UX/UI Principles in Dynamic Island

1. **Minimalism and Content Prioritization:** Dynamic Island should only convey
   the most important information. For pet tracking apps, priority is given to
   data such as the pet's location or the GPS collar battery level. Our approach
   involves displaying only critical alerts—e.g., when the pet leaves the safe
   zone—so users always have what is most important at hand.
1. **Design Efficiency:** Simple, understandable icons and contrasting colors
   (red for warnings, green for normal status) help quickly assess the
   situation. Dynamic Island is not just for conveying information—it also
   provides intuitive navigation without interrupting ongoing tasks.
1. **Microinteractions and Animations:** When a dog starts leaving the safe
   zone, Dynamic Island can smoothly expand, showing an animation of the pet's
   movement on the map. Such dynamic content supports quick and intuitive pet
   tracking, allowing the user to react immediately without opening the app.
1. **Contextual Real-Time Notifications:** Even while browsing social media,
   Dynamic Island subtly but effectively reminds you of your pet's departure.
   One tap brings you to the map for a detailed view of the situation, allowing
   for immediate action.
1. **Notification Prioritization:** Critical information, such as leaving the
   safe zone, always takes precedence over less important messages, such as a
   reminder to charge the collar. This approach ensures users always have quick
   access to the most crucial data.
1. **Dynamic Island Customization:** Dynamic Island allows users to customize
   displayed notifications based on their preferences. Users can decide which
   information they want to see on the screen—for example, only those concerning
   the pet's location, ignoring less relevant data.

## Designing with Accessibility in Mind

When creating UX/UI components, especially for pet tracking apps, we must
remember that accessibility is not just a requirement—it is an opportunity to
increase usability for all users. Dynamic Island, widgets, and notifications
should be designed so that everyone—regardless of their capabilities—can use
them fully. Well-designed accessibility elements not only simplify app usage but
also increase its reach.

### High Contrast and Readability

One key aspect of accessibility is high contrast and readability. For visually
impaired users, this is invaluable in quickly reading information such as the
pet's current location or GPS collar battery level. It is about more than just
[**meeting standards**](https://developer.apple.com/videos/play/wwdc2019/244)—our
colors need to be vivid and instantly readable.

<ContentCard>
### Simplicity and Intuitiveness Are Key

For example, red may indicate a warning about leaving the safe zone, while green
confirms the dog is safe. We made sure these messages are not only visible but
also easily understood at a glance—without unnecessary interpretation.

</ContentCard>

### Integration with VoiceOver

For visually impaired users, full integration of Dynamic Island, widgets, and
notifications with the VoiceOver system is essential. Every interactive element
must be properly described so users can navigate it using gestures and voice
commands. This way, the app becomes truly accessible to all.

**Notifications** When users are tracking their pets, accessible notifications
are crucial. But what if the user has limited mobility or hearing? For these
people, the option of choosing matters: critical alerts can be indicated by
vibrations, while less urgent information can be presented by sound or light.
**The user has control over how and when they are notified.**

![Notification of pet leaving the safe zone](/blog/widgets_for_pet_tracking/instant_alerts.png)

A common problem users face in pet tracking apps is overly complicated
navigation. It takes too many clicks to get critical information. Dynamic Island
offers a perfect solution—it works as an interactive information hub, delivering
essential data with one touch.

<ContentCard>
### Minimizing Steps, Maximizing Convenience

Suppose your dog leaves the safe zone. Instead of navigating through multiple
screens, just one click on Dynamic Island gives you instant access to the map
with the current location and quick response options—like sending a sound
command or an alarm. Similarly, battery status can be checked at a glance
without deep app searches.

</ContentCard>

![Lost connection notification on a smartphone screen](/blog/widgets_for_pet_tracking/monitor_activity.png)

## Summary

Widgets, Dynamic Island, and notifications are powerful tools that can change
how users interact with Pet-Tech apps. They ensure that key information, such as
the pet's location or GPS collar battery status, is always within reach—without
interrupting other tasks.

Implementing these solutions not only enhances app functionality but also makes
users' lives easier. By designing for accessibility and intuitive navigation,
you minimize the number of steps needed to access essential data—crucial in
time-sensitive situations. Dynamic Island allows for quick reactions with
microinteractions and animations, while notifications provide instant insights
into what is happening with your pet.

Adapting your app to meet the needs of different users—regardless of their
skills or preferences—increases engagement and builds loyalty. Such a modern
approach to design makes your app stand out on the market, becoming not only
functional but also friendly to use.


Dynamic Island, widgets, and notifications revolutionize UX in Pet-Tech apps, providing instant access to key data. This helps users react quickly and reduces stress, ensuring accessibility and intuitive navigation for everyone.

Widgets in Pet Tracking Apps: How to Improve Functionality and User Engagement


## Wprowadzenie do funkcjonalności

### Powiadomienia i Dynamic Island w branży Pet-Tech

W świecie aplikacji mobilnych UX (User Experience) i UI (User Interface)
odgrywają kluczową rolę w przyciąganiu oraz zatrzymywaniu użytkowników. Badania
pokazują, że aplikacje, które nie spełniają oczekiwań w zakresie UX,
[**są porzucane przez 25% użytkowników po pierwszym użyciu**](https://www.analyticodigital.com/blog/increase-app-engagement).
Nowe możliwości oferowane przez Apple, takie jak widżety i Dynamic Island w iOS,
otwierają innowacyjne sposoby na tworzenie bardziej intuicyjnych i angażujących
interfejsów. W kontekście ulepszania aplikacji do śledzenia zwierząt za pomocą
Dynamic Island, odpowiednie wykorzystanie tych funkcji może nie tylko znacząco
ułatwić życie użytkownikom, ale także sprawić, że aplikacje będą bardziej
dynamiczne i nowoczesne, co ma szczególne znaczenie na rosnącym rynku Pet-Tech,
[**który ma osiągnąć wartość 20 miliardów USD do 2025 roku**](https://www.prnewswire.com/news-releases/pet-tech-market-to-surpass-usd-20-billion-by-2025-global-market-insights-inc-300892272.html).

### Dane na wyciągnięcie ręki

Widżety, powiadomienia oraz Dynamic Island to znacznie więcej niż szybki dostęp
do informacji – to kluczowe elementy najlepszych praktyk UX dla aplikacji
monitorujących zwierzęta, pozwalające użytkownikowi na stały kontakt z
kluczowymi danymi, nawet bez konieczności otwierania aplikacji. W przypadku
aplikacji śledzących zwierzęta, widżety mogą dostarczać takie dane, jak aktualna
lokalizacja pupila, poziom baterii w obroży GPS czy dystans przebyty przez
zwierzę w ciągu dnia. Dzięki temu użytkownik jest w stanie na bieżąco
monitorować stan swojego zwierzęcia, co sprzyja wyższemu zaangażowaniu –
powiadomienia push, takie jak te dostarczane przez widżety,
[**mogą zwiększyć zaangażowanie użytkowników nawet o 88%**](https://www.invespcro.com/blog/push-notifications/).

![Ostrzeżenie o niskim stanie baterii w obroży dla psa wyświetla się na ekranie smartfona](/blog/widgets_for_pet_tracking/battery_life.png)

<ContentCard>
### Jak może to działać w praktyce?

Twój pies opuścił bezpieczną strefę. Zamiast standardowego powiadomienia,
Dynamic Island może natychmiast wyświetlić rozwijalne powiadomienie, które
możesz rozwinąć do widoku z podglądem map, Dzięki temu użytkownik może szybko
zobaczyć, gdzie znajduje się jego zwierzak, a także podjąć natychmiastowe
działania, takie jak wysłanie komendy powrotu czy aktywowanie sygnału
dźwiękowego w obroży.

</ContentCard>

### Korzyści UX

- **Natychmiastowy dostęp:** Użytkownicy mają pełną kontrolę nad sytuacją dzięki
  szybkiej i bezpośredniej informacji o lokalizacji zwierzęcia.
- **Szybkość reakcji:** W sytuacjach krytycznych, takich jak ucieczka psa za
  ogrodzenie, Dynamic Island nie tylko powiadamia o problemie, ale dostarcza
  również narzędzia do szybkiego działania – użytkownik może zobaczyć dokładną
  lokalizację psa i podjąć natychmiastowe kroki.
- **Minimalizacja stresu:** Interaktywne powiadomienia w Dynamic Island mogą
  pomóc użytkownikowi szybko zareagować, co zmniejsza poziom stresu w sytuacjach
  kryzysowych.

## Zasady UX/UI przy projektowaniu widżetów

Projektowanie widżetów na iOS wymaga przestrzegania kilku kluczowych zasad
UX/UI, aby zapewnić użytkownikom szybki dostęp do najważniejszych informacji,
bez konieczności otwierania aplikacji. Kluczowe wytyczne Apple dotyczące
widżetów pomagają tworzyć bardziej intuicyjne, czytelne i efektywne interfejsy,
co w dedykowanych rozwiązaniach programistycznych dla firm związanych z GPS dla
zwierząt domowych przekłada się na poprawę wygody i zaangażowania użytkowników.

### Hierarchia informacji

Jedną z fundamentalnych zasad projektowania widżetów jest jasna hierarchia
informacji. Elementy krytyczne, takie jak lokalizacja zwierzęcia czy poziom
baterii obroży GPS, powinny znajdować się na samej górze widżetu. Taka struktura
zapewnia, że użytkownik nie musi przeszukiwać widżetu, aby dotrzeć do kluczowych
danych – są one natychmiast widoczne.

Zgodnie z wytycznymi Apple, hierarchia informacji powinna być budowana z
uwzględnieniem wielkości i stylu tekstu oraz jego kontrastu względem tła.
Kluczowe informacje muszą być przedstawione większą czcionką (**Apple zaleca np.
17 pt dla podstawowych informacji**), aby były natychmiast rozpoznawalne. W
przypadku bardziej zaawansowanych danych, takich jak dystans przebyty przez
zwierzę, warto zastosować wskaźniki wizualne, jak pasek postępu lub ikonę stanu,
które są natychmiast zrozumiałe.

### Zasada jednego spojrzenia (glanceability)

Widżety muszą być zaprojektowane tak, aby użytkownik mógł ocenić sytuację **w
mniej niż 5 sekund – to tzw. glanceability**. Jest to szczególnie ważne w
przypadku aplikacji do śledzenia zwierząt, gdzie szybka reakcja na informację o
lokalizacji pupila może być kluczowa.

Projektując widżety z wykorzystaniem dużych, wyraźnych cyfr i prostych
wskaźników, które od razu rzucają się w oczy. Kolorowe wskaźniki statusu mogą
dodatkowo pomóc użytkownikom w szybkiej ocenie sytuacji. Na przykład:

- **Zielony** wskaźnik może sugerować, że pies znajduje się w pobliżu.
- **Czerwony** kolor może sygnalizować opuszczenie strefy lub np. niski poziom
  baterii obroży GPS.

Minimalizm jest tu kluczowy – unikaj przeładowania widżetu zbędnymi detalami,
które mogą utrudnić użytkownikowi szybkie zrozumienie informacji.

![Mapa z zaznaczoną pozycją i stanem baterii obroży pupila](/blog/widgets_for_pet_tracking/never_lose_track.png)

### Adaptacja do różnych rozmiarów

Widżety na iOS dostępne są w trzech podstawowych rozmiarach: mały, średni i
duży. Każdy z tych formatów wymaga odpowiedniego dostosowania UI, aby zapewnić,
że kluczowe dane będą dobrze widoczne, niezależnie od rozmiaru widżetu. W
przypadku mniejszych widżetów, konieczne może być ograniczenie liczby
prezentowanych informacji, dlatego warto skupić się na **najbardziej krytycznych
danych** (np. lokalizacja i stan baterii). W większych widżetach, można pokusić
się o dodanie dodatkowych szczegółów, takich jak historia aktywności zwierzęcia
czy powiadomienia z ostatnich godzin, co może znacznie poprawić rozwój aplikacji
do obroży GPS dla zwierząt.

### Spójność z aplikacją

Elementy wizualne widżetów, takie jak kształty ikon, styl typografii i paleta
kolorów, powinny być przeniesione z aplikacji do widżetu. Dzięki temu użytkownik
od razu rozpozna, że widżet jest częścią aplikacji, co zwiększa zaufanie do jej
jakości, zapewni płynne doświadczenie, bez poczucia dezorientacji czy braku
spójności.

## Dynamic Island – przestrzeń dla zaawansowanych interakcji

Dynamic Island to inteligentny element w iOS, który elastycznie dostosowuje się
do aktualnych działań użytkownika, dostarczając kluczowe informacje w czasie
rzeczywistym. Z pewnością kojarzysz go z aplikacji takich jak **Wolt** czy
**Uber**, gdzie pozwala na bieżące śledzenie lokalizacji kuriera lub trasy
kierowcy, bez potrzeby ciągłego otwierania aplikacji. Użytkownicy mogą
monitorować postęp dostawy czy zobaczyć, jak daleko jest ich kierowca – wszystko
to na pierwszy rzut oka.

Podobnie, Dynamic Island może doskonale sprawdzić się w aplikacjach do śledzenia
zwierząt. Wyobraź sobie sytuację, w której Twój pies opuszcza bezpieczną strefę
– natychmiast otrzymujesz ostrzeżenie na ekranie, bez konieczności przerywania
bieżących czynności. Dynamic Island dostarcza wszystkie niezbędne informacje,
kiedy liczy się każda sekunda.

### Kluczowe zasady UX/UI w Dynamic Island

1. **Minimalizm i priorytetyzacja treści:** Dynamic Island powinno przekazywać
   wyłącznie najważniejsze informacje. W przypadku aplikacji do śledzenia
   zwierząt, priorytetem są dane takie jak lokalizacja czy stan baterii obroży
   GPS. Nasze podejście zakłada wyświetlanie wyłącznie krytycznych powiadomień –
   np. gdy zwierzę opuści bezpieczną strefę – aby użytkownik zawsze miał pod
   ręką to, co najważniejsze.
1. **Efektywność projektowania:** Proste, zrozumiałe ikony i kontrastowe kolory
   (czerwony dla ostrzeżeń, zielony dla normalnego statusu) pomagają szybko
   ocenić sytuację. Dynamic Island to nie tylko informacja – to także intuicyjna
   nawigacja, która nie wymaga przerywania bieżących zadań.
1. **Mikrointerakcje i animacje:** Kiedy pies zaczyna opuszczać bezpieczną
   strefę, Dynamic Island może płynnie się rozwinąć, pokazując animację ruchu
   zwierzęcia na mapie. Takie dynamiczne treści wspierają szybkie i intuicyjne
   śledzenie pupila, pozwalając użytkownikowi zareagować na bieżąco, bez
   konieczności otwierania aplikacji.
1. **Kontekstualne powiadomienia w czasie rzeczywistym:** Nawet podczas
   przeglądania mediów społecznościowych, Dynamic Island subtelnie, ale
   skutecznie przypomni Ci o oddalającym się zwierzęciu. Jednym dotknięciem
   możesz przejść do mapy z dokładnym podglądem sytuacji, co pozwala na
   natychmiastową reakcję.
1. **Priorytetyzacja powiadomień:** Krytyczne informacje, takie jak opuszczenie
   bezpiecznej strefy, mają zawsze pierwszeństwo przed mniej ważnymi
   komunikatami, np. przypomnieniem o naładowaniu obroży. To podejście
   gwarantuje, że użytkownik zawsze będzie miał szybki dostęp do
   najistotniejszych danych.
1. **Personalizacja Dynamic Island:** Dynamic Island pozwala dostosować
   wyświetlane powiadomienia według własnych preferencji. Użytkownicy mogą
   decydować, które informacje chcą widzieć na ekranie – np. tylko te dotyczące
   lokalizacji zwierzęcia, ignorując mniej istotne dane.

## Jak projektować z myślą o dostępności (accessibility)?

Tworząc komponenty UX/UI, zwłaszcza w aplikacjach do śledzenia zwierząt, musimy
pamiętać, że dostępność (accessibility) to nie tylko wymóg, ale także szansa na
zwiększenie użyteczności dla wszystkich użytkowników. Dynamic Island, widżety
oraz powiadomienia powinny być projektowane tak, aby każdy – niezależnie od
swoich możliwości – mógł z nich w pełni korzystać. Dobrze zaprojektowane
elementy dostępności nie tylko upraszczają korzystanie z aplikacji, ale też
zwiększają jej zasięg.

### Wysoki kontrast i czytelność

Jednym z kluczowych aspektów dostępności jest wysoki kontrast i czytelność
interfejsu. Dla użytkowników z wadami wzroku to nieoceniona pomoc w szybkim
odczytywaniu danych, takich jak aktualna lokalizacja zwierzęcia czy stan baterii
obroży GPS. Chodzi o więcej niż tylko
[**zgodność ze standardami**](https://developer.apple.com/videos/play/wwdc2019/244/)
– istotne jest, aby nasze kolory były wyraziste i natychmiast czytelne.

<ContentCard>
### Kluczowa jest prostota i intuicyjność

Na przykład, czerwony kolor może oznaczać ostrzeżenie o opuszczeniu bezpiecznej
strefy, a zielony potwierdzać, że pies jest bezpieczny. Zadbaliśmy, aby te
informacje były nie tylko widoczne, ale także zrozumiałe na pierwszy rzut oka –
bez zbędnych interpretacji.

</ContentCard>

### Integracja z VoiceOver

Dla użytkowników niewidomych lub słabowidzących, pełna integracja Dynamic
Island, widżetów i powiadomień z systemem VoiceOver jest kluczowa. Każdy
interaktywny element musi być odpowiednio opisany, tak aby można było nawigować
po nim za pomocą gestów i komend głosowych. W ten sposób aplikacja staje się
prawdziwie dostępna dla wszystkich.

**Powiadomienia** Kiedy użytkownik śledzi swoje zwierzę, dostępność powiadomień
jest kluczowa. Ale co, jeśli użytkownik ma ograniczoną mobilność lub słuch? Dla
tych osób liczy się możliwość wyboru: krytyczne ostrzeżenia mogą być
sygnalizowane wibracjami, a mniej pilne informacje – dźwiękiem lub światłem.
**To użytkownik ma kontrolę nad tym, jak i kiedy jest powiadamiany.**

![Powiadomienie o opuszczeniu przez psa bezpiecznej strefy](/blog/widgets_for_pet_tracking/instant_alerts.png)

Jednym z głównych problemów, jakie napotykają użytkownicy aplikacji do śledzenia
zwierząt, jest zbyt złożona nawigacja. Wymaga to wielu kliknięć, by uzyskać
kluczowe informacje. Dynamic Island to doskonałe rozwiązanie – działa jak
interaktywne centrum informacji, dostarczając użytkownikowi najważniejsze dane
jednym dotknięciem.

<ContentCard>
### Minimalizacja kroków, maksymalizacja wygody

Załóżmy, że Twój pies opuszcza bezpieczną strefę. Zamiast przechodzić przez
kilka ekranów, wystarczy jedno kliknięcie w Dynamic Island, aby natychmiast
uzyskać dostęp do mapy z bieżącą lokalizacją oraz opcjami szybkiej reakcji – np.
wysłania komendy dźwiękowej czy alarmu. Podobnie, status baterii można sprawdzić
jednym spojrzeniem, bez konieczności głębokiego przeszukiwania aplikacji.

</ContentCard>

![Powiadomienie o utraconym połączeniu na ekranie smartfona](/blog/widgets_for_pet_tracking/monitor_activity.png)

## Podsumowanie

Widżety, Dynamic Island i powiadomienia to potężne narzędzia, które mogą zmienić
sposób, w jaki użytkownicy korzystają z aplikacji w branży Pet-Tech. Dzięki nim
kluczowe informacje, takie jak lokalizacja pupila czy stan baterii obroży GPS,
są zawsze pod ręką – bez konieczności przerywania innych zadań.

Wprowadzenie tych rozwiązań to nie tylko poprawa funkcjonalności aplikacji, ale
też ułatwienie życia użytkownikom. Projektując z myślą o dostępności i
intuicyjnej nawigacji, minimalizujesz liczbę kroków potrzebnych do dotarcia do
najważniejszych danych – a to kluczowe w sytuacjach, gdy liczy się czas. Dynamic
Island pozwala na szybkie reakcje dzięki mikrointerakcjom i animacjom, a
powiadomienia dają natychmiastowy wgląd w to, co dzieje się z pupilem.

Dostosowując aplikację do potrzeb różnych użytkowników – niezależnie od ich
umiejętności czy preferencji – zwiększasz zaangażowanie i budujesz lojalność.
Właśnie takie nowoczesne podejście do projektowania sprawia, że twoja aplikacja
wyróżni się na rynku, stając się nie tylko funkcjonalna, ale też przyjazna w
użyciu.


Dynamic Island, widżety i powiadomienia rewolucjonizują UX aplikacji Pet-Tech, oferując natychmiastowy dostęp do kluczowych danych. To ułatwia użytkownikom szybkie reagowanie i minimalizuje stres, zapewniając dostępność oraz intuicyjną nawigację dla wszystkich.

Widżety w aplikacjach do śledzenia zwierząt: Jak poprawić funkcjonalność i zaangażowanie użytkowników


## What is Wireshark

Modern network applications use REST, which is de facto the standard in today's
development for both web and mobile applications. REST (Representational State
Transfer) is an architecture of web applications that describes the backend as a
state that can be fetched or modified through requests sent to a collection of
endpoints (POST, PUT, GET) that accept and return objects in JSON format.

When debugging web applications, there is often a need to analyze REST requests.
Sometimes logs in the application are insufficient or impossible to obtain. Then
there is a need for a tool that will enable analyzing network traffic without
interfering with the application itself. To achieve this, we can use Wireshark.

In this article, I will show how to use Wireshark to log and analyze network
traffic between the backend and frontend parts of the application.

## Hands-on

To install Wireshark, it is best to use the official instructions or the
repository available for your operating system.
[Click here to go to the official download page](https://www.wireshark.org/download.html).

Additionally, we will create a simple web application that will expose a simple
**REST** endpoint. For this purpose, we will use the express.js framework, which is
one of the most popular frameworks for creating web applications in Node.js. To
do this, use the following code (paste into `app.js` in a new folder):

```javascript
const express = require("express");
const app = express();
const port = 3000;

app.get("/api", (req, res) => {
  res.json({ message: "Hello World!" });
});

app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});
```



To run the application, you will need node.js and to install dependencies using
npm. To run the application, use the following commands (before starting, make
sure you have installed node.js and are in the folder with the `app.js` file):

```bash
npm init -y
npm install express
node app.js
```

To test the operation of the application, open a browser and enter the address
`http://localhost:3000/api`. The response should be
`{"message":"Hello World!"}`.

Then start Wireshark and select the correct interface. If you do not know which
interface to choose, use the `any` option, which allows listening to all network
interfaces.

It should be noted that Wireshark requires administrator rights to listen to
network traffic on all interfaces. If you suspect that Wireshark is not working
correctly, check the permissions. For example, in Linux, you can run Wireshark
with root permissions using the following command:

```bash
sudo wireshark
```

After performing these steps, Wireshark will start logging all network traffic
passing through the selected network interface. Usually, the amount of logged
data is very large, as Wireshark by default logs all network packets. To see
only the HTTP requests that interest us, it is necessary to set up appropriate
filters.

The most important filters for our case are:

- `http` - filters all HTTP requests
- `ip.src` - filters requests sent from a specific IP address
- `ip.dst` - filters requests sent to a specific IP address

To filter the logged data, add the appropriate expression in the filter bar at
the top of the interface. For example, to see all packets sent to the IP address
localhost, enter: `ip.dst = 127.0.0.1`, to see all HTTP requests sent or
received by the application running on localhost, enter:
`(ip.dst = 127.0.0.1 or ip.src = 127.0.0.1 and http)`.

Localhost (127.0.0.1) is the IP address assigned to the network interface
loopback, which is used for communication between processes on the same device.
In the case of a web application running on a local server, HTTP requests will
be sent to this IP address.

## Usage example

Now Wireshark displays only the incoming and outgoing traffic of our
application. After refreshing the page in the browser, new HTTP requests should
appear. In the example below, the first two requests are respectively the
request to and response from our application.

It is also worth knowing how to see the payload of requests in JSON format. By
default, Wireshark allows the analysis of request payloads in an unintuitive,
native format. To obtain the data in a more readable format, use the "copy as
printable text" function available in the menu, under the right mouse button in
the section displaying the body of the request.

To obtain the body of the request in JSON format, select the appropriate request
and `Java Script Object Notation` and then use the option
`copy as printable text`.

To obtain the header of the request, select the appropriate request and
`Hypertext Transfer Protocol`, and then use the option `copy as printable text`.

## Summary

I have discussed the key aspects of using the Wireshark tool for debugging web
applications, focusing on REST requests, which are the basis of modern internet
and mobile applications. Wireshark, as an advanced tool for analyzing network
traffic, allows observing HTTP requests without the need to interfere with the
application code. Properly configured filters allow tailoring Wireshark's
operation to our needs.


Wireshark is a tool that allows for network traffic analysis. In this article, I will show how to use Wireshark in practice to debug web applications.

Debugging Web Applications with Wireshark


## Czym jest Wireshark

Nowoczesne aplikacje sieciowe korzystają z REST, który jest de facto standardem
w dzisiejszym developmencie, zarówno dla aplikacji webowych jak i aplikacji
mobilnych. REST (Representational state transfer) to architektura aplikacji
webowych, która opisuje backend jako stan, który może być pobierany lub
modyfikowany poprzez zapytania wysyłane do zbioru endpointów (POST, PUT, GET),
które przyjmują i zwracają obiekty w formacie JSON.

Przy debugowaniu aplikacji webowych często pojawia się potrzeba przeanalizowania
zapytań REST. Czasami logi w aplikacji są niewystarczające lub niemożliwe do
uzyskania. Wtedy pojawia się potrzeba narzędzia, które umożliwi przenalizowanie
ruchu sieciowego bez ingerencji w samą aplikację. Aby to osiągnąć możemy
skorzystać z narzędzia Wireshark.

W tym artykule zaprezentuję jak skorzystać z Wiresharka do zalogowania i analizy
ruchu sieciowego pomiędzy częścią backendową i frontendową aplikacji.

## Hands on

Aby zainstalować Wiresharka najlepiej skorzystać z oficjalnych instrukcji lub z
repozytorium dostępnego dla wybranego systemu operacyjnego.
[Kliknij, aby przejść do oficjalnej strony pobierania](https://www.wireshark.org/download.html).

Dodatkowo stworzymy prostą aplikację webową, która wystawi prosty endpoint
RESTowy. W tym celu skorzystamy z frameworka express.js, który jest jednym z
najpopularniejszych frameworków do tworzenia aplikacji webowych w Node.js. Aby
tego dokonać skorzystamy z poniższego kodu (wklej do pliku `app.js` w nowym
folderze):

```javascript
const express = require("express");
const app = express();
const port = 3000;

app.get("/api", (req, res) => {
  res.json({ message: "Hello World!" });
});

app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});
```

Do uruchomienia aplikacji niezbędny będzie node.js oraz zainstalowanie
zależności za pomocą npm. Aby uruchomić aplikację należy skorzystać z poniższych
komend (przed uruchomieniem upewnij się, że masz zainstalowanego node.js oraz
jesteś w folderze z plikiem `app.js`):

```bash
npm init -y
npm install express
node app.js
```

Aby przetestować działanie aplikacji należy otworzyć przeglądarkę i wpisać adres
`http://localhost:3000/api`. W odpowiedzi powinno pojawić się
`{"message":"Hello World!"}`.

Następnie należy uruchomić Wiresharka i wybrać właściwy interfejs. Jeżeli nie
wiesz, który interfejs wybrać, skorzystaj z opcji `any`, która pozwala na
nasłuchiwanie wszystkich interfejsów sieciowych.

Warto zaznaczyć, że Wireshark wymaga uprawnień administratora, aby móc
nasłuchiwać ruch sieciowy na wszystkich interfejsach. Jeżeli podejrzewasz, że
Wireshark nie działa poprawnie, sprawdź uprawnienia. Np. w systemie Linux można
uruchomić Wiresharka z uprawnieniami roota za pomocą poniższej komendy:

```bash
sudo wireshark
```

Po wykonaniu tych kroków Wireshark zacznie logować cały ruch sieciowy, który
przechodzi przez wybrany interfejs sieciowy. Zwykle ilość zalogowanych danych
jest bardzo duża, ponieważ domyślnie Wireshark loguje wszystkie pakiety
sieciowe. Aby zobaczyć tylko interesujące nas zapytania HTTP, należy
skonfigurować odpowiednie filtry.

Najważniejsze filtry dla naszego przypadku to:

- `http` - filtruje wszystkie zapytania HTTP
- `ip.src` - filtruje zapytania wysyłane z określonego adresu IP
- `ip.dst` - filtruje zapytania wysyłane do określonego adresu IP

Aby przefiltrować zalogowane dane należy dodać odpowiednie wyrażenie w pasku
filtrów w górnej części interfejsu. Np. aby zobaczy wszystkie pakiety wysyłane
na adres ip localhost należy wpisać: `ip.dst = 127.0.0.1`, aby zobaczyć
wszystkie zapytania HTTP wysyłane lub odbierane przez aplikację uruchomioną na
localhoście należy wpisać:
`(ip.dst = 127.0.0.1 or ip.src = 127.0.0.1 and http)`.

Localhost (127.0.0.1) to adres IP, który jest przypisany do interfejsu
sieciowego loopback, który jest używany do komunikacji między procesami na tym
samym urządzeniu. W przypadku aplikacji webowej uruchomionej na lokalnym
serwerze, zapytania HTTP będą wysyłane na adres IP.

## Przykład użycia

Teraz wireshark wyświetla tylko przychodzący i wychodzący ruch naszej aplikacji.
Po odświeżeniu strony w przeglądarce powinny pojawić się nowe zapytania HTTP. Na
przykładzie poniżej pierwsze dwa zapytania to odpowiednio request do i response
z naszej aplikacji.

Warto wiedzieć również jak zobaczyć payload zapytań w formacie JSON. Domyślnie
Wireshark pozwala na analizę payloadu zapytań w nieintuicyjnym, natywnym
formacie. Aby otrzymać dane w bardziej czytelnym formacie należy skorzystać z
funkcji "copy as printable text" dostępną w menu, pod prawym przyciskiem myszy w
sekcji wyświetlającej body zapytania.

Aby otrzymać body zapytania w formacie JSON należy wybrać odpowiednie zapytanie
oraz `Java Script Object Notation`, a następnie skorzystać z opcji
`copy as printable text`.

Aby otrzymać header zapytania należy wybrać odpowiednie zapytanie oraz
`Hypertext Transfer Protocol`, a następnie skorzystać z opcji
`copy as printable text`.

## Podsumowanie

Omówiłem kluczowe aspekty wykorzystania narzędzia Wireshark do debugowania
aplikacji webowych, koncentrując się na zapytaniach REST, które są podstawą
nowoczesnych aplikacji internetowych i mobilnych. Wireshark, jako zaawansowane
narzędzie do analizy ruchu sieciowego, pozwala na obserwację zapytań HTTP bez
konieczności ingerencji w kod aplikacji. Prawidłowo skonfigurowane filtry
pozwalają na dostosowanie działania Wiresharka do naszych potrzeb.


Wireshark to narzędzie, które pozwala na analizę ruchu sieciowego. W tym artykule zaprezentuję jak w praktyce Wykorzystać Wiresharka do debugowania aplikacji webowych.

Just App

Case Study

Let’s talk

Let’s meet

Contact