Ở bài trước trong series bạn đã được làm quen với Wordpress và cách chỉ bằng vài click có thể tạo ra 1 trang web hoàn chỉnh. Wordpress làm rất tốt với những gì người ta cần ở nó ở mức độ cơ bản. Còn với những yêu cầu nâng cao hơn, thì cần phải học thêm kha khá.
1. Nói sâu thêm về Wordpress
3 ứng dụng tốt nhất của Wordpress là tạo 1 trang viết blog, tạo 1 trang website tin tức (landing page), hay tạo 1 trang web bán hàng. Dĩ nhiên sẽ còn nhiều các ứng dụng nâng cao hơn nhưng chúng ta sẽ không đi sâu vào nó. Về tính thương mại, Wordpress rất phù hợp cho các doanh nghiệp nhỏ hoặc chủ cửa hàng. Mình sẽ chia sẻ 1 công thức kinh doanh với Wordpress như sau:
Bước 1: Chuẩn bị tiền vốn:
- Mua hosting/server như hawkhost.com mình đã giới thiệu ở bài trước: 7.99$ / tháng = 95.88 ~ 2tr175k VND / năm
- Mua tài khoản elements.envato.com giá 16.5$ / tháng = ~4tr491k VND / năm
=> Tổng tiền: 6tr666k VND / năm
Bước 2: Định giá sản phẩm
Giờ nhìn sang đối thủ cạnh tranh là 1 công ty như Sapo xem giá họ như nào:
299k / tháng = 3tr588k / năm
Vậy nếu mình đặt giá rất cạnh tranh là 2tr5 / 1 website, thì 1 năm chỉ cần 2.66 khách là hoàn vốn.
Bước 3: Thiết lập quy trình bán hàng
- Quảng cáo cho ae bạn bè gần xa là mình nhận làm web, lưu ý tập khách hàng là chủ cửa hàng, chủ doanh nghiệp nhỏ, nên phù hợp với việc quảng cáo truyền miệng, khả năng bạn quen biết ai đó đang buôn bán gì đó là khá cao.
- Khi đã có khách thì hỏi xem yêu cầu của họ là gì, nếu chỉ là 1 trang bán hàng và k có yêu cầu gì thì nhận, họ mà yêu cầu mấy cái nâng cao thì thôi từ chối luôn.
- Hỏi về việc chọn domain (tên miền), thường 1 domain .com giá loanh quanh khoảng 300k / năm, cái này cộng vào giá cho khách trả
- Tìm một số lượng theme trên Elements Envato làm mẫu cho họ chọn
- Tải và cài theme, chỉnh sửa dữ liệu demo sang dữ liệu của khách (tên, logo, hình ảnh, 1 số sản phẩm mẫu,..). Bước này nếu làm quen rồi thì sẽ nhanh, tuy nhiên cần lường trước các yêu cầu thêm của khách, thông thường sẽ như chèn link facebook, sdt vào footer, header, thêm nút zalo, đổi màu chữ ..v..v.. tuy nhiên nếu có yêu cầu khá khó như sửa hoàn toàn 1 trang (kiểu khách thấy 1 trang web khác khá hay rồi bảo mình làm theo cho giống) thì từ chối luôn. Công thức kinh doanh này tương tự việc nhập hàng về bán, hàng đóng gói sẵn thế nào rồi thì bán thế đó, nói chung chỉ phục vụ các yêu cầu cơ bản và khách hàng sẽ phải theo sản phẩm. Quan trọng là phải báo cho khách biết trước để khách tự điều chỉnh kì vọng. Nếu làm quen rồi và đã biết cách thêm bớt chỉnh sửa thì có thể trao đổi với khách về những gì có thể làm thêm, tuy nhiên hãy nhớ rằng giá thành sản phẩm rẻ hơn lương full time của hầu hết các nhân viên, không nên bỏ quá nhiều thời gian làm thêm cái này cái kia cho khách (phải báo rõ với khách trước).
Nếu bạn làm quen với công thức trên, thì nửa ngày -> 1 ngày là có thể xong được 1 web có thể sử dụng được, khách có thể vào đăng bài đăng sản phẩm luôn. Với theme trả phí thì hầu như mọi thứ đều có hướng dẫn trong file documentation của nó rồi, chỉ cần bỏ thời gian ra làm quen nhiều lần là sẽ nhuần nhuyễn.
Lưu ý khi làm với Wordpress
Sẽ có nhiều cách để bạn có thể cắt giảm chi phí ban đầu, tuy nhiên TUYỆT ĐỐI không dùng theme lậu. Cái này quan trọng vì thường ta hay có thói quen sử dụng phần mềm crack, sẽ không muốn bỏ tiền mua theme. Với theme lậu thì rất có khả năng đã bị chèn mã độc vào bên trong, dẫn đến Chrome báo đỏ khi vào web, Facebook chặn không cho đăng link website -> website bị đưa vào blacklist -> coi như mất cái domain.
Việc tìm cách cắt giảm chi phí sẽ đánh đổi bằng (nhiều) thời gian bỏ ra nghiên cứu, do đó mình không khuyến khích trong lúc ban đầu, khi nào bạn hiểu rõ về Wordpress và các vấn đề như server, hosting, thì lúc đó bạn sẽ tự có cách tối ưu chi phí riêng cho mình.
Bài tập 1:
Từ kết quả bài tập lần trước, hãy
- Tập đổi ảnh logo
- Tập đổi tiêu đề, tên web, đổi ngôn ngữ thành tiếng Việt
- Tập đổi menu, đổi thông tin một số trang như trang liên hệ, đổi nội dung ở footer, header
- Tập đăng 1 vài sản phẩm mới
2. Nhìn lại 2 bài viết trước và đưa ra một số hướng học tổng quan
Trong khi Wordpress được coi là 1 giải pháp No Code và có thể kiếm tiền với nó luôn, thì HTML JS CSS lại là nền tảng để giúp bạn đi xa hơn. Lưu ý là Series lập trình này mình muốn hướng các bạn theo tư duy Vấn đề -> Giải pháp trước, có nghĩa là không tự nhiên lại học những thứ k cần thiết (mặc dù nó có thể là nền tảng của lập trình), mà xuất phát từ Vấn đề trước và học những cái nhanh nhất để giải quyết Vấn đề.
Ok giả sử bây giờ mình muốn làm 1 app di động, hoặc muốn làm 1 mạng xã hội đi, thì Wordpress bó tay rồi. Đó giờ chúng ta mới cần các giải pháp nâng cao hơn, bắt đầu từ việc học HTML JS CSS
Bài tập 2:
Đăng ký 1 tài khoản ở freecodecamp.org/learn
Học 2 phần học như trong hình sau
Cụ thể là:
- Học khóa học Basic HTML and HTML 5
Học full khóa học và upload ảnh show là đã học hết các bài trong khóa đó
- Học khóa Basic CSS
Học full khóa này và cũng up ảnh show tiến độ
- Học khóa Basic Javascript
Học full khóa này và cũng up ảnh show tiến độ
Kiểu học của freecodecamp giống như chơi game làm nhiệm vụ, kết hợp với Google thêm hy vọng các bạn có thể hoàn thành các khóa học trên. Nếu có thời gian, hãy không ngần ngại mà học hết 2 phần học như trong ảnh bên trên mình đăng. Lưu ý rằng các kiến thức này là cơ bản nên nó khá quan trọng.
3. Giới thiệu về công nghệ Component và làm thử 1 app di động
Component có thể hiểu là 1 thành phần nhỏ trong toàn thể bộ phận. Trong thuật ngữ về lập trình, thì Component thường dùng để nói về các thành phần của giao diện ứng dụng.
Hãy nhìn vào ảnh minh họa này, có thể nói rằng Component khá rõ ràng để nhận ra. Component sẽ được chia thành nhiều level từ to đến nhỏ
- Website = Big Component 1 + Big Component 2 + ... + Big Component n
- Big Component 1 = Smaller Component 1 + Smaller Component 2 ...
Quy đổi ra HTML ta sẽ có thể nói rằng Component cấp nhỏ nhất là 1 html tag, VD như <button></button>, <img />, <h1></h1>, và tập hợp của chúng tạo thành 1 component to hơn, VD:
Tổng quan thì cấu trúc của 1 Web app / 1 Mobile app sẽ là:
- 1
<App></App> = List of <Page></Page>
- 1
<Page></Page> = <Header></Header> + <Content></Content> + <Footer></Footer>
- 1
<Content></Content> = List of <Item></Item> (trường hợp phổ biến)
- 1
<Item></Item> = <Image></Image> + <Text></Text>
Giờ chúng ta sẽ thử bắt tay vào làm 1 app di động bán Pizza, khá giống như bài tập ở bài viết số 1, chỉ là đưa từ web lên mobile app
Okay bắt đầu nào, hãy thực hiện theo các bước sau:
- Bước 1: Truy cập vào https://snack.expo.dev/
Trang này nhìn qua thì khá giống Codepen.io, tuy nhiên để ý phần preview bên phải có iOS, Android, Web. Nghĩa là chúng ta có thể code cho cả iOS, Android và Web.
Tiếp theo nhìn vào khung code, chúng ta thấy <View></View>, <Text></Text>, ... nhìn khá giống HTML. Yes, đây là các Component cấp bé nhất. Đến đây mình cần nói lại 1 chút, đó là HTML được dùng để code giao diện website, còn cái bên trên, hãy tạm gọi nó là URP (Universal React Practice), có thể dùng để code giao diện cả website và mobile app luôn. Đây sẽ là phần mà mình trọng tâm muốn giới thiệu với các bạn, và nó sẽ xuất hiện trong suốt các bài viết từ đây về sau trong series.
Okay tạm biết thế đã, giờ hãy đăng ký & đăng nhập để cho những gì mình sắp viết k bị mất (Nó sẽ được lưu vào mục My Snacks như hình)
Giờ xóa hết code đi và viết lại thành như này:
- Bước 2: Sử dụng các component cơ bản View, Text, TextInput, TouchableOpacity
Giống như HTML có h1, div, input, button... thì ở URP này có View, Text, TextInput, TouchableOpacity, trước hết hãy thử với Text
Thêm <Text>Đây là app bán Pizza, hãy order ngay</Text> vào dưới <View>
Thêm dùng kèm với placeholder để tạo các khung nhập. VD:
<TextInput placeholder="Bạn mua bao nhiều cái" />
Lưu ý nếu bạn gặp lỗi màn hình đỏ, thì hãy nhớ thêm TextInput lên dòng import như hình. Khác với HTML, để dùng các Component bạn phải khai bảo nó ở dòng import rồi mới được dùng. Ngoài ra để ý cái kí hiệu /> thay vì <TextInput></TextInput>, cái này là 1 cái khác của URP với HTML đó là nếu những Component không có cấp con (gọi là children) thì có thể dùng /> cho ngắn gọn, tức là 2 cách viết này đều có thể dùng với URP, nhưng HTML chỉ dùng được 1 kiểu thôi.
Okie cơ mà giờ nhìn khung nhập không giống như bên web, vì không có viền bao quanh. Để làm cho giống, chúng ta cần thêm inline style cho TextInput như sau:
<TextInput placeholder="Bạn mua bao nhiều cái" style={{ borderWidth: 1, borderColor: 'black' }} />
Khác với HTML có 2 cách để style đó là dùng class CSS và inline style, thì URP chỉ có thể dùng inline style, nếu quy ra HTML thì sẽ là như này:
Dù có khác nhau nhưng có lẽ bạn sẽ nhận ra 1 điểm chung, các từ ngữ sử dụng khá giống nhau. border-width -> borderWidth, border-color -> borderColor. Đúng vậy, CSS sự dụng kiểu viết kebab-case còn URP style sử dụng kiểu viết camelCase. kiểu viết camelCase được dùng chủ yếu trong JS nên URP style được gọi là JS style object. HTML cũng style được theo kiểu này, nhưng phải dùng JS. Tham khảo link w3school này
Quay trở lại bài viết, hãy thêm 2 TextInput nữa để đủ các trường nhập liệu
Giờ cần thêm nút bấm nữa là đủ. như ở HTML ta có <button></button>, thì ở URP ta có <TouchableOpacity></TouchableOpacity>. Hãy gõ vào như hình:
Giờ thêm 1 chút style để cho giống 1 cái nút bấm. Cho text ra giữa và tô màu cho button
Bạn có thể bấm thử ở bên khung preview để thấy nó nhấp nháy. Như vậy là căn bản bạn đã làm xong phần cấu trúc giao diện của app r đó.
- Bước 3: Giờ hãy preview app bạn vừa làm bên trên điện thoại.
Bấm Save để lưu Snack của bạn
Hãy search trên store để tải app Expo Go (App store iOS) và Expo (Play Store Android)
Sau khi cài đặt xong thì mở app lên và đăng nhập, bạn sẽ thấy cái app mình vừa lưu xuất hiện ở đó. Sau đó mở ra
Chúc mừng bạn đã làm ra được 1 app đầu tiên!! và không chỉ là app, nó còn là web, code URP sẽ cho bạn cả web và app cùng 1 code.
Bài tập 3:
Hãy sử dụng kiến thức về CSS đã học được ở Freecodecamp, và phần giới thiệu về JS style object bên trên, hãy chỉnh lại app vừa làm thành giống như này:
