-
Notifications
You must be signed in to change notification settings - Fork 0
/
ar2.html
375 lines (314 loc) · 20.2 KB
/
ar2.html
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Blog - Flutter31 Bootstrap Template</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- t-montes code-viewer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/t-montes/code-viewer@master/versions/1.0.1/code-viewer.min.js"></script>
<!-- =======================================================
* Template Name: Flutter31
* Updated: Sep 18 2023 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/flexstart-bootstrap-startup-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="header fixed-top">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center">
<img src="assets/img/logo.png" alt="">
<span>Flutter31</span>
</a>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="index.html#hero">Start</a></li>
<li class="dropdown"><a href="index.html#appinfo"><span>Overview</span><i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="index.html#appinfo">Blackhole</a></li>
<li><a href="index.html#appinfo_functionalities">Functionalities</a></li>
<li><a href="index.html#appinfo_value">Value Proposition</a></li>
<li><a href="index.html#appinfo_bqs">Business Questions</a></li>
</ul>
</li>
<li class="dropdown"><a href="ar2.html"><span>Design</span><i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="ar2.html#architecture">Architecture</a></li>
<li><a href="ar2.html#views">App Views</a></li>
<li><a href="ar2.html#qas">Quality Attributes</a></li>
</ul>
</li>
<li class="dropdown"><a href="ar3.html"><span>Techniques</span><i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="ar3.html#ecns">Eventual Connectivity</a></li>
<li><a href="ar3.html#caching">Caching Strategies</a></li>
<li><a href="ar3.html#memory">Memory Managment</a></li>
<li><a href="ar3.html#threading">Threading</a></li>
</ul>
</li>
<li class="dropdown"><a href="ar4.html"><span>Performance</span><i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="ar4.html#scenarios">Performance Scenarios</a></li>
<li><a href="ar4.html#problems_strenghts">Problems and Strengths</a></li>
<li><a href="ar4.html#uoptimization">Micro Optimization</a></li>
</ul>
</li>
<li><a class="nav-link scrollto" href="sonar.html">Sonar</a></li>
<li><a class="getstarted scrollto" href="https://blackhole-apk.com/">Download</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
</div>
</header>
<main id="main">
<!-- ======= Breadcrumbs ======= -->
<section class="breadcrumbs">
<div class="container">
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="ar2.html">Design</a></li>
</ol>
<h2>Design</h2>
</div>
</section>
<!-- ======= Section: Architecture ======= -->
<section id="architecture" class="architecture">
<div class="container" data-aos="fade-up">
<header class="section-header">
<p>Software Architecture</p>
</header>
<section id="app_info" class="app_info">
<div class="container" data-aos="fade-up">
<div class="row gx-0">
<div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
<div class="content">
<h2>Architecture </h2>
<p>
Software architecture is crucial for our Black Hole app's development as it shapes how the app is organized and ensures it works well in the long run. It helps manage complex features like web views and navigation, making the app easier to build and maintain. A good architecture also improves the app's performance and user experience. It's like a blueprint that guides how different parts of the app work together, making it scalable, easy to understand, and ready for future improvements. In short, a strong software architecture is vital for creating a successful and adaptable mobile application like Black Hole. </p>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
<img src="https://media.istockphoto.com/id/1330669820/es/vector/software-de-programaci%C3%B3n-de-sistemas-de-casas-inteligentes-desarrollo-de-ingenier%C3%ADa-de.jpg?s=612x612&w=0&k=20&c=H-EUzzwivOa7YzMp43iEWRkSGBSFS4y9iZSwrCYGNPg=" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
<header class="section-header">
<h2>patterns</h2>
</header>
<div class="row gy-4">
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="service-box blue">
<h3>MVVM</h3>
<p>We can evidence a use of MVVM patter in the application. This can be figured because of many reasons. This pattern allows the app to be reactive and have specialized components for the data access, the view and the interaction between both, this improves how the app is developed and in this manner it becomes a more maintainable application over time.</p>
<a href="mvvm.html" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
<div class="service-box orange">
<h3>DTO</h3>
<p>In this project, the data transfer object (DTO) pattern simplifies accessing song information. The "song_item" DTO reads elements, easily converts to/from JSON, streamlining serialization. It improves data source interaction with its serialized properties, enhancing efficiency.</p>
<a href="dto.html" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
<div class="service-box green">
<h3>Facade</h3>
<p>The "Facade" design pattern is a structural pattern used in software development, including mobile applications, to simplify and provide a unified interface for a complex set of subsystems, classes, or components. Its main goal is to hide internal complexity and provide a simpler and more cohesive way to interact with these subsystems, making the system easier to use and maintain.</p>
<a href="facade.html" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- ======= UI/UX ======= -->
<section id="features" class="features">
<div class="container" data-aos="fade-up">
<div class="row feture-tabs" data-aos="fade-up">
<header class="section-header">
<p>UI/UX</p>
</header>
<div class="col-lg-12">
<!-- Tabs -->
<ul class="nav nav-pills mb-3">
<li>
<a class="nav-link active" data-bs-toggle="pill" href="#tab1">Home View</a>
</li>
<li>
<a class="nav-link" data-bs-toggle="pill" href="#tab2">YouTube View</a>
</li>
<li>
<a class="nav-link" data-bs-toggle="pill" href="#tab3">Library View </a>
</li>
</ul><!-- End Tabs -->
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">
<div class="row">
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="box text-center">
<img src="assets/img/feed.jpg" class="img-fluimatDialogActions" alt="" width="250px" >
<h3>Feed</h3>
<p>The app's main view features a bottom navigation bar for easy access to home, trending music, and playlists. Users can also utilize a search bar for songs, albums, and artists. Rows of elements showcase relevant lists such as trending songs and artist albums.</p>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="600">
<div class="box text-center">
<img src="assets/img/perfilArt.jpg" class="img-fluimatDialogActions" alt="" width="250px">
<h3>Perfil del Artista (Artist Profile)</h3>
<p>An icon in the top left corner provides access to a drop-down menu for account settings, linking Spotify or YouTube accounts, and managing friends. The modern color scheme, including dark gray and a vibrant green, along with futuristic fonts like Jost and Poppins, contribute to the app's contemporary design.</p>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="400">
<div class="box text-center">
<img src="assets/img/Reproduccion.jpg" class="img-fluimatDialogActions" alt="" width="250px">
<h3>Reproducción (Playback): </h3>
<p>Navigation through the app for music playback is facilitated by the bottom navigation bar, especially dedicated to YouTube for music reproduction. The layout could be enhanced by optimizing unused space at the top. The color scheme and fonts contribute to a modern and futuristic look aimed at appealing to young users.</p>
</div>
</div>
</div>
</div><!-- End Tab 1 Content -->
<div class="tab-pane fade show" id="tab2">
<div class="row">
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
<div class="box text-center">
<img src="assets/img/YoutubeTrend.jpg" class="img-fluimatDialogActions" alt="" width="250px">
<h3>YouTube Trending Playlists Overview</h3>
<p>This is the app's third main view, emphasizing trending YouTube playlists with a minimalistic and graphic design. Large rectangles against a dark grey background showcase trending playlists, allowing users to focus on the playlist previews.</p>
</div>
</div>
<div class="col-lg-6 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="400">
<div class="box text-center">
<img src="assets/img/PlaylistDet.jpg" class="img-fluimatDialogActions" alt="" width="250px">
<h3>Playlist Details</h3>
<p>Selecting a playlist retains the image at the top alongside the playlist name. A streamlined list displays songs, featuring a photo and artist name. Consistent use of color palette and typography (Poppins) ensures a cohesive user experience. The playlist image size remains uniform for visual consistency.</p>
</div>
</div>
</div>
</div>
<!-- End Tab 2 Content -->
<div class="tab-pane fade show" id="tab3">
<div class="row">
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
<div class="box text-center">
<img src="assets/img/Overview.jpg" class="img-fluimatDialogActions" alt="" width="270px">
<h3>Overview View</h3>
<p>This view is a key information hub, featuring seven sub-views with important data. The header, in bold white Poppins typography, is centered with a small icon. Below, a list of seven regular-sized texts begins, each with an image on the left.</p>
</div>
</div>
<div class="col-lg-6 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="400">
<div class="box text-center">
<img src="assets/img/RecentSongs.jpg" class="img-fluimatDialogActions" alt="" width="250px">
<h3>Recent Songs View</h3>
<p>Clicking on the last section reveals a new view displaying recently listened-to songs. The format resembles a YouTube playlist with small images, song titles, and small hearts on the right. Notably, liking a song turns the heart red, adding an intuitive touch.</p>
</div>
</div>
</div>
</div><!-- End Tab 3 Content -->
</div>
</div>
</div><!-- End Feature Tabs -->
</div>
</section>
<!-- ======= Quality Attributes ======= -->
<section id="features" class="features">
<div class="container" data-aos="fade-up">
<div id="appinfo_bqs" class="row feature-icons" data-aos="fade-up">
<header class="section-header">
<p>Quality Attributes</p>
</header>
<br><br><br><br>
<div class="row justify-content-center align-items-center">
<div class="col-xl-12 d-flex content">
<div class="row align-self-center gy-4">
<div class="col-md-6 icon-box" data-aos="fade-up">
<i class="ri-magic-line"></i>
<div>
<h4>Performance </h4>
<p>The streaming music application leverages the Spotify API to deliver a high-performance music experience. This API employs efficient audio compression algorithms, such as Ogg Vorbis and AAC, ensuring a perfect balance between reducing bandwidth usage and maintaining audio quality. It dynamically adapts streaming quality based on network conditions, guaranteeing uninterrupted playback even during bandwidth fluctuations.</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<i class="ri-stack-line"></i>
<div>
<h4>Availability</h4>
<p>Blackhole's Availability feature brings exceptional offline mode, which enables users to download songs for offline listening. This capability liberates users from the requirement of a continuous internet connection, ensuring fast access to their preferred music even in regions with limited connectivity. This sophisticated offline mode seamlessly transitions between online and offline environments, thereby bolstering the application's overall performance. This establishes Blackhole as a dependable and user-friendly choice for music enthusiasts, assuring them that their music remains accessible without connectivity constraints.</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<i class="ri-brush-4-line"></i>
<div>
<h4>Internationalization</h4>
<p>Blackhole is designed to be used by people all over the world, with support for 26 different languages. This means that users can easily switch to their preferred language, making the app accessible without any language barriers. This inclusive approach allows people from various backgrounds to enjoy the app's features and functionalities effortlessly, creating a more diverse and welcoming user community and improving the overall user experience. </p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
<i class="ri-line-chart-line"></i>
<div>
<h4>Usability</h4>
<p>One of the app's most distinguished quality attributes is usability. Blackhole provides users an intuitive interface that adheres to the expected style for a music application. This strategic design ensures that the app's target users can effortlessly discover and access every feature they need. With a layout and controls that align seamlessly with the conventions of music apps and its integrations: YouTube and Spotify, Blackhole offers a user-friendly experience that boosts user satisfaction. This dedication to usability enhances the app's overall appeal and accessibility.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer" class="footer">
<div class="footer-top">
<div class="container">
<div class="row gy-1">
<div class="col-lg-10 col-md-12 footer-info">
<a href="index.html" class="logo d-flex align-items-center">
<img src="assets/img/logo.png" alt="">
<span>Flutter31</span>
</a>
<p>At Flutter31, we're a team of developers passionate about Flutter mobile applications. Our focus is on creating and analyzing apps like Blackhole, aiming to enhance your digital experience with innovative and user-friendly solutions.</p>
<div class="social-links mt-3">
<a href="https://github.com/ISIS3510-202320-Team31/Flutter" class="github"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
© Copyright <strong><span>Flutter 31</span></strong>. All Rights Reserved
</div>
</div>
</footer>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>