Flutter 뉴스 애플리케이션에 대한 Jekyll 블로그: 2부 - 데이터 모델링.

이것은 시리즈의 두 번째 기사입니다: Blog Website to Flutter News Application .

지난 기사에서 우리는 jekyll 블로그 웹사이트를 구성하여 단일 API 끝점을 던지는 모든 콘텐츠를 제공하도록 했습니다.

이미 말했듯이 이 단계에서는 완전히 호스팅되고 작동하는 jekyll 프로젝트가 있다고 가정합니다. 그렇지 않으면 미리 구성된 이 항목을 복제할 수 있습니다repo. 컴퓨터에서 실행하려면 Jekyll installation을 완료해야 합니다.

데이터 모델링.

ㅏ. Flutter 애플리케이션을 만듭니다.

따라서 당연히 새로운 Flutter 애플리케이션을 만들어야 합니다. 그냥 실행

flutter create [project]
스크립트(최신 버전의 flutter sdk를 사용해야 함).

비. Jekyll Posts API용 모델 생성 및 생성.

Flutter에서 Restful API와 통신하는 방법에는 여러 가지가 있습니다.

먼저 json 개체의 모델 클래스 표현을 만들어야 합니다. 이 부분의 속도를 높이기 위해 JSON 파일에서 모델 클래스를 생성할 수 있는 json_to_model package을 사용합니다. 따라서 설치 지침을 따르고 Flutter 프로젝트 루트에 jsons 디렉토리를 생성하기만 하면 됩니다.

이 디렉토리에는 5개의 파일이 포함됩니다.

📃 블로그.json :

{
    "homepage": "",
    "version": "",
    "name": "",
    "description": "",
    "logo": "",
    "last_update": "@datetime",
    "expired": false,
    "favicon": "",
    "url": "",
    "disqus": "",
    "email": "",
    "paginate": "",
    "posts": "$[]article"
}

📃 기사.json :

{
    "id": "",
    "slug": "",
    "url": "",
    "title": "",
    "date": "",
    "image": "",
    "featured": false,
    "premium": false,
    "sticky": false,
    "author": "$author",
    "read_time": "",
    "date_iso": "@datetime",
    "date_fr": "$date_article",
    "date_en": "$date_article",
    "category_main": "",
    "categories": [""],
    "tags": [""],
    "next": "$article_related",
    "previous": "$article_related",
    "comments": "",
    "summary": "",
    "content": ""
}

📃 기사 관련.json :

{
    "id": "",
    "slug": "",
    "url": "",
    "title": "",
    "image": "",
    "author": "$author",
    "read_time": "",
    "date_fr": "",
    "date_en": "",
    "category_main": "",
    "tags": [""],
    "type": "@enum:post"
}

📃 작가.json :

{
    "name": "",
    "avatar": "",
    "display_name": "",
    "gravatar": "",
    "email": "",
    "site": "",
    "twitter": "",
    "social": "",
    "instagram": "",
    "bio": ""
}

📃 날짜-기사.json :

{
    "day": "",
    "month": "",
    "year": "",
    "complete": ""
}

그런 다음 flutter pub run json_to_model 명령을 실행합니다. 모든 모델 클래스가 있는 모델이라는 디렉토리가 생성됩니다. 각 클래스의 가장 유용한 부분은 JSON을 모델 객체로 변환하는 데 사용할 생성된 fromJson 메서드입니다.

이것은 기사 모델에 대한 메소드 본문의 예입니다.

factory Article.fromJson(Map<String,dynamic> json) => Article(
    id: json['id'].toString(),
    slug: json['slug'].toString(),
    url: json['url'].toString(),
    title: json['title'].toString(),
    date: json['date'].toString(),
    image: json['image'].toString(),
    featured: json['featured'] as bool,
    premium: json['premium'] as bool,
    sticky: json['sticky'] as bool,
    author: Author.fromJson(json['author'] as Map<String, dynamic>),
    readTime: json['read_time'].toString(),
    dateIso: DateTime.parse(json['date_iso'] as String),
    dateFr: DateArticle.fromJson(json['date_fr'] as Map<String, dynamic>),
    dateEn: DateArticle.fromJson(json['date_en'] as Map<String, dynamic>),
    categoryMain: json['category_main'].toString(),
    categories: (json['categories'] as List? ?? []).map((e) => e as String).toList(),
    tags: (json['tags'] as List? ?? []).map((e) => e as String).toList(),
    next: ArticleRelated.fromJson(json['next'] as Map<String, dynamic>),
    previous: ArticleRelated.fromJson(json['previous'] as Map<String, dynamic>),
    comments: json['comments'].toString(),
    summary: json['summary'].toString(),
    content: json['content'].toString()
  );

씨. 기본 UI 레이아웃을 설정합니다.

이 단계에서는 일부 인터페이스만 만들고 가짜 데이터를 사용하여 매력적으로 보이도록 했습니다.

시작 화면: 응용 프로그램이 성공적으로 로드될 때까지 나타나는 첫 번째 응용 프로그램 페이지입니다.

홈 페이지 : 두 부분으로 나뉩니다(추천 게시물 및 기타 게시물은 최신 순으로 정렬됨).

카테고리별로 세분화된 모든 기사.

즐겨찾기, 나중에 읽기 기사 및 설정 페이지.

기사 페이지.

검색 페이지.

기사의 끝에서 이러한 다양한 페이지와 기능에 대한 코드 구현을 제공할 것입니다. 필요에 따라 자유롭게 수정하고 적용할 수 있습니다.

앱 UI 레이아웃이 준비되었습니다. 그래서 그것을 흔들어 보자! Jekyll Posts API 엔드포인트와 통신하도록 만들어야 합니다.

디. Jekyll JSON API 통합을 추가합니다.

우리에게는 모델이 있습니다. API로 작동시켜 봅시다.

애플리케이션이 어떻게 작동하는지 설명하겠습니다. 앱을 실행한 후 블로그 게시물 API 끝점에 GET 요청을 보냅니다. 다음으로 응답 본문을 모든 게시물을 포함하는 블로그 개체로 구문 분석합니다. 그런 다음 콘텐츠를 사용자에게 표시합니다. 이것은 간단합니다.

Flutter에서 이 작업을 수행하려면 http package이 필요합니다.

 var request = await http.get(
    Uri.parse("https://myawesomejekyllblog.com/api"),
    headers: {"Accept": "Application/json"},
 );

 Blog blog = Blog.fromJson(jsonDecode(request.body));

 List<Article> myPosts = blog.posts;

간단하지 않습니까? 이 세 줄과 네트워크 또는 데이터 구문 분석 오류가 없으면 블로그의 모든 콘텐츠가 있습니다.

이제 데이터가 있으므로 이 데이터를 위젯에 전달할 수 있는 브리지가 필요합니다. 또한 데이터 상태(기사 이미지가 로드됨, 이 기사가 즐겨찾기에 있음 등) 또는 이벤트(기사 클릭, 사용자가 더 이상 네트워크에 연결되지 않음, . ..) 특정 작업을 수행합니다(기사 내용 참조, 목록의 나머지 기사 다시 로드, ...).

Flutter에서는 이를 상태 관리라고 합니다. our series의 다음 장에서는 이 큰 영역을 다루려고 합니다(특정 플러그인인 Riverpod 사용).

그 동안 코드를 조금 더 자세히 살펴보려면 Jekyll blog 및 the Flutter project을 복제할 수 있습니다.

그래서, 이 단계에서 당신의 생각은 무엇입니까?