Panduan untuk Spring Mobile

1. Ikhtisar

Spring Mobile adalah ekstensi modern untuk kerangka kerja MVC Spring Web populer yang membantu menyederhanakan pengembangan aplikasi web, yang harus kompatibel sepenuhnya atau sebagian dengan platform lintas perangkat, dengan sedikit usaha dan lebih sedikit pengkodean boilerplate.

Dalam artikel ini, kita akan belajar tentang proyek Spring Mobile, dan kita akan membuat proyek contoh untuk menyoroti penggunaan Spring Mobile.

2. Fitur Spring Mobile

  • Deteksi Perangkat Otomatis: Spring Mobile memiliki lapisan abstraksi pemecah perangkat sisi server bawaan. Ini menganalisis semua permintaan yang masuk dan mendeteksi informasi perangkat pengirim, misalnya, jenis perangkat, sistem operasi, dll
  • Pengelolaan Preferensi Situs: Dengan menggunakan Pengelolaan Preferensi Situs, Spring Mobile memungkinkan pengguna memilih tampilan seluler / tablet / normal situs web. Ini teknik yang relatif usang karena dengan menggunakan DeviceDelegatingViewresolver kita dapat mempertahankan lapisan tampilan tergantung pada jenis perangkat tanpa menuntut masukan apa pun dari sisi pengguna
  • Pengalih Situs : Pengalih Situs mampu secara otomatis mengalihkan pengguna ke tampilan yang paling sesuai sesuai dengan jenis perangkatnya (yaitu seluler, desktop, dll.)
  • Device Aware View Manager : Biasanya, bergantung pada jenis perangkat, kami meneruskan permintaan pengguna ke situs tertentu yang dimaksudkan untuk menangani perangkat tertentu. Manajer Tampilan Spring Mobile memungkinkan pengembang fleksibilitas untuk menempatkan semua tampilan dalam format yang telah ditentukan sebelumnya dan Spring Mobile akan otomatis mengatur tampilan yang berbeda berdasarkan jenis perangkat

3. Membangun Aplikasi

Sekarang mari buat aplikasi demo menggunakan Spring Mobile dengan Spring Boot dan Freemarker Template Engine dan coba tangkap detail perangkat dengan jumlah pengkodean minimal.

3.1. Dependensi Maven

Sebelum kita mulai, kita perlu menambahkan dependensi Spring Mobile berikut di pom.xml :

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

Harap dicatat bahwa ketergantungan terbaru tersedia di repositori Spring Milestones, jadi mari tambahkan ini juga di pom.xml kami :

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

3.2. Buat Template Freemarker

Pertama, mari buat halaman indeks kita menggunakan Freemarker. Jangan lupa untuk menempatkan ketergantungan yang diperlukan untuk mengaktifkan konfigurasi otomatis untuk Freemarker.

Karena kami mencoba mendeteksi perangkat pengirim dan merutekan permintaan yang sesuai, kami perlu membuat tiga file Freemarker terpisah untuk menangani ini; satu untuk menangani permintaan seluler, satu lagi untuk menangani tablet dan yang terakhir (default) untuk menangani permintaan browser biasa.

Kita perlu membuat dua folder bernama ' mobile ' dan ' tablet ' di bawah src / main / resources / templates dan meletakkan file Freemarker yang sesuai. Struktur akhir akan terlihat seperti ini:

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

Sekarang, mari letakkan HTML berikut di dalam file index.ftl :

Bergantung pada jenis perangkat, kami akan mengubah konten di dalam

menandai,

3.3. Aktifkan DeviceDelegatingViewresolver

Untuk mengaktifkan layanan Spring Mobile DeviceDelegatingViewresolver , kita perlu meletakkan properti berikut di dalam application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true 

Fungsionalitas preferensi situs diaktifkan secara default di Spring Boot saat Anda menyertakan starter Spring Mobile. Namun, ini dapat dinonaktifkan dengan menyetel properti berikut ke false:

spring.mobile.sitepreference.enabled: true

3.4. Tambahkan Properti Freemarker

Agar Spring Boot dapat menemukan dan merender template kita, kita perlu menambahkan yang berikut ke application.properties kita :

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

3.5. Buat Pengontrol

Sekarang kita perlu membuat kelas Controller untuk menangani permintaan yang masuk. Kami akan menggunakan anotasi @GetMapping sederhana untuk menangani permintaan:

@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; } }

Beberapa hal yang perlu diperhatikan di sini:

  • Dalam metode pemetaan handler, kita meneruskan org.springframework.mobile.device.Device . Ini adalah informasi perangkat yang diinjeksi dengan setiap permintaan. Ini dilakukan oleh DeviceDelegatingViewresolver yang telah kami aktifkan di apllication.properties
  • The org.springframework.mobile.device.Device memiliki beberapa metode inbuilt seperti isMobile (), isTablet (), getDevicePlatform () dll Menggunakan ini kita dapat menangkap semua informasi perangkat kita perlu dan menggunakannya

3.6. Konfigurasi Java

Untuk mengaktifkan deteksi perangkat di aplikasi web Spring, kita juga perlu menambahkan beberapa konfigurasi:

@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()); } }

Kami hampir selesai. Satu hal terakhir yang harus dilakukan adalah membuat kelas konfigurasi Spring Boot untuk memulai aplikasi:

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

4. Menguji Aplikasi

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.

Seperti biasa, kode sumber yang diperbarui berakhir di GitHub.