HelloWorld với Win8 app, HTML5

Thảo luận trong 'Lập trình máy tính' bắt đầu bởi integer, 26 Tháng sáu 2012.

  1. Offline

    integer

    • Tiếu Ngạo Giang Hồ

    • :-?
    Số bài viết:
    1.695
    Đã được thích:
    1.313
    Điểm thành tích:
    900
    Win8, HTML5+JavaScript Game khá là mới mẻ, không biết 2mit có bạn nào nghiên cứu không? Mới đọc được 1 bài hướng dẫn của anh Quang Vinh bên vietgamedev về làm app trên Win8 với HTML5 mình clone về đây, nếu bạn nào có hứng thú theo hướng này thì tham gia thảo luận.

    Nếu bình thường làm game HTML5 thì công cụ chúng ta cần chỉ đơn giản notepad++, nhưng đã lập trình trên windows thì chúng ta không thể không sử dụng bộ Visual Studio. Microsoft là một công ty hướng người dùng rất tốt, bộ công cụ Visual Studio luôn nổi tiếng là tiện dụng, một điểm yếu duy nhất đó là hơi đắt (không nói là quá đắt) cho lập trình viên, đặc biệt là giới sinh viên. Microsoft cũng sớm nhận ra điều đó nên đã cung cấp những phiên bản Express và miễn phí hoàn toàn cho sinh viên, khiến cho số lượng người dùng tăng lên đáng kể. Và với Win8 thì bộ Visual Studio cũng tỏ ra khá tiện dụng, mạnh, rất nhiều tiện ích kèm theo nhưng bù lại là load khá chậm và còn vài chỗ hơi ép buộc người dùng. Chưa thể kết luận điều gì khi nó còn ở phiên bản beta, tốt nhất mọi người hãy tự trải nghiệm để cảm nhận nó.

    Nào ta cùng bắt đầu với một chương trình cực kỳ khủng đó là ... Hello World nhé!

    Tạo project mới với visual studio 11 Beta


    Đây là splash screen của bản Visual Studio 11 Beta
    [IMG]

    Để tạo project mới ta chọn file > New > Project

    [IMG]

    Chọn JavaScript > Windows Metro Style > Blank Application và đặt tên cho project là helloWorld.
    *Lưu ý: tại bước này có thể sẽ khác tí vì tùy thuộc vào profile bạn chọn lúc lần đầu tiên cài VS11, ở đây mình chọn kiểu profile là General.
    [IMG]

    Khởi tạo developer license, mỗi phần mềm được phát triển trên win8 sẽ gắn liền với một developer license và có thời hạn 1 tháng được kích hoạt bởi tài khoản hotmail của microsoft nên nếu bạn chưa có thì nên đăng ký một cái ở đây.
    *Lưu ý: Chỉ cần kích hoạt 1 lần/tháng
    [IMG]

    Nhập email và mật khẩu
    [IMG]

    Kích hoạt thành công, vậy là từ bây giờ bạn sẽ tự do tạo project mà không còn bị làm phiền nữa [IMG].
    [IMG]


    Cấu trúc project HMTL5

    [IMG]
    Đây là một cấu trúc chuẩn của một project html5 trên visual studio 11, bao gồm:
    - default.html: trang chính của project.
    - css\default.css: chứa định dạng hiện thị của file html.
    - js\default.js: file javascript chính thực thi các lệnh javascript của chương trình.
    - Images: thư mục chứ file hình, bao gồm các loại logo và splashscreen.
    Hình ảnh sẽ được chưa trong thư mục tương ứng trong đĩa cứng:

    [IMG]

    Trong đó:
    - logo.png là hình sẽ được hiển thị bên ngoài giao diện metro
    - splashScreen.png là hình hiển thị lúc khởi động game.
    - Và một số logo khác.

    Các hình này là bắt buộc phải có cho tất cả các app của win8, mô hình khá giống với win7. Bạn có thể thay thế hình khác bằng cách mở nhấp vào tập tin package.appxmanifest của project.
    [IMG]

    Ở đây mình vẽ lại cái logo bên ngoài cho nó khác khác tí (kỹ năng vẽ bèo mọi người đừng ném đá ^^).
    [IMG]

    Để bắt đầu phần coding, bạn mở file default.html lên để tìm chỗ gõ "Hello World!".

    <html>
    <head>
    <meta charset="utf-8">
    <title>helloWorld</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <!-- helloWorld references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
    </head>
    <body>
    <p>Content goes here</p>
    </body>
    </html>
    Nếu bạn chưa quen với HTML thì bạn sẽ hơi choáng vì code nó tự sinh ra hơi nhiều, nhưng không sao, bình tĩnh, đoạn chúng ta quan tâm chỉ là ở đây

    <body>
    <p>Content goes here</p>
    </body>
    Và hãy thay đoạn này thành:

    <body>
    <p>Hello World!</p>
    </body>
    Vậy là bạn đã code xong, quá đã phải hông. Bây giờ nhấn F5 để tận hưởng kết quả nhá.

    Wa, chương trình đỉnh cao của chúng ta đã xuất đầu lộ diện! Đầu tiên là splashscreen default nhìn giống cái đồng hồ chán ngắt, không hiểu tại sao Microsoft chọn cái này làm default.
    [IMG]

    Và chương trình của chúng ta đã cất tiếng chào toàn thế giới rồi, chúc mừng bạn!
    [IMG]

    Logo của chúng ta thiết kế lúc đầu sẽ được hiển thị một cách trang trọng trên giao diện Metro Style như thế này, các bạn sẽ chẳng làm được cái logo to như mình đâu (vì mình còn không biết mình đã chỉnh cái gì mà nó lại to như thế nữa, toàn bộ icon chỉ hiển thị có 2 dòng to đùng à, hổng biết cách chỉnh lại @@)
    [IMG]

    Nếu bạn thích có thể vọc thêm một số project HTML5 có sẵn của nó như: Grid Application, Split Application,...
    [IMG]

    Đến đây là kết thúc hướng dẫn tạo chương trình khủng đầu tay "hello world", nó khủng bởi vì sao, đơn giản là vì nó là sản phẩm khởi đầu để bạn có thể làm ra những sản phẩm tốt hơn nữa. Chương trình này đã khủng rồi thì mấy chương trình sau của bạn chỉ có thể là "khủng của Khủng" thôi à!

    Chúc các bạn có sự trải nghiệm thú vị với Win 8 và bộ visual studio 11 beta.
    Nguồn: vietgamedev
    BigZerosunset_glow thích bài này.
  2. Offline

    Quá Tài Năng

    • Thành Viên Mới

    Số bài viết:
    1
    Đã được thích:
    0
    Điểm thành tích:
    0
    Bài viết hay đó, bạn có óc hài hước nhỉ, cảm ơn rất nhiều về bài viết của bạn :cool:
  3. Offline

    BigZero

    • Friends

    • ôi diễn đàn, ngày càng thấy buồn ra...
    Số bài viết:
    703
    Đã được thích:
    987
    Điểm thành tích:
    1.000
    Bài viết hay quá nhưng mất máy rồi giờ muốn nghiên cứu cũng k được, bác đi làm rồi có tiền cho em mượn mua lại cái máy cũ đi ^^.

Chia sẻ trang này

Advertising: Linux system admin | nukeviet | nukeviet 4 | Upload ảnh miễn phí