docs/Tutorials.html at main · kourier-server/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!-- HTML header for doxygen 1.9.6-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="$langISO">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen 1.9.4"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Kourier: Tutorials</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700|Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700|Ubuntu+Condensed|Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0|Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900|Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900|Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900" />
<link href="https://fonts.cdnfonts.com/css/bitstream-vera-sans-mono" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
        <script type="text/javascript" src="doxygen-awesome-darkmode-toggle.js"></script>
        <script type="text/javascript">
            DoxygenAwesomeDarkModeToggle.init()
        </script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
$darkmode
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
<link href="doxygen-awesome-sidebar-only.css" rel="stylesheet" type="text/css"/>
<link href="doxygen-awesome-sidebar-only-darkmode-toggle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr id="projectrow">
  <td id="projectalign">
   <div id="projectname">Kourier<span id="projectnumber">&#160;1.0.0</span>
   </div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.9.4 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
var searchBox = new SearchBox("searchBox", "search",'Search','.html');
/* @license-end */
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(function() {
  initMenu('',true,false,'search.php','Search');
  $(document).ready(function() { init_search(); });
});
/* @license-end */
</script>
<div id="main-nav"></div>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
  <div id="nav-tree">
    <div id="nav-tree-contents">
      <div id="nav-sync" class="sync"></div>
    </div>
  </div>
  <div id="splitbar" style="-moz-user-select:none;"
       class="ui-resizable-handle">
  </div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&amp;dn=expat.txt MIT */
$(document).ready(function(){initNavTree('Tutorials.html',''); initResizable(); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0"
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div><div class="header">
  <div class="headertitle"><div class="title">Tutorials </div></div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p ><a class="anchor" id="md_Tutorials_Introduction"></a> The tutorials were created to be followed in order. They intentionally have a very simple business logic to allow us to focus on</p>
<p >For each tutorial shown below, we highlight their main objectives before describing the tutorial in more detail.</p>
<h2><a class="anchor" id="autotoc_md106"></a>
Hello Cute</h2>
<ul>
<li>Setup development environment</li>
<li>Create client UI app</li>
<li>Make client app use remote objects to fetch from the server the text to be shown in its UI.</li>
<li>Build client app for the desktop, iOS, Android and WebAssembly</li>
<li>Create the remote objects library.</li>
<li>Implement a remote object class that informs the text to be shown on the screen.</li>
<li>Configure the server to load the created library.</li>
<li>Run the server and the app and use the app to fetch from the server the text to be shown on its UI.</li>
</ul>
<p >Our first tutorial does not do any network communication. In the Hello Qt tutorial, we create a Qt Quick-based app that prints "Hello Cute!" on the screen. It serves the purpose of showing how to implement Qt6 apps using CMake and QtCreator and, from a single source code, build desktop, iOS, Android and WebAssembly applications.</p>
<p >With Qt, developers use QtQuick and the QML language to create user interfaces declaratively. In this declarative UI paradigm, Qt applies signals and slots to model state changes as events that get propagated in the UI and can be used to trigger business logic or change other UI elements. The declarative paradigm for creating user interfaces took the world by storm, and following Qt all major companies embraced it. For example, React Native (Meta), Flutter (Google), SwiftUI (Apple), Jetpack Compose (Android) and Xamarin.Forms (Microsoft) are declarative UI frameworks that adopted the declarative style well after Qt. Qt provides a solid, modern and mature framework for developing fluid and responsive user interfaces.</p>
<p >With Qt, you apply signals and slots to communicate within your app, and, with Cute, you can use this powerful and intuitive communication mechanism to communicate over a network with remote peers.</p>
<p >The simple calculator app shows how to create iOS, Android, WebAssembly and Desktop clients that communicate to server to add two integers.</p>
<p >The Contacts List uses a database and shows how to broadcast changes to connected clients.</p>
<p >Files shows how to implement well-behaved peers.</p>
<p >Messaging App is a more complex app that allows multiple different clients to participate in a chat room.</p>
<h2><a class="anchor" id="autotoc_md107"></a>
Simple Calculator</h2>
<ol type="1">
<li>Create a console app that receives from the command line the server IP/port and the two integers to add.</li>
<li>Use the RemoteObject class to perform addition and print the result on the console before quiting the app.</li>
<li>Add the remote SimpleCalculator class.</li>
<li>Build the remote objects library.</li>
<li>Create the server configuration file.</li>
<li>Deploy the server to an AWS instance.</li>
<li>Test the app.</li>
</ol>
<h2><a class="anchor" id="autotoc_md108"></a>
Streaming File To Server</h2>
<ol type="1">
<li>Create a console app that accepts the file to be streamed to server as a command-line argument and the server IP and port</li>
<li>Use the RemoteObject class and its readyToWrite signal to send data to the server.</li>
<li>Create the FileStreamReceiver remote class.</li>
<li>Build the remote objects library.</li>
<li>Create the server configuration file.</li>
<li>Deploy the server to an AWS instance.</li>
<li>Stream files to server and measure the send rate and the memory comsumed by the client.</li>
<li>Change the FileStreamReceiver class to add a delay.</li>
<li>Rebuild the library and make the server use the new library.</li>
<li>Deploy the same file again and verify the send rate and the memory consumption on the client side.</li>
</ol>
<h2><a class="anchor" id="autotoc_md109"></a>
Streaming File To Clients</h2>
<ol type="1">
<li>Create a console app.</li>
<li>Create the FileReceiver class and make it interact with the server to receive a file from it.</li>
<li>Make the FileReceiver class accept a delay time.</li>
<li>Create three instances of the FileReciever class. One with no delay, the other with a small delay and one with a greater delay.</li>
<li>Create the FileStreamSender remote class.</li>
<li>Use the readyToWrite signal to send data to clients only when no more data has to be written to the network layer.</li>
<li>Build the remote objects library.</li>
<li>Create the server configuration file.</li>
<li>Deploy the server to an AWS instance.</li>
<li>Stream files to clients.</li>
<li>Check memory consumtion and send rate on the client-side.</li>
</ol>
<h2><a class="anchor" id="autotoc_md110"></a>
Simple Calculator (UI-based)</h2>
<ol type="1">
<li>Setup a development environment for mobile and WebAssembly</li>
<li>Create a QML app that shows basic controls for integer addition and server selection.</li>
<li>Perform addition in the QML file using the RemoteObject QtQuick item.</li>
<li>Build the app for iOS.</li>
<li>Build the app for Android.</li>
<li>Build the app for WebAssembly.</li>
<li>Add the remote SimpleCalculator class.</li>
<li>Build the remote objects library.</li>
<li>Create the server configuration file.</li>
<li>Deploy the server to an AWS instance.</li>
<li>Test the app on Desktop, mobile and browser. </li>
</ol>
</div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- HTML footer for doxygen 1.9.6-->
<!-- start footer part -->
</body>
</html>