Skip to content

β˜•οΈ This is the complete sample code for the book 'Do it! Making Progressive Web Apps'. πŸͺ 'Do it! ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ μ›Ήμ•± λ§Œλ“€κΈ°' μ±…μ˜ μ‹€μŠ΅ μ™„μ„± μ†ŒμŠ€μ½”λ“œμž…λ‹ˆλ‹€.

Notifications You must be signed in to change notification settings

codedesign-webapp/pwa-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

71 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Hits





"Do it! ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ μ›Ήμ•± λ§Œλ“€κΈ°" μ±… μ‹€μŠ΅ μ†ŒμŠ€μ½”λ“œ




1. 예제 파일 μ†Œκ°œ

이 곳은 'Do it! ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ μ›Ήμ•± λ§Œλ“€κΈ°' (μ΄μ§€μŠ€νΌλΈ”λ¦¬μ‹±, 김응석 μ €) μ±… μ‹€μŠ΅μ˜ˆμ œ μ™„μ„± μ†ŒμŠ€μ½”λ“œ 원격저μž₯μ†Œ(Repository) μž…λ‹ˆλ‹€.

  • 버전에 상관 없이 μ‹€ν–‰ν•  수 μžˆλŠ” μ™„μ„±λœ μ†ŒμŠ€νŒŒμΌκ³Ό μ±… λ‚΄μš©μ— 따라 직접 따라해 λ³Ό 수 μžˆλŠ” ν”„λ‘œμ νŠΈ ν…œν”Œλ¦Ώ(boilerplate)이 μ€€λΉ„λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

책에 λŒ€ν•œ μžμ„Έν•œ μ†Œκ°œλŠ” μ•„λž˜ 링크λ₯Ό μ°Έκ³ ν•˜μ„Έμš”.


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 μ›Ήμ•±' 컀�?οΏ½λ‹ˆν‹° μΉ΄νŽ˜μ— μ§ˆλ¬Έν•΄ λ³΄μ„Έμš”. λ˜ν•œ μΉ΄νŽ˜μ—μ„œλŠ” ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ μ›Ήμ•± κ΄€λ ¨ μ΅œμ‹  μ†Œμ‹λ„ λ§Œλ‚  수 μžˆμŠ΅λ‹ˆλ‹€.


κ°μ‚¬ν•©λ‹ˆλ‹€.



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.


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.


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.




About

β˜•οΈ This is the complete sample code for the book 'Do it! Making Progressive Web Apps'. πŸͺ 'Do it! ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ μ›Ήμ•± λ§Œλ“€κΈ°' μ±…μ˜ μ‹€μŠ΅ μ™„μ„± μ†ŒμŠ€μ½”λ“œμž…λ‹ˆλ‹€.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published