Membuat aplikasi Habr Anda sendiri sudah menjadi tradisi di kalangan Habruzer. Saya memutuskan untuk mengikuti dan membuatnya sendiri.
Pada artikel ini, pertama-tama saya akan berbicara tentang bagaimana klien untuk Habr dibuat, solusi arsitektur dan teknis, prasyarat dan analisis mereka, kesulitan apa yang ada di sana, dan terakhir dari semua tentang fungsionalitas aplikasi.
Latar Belakang
Semuanya dimulai dengan saran teman untuk mencoba Flutter, tetapi saya tidak keberatan.
, ? , , - ( ).
React+TypeScript VanilaJs, React Flutter.
, html , — , “”: html , - web-view. , .
- . , Dart , , ( Flutter : , .. , ui ).
:
ui
habr-storage - , , .
habr-api - http .
, . MVVM.
UI
API html js . html .
html Flutter, , :
web-view
( Flutter)
, , React Native, .
HTML
, , . iframe, , web-view. , , , . , .
:
, .. .
html , , .
. html, div, . , , .. html, css . , - , " ".
html :
<div class="spoiler" role="button" tabindex="0">
<b class="spoiler_title"> </b>
<div class="spoiler_text"> </div>
</div>
, details - .
2 :
html
html5. , :
( )
-
( /)
-
-
Iframe
-
-
- . , .
Flutter RecyclerView Android, ListView. ( ), .
, : . - - , .. .
, - , , - , "" . , ui , ListView , N , , N .
, 1000 - , - .
. , . , . , , - ListView "" , . , .
Habr-API
m.habr.com/kek/v2/
API:
, , , , , , , - , , . , . – API .
, API - . , API , . - .
Habr-Storage
Moor (Room, Dart) SQLite, - , . – Hive, NoSQL Key-Value , . , ( ), , .
SQLite html , (, ) , Hive. .
SQLite. . url, , path . Path - url` . :
path = str(hash(url)) + str(datetime.now().millisecondsSinceEpoch)
Isolates
Dart , , , web-workers Isolate. , HTTP , JSON, , Flutter.
- , -.
: Flutter . compute.
– , , . :
. compute, , , , .
. , , , middle, , , , , . .
:
Untuk operasi parsing dan preprocessing, saya masih menggunakan metode compute.
Kesimpulan
Ini pada dasarnya semua yang ingin saya ceritakan tentang struktur internal aplikasi.
Saya tidak bermaksud posting ini sebagai iklan, tetapi keinginan untuk menyodok aplikasi dan melihat kodenya mungkin muncul, jadi saya lampirkan tautan ke github .
Dan kemudian beberapa tangkapan layar dari aplikasi:
