A progressive Web application with Vue JS, Webpack & Material Design […

프로그레시브 웹 응용 프로그램은 미래입니다. 점점 더 많은 대기업들이 그것들(트위터등 https://mobile.twitter.com/)을 가지고 노는 것을 시작하고 있습니다.


지하철에서 탐색 할 수있는 웹 응용 프로그램을 상상해보십시오. 알림을 통해 사용자에게 최신 정보를 제공하고 앱과 유사한 탐색 기능을 제공하며 PWA 기능에 대한 개요를 제공합니다.

프로그레시브 웹 응용 프로그램 (PWA)은 응용 프로그램과 유사한 사용자 환경을 제공하는 웹 응용 프로그램입니다. PWA는 최신 웹 기술 혁신 (Sevrice Workers, Native API, JS 프레임 워크)의 이점을 누리고 웹 응용 프로그램 품질 표준을 향상시킵니다.


affd175d2276d61be94bbaae8053aa2c_1493400718_517.png

PWA에 대해 더 자세히 알고 싶다면 이 훌륭한 Google 개발자 페이지를 방문하십시오. https://developers.google.com/web/progressive-web-apps/

다음 PWA를보십시오! 네이티브 앱처럼 보입니다. 그렇죠?

affd175d2276d61be94bbaae8053aa2c_1493400780_5491.png
개발자의 관점에서 보았을 때 PWA는 네이티브 응용 프로그램에 큰 도움이됩니다. 기본적으로 웹 사이트이므로 다음과 같습니다.

  • 당신은 당신이 원하는 어떤 프레임 워크라도 쓸 수 있습니다.
  • 모든 것을 다룰 수 있는 하나의 코드 : 크로스 플랫폼 및 교차 장치 (코드는 사용자의 브라우저에 의해 실행 됨)입니다.
  • 배송이 편리 : Store를 통해 다운로드 할 필요가 없습니다.

그러나 2017 년 초 PWA는 여전히 몇 가지 제한 사항에 직면 해 있습니다.

  • Safari는 서비스 직원과 같은 일부 기본 PWA 기능을 지원하지 않지만 Apple은 이를 위해 노력하고 있습니다. https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API
  • 일부 기본 기능은 여전히 지원되지 않습니다. 자세한 내용은이 페이지의 웹 기능을 참조하십시오. https://whatwebcando.today/

Tutorial objective

이 튜토리얼은 처음부터 VueJS 및 Webpack을 사용하여 기본이지만 완전한 점진적 웹 애플리케이션을 만드는 것을 목표로합니다. 우리의 응용 프로그램은 도입부에서 발표 된 모든 요구 사항을 충족합니다. 즉, 반응 형, 응답 성, 연결 독립성 등입니다. PWA로 얻을 수있는 것의 개요를 제공합니다. 유동 기본 응용 프로그램, 오프라인 동작, 기본 기능 인터페이스, 푸시 알림 .


도전 과제를 유지하기 위해 우리는 고양이 그림 메신저 앱을 작성하려고합니다 : CropChat! Cropchat 사용자는 고양이 사진의 주요 흐름을 읽고 자세한 내용을보고 새 고양이 사진을 게시 할 수 있습니다 (인터넷에서 먼저, 다음으로 장치 드라이브 또는 카메라에서).


이 자습서는 여러 부분으로 나누어 져 있으며 연속적으로 게시됩니다.

     [1 부] VueJS, Webpack 및 Material Design Lite로 단일 페이지 응용 프로그램 만들기
     [2 부] Vue-Resource와 VueFire를 사용하여 먼 API로 앱 연결
     [3 부] 서비스 종사자와 오프라인 모드 구현
     [4 부] 사진을 찍을 장치 카메라에 접근
     [5 부] 사진을 업로드 할 장치 드라이브에 액세스
     [6 부] 푸시 알림 구현
     [7 부] 액세스 장치 위치

Basic components of our PWA

Progressive Web Application은 여러분이 좋아할 현대적인 구성 요소를 기반으로합니다!

1 부부터 시작합시다!

[PART 1] Create a Single Page Application with VueJS, Webpack and Material Design Lite

VueJS 2에 익숙하지 않다면 공식 튜토리얼을 살펴 보는 것이 좋습니다.

Build the VueJS App base

우리는 Vue-cli를 사용하여 우리의 응용 프로그램을 스카폴드합니다:

npm install -g vue-cli

Vue-cli는 몇가지 템플릿과 함께 제공됩니다. 우리는 webpack 템플릿을 선택할 것입니다. Webpack은 자산을 처리하고 구축하는 Javascript 응용 프로그램용 최신 모듈 묶음입니다. Vue-cli는 Webpack, vue-loader (hot reload!), JS linter 및 테스트 슈트를 사용하여 더미 VueJS 애플리케이션을 만들 예정입니다.

vue init webpack cropchat


몇가지 질문을 하게 됩니다. 사용된 구성은 다음과 같습니다.


This will install Vue 2.x version of the template.
  For Vue 1.x use: vue init webpack#1.0 cropchat
? Project name cropchat
? Project description Image messenging application
? Author Charles BOCHET <charlesb@theodo.fr>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? No
   vue-cli · Generated "cropchat".


이 프로세스는 다음 하위 폴더가있는 프로젝트 폴더를 만듭니다.

  • build: webpack 및 vue-loader 구성 파일을 포함합니다.
  • config: 우리의 app config (환경, 매개 변수 ...)를 포함합니다.
  • src: 우리 애플리케이션의 소스 코드
  • static: 이미지, CSS 및 기타 공개 자산
  • test: Karma & Mocha가 추진한 단위 테스트 파일

그런 다음 실행 :

cd cropchat
npm install
npm run dev

localhost:8080에서 브라우저가 열립니다.


affd175d2276d61be94bbaae8053aa2c_1493401842_1646.png


Make it installable by adding a proper Manifest:

PWA의 가장 큰 장점 중 하나는 응용 프로그램을 쉽게 설치하고 공유 할 수 있다는 것입니다. 더 이상 기다리지 않겠습니다!

그렇게하려면 manifest.json 파일을 추가하고 index.html 파일에 선언해야합니다.

pwa-manifest-webpack-plugin 패키지를 사용하면 애플리케이션 빌드 중에이 파일을 생성 할 수 있습니다.

npm i pwa-manifest-webpack-plugin --save

그런 다음 build/webpack.dev.conf.js와 build/webpack.prod.conf.js를 편집하여 빌드 프로세스를 업데이트 할 수 있습니다.

맨 위에 pwa-manifest-webpack-plugin이 필요합니다.

var path = require('path')
var manifestPlugin = require('pwa-manifest-webpack-plugin')

플러그인 섹션에 추가하십시오.

plugins: [
new manifesPlugin({
name: 'CropChat',
description: 'CropChat - Image Messenger Application',
display: 'fullscreen',
icon: {
src: path.resolve('src/assets/logo.png'),
sizes: [200]
}
}),

마지막으로, index.html에서 manifest.json의 사용을 선언하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="./manifest.json">

응용 프로그램을 다시 시작해야 할 수도 있습니다. 이렇게하려면 이전 프로세스를 종료하고 다시 실행하십시오.

npm run dev

그게 전부입니다! 모바일 장치에 CropChat을 설치해 봅시다. 멀리 떨어진 모바일 장치에서 우리의 localhost:8080에 접근하는 데는 여러 가지 방법이 있습니다:  내가 가장 좋아하는 것은 ngrok를 사용하는 것이다.

응 Ngrok는 무료로 먼 지역의 DNS에 로컬 환경을 릴레이하는 서비스입니다!

설치 방법 :

npm install -G ngrok

그런 다음 실행 :

ngrok http 8080

그러면 다음과 같은 결과가 나타납니다.

ngrok by @inconshreveable                                                                   (Ctrl+C to quit)

Session Status online
Version 2.1.18
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://5ef29506.ngrok.io -> localhost:8080
Forwarding https://5ef29506.ngrok.io -> localhost:8080

Connections ttl opn rt1 rt5 p50 p90
39 3 0.01 0.01 120.01 881.89

스마트 폰으로 ngrok url http://5ef29506.ngrok.io를 탐색하십시오. 장치 바탕 화면에 추가 할 수 있습니다!

affd175d2276d61be94bbaae8053aa2c_1493402310_8482.png
affd175d2276d61be94bbaae8053aa2c_1493402311_4246.png
affd175d2276d61be94bbaae8053aa2c_1493402401_977.pngaffd175d2276d61be94bbaae8053aa2c_1493402416_1638.png








Cropchat의 출처는 GitHub에서 확인할 수 있습니다. Git 히스토리는 튜토리얼 단계를 따른다 : 다음 커밋에서이 단계의 변경 사항을 확인할 수있다. 5ff77fd3cd71a988fad9c187d57e87ea80d670f0

ngrok에 대해 더 배우려면, Matthieu Auger의 기사 인 ngrok를 사용하여 지역 환경을 세계에 공개하십시오. http://www.theodo.fr/blog/2016/06/expose-your-local-environment-to-the-world-with-ngrok/

Create view skeleton and handle routing

이제 우리는 적절한 기반을 가지고 CropChat 기능을 구현할 것입니다. CropChat에는 세 가지보기가 있습니다.

  • 홈 뷰 : cat 그림을 화면의 목록으로 표시합니다.
  • 자세히보기 : 특정 고양이 이미지 세부 정보를 표시합니다 (홈 뷰에서 클릭하여 액세스 가능).
  • 포스트 뷰 : 사용자가 새 그림을 게시 할 수 있습니다.

다음과 같은 뼈대가있는 src/component/HomeView.vue 뷰를 만듭니다.

<template>
<ul class="list">
</ul>
</template>
<script>
export default {
}
</script>
<style scoped>
.list {
width: 100%;
padding: 0;
}
</style>

src/component/DetailView.vue보기와 동일합니다.

<template>
<div class="card-image">
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

src/component/PostView.vue보기와 동일합니다.

<template>
<div class="waiting">
Not yet available
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.waiting {
padding: 10px;
color: #555;
}
</style>

마지막으로 라우팅 파일 src/router/index.js를 업데이트 합니다.


import Vue from 'vue'
import Router from 'vue-router'
import HomeView from 'components/HomeView'
import DetailView from 'components/DetailView'
import PostView from 'components/PostView'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/detail/:id',
name: 'detail',
component: DetailView
},
{
path: '/post',
name: 'post',
component: PostView
}
]
})

사용하지 않은 Hello.vue 뷰도 삭제하십시오. 모바일 앱에 직접적인 영향을주는 변경 사항을 직접 확인해야합니다 (핫 리로드가 좋지 않습니까?)


깃 커밋 : 22ab9a2058dae8f7689b8635ff52d89652675aa6

Install Material Design Lite

Material Design Lite를 모르십니까? 소재 디자인을 웹 애플리케이션에 쉽고 가볍게 구현할 수있는 훌륭한 프레임 워크입니다.

자세한 내용은 MDL.io를 참조하십시오.

CropChat 종속성 업데이트 :

npm install material-design-lite --save

src/App.vue 구성 요소를 업데이트하여 MDL 스타일을 가져오고 MDL 모듈을로드하십시오.

<script>
require('material-design-lite')
...
</script>
<style>
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://code.getmdl.io/1.2.1/material.blue-red.min.css');
</style>

Git commit: b726b40488132c400dd861bd397f61b15e81631e

Provide your Single Page Application with a Navigation Bar:

기본 구성 요소 src/App.vue 템플릿 섹션을 업데이트합니다.

<template>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">CropChat</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">CropChat</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="/#/" @click="hideMenu">Home</a>
<a class="mdl-navigation__link" href="/#/post" @click="hideMenu">Post a picture</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<router-view></router-view>
</div>
</main>
</div>
</template>

Material Design Lite는 단일 페이지 응용 프로그램을 제작하도록 특별히 설계되지 않았으므로 사용자가 메뉴 링크를 클릭 할 때 burger 메뉴를 숨겨야합니다.

<script>
...
export default {
name: 'app',
methods: {
hideMenu: function () {
document.getElementsByClassName('mdl-layout__drawer')[0].classList.remove('is-visible')
document.getElementsByClassName('mdl-layout__obfuscator')[0].classList.remove('is-visible')
}
}
}
</script>

affd175d2276d61be94bbaae8053aa2c_1493403541_5734.png
affd175d2276d61be94bbaae8053aa2c_1493403541_8636.png


Git commit: 829d0af767a9f7cba13355296d9da79384d80099

Populate views and bring application to life

우리는 아직 백엔드 서버에 연결되어 있지 않습니다. 우리는 현재 가짜 데이터를 사용하려고합니다.

src/data.js 파일을 만듭니다.

export default {
pictures: [
{
'id': 0,
'url': 'http://25.media.tumblr.com/tumblr_m40h4ksiUa1qbyxr0o1_400.gif',
'comment': 'A cat game',
'info': 'Posted by Kevin on Friday'
},
{
'id': 1,
'url': 'http://25.media.tumblr.com/tumblr_lhd7n9Qec01qgnva2o1_500.jpg',
'comment': 'Tatoo & cat',
'info': 'Posted by Charles on Tuesday'
},
{
'id': 2,
'url': 'http://24.media.tumblr.com/tumblr_m4j2atctRm1qejbiro1_1280.jpg',
'comment': 'Santa cat',
'info': 'Posted by Richard on Monday'
},
{
'id': 3,
'url': 'http://25.media.tumblr.com/tumblr_m3rmbwhVB51qhwmnpo1_1280.jpg',
'comment': 'Mexico cat',
'info': 'Posted by Richard on Monday'
},
{
'id': 4,
'url': 'http://24.media.tumblr.com/tumblr_mceknxs4Lo1qd477zo1_500.jpg',
'comment': 'Curious cat',
'info': 'Posted by Richard on Monday'
}
]
}

HomeView.vue 스크립트 섹션에서 데이터를 가져오고 그림을 해당 DetailView에 연결하십시오.

<script>
import data from '../data'
export default {
methods: {
displayDetails (id) {
this.$router
.push({ name: 'detail', params: { id: id }})
}
},
data () {
return {
'pictures': data.pictures
}
}
}
</script>

HomeView.vue 템플릿 및 스타일 업데이트:

<template>
<div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone">
<div v-for="picture in this.$data.pictures" class="image-card" @click="displayDetails(picture.id)">
<div class="image-card__picture">
<img :src="picture.url" />
</div>
<div class="image-card__comment mdl-card__actions">
<span>{{ picture.comment }}</span>
</div>
</div>
</div>
</div>
<a class="add-picture-button mdl-button mdl-js-button mdl-button--fab mdl-button--colored" href="/#/post">
<i class="material-icons">add</i>
</a>
</div>
</template>
...
<style scoped>
.add-picture-button {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 998;
}
.image-card {
position: relative;
margin-bottom: 8px;
}
.image-card__picture > img {
width:100%;
}
.image-card__comment {
position: absolute;
bottom: 0;
height: 52px;
padding: 16px;
text-align: right;
background: rgba(0, 0, 0, 0.5);
}
.image-card__comment > span {
color: #fff;
font-size: 14px;
font-weight: bold;
}
</style>

DetailView.vue에서 동일한 개선 사항을 계속 진행하십시오.

<template>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col">
<div class="picture">
<img :src="this.$data.pictures[$route.params.id].url" />
</div>
<div class="info">
<span>{{ this.$data.pictures[$route.params.id].info }}</span>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">
<div class="comment">
<span>{{ this.$data.pictures[$route.params.id].comment }}</span>
</div>
<div class="actions">
<a class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" href="/#/post">
ANSWER
</a>
</div>
</div>
</div>
</template>
<script>
import data from '../data'
export default {
data () {
return {
'pictures': data.pictures
}
}
}
</script>
<style scoped>
.picture > img {
color: #fff;
width:100%;
}
.info {
text-align: right;
padding: 5px;
color: #555;
font-size: 10px;
}
.comment {
padding: 10px;
color: #555;
}
.actions {
text-align: center;
}
</style>

Git commit: 39360f251da153c780cd148dc3cf234348bb1e87


'href'링크 사용에 관해서 : 대신 vuejs <router-link> 구성 요소를 사용하는 것이 좋지만 가능한 한 간단하게 코드를 유지하고 싶습니다.

Final Result

우리는 끝났어, CropChat이 끝났어!

affd175d2276d61be94bbaae8053aa2c_1493403820_224.png
affd175d2276d61be94bbaae8053aa2c_1493403820_4625.png


Code source available on this GitHub repository: https://github.com/charlesBochet/vueJSPwa

Conclusions

VueJS 및 Webpack의 기능을 거의 사용하지 않고 웹 응용 프로그램을 만들 수 있다고 확신했기를 바랍니다. 모든 것을 요약하려면 다음을 수행하십시오.

  • Vue-cli는 하나의 명령 줄에 더미 VueJS + Webpack 응용 프로그램을 만들 수 있습니다.
  • Manifest.json 파일을 추가하여 웹 응용 프로그램을 설치 가능하게 만듭니다.
  • Vue-Router 및 Material Design을 사용하여 앱과 유사한 사용자 환경을 만드십시오.


그러나 CropChat은 아직 프로그레시브 웹 응용 프로그램이 아닙니다. PWA 요구 사항 검사 목록을 살펴 보겠습니다.

요구 사항의 절반은 아직 충족되지 않았습니다. 다음 부분의 목표입니다. 계속 지켜봐!


affd175d2276d61be94bbaae8053aa2c_1493403916_8382.png

Comments

docker 04.30 10:43
node version이 6.10.1 이하에서만 lwip 컴파일 에러가 안난다고 합니다.  https://github.com/EyalAr/lwip/issues/297
decoder와 encoder아래의 버전을 수정해야 됩니다
Category
반응형 구글광고 등
State
  • 현재 접속자 7 명
  • 오늘 방문자 63 명
  • 어제 방문자 251 명
  • 최대 방문자 420 명
  • 전체 방문자 33,393 명
  • 전체 게시물 232 개
  • 전체 댓글수 2 개
  • 전체 회원수 9 명
Facebook Twitter GooglePlus KakaoStory NaverBand