10 chuong 10

Chúng ta sẽ đề cập nó trong những phần tiếp theo đây Ghi chú: Có lựa chọn thứ 4 đó là tạo 1 ứng dụng gốc, nhưng chúng ta sẽ không bàn về nó vì không hề liên quan trực tiếp đến MVC Framew

Trang 1

CHAPTER10

SportsStore:Mobile

Không thể trốn tránh sự phổ biến của các thiết bị như smartphone hoặc tablet.Nếu bạn muốn truyền ứng dụng của mình đến với nhiều người tiêu dùng nhất có thể, bạn sẽ phải chú trọng vào thế giới của các web browser trên di động Nếu nghe có vẻ không thích thú lắm, đó là bởi vì cụm từ Mobile web browser liên tưởng đến từ nhanh chóng, khả năng và là những trình duyệt hiện đại

có thể là đối thủ cạnh tranh với trình duyệt desktop nhưng lại thành ra chậm chạp, không phù hợp và lỗi thời

Tóm lại là gửi truyền tải trải nghiệm tốt đến nguoi dùng thiết bị di động là rất khó, khó hơn nhiều so với việc truyền nội dung đến desktop Nó cần lên kế hoạch cẩn thận, thiết kế mà nỗ lực kiểm thử rất lớn và cũng dễ bị phát hiện bởi những thiết bị

smartphone hay tablet đời mới

Putting Mobile Web Development inContext

(Đặt vấn đề về việc phát triển ứng dụng Web Mobile)

MVC Framework có những tính năng giúp việc phát triển trên modile nhưng MVC Framework lại là một server-side Framework nhằm mục đích nhận các HTTP request và hồi đáp bằng HTML Điều này có những hạn chế khi nó đối mặt với những những yêu cầu tính năng chúng ta gặp phải khi nhắm đến đối tượng khách hàng sử dụng thiết bị di động.Mức độ mà MVC Framework có thể

hỗ trợ phụ thuộc vào chiến lược di động động mà bạn dự định Có 3 chiến lược cơ bản về web mobile bạn có thể tuân theo Chúng

ta sẽ đề cập nó trong những phần tiếp theo đây

Ghi chú: Có lựa chọn thứ 4 đó là tạo 1 ứng dụng gốc, nhưng chúng ta sẽ không bàn về nó vì không hề liên quan trực tiếp đến MVC Framework hay ứng dụng web

Không làm gì cả (hoặc làm ít nhất có thể)

Nó có vẻ là một ý tưởng kỳ lạ khi không làm gì cả, thế nhưng một số thiết bị mobile có khả năng xử lý nội dung vốn được phát triển dành cho các desktop client.Nhiều thiết bị được công bố gần đây có độ phân giải và độ hiển thị cao với bộ browser

có bộ nhớ lớn có thể dựng HTML và chạy Javascript một cách nhanh chóng.Nếu ứng dụng của bạn không đòi hỏi quá nhiều, bạn có thể nhận ra rằng các thiết bị mobile sẽ không gặp phải quá nhiều vấn đề khi hiển thị nội dung ứng dụng của bạn Một ví

dụ trong hình 10-1 cho thấy Ipad hiển thị ứng dụng SportsStore mà không hề phải chỉnh sửa

Trang 2

2

Figure 10-1 Displaying the SportsStore application on atablet

Nó thực hiện công việc khá tốt Vấn đề duy nhất gặp phải đó là vùng link phân trang bị đẩy xuống dưới đáy của trang, điều này có thể dễ dàng điều chỉnh bằng cách thay đổi số lượng sản phẩm được hiên thị trên một trang

Chú ý: Hình ảnh chúng ta thấy trong chương này đều được lấy từ Browserstack.com, đây là một dịch vụ kiểm thử browser đa nền tảng chúng ta sử dụng để kiểm thử các project của mình Nó không hẳn là dịch vụ hoàn hảo.Đôi khi nó chậm chạp và có thể phân mảnh khi sử dụng ngoài lãnh thổ US, thiết bị mobile được giả lập.Chúng tôi sử dụng nó để hỗ trợ các browser trên

desktop, nó hoạt động mạnh hơn nhưng chúng ta lại nhận được kết quả như ý và chúng ta không cần phải bảo trì các bộ giả lập Các bạn có thể nhận bản dùng thử miễn phí theo ví dụ trong chương này và nó cũng có nhiều đối thủ cạnh tranh nếu như chúng

ta muốn có thêm những lựa chọn khác Ghi nhớ rằng chúng tôi không hề có mối quan hệ nào với Browser stack, chúng tôi chỉ là những khách hàng bình thường, vốn chi trả đầy đủ tiền cho sản phẩm và không hề nhận lấy bất kỳ sự quan tâm đặc biệt nào

Sử dụng thiết kế có tính tương tác (Responsive Design)

Hướng đi tiếp theo đó là tạo nội dung tương thích với khả năng của thiết bị sẽ hiển thị nó, được gọi là responsive design Chuẩn CSS có những tính năng cho phép chúng ta thay đổi thuộc tính của các element dựa vào khả năng của thiết bị, một kỹ thuật

được sử dụng nhiều nhất là thay đổi cấu trúc layout của nội dung dựa vào độ rộng của màn hình hiển thị

Responsive design là thiết kế được xử lý bởi phía client dùng CSS và không trực tiếp được quản lý bởi MVC Framework.Chúng

Trang 3

ta đi sâu vào chủ đề responsive design trong cuốn sách Pro ASP.NET MVC Client book Tuy nhiên để chứng minh cách kỹ thuật này được áp dụng (và một số điều cân nhắc có liên quan đến MVC Framework), chúng ta sẽ sử dụng một số tính năng của thiết kế bao gồm thư viện Bootstrap vốn được sử dụng xây dựng giao diện cho ứng dụng SportStore (nó cũng trở thành một trong số những giao diện MS tích hợp vào trong MVC 5 project cho Visual Studio 2013)

Mục tiêu của chúng là là điều chỉnh giao diện phần nội dung chính của ứng dụng cho phép nó hiển thị trên iPhone Chiến lược

“không làm gì cả” của chúng ta không đáp ứng được trên thiết bị này do màn hình hiển thị hẹp hình 10-2

Figure 10-2 Displaying the SportsStore application on asmartphone

Chúng ta sẽ đối mặt với vấn đề này theo từng vùng, tập trung vào những khía cạnh khác nhau của layout Mục tiêu là duy trì được tất cả các tính năng của ứng dụng nhưng biểu diễn nó theo một cách khác

Ghi chú: MVC Framework không tham gia vào trong responsive design, nó chỉ gửi cho browser cùng một nội dung và để nó tự xác định những bit nào sẽ được hiển thị Điều này đồng nghĩa với không có cách nào để thêm unit test cho repsonsive design trong Visual Studio Đây là một kỹ thuật đòi hỏi sự cẩn thận trong khâu kiểm thử từ phía client và khó để tự động hóa

Tạo một Responsive Header

Chúng ta sẽ bắt đầu với phần header của trang web, bao gồm tên của SportsStore, thông tin chung của giỏ hàng và nút Checkout Mặc dù giả pháp đơn giản nhất là loại bỏ phần tên SportsStore và giải phóng không gian cho các nội dung khác tuy nhiên chúng tôi vẫn giữ lại phần này (xem lại phần Accepting the realities of Branding (Chấp nhận sự có mặt của nhãn hiệu) sidebar) và sắp xếm lại những nội dung khác thành 2 hàng

ACCEPTING THE REALITIES OFBRANDING (Chấp nhận sự hiện diện của nhãn hiệu)

Một trong những cách đơn giản nhất để giải phóng không gian màn hình là loại bỏ thương hiệu của bạn khỏi ứng dụng Chúng ta chỉ cần biểu diện tên SportsStore dưới dạng text nhung chúng ta vẫn thấy được diện tích màn hình mà nó chiếm dụng Nhãn hiệu vốn khiêm tốn trên màn hình desktop thì nay trở thành một thứ chiếm dụng không gian trên smartphone One of the easiest ways to free up screen real-estate is to remove your branding from the application I am only displaying the SportsStore name as text, but you can see how much of the screen it occupies What was a modest degree of branding on the desktop becomes a space hog on a smart phone

Trang 4

4

Loại bỏ nhãn hiệu vốn rất khó, tuy nhiên Không phải vì lý do kỹ thuật nhưng những nhóm phát triểu thương hiệu bị ám ảnh bởi việc đặt thương hiệu lên mọi thứ.Đây là lí do các chúng ta thấy những cây bút có in thương hiệu công ti trong phòng họp, ly tách ở phòng nghỉ và cũng là lí do bạn phải làm mới business card của mình sau mỗi 18 tháng với logo mới Việc thay đổi nhãn hiệu thương xuyên vì những người làm thiết kế thương hiệu biết rằng, sâu bên trong, họ không có một công việc thực sự và việc liên tục tập trung vào logoc và mảng màu sắc tạo nên một hoạt động điên cuồng, khiến họ phân tâm khỏi nỗi sợ hãi tồn tại ám ảnh họ mỗi khi thức dậy

Lời khuyên là chấp nhận một khoảng trên màn hình dành cho nhãn hiệu, dù cho đó có là thiết bị nhỏ nhất Bạn có thể phản đối ý tưởng này nhưng nhóm phát triển thương hiệu thường là một phần trong bộ phận marketing, marketing thương báo cáo về VP ở

bộ phận sale và VP có mối quan hệ mật thiết với CEO vì lợi tức thu về là tất cả những gì họ quan tâm Vì thế đây là cuộc tranh luận mà chúng ta không thế chiến thắng

Trong hình 10-1, chúng ta có thể thấy nội dung của header đã được điều chỉnh trong Layout.cshtml trong project

SportsStore.WebUI

<!DOCTYPEhtml>

<html>

<head>

<title>@ViewBag.Title</title>

<style>

.navbar-right{

float: right!important;

margin-right: 15px; margin-left:15px;

}

</style>

</head>

<body>

<a class="navbar-brand"href="#">

<span class="hidden-xs">SPORTSSTORE</span>

<divclass="visible-xs">SPORTS</div>

<divclass="visible-xs">STORE</div>

</a>

@Html.Action("Summary","Cart")

</div>

@Html.Action("Menu","Nav")

</div>

<divclass="col-xs-8">

@RenderBody()

</div>

</body>

</html>

Trang 5

Bootsrap định nghĩa 1 bộ các lớp có thể được sử dụng để ẩn đi các element dựa theo độ rộng của màn hình thiết bị Bạn có thể điều chỉnh nội dung này bằng cách sử dụng các câu lệnh truy vấn CSS media, nhưng các lớp Bootstrap được tích hợp vào trong các thuộc tính styles khác

Về phần nhãn hiệu SportsStore chúng ta sử dụng lớp visible-xs và hidden-xs để chuyển thành dạng text chia thành 2 hàng và được biểu diễn theo chiều dọc khi kích thước màn hình bé hơn 768 pixels Bootstrap cung cấp những cặp các lớp cho phép hiển thị và giấu đi các elements trên các browser có kích thước màn hình khác nhau, tên của chúng bắt đầu bằng visible- hoặc hidden-.Phần đuôi của các lớp “**-xs” (ví dụ visible-xs và hidden-xs) được dùng trong ví dụ trên Phần *-sm trong các lớp chạy trên

phần màn hình lớn hơn 768 pixel, phần *-md chạy trên phần màn hình lớn hơn 992 pixel và đuôi –lg chạy trên màn hình lớn hơn

1200 pixel

Chúý: tính năng Responsive CSS cũng giống tính năng mà Bootstrap cung cấp dựa trên độ lớn của màn hình browser, không phải

màn hình thiết bị Browser trên thiết bị di động thường hiển thị toàn màn hình, nghĩa là kích thước màn hình và kích thước cửa sổ

của browser là bằng nhau.Chúng ta không phải lúc nào cũng dựa trên trường hợp này Như mọi khi, chúng ta cần kiểm thử trên thiết

bị mà chúng ta nhắm tới để đảm bảo rằng chúng ta không vướng phải một trường hợp giảđịnh có thể bị phát hiện

Caution Responsive CSS features like the ones that Bootstrap provide are based on the size of the browser window, not the

device screen Mobile device browsers are usually displayed full-screen, which means that the window size and the screen size are the same, but you can’t always rely on this being the case As ever, you need to test against the devices you are targeting to

ensure that you have not made assumptions that catch you out

Chúng ta có thể thấy hiệu ứng đã thay đổi khi khởi động ứng dụng và xem danh sách sản phẩm trên một desktop browser thông thường, vốn có ưu điểm cho phép chúng ta thay đổi kích thước cửa sổ Điều chỉnh của sổ nhỏ lại (bé hơn 786 pixels) chúng ta có thể thấy dòng chữ SportsStore được đẩy thành 2 dòng như trong hình 10-3

Figure 10-3 Using Bootstrap responsive design features to adjust the applicationbranding

Đây có vẻ chỉ là một thay đổi nhỏ nhưng nó có tác động lớn đối vối màn hình khoo3 đặc biệt khi kết hợp với thay đổi chúng

ta tạo ra trong file Views/Cart/Summary.cshtml Đây là view cung cấp tóm tắt về giỏ hàng và nội dung của nó Chúng ta có thể thấy những thay đổi trong hình 10-2

Adding Responsive Content to the Summary.cshtml File

@modelSportsStore.Domain.Entities.Cart

<div class="navbar-righthidden-xs">

@Html.ActionLink("Checkout", "Index", "Cart",

new { returnUrl = Request.Url.PathAndQuery },

new { @class = "btn btn-default navbar-btn"})

</div>

<div class="navbar-rightvisible-xs">

<a href=@Url.Action("Index", "Cart", new { returnUrl = Request.Url.PathAndQuery})

class="btn btn-defaultnavbar-btn">

Trang 6

6

<span class="glyphiconglyphicon-shopping-cart"></span>

</a>

</div>

<b class="hidden-xs">Yourcart:</b>

@Model.Lines.Sum(x =>x.Quantity)item(s),

@Model.ComputeTotalValue().ToString("c")

</div>

Trên đây sử dụng cùng 1 kỹ thuật áp dụng để giấu và hiện nội dung đối với với file _Layout.cshtml Trong trường hợp này, chúng ta giấu đi phần nút Checkout now chuẩn và thay bằng một nút icon, sử dụng 1 trong số những icon trong Bootstrap package

Bootstrap icon được đặt vào dùng <span> element, nghĩa là chúng là không thể dùng công cụ Html.ActionLink helper vì nó không cung cấp khả năng đặt nội dung vào trong element nó tạo ra Thay vào đó chúng ta định nghĩa <a> element trực tiếp sử dụng công cụ trợ giúp Url.Action (miêu tả trong chương 23).Để khởi tạo một URL cho thuộc tính href.Câu trả lời là <a> element với cùng thuộc tính sẽ được tạo vởi Html.ActionLink nhưng bao gồm một <span> slement Chúng ta có thể thấy thay đội trong file ở hình 10-4, biểu diễn nội dung header trên iPhone

Figure 10-4 The modified SportsStore header displayed on an iPhonesimulator

MOBILE FIRST VERSUS DESKTOPFIRST

Hầu hết dự án web project bắt đầu với desktop slient sau đó sẽ hỗ trợ cho mobile client, tương tự như những gì chúng ta đang thực hiện trong sách Đây gọi là thiết kế phát triển theo hướng desktop first và vấn đề nằm ở việc phát triển phía

server cần hoàn thiện rất nhiều trước khi phát triển cho mobile client, kết quả là trải nghiệm trên mobile trở nên gượng gạo

và mất đi nhiều tính năng vốn có thể sử dụng trên desktop client

Có một triết lý thanh thế gọi là phát triển theo hướng Mobile first có nghĩa là theo như tên gọi, phát triển cho mobile client làm nền tảng cho ứng dụng và thêm mới tính năng tận dụng khả năng của desktop browser

Hoặc nói một cách khác, desktop first có xu hướng bắt đầu với bộ tính năng đầy đủ sau đó sẽ giảm bớt cho các thiết bị với khả năng kém hơn trong khi mobile first là xu hướng bắt đầu với một bộ tính năng ít hơn và được nâng cấp lên cho các thiết bị với khả năng đáp ứng tốt hơn

Cả hai hướng tiếp cận đều có những tích cực, riêng tôi thường thích hướng desktop fist hơn vì nó dễ dàng để các desktop browser lấy nội dung từ ngay trong môi trường làm việc.Điều này lại cực kỳ khó khăn đôi với thiết bị mobile Tôi có xu hướng làm trong một vòng tròn chặt chẽ của việc viết, biên dịch và kiếm tra, nghĩa là reload lại các đường dẫn URL liên tục, điều này lại khiến tôi khổ sở khi áp vào cùng một vòng làm việc ấy khi phát triển theo hướng mobile first trên thiết bị mobile

Sự nguy hiểm khi đặt 1 nhóm người dùng nào lên trước tạo ra một trải nghiệm kém chất lượng đối với nhóm kia, và cứ thế Những người ủng hộ xu hướng mobile first thường tranh cãi rằng điều này là không thể khi chúng ta bắt đầu với những tính năng cơ bản và đẩy nó lên, điều này tôi (tác giả) vẫn chưa trải nghiệm

The danger in putting any group of users first is that you create a substandard experience for another group, just moving the pain around Proponents of mobile first design often argue that this can’t happen when you start with the basic features and

Trang 7

then scale up, but that has not been my experience

Điều quan trọng là cần có một kế hoạch chắc chắn cho các tính năng mà layout của chúng ta sẽ truyền tải đến tất cả các thiệt bị trước khi bắt đầu phát triển bất kỳ loại nào Khi chúng ta đã có được một kế hoạch như thế, không quan trọng thiết bị nào sẽ được bắt đầu trước và đặc biệt, phần bên phía server của ứng dụng sẽ được xây dựng trên cơ sở phục vụ tất cả đối tượng client

Creating a Responsive ProductList

Để hoàn tất việc tương thích responsive, chúng ta cần 1 danh sách các sản phẩn được liệt kệ trên các thiết bị có màn hình hiển thị hẹp Vấn đề lớn nhất là không gian bề ngang chiếm dụng bởi nút category.Chúng ta sẽ chuyển nút này đi chỗ khác, cho từng phần mô tả sản phẩm chiếm toàn bộ bề ngang phần hiển thị Hình 10-3, chúng ta có thể thấy tôi đã chỉnh sửa thêm vào file _Layout.cshtml

Listing 10-3.Creating a Responsive Product List in the _Layout.cshtml File

<!DOCTYPEhtml>

<html>

<head>

<title>@ViewBag.Title</title>

<style>

.navbar-right{

float: right!important;

margin-right: 15px; margin-left:15px;

}

</style>

</head>

<body>

<span class="hidden-xs">SPORTSSTORE</span>

<divclass="visible-xs">SPORTS</div>

<divclass="visible-xs">STORE</div>

</a>

@Html.Action("Summary","Cart")

</div>

<div class="col-sm-3hidden-xs">

</div>

<div class="col-xs-12col-sm-8">

@RenderBody()

</div>

</body>

</html>

Chỉ có thể có 1 lời gọi đến hàm RenderBody trong layout này.Chúng ta sẽ đi vào chi tiết của layouts trong chương 20 nhưng tác động của sự hạn chế này khiến chúng ta không thể có thêm các bộ element để giấu và hiện, mỗi bộ như thế đều cần lời gọi đến RenderBody Thay vào đó, chúng ta cần thanh đổi layout của lưới kèm theo lời gọi hàm RenderBody cho phép các element trong layout tương thích với nội dung trong view

Một trong những lý do tôi sử dụng cấu trúc Bootstrap dáng lưới cho nội dung trong _Layout.cshtml ở chương 7 là nó bao gồm

Trang 8

8

các chức năng của thiết kế responsive cho phép làm việc với những hạm chế của RenderBody Cấu trúc layout dạng lưới trong Bootstrap hỗ trợ 12 cột và chúng ta xác định bao nhiêu element bằng cách đặt vào một class, như dưới đây, đây cũng là cách chúng ta thiết lập các lớp Bootstrap trong chương 7

<div class="col-xs-8">

@RenderBody()

</div>

Cũng giống như hidden-* và visible-* được mô tả trước đây, Bootstrap cung cấp một bộ các lớp đặt số lượng column và trong dạng lưới dựa theo bề rộng của cửa sổ

Các lớp col-xs-* được chỉnh sửa và không thay đổi theo bề rộng của màn hình hiển thị Chúng ta sử dụng lớp col-xs-8 cho Bootstrap biết element <div> nên được cách 1 khoảng bằng 8 trên 12 cột và hiển thị của element không đươc thay đổi theo bề ngang cửa sổ Nhóm lớp col-sm-* đặt các cột khi cửa sổ bằng 768 pixel hoặc rộng hơn.Lớp col-md-* làm việc với cửa sổ bằng 992 pixel hoặc rộng hơn và cuối cùng col-lg-* làm việc với cửa sổ có độ rộng bằng 1200 pixel hoặc rộng hơn Lun phải chú ý về bề rộng, đây là ví dụ các class chúng ta đặt vào element <div> xung quanh lời gọi tới hàm RenderBody List 10-3

<div class="col-xs-12col-sm-8">

@RenderBody()

</div>

Kết quả của cả 2 class là <div> element sẽ chiến toàn bộ 12 cột trong lưới và 8 cột khi màn hình ở mức 768 px hoặc rộng hơn Những cột khác trong lưới bao gồm nút category như sau

<div class="col-sm-3 hidden-xs">

</div>

Element này sẽ chiếm 3 cột khi màn hình rộng hơn 768 pixel và được ẩn đi nếu đối với những trường hợp khác.Kết hợp với các lớp khác chúng ta đưa vào, hiệu quả đạt được phần mô tả sản phẩm sẽ lấp đầy cửa sổ nhỏ và chia sẻ không gian với nút bategory đối với cửa sổ lớn hơn.Chúng ta có thể thấy cả 2 layout trong hình 10-5 Tôi sử dụng desktop browser cho ví dụ nàu do tôi có thể dễ dàng thay đổi bề rộng của cửa sổ

Trang 9

Figure 10-5 Using a responsive grid in the productlayout

Trang 10

10

Helping the Controller Select aView

(Giúp Controller chọn một View)

Tôi không muốn người dùng mobile bỏ qua khả năng lọc sản phẩm, nghĩa là chúng ta cần biểu diễn các category theo một hướng khách Để làm điều này, chúng ta tạo một view mới gọi là MenuHorizontal.cshtml trong Views/Nav folder với nội dung như trong List 10-4

@modelIEnumerable<string>

@Html.ActionLink("Home", "List", "Product", new { @class = "btn btn- default btn-sm"})

@foreach (var link in Model){

@Html.RouteLink(link, new {

controller = "Product", action = "List",

category =link, page=1

}, new{

@class = "btn btn-defaultbtn-sm"

+ (link == ViewBag.SelectedCategory ?" btn-primary" :"") })

}

</div>

Đây là phiên bản thay đổi so với bản gốc Menu.cshtml layout nhưng với 1 vùng chứa dùng element <div> và một số lớp Bootstrap để tạo layout bề ngang của các button Chức năng cơ bản thì vẫn được giữ nguyên Chúng ta tạo 1 nhóm các liên kết lọc sản phẩm theo Category

Bộ các category button được tạo ra thông qua Menu action method của controller Nav, chúng ta cần update controller này để

nó có thể lựa chọn đến đúng file view dựa trên yêu cầu tập trung vào các nút bấm như trong List 10-5

using System.Collections.Generic;

usingSystem.Web.Mvc;

using SportsStore.Domain.Abstract;

usingSystem.Linq;

namespace SportsStore.WebUI.Controllers {

public class NavController : Controller{

private IProductRepositoryrepository;

public NavController(IProductRepository repo) {

repository =repo;

}

public PartialViewResult Menu(string category = null,

bool horizontalLayout = false){

ViewBag.SelectedCategory = category;

IEnumerable<string> categories =repository.Products

Định dạng
Số trang	19
Dung lượng	0,91 MB