Bài viết này nhằm mục đích giới thiệu những người chưa biết về lập trình thử xem có hợp không, bằng cách giới thiệu các nguyên lí, khái niệm cơ bản và làm thử 1 ứng dụng.
1. Giới thiệu
Lập trình chủ yếu là công việc viết Code và Code đó sẽ chạy để thực hiện 1 chức năng nào đó. Ngày nay chủ yếu viết code để làm web, làm ứng dụng điện thoại (Android và iOS), thỉnh thoảng có làm phần mềm trên máy tính (Desktop App) nhưng ít hơn. Có nhiều ngôn ngữ code để viết, nhiều phần mềm để viết code (VD như bài này đang viết trên Google Docs (sau đã được chuyển lên HashNode), còn với code thì có thể dùng Note Pad viết cũng đc, tuy nhiên người ta hay dùng các chương trình chuyên dụng để hỗ trợ tối đa việc viết code - sẽ giới thiệu sau)
Lập trình có nhiều mảng, không phải mảng nào cũng cần đến kiến thức toán học, suy luận logic. Tuy nhiên nó là các kiến thức liên ngành nếu có thì okie. Lập trình cũng như học toán cấp 3, có đề mẫu sẵn và lời giải sẵn rồi, thằng nào học giỏi là thằng biết nhiều dạng đề.
Theo như ý trên, có nhiều dạng mẫu nên đối với dân lập trình, sử dụng google tìm kiếm rất nhiều, hầu như mọi thứ đều có trên google. Nhiều người làm lập trình 10 năm vẫn bị hổng kiến thức cơ bản phải đi google. Cái này là khó tránh khỏi vì có nhiều ngôn ngữ mới ra theo thời gian, không thể học thuộc hết được, lúc nào cần dùng thì google.
Lập trình cũng khá khá giống việc đọc các hướng dẫn crack, cài win trên mạng, sẽ có những bài hướng dẫn từng bước để làm, trong bài viết này sẽ hướng dẫn làm 1 ứng dụng web cơ bản, không cần hiểu bản chất, chỉ cần làm theo
2. Bắt tay luôn vào việc làm ứng dụng
Chúng ta sẽ làm web bán pizza, có tính năng: người dùng sẽ điền thông tin order và gửi lên, mình sẽ nhận về email thông báo mỗi lần có order, để biết mà liên hệ với khách.
Bước 1: Vào trang forms.google.com và tạo 1 cái form như hình
Bước 2: Bấm vào tab Response và bấm vào biểu tưởng Google Sheet để đẩy kết quả về Google Sheet
Bước 3: Vào Tools -> Notification Rule để thiết lập thông báo khi nào có ai gửi lên thì báo về email mình
Vậy là đã xong được 1 ứng dụng làm pizza, bây giờ chỉ cần lấy link của bản google form và gửi cho mọi người là xong. (Bấm vào hình con mắt là sẽ mở ra 1 link form và có thể copy link đó gửi cho mọi người)
Bước 4: Mở link đó ra và tự test thử bằng cách nhập lên 1 order, xem có nhận được email và file sheet đó có hiện thông tin không.
Bước 5: Chúng ta đã có 1 cách để khách có thể gửi thông tin đến chúng ta, như vậy cơ bản là đã xong. Tuy nhiên thường thì các bên sẽ muốn có website riêng để đặt order, chứ qua google form thì trông nó “low tech”, Giờ chúng ta sẽ làm 1 cái website nhưng vẫn link đến google form. Hãy mở trang web: codepen.io Đây là 1 trang vừa code vừa xem được kết quả ngay lập tức, 1 công cụ code online
Bước 6: Tìm kiếm với từ khóa Google Form, bấm vào kết quả “Custom Google Form…”
Đó như chúng ta thấy, đó là kết quả của 1 người khác đăng tải lên, cũng là 1 dạng “đề mẫu” mà rất nhiều người có chung nhu cầu Lưu ý: trước khi bắt đầu code thì nên đăng ký tài khoản, và bấm vào nút Fork để copy cái mẫu của người ta về, vì nếu mình chỉnh sửa trên bài của người ta, thì lúc sau sẽ k lưu lại, còn nếu clone về của mình, thì mình bấm lưu lại đc
Bước 7: Thử nghịch qua bằng cách chỉnh sửa nội dung của ô code HTML, và xem website bên dưới thay đổi theo
Sửa để nó thành như này:
Bước 8:
Ok vậy là xong phần giao diện, giờ hãy lo phần tính năng, mục đích là làm cho khách có thể dùng website và gửi dữ liệu qua google form. Chúng ta mở lại cái link google form ban nãy, giờ chúng ta cần mở Developer Menu -> Element -> Search từ khóa <form và enter
Bước 9:
Copy lấy cái url ở trong action=""
Paste đè vào cái trên codepen
Tiếp tục copy các cái tên entry ở bên form
Copy đè vào bên Codepen theo đúng thứ tự
Lưu ý: Cái url ở trong action và cái entry này mỗi form một khác nhau, nên phải copy đúng từ bên google form sang bên code pen. Chứ k copy cái url và cái entry ở bài viết này
Bước 10: Ok r đó, giờ thử điền vào và submit xem có nhận được thông tin hay không. Nếu làm đúng, nó sẽ mở ra 1 tab mới và báo như này
Bước 11: Thế là tạm xong, nhưng có 1 điều là nó vẫn mở ra google form bên tab mới, nên vẫn bị lộ là google form. Giờ cần ẩn đi, chúng ta sẽ thêm đoạn code để xử lý: Copy thêm dòng này lên đầu HTML
<iframe style="display: none;" name="hidden-form"></iframe>
Đổi cái target="_blank" thành target="hidden-form"
Lưu ý: Cái ký tự “ ở trên google docs có thể sẽ gây lỗi, lúc copy nếu k chạy thì xóa đi gõ lại, hoặc copy kí tự “ ở chính trong codepen
Tiếp tục copy và paste đoạn này vào ô JS
document.querySelector("iframe[name='hidden-form']").onload = function(e) {
// check xem form có thông tin hay không
if (!document.querySelector("input[name='entry.1783149408']").value) return;
// hiển thị thông báo với khách
alert("Cảm ơn bạn chúng tôi đã nhận được thông tin");
// xóa các thông tin trong form để khách có thể tiếp tục order
document.querySelector("input[name='entry.1783149408']").value = '';
document.querySelector("input[name='entry.1074525687']").value = '';
document.querySelector("input[name='entry.315281561']").value = '';
};
Lưu ý: Nhớ đổi lại entry cho đúng
Bước 12: Test thôi, thử tự đặt 1 order xem. Nếu thành công nó sẽ hiện như này:
Và sẽ k mở ra tab mới. OK vậy là khách hàng sẽ k biết mình dùng google form.
Bước 13: Xong rồi đó, giờ sẽ lấy link website vừa mới làm, để gửi cho khách, bấm vào như trong hình để ẩn hết ô code, sau đó copy link
Chúng ta có thể lấy link đó gửi cho khách. Done
3. Một số các vấn đề thường gặp khi làm theo 1 bài hướng dẫn như thế này
- Ngôn ngữ máy, các thiết lập khác, khiến cho đôi lúc làm theo nó không giống như trong bài hướng dẫn. Những trường hợp này cần tự phân tích và cố gắng làm theo bám vào các bước của bài
- Có những bước đơn lẻ, có thể google thêm ở ngoài để nắm vững hơn. VD nếu k quen về google form, lên search google cách dùng google form, Nếu k biết mở Developer Menu, lên google search cách mở developer menu.
- Trong quá trình copy code và sửa chữ, những cái dấu rất quan trọng, như “”, ‘’, :, (cái này sau trong code nó gọi là syntax), lúc sửa chữ cần để nguyên lại dấu.
4. Tính ứng dụng
Website bên trên có tính ứng dụng thực tế, chứ k phải chỉ là 1 bài mẫu, tuy nhiên nó thường không dùng cho việc bán hàng, vì thực tế sẽ cần hình ảnh, giỏ hàng,... Ứng dụng thực tế là các cái form góp ý liên hệ tên website, mobile. VD:
5. Tổng kết lại
- Không cần đến kiến thức có sẵn về lập trình, chỉ cần biết dùng máy tính cơ bản là có thể làm được theo hướng dẫn như trên. Nếu bạn làm thành công mà không có mấy khó khăn, thì okie lập trình cũng chỉ như vậy thôi
- Dĩ nhiên là cần có kiến thức cơ bản và từ các kiến thức cơ bản sẽ google tốt hơn. Quy trình sẽ là: Học 1 ít kiến thức + Google -> Có thêm kiến thức + tiếp tục Google với các bài toán khác
- VD như trong bài này bạn sẽ biết cách Google Form hoạt động, cách Codepen hoạt động, và cách tìm kiếm các mẫu có sẵn trên Codepen để nghịch
- Ngôn ngữ trong bài là HTML và Javascript. Sau này chỉ cần học về HTML, Javascript và thêm CSS nữa là có thể làm được hầu hết website, app di động, phần mềm máy tính.
- Trong lập trình thì sử dụng tiếng anh khá là nhiều, nên cũng cần đọc hiểu cơ bản Nếu okie thì sẽ thử sức tiếp với bài viết tiếp theo về việc học HTML, CSS cơ bản