codedesign-webapp / pwa-example

☕️ This is the complete sample code for the book 'Do it! Making Progressive Web Apps'. 🍪 'Do it! 프로그레시브 웹앱 만들기' 책의 실습 완성 소스코드입니다.

"Do it! 프로그레시브 웹앱 만들기" 책 실습 소스코드

1. 예제 파일 소개

이 곳은 'Do it! 프로그레시브 웹앱 만들기' (이지스퍼블리싱, 김응석 저) 책 실습예제 완성 소스코드 원격저장소(Repository) 입니다.

• 버전에 상관 없이 실행할 수 있는 완성된 소스파일과 책 내용에 따라 직접 따라해 볼 수 있는 프로젝트 템플릿(boilerplate)이 준비되어 있습니다.

책에 대한 자세한 소개는 아래 링크를 참고하세요.

• 'Do it! 프로그레시브 웹앱 만들기' 책이란?

  https://github.com/codedesign-webapp/pwa-about

2. 예제로 실습할 수 있는 14가지 핵심 주제

이 책에 실린 다양한 실습을 따라 하다 보면 다음과 같은 14가지 핵심 주제를 자연스럽게 터득할 수 있습니다. 이러한 기술은 모던 웹과 모바일 앱을 개발할 때 필수이므로 프런트엔드 개발자로 성장하는 데 폭넓은 경험을 제공합니다.

1. ES6+ 필수 기능
2. 뷰, 뷰티파이 기초 & 고급
3. 구글 머티리얼 디자인 스펙 2
4. 반응형 웹 프로그래밍
5. 파이어베이스 실시간 DB
6. 워크박스 런타임 캐시
7. 모바일 하드웨어 제어
8. 이메일-구글 인증
9. 푸시 알림
10. 오프라인 동기화
11. 아파치 코르도바로 하이브리드 앱 만들기
12. PWA → 네이티브 앱 변환
13. 구글 플레이 스토어에 배포
14. 서버리스 프로그래밍

3. 사용 도구

• 소스코드 편집기 : 비주얼스튜디오 코드

4. 사용방법

다운로드 방법

• 깃허브 사용이 처음이신 분들은 [Code] - [Download ZIP] 버튼을 선택하면 압축된 ZIP 파일을 다운로드 받을 수 있습니다.

• 깃허브 계정을 가지고 계시면 우측 상단의 [Fork] 버튼을 누르면 자신의 계정으로 복제됩니다.

• 깃허브 사용에 익숙하신 분들은 git clone 명령으로 다운로드 받아 사용하시면 됩니다.

  git clone https://github.com/codedesign-webapp/pwa-example
  

폴더 이름

• 폴더 이름이 ex01-01은 1장의 첫번째 예제라는 의미입니다. 완성된 소스코드가 들어 있습니다.
• 폴더 이름이 ex05-07_start는 시작할 때 활용하는 프로젝트 템플릿을 의미합니다. start 폴더를 열어 책 설명에 맞춰서 소스코드를 입력하며 학습하시면 됩니다.

5. 질의 응답과 최신 소식 제공

책을 읽다가 궁금한 점은 이지스퍼블리싱 홈페이지나 저자가 직접 운영하는 'CODE*DESIGN 웹앱' 커뮤니티 카페에 질문해 보세요. 또한 카페에서는 프로그레시브 웹앱 관련 최신 소식도 만날 수 있습니다.

• 이지스퍼블리싱 홈페이지 : www.easyspub.co.kr
• CODE*DESIGN 웹앱 : https://code-design.web.app

감사합니다.

CODE*DESIGN 웹앱 : https://CODE-DESIGN.web.app

'CODE*DESIGN 웹앱'은 PWA 프로그레시브 웹앱의 개발과 UIUX 디자인 방법의 스터디를 위한 커뮤니티 카페입니다.

---

"Do it! Making Progressive Web Apps" Book Practice Source Code

1. Introduction to sample files

This is a source code repository for practicing examples of the book which is 'Do it! Making Progressive Web Apps' (Easys Publishing, Eungsuk Kim).

• A complete source file that can be executed regardless of version and a project template(boilerplate) that can be followed directly according to the contents of the book are prepared.

For a detailed introduction to the book, please refer to the link below.

• What is the book 'Do it! Making Progressive Web Apps'?

  https://github.com/codedesign-webapp/pwa-about

2. 14 key topics to practice with examples

By following the various examples in this book, you can naturally master the 14 key topics: These skills are essential when developing modern web and mobile apps, giving you a broad experience in growing as a front-end developer.

1. ES6+ essential features
2. Basic & Advanced for Vue.js, Vuetify.js
3. Google Material Design Specification 2
4. Responsive Web Programming
5. Firebase real-time DB
6. Workbox runtime cache
7. Mobile hardware control
8. Email-Google authentication
9. Push Notification
10. Offline synchronization
11. Making hybrid apps with Apache Cordova
12. PWA → Native App Conversion
13. Publishing on Google Play Store
14. Serverless Programming

3. Tools

• Source Code Editor: Visual Studio Code

4. How to use

How to download

• If you are new to GitHub, click the [Code]-[Download ZIP] button to download the compressed ZIP file.

• If you have a GitHub account, click the [Fork] button in the upper right corner to duplicate your account.

• If you are familiar with GitHub, you can download it with the git clone command.

  git clone https://github.com/codedesign-webapp/pwa-example
  

Folder name

• The folder name ex01-01 means that it is the first example in Chapter 1. It contains the completed source code.
• The folder name ex05-07_start means the project template(boilerplate) used when starting. You can learn by opening the start folder and entering the source code according to the description of the book.

5. Q&A and the latest news

If you have any questions while reading a book, ask the Easys Publishing homepage or 'CODE*DESIGN web app' community cafe operated by the author. Especially in cafe, you can also find the latest news related to Progressive Web Apps.

• Easys Publishing homepage : www.easyspub.co.kr
• CODE*DESIGN web app : https://code-design.web.app

Thank you.

CODE*DESIGN web app: https://CODE-DESIGN.web.app

'CODE*DESIGN Web App' is a internet community cafe for PWA Progressive Web App development and UI/UX design method studies.