
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?


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.

Aplikacja Just

Case Study

Porozmawiajmy

Spotkajmy się

Kontakt