Spring Mobile 가이드

1. 개요

Spring Mobile은 인기있는 Spring Web MVC 프레임 워크 의 최신 확장 으로, 최소한의 노력과 적은 상용구 코딩으로 크로스 디바이스 플랫폼과 완전히 또는 부분적으로 호환되어야하는 웹 애플리케이션 개발을 단순화하는 데 도움이됩니다.

이 기사에서는 Spring Mobile 프로젝트에 대해 배우고 Spring Mobile 사용을 강조하는 샘플 프로젝트를 빌드 할 것입니다.

2. Spring Mobile의 특징

  • 자동 장치 감지 : Spring Mobile에는 내장 된 서버 측 장치 확인자 추상화 계층이 있습니다. 모든 수신 요청을 분석하고 장치 유형, 운영 체제 등과 같은 발신자 장치 정보를 감지합니다.
  • 사이트 선호도 관리 : Spring Mobile은 사이트 선호도 관리를 사용하여 사용자가 웹 사이트의 모바일 / 태블릿 / 일반보기를 선택할 수 있도록합니다. DeviceDelegatingViewresolver 를 사용 하면 사용자 측의 입력을 요구하지 않고 장치 유형에 따라 뷰 레이어를 유지할 수 있으므로 비교적 사용되지 않는 기술입니다.
  • Site Switcher : Site Switcher는 사용자의 장치 유형 (예 : 모바일, 데스크톱 등)에 따라 사용자를 가장 적합한보기로 자동 전환 할 수 있습니다.
  • 장치 인식보기 관리자 : 일반적으로 장치 유형에 따라 특정 장치를 처리하기위한 특정 사이트로 사용자 요청을 전달합니다. Spring Mobile의 View Manager를 사용하면 개발자가 모든보기를 미리 정의 된 형식으로 유연하게 배치 할 수 있으며 Spring Mobile은 장치 유형에 따라 다른보기를 자동 관리 할 수 ​​있습니다.

3. 애플리케이션 구축

이제 Spring Boot 및 Freemarker Template Engine 과 함께 Spring Mobile을 사용하여 데모 애플리케이션을 만들고 최소한의 코딩으로 장치 세부 정보를 캡처 해 보겠습니다.

3.1. Maven 종속성

시작하기 전에 pom.xml 에 다음 Spring Mobile 종속성을 추가해야합니다 .

 org.springframework.mobile spring-mobile-device 2.0.0.M3 

최신 종속성은 Spring Milestones 저장소에서 사용할 수 있으므로 pom.xml 에도 추가해 보겠습니다 .

  spring-milestones Spring Milestones //repo.spring.io/libs-milestone  false   

3.2. Freemarker 템플릿 생성

먼저 Freemarker를 사용하여 색인 페이지를 만들어 보겠습니다. Freemarker에 대한 자동 구성을 활성화하기 위해 필요한 종속성을 입력하는 것을 잊지 마십시오.

발신자 장치를 감지하고 그에 따라 요청을 라우팅하려고하므로이 문제를 해결하기 위해 세 개의 개별 Freemarker 파일을 만들어야합니다. 하나는 모바일 요청을 처리하고 다른 하나는 태블릿을 처리하고 마지막 하나 (기본값)는 일반 브라우저 요청을 처리합니다.

src / main / resources / templates 아래에 ' mobile '과 ' tablet ' 이라는 두 개의 폴더를 만들고 그에 따라 Freemarker 파일을 넣어야합니다. 최종 구조는 다음과 같습니다.

└── src └── main └── resources └── templates └── index.ftl └── mobile └── index.ftl └── tablet └── index.ftl

이제 index.ftl 파일에 다음 HTML을습니다 .

장치 유형에 따라 내부의 내용을 변경합니다.

꼬리표,

3.3. DeviceDelegatingViewresolver 활성화

Spring Mobile DeviceDelegatingViewresolver 서비스 를 활성화하려면 application.properties 안에 다음 속성을 넣어야합니다 .

spring.mobile.devicedelegatingviewresolver.enabled: true 

Spring Mobile 스타터를 포함하면 Spring Boot에서 사이트 환경 설정 기능이 기본적으로 활성화됩니다. 그러나 다음 속성을 false로 설정하여 비활성화 할 수 있습니다.

spring.mobile.sitepreference.enabled: true

3.4. Freemarker 속성 추가

Spring Boot가 템플릿을 찾고 렌더링 할 수 있으려면 application.properties에 다음을 추가해야 합니다 .

spring.freemarker.template-loader-path: classpath:/templates spring.freemarker.suffix: .ftl

3.5. 컨트롤러 생성

이제 들어오는 요청을 처리하기 위해 Controller 클래스 를 만들어야합니다 . 간단한 @GetMapping 주석을 사용하여 요청을 처리합니다.

@Controller public class IndexController { @GetMapping("/") public String greeting(Device device) { String deviceType = "browser"; String platform = "browser"; String viewName = "index"; if (device.isNormal()) { deviceType = "browser"; } else if (device.isMobile()) { deviceType = "mobile"; viewName = "mobile/index"; } else if (device.isTablet()) { deviceType = "tablet"; viewName = "tablet/index"; } platform = device.getDevicePlatform().name(); if (platform.equalsIgnoreCase("UNKNOWN")) { platform = "browser"; } return viewName; } }

여기에 몇 가지 유의할 사항이 있습니다.

  • 핸들러 매핑 메소드에서 우리는 org.springframework.mobile.device.Device를 전달하고 있습니다. 이것은 각 요청과 함께 삽입 된 장치 정보입니다. 이것은 apllication.properties 에서 활성화 한 DeviceDelegatingViewresolver에 의해 수행 됩니다.
  • org.springframework.mobile.device.Device는 같은 붙박이 방법 중 몇 가지가 isMobile (), isTablet (), getDevicePlatform () 우리는 우리가 필요로하는 모든 장치 정보를 수집하고 사용할 수 있습니다 이러한 사용 등

3.6. 자바 구성

Spring 웹 애플리케이션에서 장치 감지를 활성화하려면 몇 가지 구성도 추가해야합니다.

@Configuration public class AppConfig implements WebMvcConfigurer { @Bean public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor() { return new DeviceResolverHandlerInterceptor(); } @Bean public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver() { return new DeviceHandlerMethodArgumentResolver(); } @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(deviceResolverHandlerInterceptor()); } @Override public void addArgumentResolvers(List argumentResolvers) { argumentResolvers.add(deviceHandlerMethodArgumentResolver()); } }

거의 완료되었습니다. 마지막으로해야 할 일은 애플리케이션을 시작하기 위해 Spring Boot 구성 클래스를 빌드하는 것입니다.

@SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } }

4. 응용 프로그램 테스트

Once we start the application, it will run on //localhost:8080.

We will use Google Chrome's Developer Console to emulate different kinds of device. We can enable it by pressing ctrl + shift + i or by pressing F12.

By default, if we open the main page, we could see that Spring Web is detecting the device as a desktop browser. We should see the following result:

Now, on the console panel, we click the second icon on the top left. It would enable a mobile view of the browser.

We could see a drop-down coming in the top left corner of the browser. In the drop-down, we can choose different kinds of device type. To emulate a mobile device let's choose Nexus 6P and refresh the page.

As soon as we refresh the page, we'll notice that the content of the page changes because DeviceDelegatingViewresolver has already detected that the last request came from a mobile device. Hence, it passed the index.ftl file inside the mobile folder in the templates.

Here's the result:

In the same way, we are going to emulate a tablet version. Let's choose iPad from the drop-down just like the last time and refresh the page. The content would be changed, and it should be treated as a tablet view:

Now, we'll see if Site Preference functionality is working as expected or not.

To simulate a real time scenario where the user wants to view the site in a mobile friendly way, just add following URL parameter at the end of default URL:

?site_preference=mobile

Once refreshed, the view should be automatically moved to mobile view i.e. following text would be displayed ‘You are into mobile version'.

In the same way to simulate tablet preference, just add following URL parameter at the end of default URL:

?site_preference=tablet

And just like the last time, the view should be automatically refreshed to tablet view.

Please note that the default URL would remain as same, and if the user again goes through default URL, the user will be redirected to respective view based on device type.

5. Conclusion

We just created a web application and implemented the cross-platform functionality. From the productivity perspective, it's a tremendous performance boost. Spring Mobile eliminates many front-end scripting to handle cross-browser behavior, thus reducing development time.

항상 그렇듯이 업데이트 된 소스 코드는 GitHub에 있습니다.