Criar seu próprio aplicativo Habr já se tornou uma tradição entre os Habruzers. Decidi acompanhar e fazer o meu próprio.
Neste artigo, irei primeiro falar sobre como foi criado o cliente para Habr, soluções arquitetônicas e técnicas, seus pré-requisitos e análises, quais as dificuldades que surgiram e, por último, sobre a funcionalidade da aplicação.
Fundo
Tudo começou com a sugestão de um amigo para experimentar o Flutter, mas não me importei.
, ? , , - ( ).
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, , , , , . .
:
Para a operação de análise e pré-processamento, ainda uso o método de computação.
Conclusão
Isso é basicamente tudo que eu gostaria de dizer sobre a estrutura interna do aplicativo.
Não pretendia este post ser um anúncio, mas pode surgir o desejo de cutucar o aplicativo e ver o código, então anexei um link para o github .
E então algumas capturas de tela do aplicativo:
