10/10/2018, 13:34

phát triển ứng dụng web chạy cả trên mobile và trên desktop ?

- Em đang chuẩn bị code 1 website chạy cả trên mobile và trên desktop. Em sử dụng codeigniter framework để phát triển site này. Vấn đề hiện tại là chưa hề có 1 chút kinh nghiệm nào về web trên mobile đồng thời phát triển web mobile trên CI.

- ý tưởng của em thế này, em trình bày sơ qua để các bác có thể hiểu được.

+) Về phần giao diện. Em đã tham khảo trang vnexpress trên desktop và trên mobile. Cho nên em cũng tạo 2 giao diện tương ứng cho project của em chạy trên mobile và trên desktop.

+) Về source để phát triển, em sử dụng framework codeigniter.

- Còn đây là phần ý tưởng phát triển của em. Em trình bày sơ qua như sau để các bác hiểu:

+)trong thư mục application em tạo 2 app. 1 app cho mobile 1 app cho desktop. Mỗi controller trong app này đều kế thừa từ 1 controller Base, base này sẽ load thư viện user_agent dùng để detect ra device. Nếu device là desktop thì nó sẽ redirect sang app desktop, tương ứng như vậy dành cho mobile, và từ các app tương ứng được gọi nó sẽ gọi các model và view tương ứng. phần backend( quản trị ) em để dùng chung.


- Nhưng có mấy vấn đề mà em chưa hiểu, đó là :
+) giao diện, hình ảnh chạy trên mobile nó có vỡ ra ko ? (vì mình dùng chung phần backend mà)
+) Mỗi website vừa chạy trên mobile họ đều có subdomain kiểu như : m.vnexpress.net, m.dantri.com.vn, m.cnn.com. Vậy làm thế nào để nó tự động redirect sang tên miền m.vidu.com khi mà người dùng đang chạy trên mobile.
+)Giao diện web có tương thích với từng hệ điều hành mobile như : android,iphone OS... hay ko ?


- Nhờ các bác đi trước đã có kinh nghiệm tư vấn, hướng dẫn em .
-Cám ơn các bác đã đọc bài của em.
mucor viết 15:45 ngày 10/10/2018
Được gửi bởi chieftain2t
Mỗi website vừa chạy trên mobile họ đều có subdomain kiểu như : m.vnexpress.net, m.dantri.com.vn, m.cnn.com. Vậy làm thế nào để nó tự động redirect sang tên miền m.vidu.com khi mà người dùng đang chạy trên mobile.
Tôi thường dùng như sau:
+ Với mỗi trang, sinh url tương ứng cho mobile
+ Chèn đoạn javascript sau vào đầu mỗi trang:

Code:
<script>
var MOBILE = '<url for mobile>';
(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera, MOBILE);
</script>
nhoemzx viết 15:43 ngày 10/10/2018
Bạn chỉ cần views tương ứng cho từng app (desktop và mobile) vì Model-Controller không thực sự liên quan đến giao diện người dùng. Bạn cũng có thể tham khảo "twitter chấm github chấm com/bootstrap/" và giao diện người dùng. Cái này bạn chỉ cần làm 1 app nhưng tùy thộc vào độ phân giải thì nó sẽ tự điều chỉnh application của mình. (1 Số smartphone, vào desktop page còn dễ hơn và tiện hơn là vào mobile site). Ở trong code igniter, ở trong constructor, cậu cho code kiểm tra thiết và redirect đến trang tương ứng.
nhoemzx viết 15:51 ngày 10/10/2018
Mình cũng đang làm 1 vài projects với code igniter, nếu có hứng thú thì cho yahoo, khi nào rảnh hay có vấn đề gì thì trao đổi.
zmt264 viết 15:42 ngày 10/10/2018
Vấn đề này có 1 cách giải quyết khác, hiện đại, khác truyền thống xưa nay là dùng Responsive Web Design, để minh họa bạn có thể vào http://smashingmagazine.com bằng cả máy tính và mobile rồi xem sự thay đổi về giao diện (trong khi URL và thậm chí có thể cả response là giống nhau).
nholoiemnoi viết 15:48 ngày 10/10/2018
cái này cũng không khó lắm. có thể sử dụng link hoạt css, hoặc một vài thủ thuật khác, bạn search là ra nhiều tài liệu cho bạn lắm
nhoemzx viết 15:41 ngày 10/10/2018
Được gửi bởi zmt264
Vấn đề này có 1 cách giải quyết khác, hiện đại, khác truyền thống xưa nay là dùng Responsive Web Design, để minh họa bạn có thể vào http://smashingmagazine.com bằng cả máy tính và mobile rồi xem sự thay đổi về giao diện (trong khi URL và thậm chí có thể cả response là giống nhau).
Thì Bootstrap có responsive design nữa mà, các bạn có thể rezie (thu hẹp chiều rộng) thì sẽ thấy nó tự điều chỉnh.
zmt264 viết 15:49 ngày 10/10/2018
Được gửi bởi nhoemzx
Bạn chỉ cần views tương ứng cho từng app (desktop và mobile) vì Model-Controller không thực sự liên quan đến giao diện người dùng. Bạn cũng có thể tham khảo "twitter chấm github chấm com/bootstrap/" và giao diện người dùng. Cái này bạn chỉ cần làm 1 app nhưng tùy thộc vào độ phân giải thì nó sẽ tự điều chỉnh application của mình. (1 Số smartphone, vào desktop page còn dễ hơn và tiện hơn là vào mobile site). Ở trong code igniter, ở trong constructor, cậu cho code kiểm tra thiết và redirect đến trang tương ứng.
ok, http://twitter.github.com/bootstrap/ là một trong các CSS Framework hỗ trợ Responsive Web Design.
dammio viết 15:47 ngày 10/10/2018
Bây h thì dùng Bootstrap khỏe rồi, http://www.dammio.com/bootstrap-co-ban/
Bài liên quan

Lỗi khởi động chế độ đồ hoạ

hoi2.PNG 1194x684 29.6 KB mình khởi động đồ họa nó báo như này, ai biết giúp đỡ mình với! t cảm ơn!

Shane Benjamin Bennett viết 15:01 ngày 01/10/2018

Lỗi không nhận database sql server jdbc trong servlet

Hello Everyone! Mình đang làm cái phần đăng nhập của cái servlet mà mình dùng jdbc của cái sql server mà tự nhiên không nhận được giá trị từ cột Username và Password là “admin” và “admin”. Mặc dù mình add rồi nhưng nó không hoạt động được. Chắc là do lỗi connection. Các cao nhân xem giùm em. ...

Aragami1408 viết 14:54 ngày 01/10/2018

Cannot open source file "iostream" trên VS 2013

Dạ cho em hỏi, em dùng VS 2013 và gặp lỗi này thì khắc phục thế nào ạ? error.JPG 601x662 23.3 KB

Anh Tuấn viết 14:40 ngày 01/10/2018

Mọi người tư vấn giúp mình liệu 'Lavarel' nên kết hợp với vuejs hay angular?

ACE à! Hiện tại mình đang học Lavarel để viết web và muốn học thêm angularjs hoặc là vuejs vậy mình nên chọn cái nào? Mình chỉ biết là Laravel có cái “Blade template” có kí hiệu “{{}}” giống angular không biết có conflict không và thêm một cái là vuejs đã tích ...

Hoang viết 14:38 ngày 01/10/2018

Tại sao cách làm tương tự nhau lại cho ra kết quả khác nhau?

/*Cách 1*/ $db= new PDO("mysql:host=localhost;dbname=name", 'root', '); //$db->query('set names "utf8"'); $var1 = 1; $var2 = 2; $sql = "SELECT * FROM theloai LIMIT ?,?"; $cursor = $db->prepare($sql); $cursor->bindParam(1,$var1); $cursor->bindParam(2,$var2); $cursor->execute(); e ...

Đinh Công Mạnh viết 00:43 ngày 01/10/2018
0