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

'Do it! 프로그레시브 웹앱 만들기' 책의 소개입니다.

들어가며

최근 웹 애플리케이션 분야는 PWA(Progressive Web Apps, 프로그레시브 웹앱), 뷰(Vue.js) 등의 자바스크립트 프레임워크를 통한 SPA(Single Page Apps) 지원, 파이어베이스(Firebase) 등의 실시간 DB 사용과 같은 많은 변화가 이뤄지고 있습니다. 그래서 이러한 동향을 담아 그 동안 다루지 못했던 주제의 새로운 책으로 준비하여 'Do it 프로그레시브 웹앱(PWA) 만들기'라는 책으로 만나뵙게 되었습니다.

• 프로그레시브 웹앱(PWA) 만들기가 즐겁다!

• 입문용 앱은 물론, 6가지 실전 상황을 위한 PWA 프로젝트 완성

• PWA에서 멈추지 않고 하이브리드앱으로 변환, 구글 플레이 등록까지 전 과정을 볼 수 있다!

• 똑같은 코드 베이스에서 안드로이드 앱으로 쉽게 변환할 수 있어야 진정한 크로스 플랫폼 프레임워크라 할 수 있다!

이 책으로 배울 수 있는 14가지 핵심 주제

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

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

책 자세히 살펴보기

• Yes24 인터넷 서점

  http://www.yes24.com/Product/Goods/91724510

• 알라딘 인터넷 서점

  https://www.aladin.co.kr/m/mproduct.aspx?start=short&itemid=248639223

2. 책의 내용

'Do it! 프로그레시브 웹앱(PWA) 만들기' 책에서 다룰 내용을 간략히 정리해 보았습니다.

| 첫째마당 |

전 세계적으로 주목받는 프로그레시브 웹앱의 특징을 자세히 살펴봅니다.

• 헬로월드! 프로그레시브 웹앱
• 자바스크립트 ES6+
• 순수 자바스크립트와 PWA

| 둘째마당 |

현대화된 웹앱 작업을 쉽게 수행하려면 뷰 프레임워크를 잘 활용해야 합니다.

• 뷰, Vuex, Vue Router, SPA(Single Page Application)
• 뷰티파이와 머티리얼디자인(스펙2)
• 뷰와 PWA

| 셋째마당 |

실전 응용이 가능하도록 수준별로 다양한 상황의 앱을 설계하고 준비했습니다.

• 구글 Workbox, 파이어베이스
• 실전 상황의 6가지 앱 프로젝트 : To-Do 앱 만들기, 사진 갤러리 앱 만들기, 카메라 갤러리 앱 만들기, 로그인 서비스 만들기, 푸시 알림 서비스 만들기, 오프라인 동기화 기능 만들기

| 넷째마당 |

PWA를 구글 플레이에도 배포시키는 방법의 이야기가 시작됩니다.

• 하이브리드앱과 코르도바
• PWA와 안드로이드앱
• 구글 플레이 스토어에 앱 등록하기

상세한 목차와 예제 파일 다운로드 방법은 아래 링크를 참고하세요.

• 'Do it! 프로그레시브 웹앱 만들기' 책의 전체 목차입니다.

  https://cafe.naver.com/hmaps/11396

• 'Do it! 프로그레시브 웹앱 만들기' 책의 전체 예제 파일 다운로드 방법입니다.

  https://cafe.naver.com/hmaps/11391

• 'Do it! 프로그레시브 웹앱 만들기' 책의 전체 미션 파일 다운로드 방법입니다.

  https://cafe.naver.com/hmaps/11392

3. 라이브 데모

책을 통해서 만들게 될 PWA 앱의 라이브 데모입니다. 실전 상황의 총 6가지 앱을 라이브로 직접 실행할 수 있으며 더 나아가 안드로이드 앱으로 변환된 PWA 앱을 구글 플레이에서 직접 다운로드 받아 테스트할 수 있습니다.

• 'Do it! 프로그레시브 웹앱(PWA) 만들기' 책의 PWA 앱 예제 라이브 데모

  https://cafe.naver.com/hmaps/11352

• 'Do it! 프로그레시브 웹앱(PWA) 만들기' 책의 안드로이드앱(하이브리드앱) 예제의 라이브 데모

  https://cafe.naver.com/hmaps/11353

지금 바로 실행해서 테스트하시려면 아래 링크를 활용해 보세요.

PWA Live Demo

• 반가워요! PWA by JS : https://pwa-hello-js.web.app/
• 반가워요! PWA by Vue : https://pwa-hello-vue.web.app/
• 사진 갤러리 : https://pwa-gallery-pic.web.app/
• To-Do 리스트 : https://pwa-to-do.web.app/
• 카메라 갤러리 : https://pwa-camera.web.app/
• 구글 로그인 서비스 : https://pwa-auth-login.web.app/
• 푸시 알림 서비스 : https://pwa-notification-push.web.app
• 오프라인 동기화 : https://pwa-offline-sync.web.app/

4. 마무리

이 책에서 가장 중심을 이루는 키워드는 프로그레시브 웹앱(PWA)의 만들기가 즐겁다는 것입니다. 책을 준비하면서 알게된 PWA에 대한 뷰의 철학과 지원도 너무 훌륭했고 그 동안 꿈꿔왔던 웹으로 이상적인 앱을 만드는 시대가 정말 이뤄지는 웹앱 개발 환경의 변화도 놀랍습니다. CODE*DESIGN 웹앱(https://code-design.web.app) 카페가 시작된 2012년 부터 약 9년동안은 회원분들께서 물어봐 주신 2000여개의 질문에 답을 준비하고 600여개의 앱 제작에 대한 생각들을 나누면서 어떤 기술들을 알려드려야 할 지 늘 고심했던 시기였던 것 같습니다. 그리고 앱 제작에 대한 꿈을 이루시는데 어떤 것을 드릴 수 있을가를 준비하고 다듬으면서 마침내 실전의 상황별 예제와 제작 방법을 책에 담을 수 있었습니다.

모쪼록 정리한 내용들이 책을 빠르게 검토하고 계획을 세우실 때 도움드렸으면 좋겠습니다. 그리고 이 책을 통해 학생과 직장인들에게는 좋은 포트폴리오의 재료가 되고 기업인들에게는 성공적인 사업을 이루시는데에 조금이나마 기여되었으면 좋겠습니다.

감사합니다.

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

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

---

1. What is a book 'Do it! Making Progressive Web Apps(PWAs)'?

This is an introduction to the book 'Do it! Making Progressive Web Apps(PWAs)'.

Introduction

In recent web application fields, there are many emerging tech stacks -- PWAs(Progressive Web Apps), SPA(Single Page Apps), Vue.js, and the use of real-time DBs such as Firebase. So, with this trend, I prepared a new book called 'Do it! Making Progressive Web Apps(PWA)'.

• Making a Progressive Web App (PWA) is fun!

• Practice of PWA projects for 6 real apps as well as basic apps

• You can see the entire process converting from PWA to a hybrid app and registering on Google Play!

• PWA is a true cross-platform framework because you can easily convert from the same code base of PWA app into your Android app!

14 key topics you can learn from this book

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 skills 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

Take a closer look at the book

• Yes24 Internet Bookstore

  http://www.yes24.com/Product/Goods/91724510

2. Content of the book

Here is a brief summary of the topics covered in the book 'Do it! Making a Progressive Web Apps(PWAs)'.

| First Part |

Take a closer look at the features of progressive web apps that are gaining worldwide attention.

• Hello World! Progressive Web Apps
• JavaScript ES6+
• vanilla JavaScript and PWA

| Second Part |

To make it easy to work with modern web apps, you need to make good use of Vue.js framework.

• Vue, Vuex, Vue Router, SPA(Single Page Application)
• Vuetify and Material Design (Specification 2)
• Vue and PWA

| Third Part |

We designed and prepared apps in various situations for each level to enable practical application.

• Google Workbox, Firebase
• 6 PWA apps for real projects : To-Do app, photo gallery app, camera gallery app, login service, push notification service, and offline sync app.

| Fourth Part |

The story begins how to distribute PWAs to Google Play.

• Hybrid Apps and Cordova
• PWAs and Android app
• Registering an app on the Google Play Store

For detailed table of contents, please refer to the link below.

• This is the complete table of contents for the book 'Do it! Making Progressive Web Apps(PWAs)'.

  https://cafe.naver.com/hmaps/11396

• Here's how to download the full example files from the book 'Do it! Making Progressive Web Apps(PWAs)'.

  https://cafe.naver.com/hmaps/11391

• This is how to download the entire mission files from the book 'Do it! Making Progressive Web Apps(PWAs)'.

  https://cafe.naver.com/hmaps/11392

3. Live Demos

This is a link for 6 live demos of the PWA apps you'll be making through the book. You can directly run a total of 6 PWA apps in real situation, and furthermore, you can download and test the PWA apps converted to an Android app directly from Google Play.

• PWAs live demos from the book 'Do it! Making Progressive Web Apps(PWAs)'

  https://cafe.naver.com/hmaps/11352

• Live demos of the Android apps (hybrid Apps) from the book 'Do it! Making Progressive Web Apps(PWAs)'

  https://cafe.naver.com/hmaps/11353

If you want to run it and test it right now, use the link below.

PWA Live Demo

• Nice to meet you! PWA by JS: https://pwa-hello-js.web.app/
• Nice to meet you! PWA by Vue: https://pwa-hello-vue.web.app/
• Photo Gallery: https://pwa-gallery-pic.web.app/
• To-Do List: https://pwa-to-do.web.app/
• Camera Gallery: https://pwa-camera.web.app/
• Google Login Service: https://pwa-auth-login.web.app/
• Push Notification Service: https://pwa-notification-push.web.app
• Offline synchronization: https://pwa-offline-sync.web.app/

4. Success story of PWAs

The central keyword in this book is that making progressive web apps (PWAs) is fun. Vue's philosophy and support for PWAs, which I learned while preparing the book, was great, and the change is amazing in the web app development environment that really brings the era of creating ideal apps with the web technology I've dreamed of. 'CODE*DESIGN Web App' ( https://code-design.web.app ), for about 9 years since 2012 when the community cafe started, I have prepared answers to around 2,000 questions asked by cafe members and thoughts about creating 600 apps. It seems to have been a long time when I always struggled with what kind of good skills to prepare and share with community members. And while preparing and refining what I could give to fulfill member's dream for creating app, I was finally able to put into a book filled with actual situation and production method.

I hope that this README will help you quickly review the book. And through this book, I hope that it will be a good chance to find materials of a good portfolio for students and front-end developer, and a good contribution to achieve a successful business for businessmen, startup.

Thank you.

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

'CODE*DESIGN Web App' is an internet community cafe for PWAs(Progressive Web Apps) development and UI/UX design method studies.