CHƯƠNG 5. PHÁT TRIỂN ỨNG DỤNG WEB TRÊN NỀN GAE

Một phần của tài liệu Vai trò của điện toán lưới đối với điện toán đám mây xây dựng ứng dụng web trên nền GAE (Trang 73)

Trong chương này, chúng tôi sẽ trình bày cách tạo một dự án web dựa trên các công cụ được cung cấp bởi Googlenhư bộ plug-in cho Eclipse, app engine java sdk. Bài viết có những nội dung sau đây:

+ Tìm hiểu cấu trúc của một dự án theo GAE + Hướng dẫn đăng ký dự án với GAE

+Chạy thử ứng dụng với chuỗi Hello World trên máy cục bộ và triển khai (deploy) để chạy trên nền của Google.

+Viết một ứng dụng gửi mail đơn giản và triển khai trên nền của Google và chạy thử.

5.1 Tạo khung dự án trên Eclipse 5.1.1. Tạo dự án có tên là gaewebdev

Từ icon củabộ plug-in GAE trên Eclipse, chọn “New Web Application Project…”. Thực hiện như hình sau đây:

Hình 9: Tạo một project bằng công cụ của GAE

Tiếp theo, màn hình thứ 2 xuất hiện, điền đầy đủ thông tin như sau : - Tên dự án :gaewebdev

- Chọn:

+ thư mục cần lưu.

+ bỏ chọn “Google Web ToolKit“, chọn “Using Google App Engine” và liên kết tới GAE Java SDK thông qua nút “configure SDK”. Chúng ta trỏ vào thư mục

+ Chọn “Finish”.

Dự án mới được tạo có cấu trúc thư mục như dưới đây:

Hình 11: Cấu trúc thư mục dự án mới khởi tạo Chú thích :

gaewebdev/

src/

...Java source code...

META-INF/ ...cấu hình khác...

war/

...JSPs, images, data files...

WEB-INF/

lib/

...JARs cho các thư viện...

classes/

...các class được biên dịch...

Có thêm một file là “appengine-web.xml“, Google App Engine cần file này để chạy và deploy ứng dụng.

5.1.2 Đăng ký dự án với GAE

Để ứng dụng có thể hosting được lên hệ thống của Google, chúng ta cần đăng ký một ID cho dự án, thường nó là tên của trang web, ở đây ta lấy tên theo tên cua dự án là :gaewebdev

Đăng nhập vào tài khoảng gmail, vào đường link sau đây và click vào nút “Create Application :

Xem hình bên dưới :

Hình 12: Tạo một ứng dụng mới

Hình 13: Khai báo tạo một ứng dụng mới

Màn hình tạo thành công xuất hiện như hình dưới đây :

Hình 14: Màn hình đăng ký ứng dụng thành công

Bước tiếp theo ta cần khai báo tên của “Application Identifier” kháo báo ở trên ở file appengine-web.xml. Ở thẻ application, ta đưa tên đã khai báo cho “Application Identifier” vào. Xem hình :

Hình 15: Khai báo “Application Identifier” cho dự án.

5.2 Chạy thử ứng dụng với chuỗi Hello World 5.2.1. Trên máy local

Nhấp phải chuột vào dự án, chọn run as “Web Application“. Như hình dưới đây:

Hình 16: Chạy ứng dụng trên máy local Màn hình Eclipse console đưa ra thông tin :

INFO: The server is running at http://localhost:8888/

Jul 19, 2013 2:22:40 PM com.google.appengine.tools.development.DevAppServerImpl start

INFO: The admin console is running at http://localhost:8888/_ah/admin Access URL http://localhost:8888/, see output

Hình 17: Màn hình thông tin chạy ở Eclipse console

Mở trình duyệt nào đó, Chrome chẳng hạn, sử dụng địa chỉ url sau đây :http://localhost:8888/để coi kết quả :

Hình 18: Màn hình chạy ứng dụng trên máy cục bộ thành công

5.2.2. Deploy trên GAE

Để deploy, xem các bước sau đây:

Hình 19: Deploy ứng dụng lên App Engine

Đăng nhập với tài khoản Google và click vào nút Deploy như hình dưới:

Nếu mọi thứ tốt đẹp, ứng dụng sẽ được deploy tới URL sau -http://gaewebdev.appspot.com

Hình 21: Deploy ứng dụng web lên GAE.

5.3 Tạo một trang web gửi mail 5.3.1. Tạo trang jsp email.jsp

Trong thư mục war, tạo trang email.jsp, form cho mục email được viết như sau : <formid="inboundmail-

form"action="/mail"method="get"onsubmit="sendInboundMailWebhook(); return

false">

<inputid="content-type"name="header:Content-

Type"value="message/rfc822"type="hidden">

<inputid="content-length"name="header:Content-Length"type="hidden"> <divclass="fieldset">

<labelfor="to">Nguoi nhan:</label>

<inputid="to"name="to"size="40"type="text"> </div>

<divclass="fieldset">

<labelfor="subject">Tieu de:</label>

<inputid="subject"name="subject"size="40"type="text"> </div>

<divid="body-c"class="fieldset"> <labelfor="body">Noi dung:</label>

<textareaid="body"name="body"rows="10"cols="50"></textarea> </div>

<divid="inboundmail-submit">

<inputname="send-mail"value="Gui Email"type="submit"> </div>

</form>

5.3.2. Tạo file servlet xử lý gửi email

•Trong src, tạo 2 file servlet : MainPageServlet, MailReiverServlet trong gói cloud.servlet.mail, dùng để xử lý việc gửi mail và nhận mail :

package cloud.servlet.mail; import java.io.IOException; import java.util.Properties; import java.util.logging.Logger; import javax.mail.Session; import javax.mail.MessagingException;

import javax.mail.Multipart;

import javax.mail.Part;

import javax.mail.internet.MimeMessage;

import javax.servlet.http.*;

publicclass MailReceiverServlet extends HttpServlet {

privatestaticfinal Logger log =

Logger.getLogger(MailReceiverServlet.class.getName());

publicvoid doPost(HttpServletRequest req, HttpServletResponse resp)

throws IOException {

Properties props = newProperties();

Session session = Session.getDefaultInstance(props, null);

try {

MimeMessage message = newMimeMessage(session, req.getInputStream());

Object content = message.getContent();

if (content instanceof String) {

// A plain text body.

log.info("Received email message from " + message.getSender() +

" (" + message.getContentType() + "): " + content);

} elseif (content instanceof Multipart) {

// A multipart body.

log.info("Received multi-part email message (" +

((Multipart) content).getCount() + " parts)");

for (int i = 0; i < ((Multipart) content).getCount(); i++) { Part part = ((Multipart) content).getBodyPart(i);

String partText = (String) part.getContent(); log.info("Part " + i + ": " + " (" + message.getContentType() + "): " + partText); } } } catch (MessagingException e) {

log.warning("MessagingException: " + e); } } } package cloud.servlet.mail; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.logging.Logger; import java.util.Properties; import java.util.SimpleTimeZone; import javax.mail.Message; import javax.mail.MessagingException; import javax.mail.Multipart; importjavax.mail.Part; import javax.mail.Session; import javax.mail.Transport; import javax.mail.internet.AddressException; import javax.mail.internet.InternetAddress; import javax.mail.internet.MimeBodyPart; import javax.mail.internet.MimeMessage;

import javax.mail.internet.MimeMultipart; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.*; import com.google.appengine.api.users.User; import com.google.appengine.api.users.UserService; import com.google.appengine.api.users.UserServiceFactory; import com.google.appengine.api.utils.SystemProperty; import com.google.apphosting.api.ApiProxy; @SuppressWarnings("serial")

publicclass MainPageServlet extends HttpServlet {

privatestaticfinal Logger log =

Logger.getLogger(MainPageServlet.class.getName());

publicvoid doGet(HttpServletRequest req, HttpServletResponse resp)

throws IOException, ServletException {

UserService userService = UserServiceFactory.getUserService(); User user = userService.getCurrentUser();

String fromEmail = user.getEmail();

String appId = ApiProxy.getCurrentEnvironment().getAppId();

if (appId.startsWith("s~")) { appId = appId.substring(2); }

String recipientAddress = (String) req.getParameter("to"); Properties props = newProperties();

Session session = Session.getDefaultInstance(props, null); String htmlMessageBody = (String) req.getParameter("body");

String subject = (String) req.getParameter("subject");

boolean emailSuccess = true;

try {

MimeMessage message = newMimeMessage(session);

message.setHeader("Content-Type", "text/html; charset=UTF-8"); message.setFrom(new InternetAddress(fromEmail,

"The GAE Web Team"));

message.addRecipient(Message.RecipientType.TO,

new InternetAddress(recipientAddress)); message.setSubject(subject, "UTF-8");

Multipart multipart = newMimeMultipart(); MimeBodyPart htmlPart = newMimeBodyPart(); htmlPart.setContent(htmlMessageBody, "text/html"); multipart.addBodyPart(htmlPart);

message.setContent(multipart); Transport.send(message);

log.info("Email sent to: " + recipientAddress); } catch (AddressException e) {

log.warning("AddressException: " + e); emailSuccess = false;

} catch (MessagingException e) {

log.warning("MessagingException: " + e); emailSuccess = false;

}

req.setAttribute("emailSuccess", emailSuccess); req.setAttribute("user", user);

req.setAttribute("isDevelopment", SystemProperty.environment.value() == SystemProperty.Environment.Value.Development);

SimpleDateFormat fmt = newSimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSSSSS");

fmt.setTimeZone(new SimpleTimeZone(0, ""));

req.setAttribute("currentTime", fmt.format(new Date())); resp.setContentType("text/html");

RequestDispatcher jsp = req.getRequestDispatcher("/WEB-INF/home.jsp"); jsp.forward(req, resp);

} }

5.3.3. Khai báo cấu hình.

 Trong file web.xml ta khai báo servlet MailReceiverServlet ở trên như sau: <servlet>

<servlet-name>mail</servlet-name>

<servlet-class>cloud.servlet.mail.MainPageServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>mail</servlet-name> <url-pattern>/mail</url-pattern>

</servlet-mapping>

<servlet>

<servlet-name>mailreceiver</servlet-name>

<servlet-class>cloud.servlet.mail.MailReceiverServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>mailreceiver</servlet-name> <url-pattern>/_ah/mail/*</url-pattern>

</servlet-mapping>

Sử dụng file email.jsp như là file đầu tiên được hiển thị trong trang web: <welcome-file-list>

<welcome-file>email.jsp</welcome-file>

</welcome-file-list>

 Trong file appengine-web.xml để đăng ký dịch vụ mail của GAE, ta thêm 1 thẻ trong thẻ lớn appengine-web-appnhư sau :

<inbound-services> <service>mail</service>

</inbound-services>

5.4 Chạy ứng dụng gửi mail trên GAE

Deploy lại ứng dụng lên Google Engine. Khi deploy thành công, sử dụng trình duyệt Chrome để thực hiện việc thử nghiệm. Sử dụng đường dẫn như sau:

http://gaewebdev.appspot.com

Hình 22: Đăng nhập vào Google trước khi sử dụng ứng dụng. Tiếp theo, ta nhấn vào nút “Cho phép” để tiếp tục sử dụng:

Hình 23: Chấp nhận điều khoản của Google.

Tiếp theo, màn hình trang web gửi email xuất hiện, ta điền các thông tin cần thiết để gửi mail, sau đó nhấn nút “Gui Email”. Xem như hình dưới đây:

Hình 24: Màn hình gửi mail được deploy lên Google Engine.

Khi gửi mail thành công, màn hình sẽ xuất hiện một câu thông báo.

Hình 25: Màn hình thông báo viêc gửi email thành công.

Tiếp theo, ta kiểm tra hòm thư người nhận có nhận được email hay không. Kết quả cho thấy việc gửi mail hoàn tất.

CHƯƠNG 6 – KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN

Một phần của tài liệu Vai trò của điện toán lưới đối với điện toán đám mây xây dựng ứng dụng web trên nền GAE (Trang 73)