패스트캠퍼스 챌린지 7일차

# 강의 제목 : 누적다운로드 120만+ 1인 개발자와 함께하는 앱 개발 입문 Online

# 강의 목표 : 기초부터 운영까지 앱 개발의 전체 프로세스를 이해한다. 
                  내 이름으로 된 앱을 최대 10개까지 만들어 출시할 수 있다. 
                  앱 개발자로 성장할 수 있는 초석을 다진다. 
                  반응 얻는 앱의 특징과 노하우를 알아간다. 
                  향후 강의 없이도 나만의 앱을 개발할수 있는 실력을 가진다. 

# 강의 요약 : 프로그램 설치부터 기본 문법, 광고 다는 법, 클론코딩을 진행하며 필수 지식을 학습한다. 
                 총 10개의 다른 주제로 실제 사용화 가능한 수준의 앱을 만들어본다.
                 나의 앱을 세상에 선보이기 위한 개발자 등록 및 배포를 진행한다. 
                 강사님의 리뷰/클레임 대응사례 등 앱 성공 포인트를 참고해 1인 개발자로서의 입지를 다진다. 

 # 강의 목차 : Flutter 실전 앱 제작
                    - 앱 기능 및 디자인 설계 및 초기 구조 만들기 (7일차)
                    - TODO 화면 만들기
                    - TODO 화면 만들기 
                    - TODO 기록 화면 만들기 (내부 DB 저장, 수정, 삭제)
                    - TODO 기록 화면 만들기 (이전 할일 기록 리스트, 카테고리 별 리스트)
                    - 앱 기능 및 디자인 설계 및 초기 구조 만들기 (일기앱)
                    - 일기 작성 화면 만들기
                    - 일기 작성 화면 만들기 (이모티콘 추가)
                    - 달력 화면 만들기 
                    - 통계, 더보기 화면 만들기 
                    - Splash 스크린 추가하기 

# 강의 화면 :  

# 강의 내용 : Flutter 실전 앱 제작 (앱 기능 및 디자인 설계 및 초기 구조 만들기)

1. 앱 디자인 
 - 오늘 할일 (TODO)를 기록할 수 있음
 - 완료/미완료 표시 할 수 있음
 - 이전 기록을 확인 할 수 있음
 - 카테고리를 설정할 수 있음
 - 기존 기록을 앱 내부 저장소에 보관할 수 있음
 - 타겟층 - 10, 20대 학생 및 직장인 

2. 데이터 설계
 - 할일을 작성할 때 필요한 데이터 설계 
    가. 할일의 제목
    나. 할일의 날짜
    다. 할일의 완료 여부 
    라. 할일의 카테고리 
    마. 할일의 메모 

3. 화면 설계 
 - 할일 메인 화면 
    - 할일을 표시(수정/삭제) 할 수 있는 페이지 
 - 할일 작성 화면 
    - 할일 작성 페이지(제목, 내용, 색상, 카테고리)
 - 기록 화면
    - 이전 기록을 확인하는 페이지 
 - 더보기 화면
    - 카테고리 추가 등 다른 기능을 하는 페이지 

4. 화면 디자인 

 

# 기본 뼈대 만들기 (오늘, 기록, 더보기)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(child: AppBar(),
        preferredSize: Size.fromHeight(0),
      ),
      body: Column(
        children: [
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.today_outlined),
              label: "오늘"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind_outlined),
              label: "기록"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.more_horiz),
              label: "더보기"
          ),
        ],
      ),
    );
  }
}

 

# 교육 소감

오늘은 앱 기능 및 디자인 설계를 위한 방법과 앱 구현을 위한 기본 초기 구조 만들기에 대해 학습 하였다. 앱을 만들기 위해선 필수적인 기획단계를 거치고, 설계를 하여, 어떻게 구현할지에 대한 논의가 반드시 선행되어야 한다고 생각된다. 
간단하게 라도 주요 기능들을 정의하고, 이 주요 기능들의 상세 설명 (권한, 동작, 기능) 등 으로 정리를 하고, 단계별로 구현을 어떻게 할지 적는것도 중요하다고 생각한다. 오늘은 앱 기능 개발에 앞서  기능을 정의하는 방법과 가볍게 Counter 어플과 동일하게, 하단에 오늘 기록, 더보기 Navigation Bar을 만들면서 Layout 를 작성하였다. 이전 앞에서 각각 네비게이션 바 전환을 위해 클릭 이벤트 onPress() 함수를 사용해봐서 쉽게 작성할 수 있었다. 앞으로 이 네비게이션을 통해 하나씩 화면을 만들 에정인데, 오늘의 역할은 앞으로 작성할 todo 앱에서 할일 과 완료된 일에 대한 할일을 정의하고, 각각 클릭을 통해 완료와 미완료로 구분하는 화면을 구성하는 역할을 수행할 것이고, 기록 탭은 이 모든 과정을 기록하는 화면을 구성할 예정이다. 본격적으로 todo 앱부터 하나씩 진행이 될 예정인데, 아주 천천히 모든 부분을 이해하면서 개발해보고자 한다. 빨리 가는 것 보다 이해하면서 단계별 접근해 갔을때 앱 응용력이 생기는 듯하다. 

# 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스