vaadin kotlin pwa
1.0.0
매우 간단한 Vaadin-on-Kotlin 기반 PWA 데모. 친숙한 강력한 언어를 사용하고자하고 모든 JavaScript 브라우저를 집에서 느끼지 않는 Android 개발자를 향해 조정되었습니다. 이 앱의 개발 모델은 서버 측 Kotlin 코드에서 논리를 작성하는 데 중점을 둡니다. JavaScript 개발이 필요하지 않습니다. Java 17+가 필요합니다.
이 앱은 매우 간단한 작업 목록 앱으로 다음과 같은 기능을 표시하도록 설계되었습니다.
온라인 데모를 참조하십시오.
Progressive Web App은 휴대 전화 브라우저가 다운로드 할 수있는 웹 페이지이며 어느 정도 오프라인으로 작동 할 수 있습니다. PWA를 통해 사용자는 앱 단축키를 홈 화면에 아이콘으로 저장할 수 있습니다. 해당 아이콘에서 출시되면 앱은 URL 막대없이 완전히 전체 화면을 시작하여 기본 앱을 완전히 모방합니다.
JavaScript를 피하기 위해 Logic Server-Side를 구현하므로 오프라인 모드는 분명히 작동하지 않습니다. 그래서 우리는 앱을 충분히 진보하게 만들 것입니다. 우리는 manifest.json 및 Service Workers와 같은 모든 필요한 것들을 포함하지만 오프라인시 "오프라인"페이지를 표시합니다. 그러나이 분야에서 진행중인 노력이 진행되고 있으므로 기다려 봅시다.
PWA는 또한 화면 크기 (소위 응답 성), 일반적으로 CSS 규칙에 적응하는 경향이 있습니다. Vaadin Progressive Web 앱에서 PWA가 무엇인지 확인할 수 있습니다.
Vaadin 프레임 워크를 사용하겠습니다. 이에 대한 이유는 Vaadin 프레임 워크가 구성 요소 지향 Java 기반 웹 프레임 워크이기 때문입니다. 그로 인해 Vaadin의 프로그래밍 모델은 Android 개발자와 밀접하게 유사하고 친숙합니다. Android보기를 Vaadin 구성 요소로 전환하고 Android 개발과 마찬가지로 Android 개발 모델을 사용하는 통증없이 버튼을 계속해서 수직/Horizontallayouts에 계속 둥지를 틀고 있습니다.
Vaadin은 엄청난 양의 사전 정의 된 구성 요소를 포장하므로 일반적으로 자신의 구성 요소를 개발할 필요가 없습니다. 순수한 Java/Kotlin 코드로 사전 제작 된 구성 요소 서버 측을 오케스트레이션합니다.
Android에 대한 Vaadin 개발의 이점에 대해 자세히 알아볼 수 있습니다.
이 vaadin-boot 기반 앱을 실행, 개발 및 패키는 방법에 대한 Vaadin Boot 설명서를 참조하십시오.
sw.js 는 어디에 있습니까? sw.js , 모든 매니페스트 및 오프라인 페이지는 이제 @PWA 주석을 통해 Vaadin에 의해 자동으로 생성됩니다. 자세한 내용은 Flow가있는 PWA 작성을 참조하십시오.
Vaadin은 물론 Android와 다른 알고리즘을 사용하여 레이아웃을 수행합니다. 운 좋게도 Vaadin (또는 CSS)은 Android의 LinearLayout (Flexbox)과 매우 유사한 레이아웃을 알고 있습니다. Vaadin 8 및 Android 개발자 용 Vaadin 10 서버 측 레이아웃 VerticalLayout 읽으 HorizontalLayout .
Intellij Idea Community Edition을 다운로드하여 설치 한 다음이 프로젝트를 가져올 수 있습니다. Android Studio는 Intellij Idea Community를 기반으로하므로 즉시 집에서 느껴야합니다.
앱을 시작하려면 Main.kt 열고 main() 함수를 실행하십시오. 브라우저를 열고 http : // localhost : 8080을 누르십시오.
UI의 주요 고기는 TaskListView.kt에 있습니다. 해당 파일을 편집하고 직접 실험 해보십시오. 기존 Vaadin 구성 요소가 많이 있습니다. 구성 요소 사용의 더 많은 예를 보려면 음료 버디 예제 앱을 확인할 수 있습니다. 또한 전체 Vaadin 문서를 읽어야합니다.
브라우저는 CSS 및 레이아웃 관련 문제를 디버깅하는 데 도움이되는 매우 강력한 IDE입니다. 시간을내어 다음 튜토리얼을 통해 천천히 읽어 브라우저 개발자 도구를 알게됩니다.
Vaadin 기반 앱을 테스트하는 것은 매우 쉽습니다. 예를 들어 "Click Me"캡션이있는 버튼과 같은 선택기를 통해 구성 요소를 찾아야합니다. TaskListViewTest.kt 샘플 테스트 파일에는 기본 화면을 테스트하는 간단한 테스트가 표시됩니다. 이 테스트 접근 방식에 대한 배경에 관한 브라우저리스 테스트 프로젝트 문서를 읽으십시오.
데이터베이스가 없으면 작업 목록을 세션에만 저장할 수 있으며 서버가 재부팅 될 때 사라질 수 있습니다. Vaadin-on-Kotlin의 SQL 데이터베이스 지원을 사용할 것입니다. 일을 쉽게하기 위해 우리는 서버가 재부팅 될 때 사라질 메모리 인 Memory H2 데이터베이스를 사용합니다- 터치 : -D
우리는 데이터베이스 마이그레이션에 Flyway를 사용합니다. 앱이 초기화 될 때 마이그레이션 스크립트가 어떻게 실행되는지에 대해 bootstrap.kt를 확인하십시오.
작업 엔티티는 데이터베이스에 매핑됩니다. 엔티티와 DAO를 상속하면 findAll() 및 save() 와 같은 유용한 방법을 상속합니다. 또한 DataProvider 통해 모든 인스턴스를 제공하는 수단을 얻을 수 있습니다. 자세한 내용은 TaskListView.kt 그리드 구성을 참조하십시오.
Finder Methods가 엔티티에 어떻게 첨부되는지, 조회 및 저장이 작동하는 방법에 대한 Back to Base Article을 참조하십시오.
이 앱은 더 이상 실행 스크립트가있는 일반 지퍼 프로젝트에 지나지 않습니다. 단순히 명령 줄에서 실행할 수 있습니다 (우리는 내장 부두 패키지).
이 앱에서 Docker 이미지를 생성하려면 그냥 실행하십시오.
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .이미지를 실행하려면 그냥 실행하십시오
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwa완료 - 이제 앱은 이제 LocalHost : 8080에서 실행됩니다.
MySQL을 사용하여 Google Cloud Kubernetes 및 Google Cloud SQL 에서이 앱을 실행하려면 Vaadin 앱을 Google Cloud Kubernetes 자습서에 배포하십시오.
자세한 내용은 Microk8s에서 Vaadin-on-Kotlin 앱 실행을 참조하십시오.
