Jav thời tiết

Trong hướng dẫn hôm nay, chúng ta sẽ tìm hiểu cách xây dựng một ứng dụng thời tiết đơn giản nhưng đầy đủ chức năng với Vanilla JavaScript

Những gì bạn sẽ tạo

Chúng tôi có rất nhiều điều thú vị cần đề cập, vì vậy hãy lấy một tách cà phê và bắt đầu nào. Đây là menu điều hướng nhanh dành cho bạn

Bạn sẽ học được gì trong Hướng dẫn API thời tiết JavaScript này

1. Giàn giáo ứng dụng thời tiết
   1. Tìm API thời tiết
   2. OpenWeather là gì?
   3. Nơi tìm biểu tượng thời tiết và bộ giao diện người dùng thời tiết
2. Xác định đánh dấu trang
3. Chỉ định một số kiểu cơ bản
4. Đặt kiểu chính
5. Thêm JavaScript
6. Thưởng. Nhận dữ liệu thời tiết theo thời gian thực với API Weatherstack

Những gì chúng ta sẽ xây dựng

Đây là video giới thiệu thể hiện chức năng của ứng dụng mà chúng ta sẽ tạo

Xây dựng ứng dụng thời tiết với Vanilla JavaScript bằng cách sử dụng OpenWeatherMap API & Biểu tượng tùy chỉnh

Đây là bản demo trên CodePen để bạn rẽ nhánh và chơi với

Hướng dẫn này giả định rằng bạn đã quen thuộc với AJAX, một kỹ thuật giao diện người dùng thiết yếu. Nếu bạn mới bắt đầu, hãy xem loạt bài này

1. Giàn giáo cho ứng dụng thời tiết

Trước khi bắt đầu tạo ứng dụng của chúng tôi, có một số điều mà chúng tôi phải xem xét

Tìm API thời tiết

Trước tiên, chúng tôi phải tìm một nhà cung cấp cho phép chúng tôi kết hợp dữ liệu thời tiết của nhà cung cấp đó vào ứng dụng của mình. May mắn thay, có một số nhà cung cấp khác nhau để phát triển các ứng dụng thời tiết. Hầu hết trong số chúng bao gồm một gói miễn phí cùng với các đăng ký cao cấp có quy mô tùy thuộc vào các dịch vụ/tính năng.  

OpenWeather là gì?

Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng OpenWeatherMap, một trong những lựa chọn miễn phí phổ biến nhất. OpenWeather tự mô tả mình là một nhóm các chuyên gia CNTT và nhà khoa học dữ liệu thực hiện khoa học dữ liệu thời tiết chuyên sâu kể từ năm 2014. Đối với mỗi điểm trên Trái đất, OpenWeather cung cấp dữ liệu thời tiết lịch sử, hiện tại và dự báo đáng tin cậy thông qua API tốc độ ánh sáng.  

Để tận dụng các khả năng của nó, trước tiên, chúng tôi phải đăng ký khóa API

Dịch vụ này đi kèm với các gói khác nhau. Như bạn có thể thấy từ hình ảnh bên dưới, phiên bản khởi động [miễn phí] cho phép 60 cuộc gọi mỗi phút phù hợp với nhu cầu của chúng tôi

Vì vậy, trước khi tiếp tục, vui lòng đảm bảo rằng bạn đã đăng ký khóa API. Sau này, chúng tôi sẽ đưa khóa đó vào kịch bản của mình.  

Hãy nhớ rằng cách tốt nhất để kiểm tra ứng dụng là rẽ nhánh bản demo CodePen và bao gồm khóa của riêng bạn. Nếu tất cả chúng ta dùng chung một khóa, ứng dụng có thể sẽ không hoạt động do giới hạn lệnh gọi API

Nơi tìm biểu tượng thời tiết và bộ giao diện người dùng thời tiết

Trước khi chúng tôi bắt đầu với mã JavaScript API thời tiết, chúng tôi sẽ cần các biểu tượng ứng dụng thời tiết. Điều đáng chú ý là OpenWeatherMap đi kèm với bộ biểu tượng riêng và chúng ta sẽ xem xét các biểu tượng đó. Tuy nhiên, chúng tôi sẽ tiến thêm một bước và sử dụng một số tùy chỉnh.  

Giờ đây, nếu bạn là một nhà thiết kế web hoặc làm việc với nhiều dự án thiết kế web, thì Envato Elements là lựa chọn tốt nhất dành cho bạn

Với mức phí hàng tháng thấp, thị trường dựa trên đăng ký này cung cấp cho bạn quyền truy cập không giới hạn vào mọi thứ bạn cần cho các dự án của mình

Ở đây chúng tôi sẽ xem xét một số bộ vectơ biểu tượng thời tiết hàng đầu và bộ giao diện người dùng thời tiết. Tiếp tục duyệt qua thư viện bộ giao diện người dùng thời tiết của Envato Elements để biết thêm

1. Biểu tượng thời tiết và phông chữ

Nếu bạn thích các biểu tượng ứng dụng thời tiết đơn giản, thì đây là những biểu tượng dành cho bạn. Bộ vector biểu tượng thời tiết này đi kèm với 32 biểu tượng vector và phông chữ Dự báo. Bộ vector biểu tượng thời tiết hoàn chỉnh này bao gồm 32 tệp SVG cũng như các tài liệu tham khảo HTML và CSS

2. Biểu tượng thời tiết UICON

Bộ vector biểu tượng thời tiết này có giao diện hiện đại và tươi mới. Có 12 biểu tượng ứng dụng thời tiết với hai phiên bản màu sắc. Tất cả các biểu tượng thời tiết được tạo bằng EPS với thiết kế tối giản

3. Biểu Tượng Thời Tiết Vector và Phông Chữ

Nếu bạn đang tìm kiếm một bộ vector biểu tượng thời tiết hoàn chỉnh, hãy xem cái này. Gói biểu tượng ứng dụng thời tiết đi kèm với 42 biểu tượng độc đáo và một phông chữ. Biểu tượng thời tiết có định dạng AI, PSD và SVG

4. Mẫu ứng dụng thời tiết

Bây giờ, nếu bạn muốn tạo một ứng dụng thời tiết với một mẫu, chúng tôi đã có bộ giao diện người dùng thời tiết này. Bạn có thể chỉnh sửa ứng dụng thời tiết của riêng mình bằng mẫu này trong Photoshop, Illustrator và Adobe XD

5. Widget thời tiết nhỏ cho web hoặc điện thoại di động

Đây là một bộ giao diện người dùng thời tiết thú vị khác nếu bạn muốn xây dựng một ứng dụng thời tiết khác. Bộ giao diện người dùng thời tiết này có thiết kế gọn gàng và tối giản. Bạn có thể chỉnh sửa nó bằng Phác thảo

2. Xác định đánh dấu trang

Bây giờ chúng ta đã thấy một số biểu tượng ứng dụng thời tiết hàng đầu, đã đến lúc xây dựng trang web thời tiết bằng JavaScript. Chúng tôi sẽ xác định hai phần.  

Phần đầu tiên sẽ bao gồm tiêu đề, biểu mẫu tìm kiếm và phần tử

4

07 trống. Phần tử này sẽ hiển thị với một thông báo thích hợp trong các điều kiện nhất định. Cụ thể, nếu không có bất kỳ dữ liệu thời tiết nào cho thành phố được yêu cầu hoặc dữ liệu cho thành phố này đã được biết đến.  

Phần thứ hai sẽ bao gồm một danh sách các thành phố. Theo mặc định, nó sẽ không chứa bất kỳ thành phố nào. Tuy nhiên, khi chúng tôi bắt đầu tìm kiếm thời tiết cho một thành phố cụ thể, nếu có sẵn dữ liệu thời tiết, một mục danh sách tương ứng [thành phố] sẽ được thêm vào danh sách không có thứ tự

Đây là đánh dấu trang ban đầu

1

2

3

    Simple Weather App

4

5

1

0

0

1

2

3

4

5

6

7

8

9

2

0

2

1

2

2

2

4

2

5

2

6

7

2

8

9

Ghi chú. Trong bản demo CodePen của chúng tôi, thuộc tính

4

08 của trường tìm kiếm sẽ không hoạt động. Trên thực tế, nó sẽ đưa ra lỗi sau mà bạn có thể thấy nếu mở bảng điều khiển trình duyệt của mình

Tuy nhiên, nếu bạn chạy ứng dụng này cục bộ [không phải dưới dạng dự án CodePen], vấn đề này sẽ không tồn tại

Và đây là đánh dấu được liên kết với một mục danh sách mà chúng tôi sẽ tạo động thông qua JavaScript

1

1

2

3

3

5

4

7

5

9

0

3

1

2

3

3

4

3

5

6

3

7

8

3

9

2

0

    Simple Weather App

1

3. Chỉ định một số kiểu cơ bản

Với phần đánh dấu cho ứng dụng thời tiết đã sẵn sàng, chúng ta sẽ tiếp tục với CSS. Bước đầu tiên, như mọi khi, là chỉ định một số biến CSS và các kiểu đặt lại phổ biến

1

    Simple Weather App

3

2

    Simple Weather App

5

3

    Simple Weather App

7

4

    Simple Weather App

9

5

4

1

0

4

3

2

4

5

4

4

7

6

4

9

8

2

0

2

2

2

4

2

4

6

2

6

8

2

8

5

0

5

1

4

9

5

3

5

4

5

5

5

6

5

7

5

8

4

9

1

00

1

01

1

02

1

03

1

04

1

05

1

06

4

9

1

08

1

01

00

01

02

1

03

04

05

06

07

08

09

10

11

12

4

9

14

15

16

17

18

19

20

21

22

23

4

9

25

26

27

28

29

30

4

9

32

33

34

35

36

37

38

39

40

41

42

43

4

9

4. Đặt kiểu chính

Bây giờ chúng ta hãy thảo luận về các phong cách chính của ứng dụng thời tiết của chúng ta

Phần #1 Phong cách

Trước tiên, chúng tôi sẽ thêm một số kiểu đơn giản vào các thành phần của phần đầu tiên.  

Trên màn hình trung bình trở lên [>700px], bố cục sẽ như thế này

Trên màn hình nhỏ hơn, các thành phần biểu mẫu sẽ chia thành hai dòng

Dưới đây là các phong cách liên quan

1

46

2

3

49

4

51

5

4

9

0

2

56

4

58

6

60

8

62

2

0

64

2

2

4

9

2

4

2

6

69

2

8

71

5

1

73

5

3

75

5

4

4

9

5

6

5

8

80

1

00

82

1

02

84

1

04

86

1

06

88

1

08

4

9

00

02

93

04

95

06

4

9

08

10

2

00

12

2

02

14

58

15

2

06

17

2

08

19

2

10

21

2

12

23

2

14

25

2

16

26

4

9

28

30

2

21

32

2

23

33

4

9

35

37

2

28

39

2

30

41

2

32

43

2

34

2

35

2

36

2

37

2

Phần #2 Phong cách

Chúng tôi sẽ sử dụng CSS Grid để bố trí các mục trong danh sách. Hãy nhớ rằng mỗi mục danh sách sẽ đại diện cho một thành phố. Chiều rộng của chúng sẽ phụ thuộc vào kích thước màn hình

Trên màn hình lớn [>1000px] chúng ta sẽ có bố cục bốn cột

Sau đó, trên màn hình trung bình [>700px và ≤1000px] bố cục ba cột, trên màn hình nhỏ [>500px và ≤700px] bố cục hai cột và cuối cùng trên màn hình cực nhỏ [≤500px], tất cả các thành phần sẽ được xếp chồng lên nhau

Dưới đây là các phong cách tương ứng

1

2

84

2

2

86

3

4

9

4

5

2

91

0

2

93

2

2

95

4

2

97

6

4

9

8

2

0

02

2

2

04

2

4

06

2

6

2

49

2

8

4

9

5

1

5

3

2

43

5

4

04

5

6

17

5

8

2

49

1

00

4

9

1

02

1

04

24

1

06

04

1

08

28

00

2

49

02

4

9

Mỗi cột sẽ trông giống như một thẻ có bóng dưới sẽ được thêm vào thông qua phần tử giả

4

09.  

Bên trong thẻ, chúng tôi sẽ đặt thông tin thời tiết về thành phố được yêu cầu. Chúng sẽ đến từ yêu cầu của chúng tôi, ngoài các biểu tượng. Các biểu tượng đó, như đã đề cập ở trên, được lấy từ Envato Elements, sẽ hiển thị điều kiện thời tiết hiện tại của thành phố này và khớp với các biểu tượng OpenWeatherMap tương đương

Dưới đây bạn có thể thấy một phần CSS cần thiết cho bố cục này

1

46

2

3

37

4

71

5

41

0

43

2

45

4

47

6

4

9

8

2

0

52

2

2

54

2

4

56

2

6

58

2

8

2

30

5

1

62

5

3

64

5

4

66

5

6

68

5

8

43

1

00

45

1

02

4

9

1

04

1

06

77

1

08

79

00

81

02

83

04

4

9

06

08

88

10

90

12

58

14

79

15

40

17

4

9

19

21

3

01

23

3

03

25

4

9

26

28

3

08

30

3

10

32

3

12

33

51

35

3

16

37

4

9

39

41

3

21

43

79

2

35

3

25________

5. Thêm JavaScript

Tại thời điểm này, chúng tôi đã sẵn sàng xây dựng chức năng cốt lõi của ứng dụng thời tiết của mình. Hãy làm nó

Khi gửi biểu mẫu

Mỗi khi người dùng gửi biểu mẫu bằng cách nhấn phím Enter hoặc nút Gửi, chúng tôi sẽ thực hiện hai việc

1. Dừng gửi biểu mẫu, do đó ngăn tải lại trang
2. Lấy giá trị được chứa trong trường tìm kiếm

Đây là mã bắt đầu

1

____531____3

3

3

34

4

3

36

5

3

38

0

3

40

Tiếp theo, chúng tôi sẽ kiểm tra xem liệu có các mục danh sách [thành phố] bên trong phần thứ hai hay không.  

Thực hiện một yêu cầu AJAX

Chúng tôi sẽ bắt đầu với giả định rằng danh sách trống. Điều đó nói rằng, nó chưa bao giờ chạy bất kỳ yêu cầu AJAX nào trong quá khứ. Trong trường hợp như vậy, chúng tôi sẽ thực hiện một yêu cầu tới API OpenWeatherMap và chuyển các tham số sau

1. Tên thành phố [e. g. athens] hoặc tên thành phố được phân tách bằng dấu phẩy cùng với mã quốc gia [e. g. athens,gr] sẽ là giá trị của trường tìm kiếm
2. khóa API. Một lần nữa, bạn nên sử dụng khóa riêng của mình để tránh các lỗi không mong muốn do giới hạn lệnh gọi API
3. Đơn vị nhiệt độ cho thành phố được yêu cầu. Trong trường hợp của chúng tôi, chúng tôi sẽ đi với độ C

Với tất cả những điều trên, bằng cách làm theo tài liệu API, URL yêu cầu của chúng tôi sẽ giống như thế này

1

____542____3

3

44

3

4

3

47

5

0

3

50

Để thực hiện yêu cầu AJAX, chúng ta có rất nhiều lựa chọn. Chúng ta có thể sử dụng API XMLHttpRequest cũ đơn giản, API Tìm nạp mới hơn hoặc thậm chí là thư viện JavaScript như jQuery và Axios. Đối với ví dụ này, chúng tôi sẽ sử dụng Fetch API.  

Để lấy dữ liệu mong muốn, chúng ta phải làm những việc sau

• Truyền URL mà chúng tôi muốn truy cập vào phương thức

  4

  10.  
• Phương thức này sẽ trả về một Lời hứa chứa phản hồi [một đối tượng

  4

  11]. Nhưng đây sẽ không phải là phản hồi thực tế, chỉ là phản hồi HTTP. Để lấy dữ liệu phản hồi ở định dạng JSON mong muốn [đây là định dạng dữ liệu mặc định của OpenWeatherMap], chúng ta sẽ sử dụng phương thức 

  4

  12 của đối tượng Response
• Phương thức này sẽ trả về một Promise khác. Khi nó được hoàn thành, dữ liệu sẽ có sẵn để thao tác
• Nếu vì lý do nào đó, yêu cầu không thành công, một thông báo tương ứng sẽ xuất hiện trên màn hình

Vì vậy, yêu cầu AJAX của chúng tôi sẽ giống như thế này

1

3

47

2

3

3

55

4

3

57

5

3

59

0

3

61

2

3

63

4

3

65

6

3

67

8

3

69

Mẹo. Thay vì xâu chuỗi các

4

13, chúng ta có thể sử dụng phương pháp tiếp cận

4

14 mới hơn và dễ đọc hơn cho yêu cầu AJAX

Đây là một ví dụ về dữ liệu phản hồi

Xây dựng thành phần mục danh sách

Với yêu cầu AJAX tại chỗ, mỗi khi chúng tôi nhập một thành phố vào trường tìm kiếm, API sẽ trả về dữ liệu thời tiết của thành phố đó, nếu chúng có sẵn. Công việc của chúng tôi bây giờ là chỉ thu thập dữ liệu mà chúng tôi cần, sau đó tạo mục danh sách được liên kết và cuối cùng, nối nó vào danh sách không có thứ tự

Đây là mã chịu trách nhiệm cho công việc này

1

3

71

2

3

73

3

3

75

4

3

77

5

0

3

80

2

3

82

4

3

84

6

3

86

8

3

88

2

0

3

90

2

2

3

92

2

4

3

94

2

6

3

96

2

8

3

98

5

1

    Simple Weather App

00

5

3

    Simple Weather App

02

5

4

    Simple Weather App

04

5

6

    Simple Weather App

06

5

8

    Simple Weather App

08

1

00

    Simple Weather App

10

Có hai điều ở đây chúng ta phải thảo luận

1. Nếu bạn xem lại hình ảnh phản hồi ở trên, bạn sẽ nhận thấy rằng API trả về mã

   4

   15 [e. g. "50d"] nắm giữ điều kiện thời tiết hiện tại của thành phố mục tiêu. Dựa trên mã này, chúng tôi có thể tạo URL biểu tượng và hiển thị nó trong thẻ thông qua thẻ

   4

   16
2. Bên trong phần tử

   4

   17 của mỗi mục danh sách, chúng tôi sẽ thêm thuộc tính

   4

   18 với giá trị là

   4

   19 [e. g.

   4

   20]. Sau này, chúng tôi sẽ sử dụng giá trị này để ngăn các yêu cầu trùng lặp

Đặt lại mọi thứ

Cuối cùng, sau yêu cầu AJAX, chúng tôi sẽ xóa nội dung của phần tử

4

21, giá trị của trường tìm kiếm và cũng tập trung vào trường đó

1

____547

2

3

    Simple Weather App

15

4

    Simple Weather App

17

5

    Simple Weather App

19

Làm tốt lắm mọi người. Chúng tôi vừa tạo phiên bản đầu tiên của ứng dụng của mình. Vào thời điểm bạn đặt khóa API của riêng mình và tìm kiếm thành phố, bạn sẽ thấy bố cục thẻ tương tự như bố cục đó

Đây là bản demo CodePen có liên quan

Thêm biểu tượng thời tiết tùy chỉnh

Bây giờ, hãy tùy chỉnh một chút giao diện của ứng dụng của chúng ta. Chúng tôi sẽ thay thế các biểu tượng OpenWeatherMap PNG mặc định bằng các SVG mà chúng tôi đã tải xuống trước đó từ Envato Elements

Để làm điều này, tôi đã tải tất cả các biểu tượng mới lên CodePen [thông qua Trình quản lý nội dung vì tôi là thành viên CHUYÊN NGHIỆP] và đổi tên của chúng, để chúng khớp với tên và điều kiện thời tiết của các biểu tượng ban đầu, như thế này

Sau đó, trong mã, chúng ta chỉ phải thay đổi đường dẫn biểu tượng

1

    Simple Weather App

21

2

3

73

3

3

75

4

3

77

5

0

    Simple Weather App

30

2

    Simple Weather App

32

4

3

75

6

    Simple Weather App

36

Ngăn chặn các yêu cầu trùng lặp

Vẫn còn một điều chúng ta phải sửa. Cho đến nay, khi chúng tôi thực hiện một yêu cầu AJAX thành công, một mục danh sách sẽ được tạo. Tuy nhiên, danh sách có thể chứa nhiều mục danh sách giống hệt nhau đề cập đến cùng một thành phố, chẳng hạn như vậy

Đó là trải nghiệm người dùng không tốt, vì vậy hãy đảm bảo rằng chỉ một yêu cầu duy nhất được kích hoạt cho một thành phố cụ thể.  

Nhưng trước đó, có một điều khác cần xem xét. Cùng một tên thành phố có thể tồn tại ở nhiều quốc gia. Ví dụ: nếu chúng tôi tìm kiếm “Athens” trong công cụ tìm kiếm của OpenWeatherMap, chúng tôi sẽ thấy những kết quả này

Với tất cả những điều trên, chúng tôi sẽ viết một số mã để đảm bảo rằng chỉ một yêu cầu duy nhất cho mỗi thành phố, mỗi quốc gia sẽ được thực thi

1

3

47

2

3

    Simple Weather App

41

4

    Simple Weather App

43

5

    Simple Weather App

45

0

2

    Simple Weather App

48

4

    Simple Weather App

50

6

    Simple Weather App

52

8

    Simple Weather App

54

2

0

    Simple Weather App

56

2

2

    Simple Weather App

58

2

4

    Simple Weather App

60

2

6

    Simple Weather App

62

2

8

    Simple Weather App

64

5

1

    Simple Weather App

66

5

3

    Simple Weather App

68

5

4

    Simple Weather App

70

5

6

    Simple Weather App

72

5

8

    Simple Weather App

74

1

00

    Simple Weather App

76

1

02

    Simple Weather App

78

1

04

    Simple Weather App

80

1

06

    Simple Weather App

82

1

08

3

69

00

2

51

02

    Simple Weather App

88

04

    Simple Weather App

90

06

    Simple Weather App

92

08

    Simple Weather App

94

10

    Simple Weather App

96

12

    Simple Weather App

98

14

4

00

15

4

02

17

2

49

19

4

9

Hãy để tôi giải thích những hành động xảy ra ở đây

1. Một lần nữa trong quá trình xử lý gửi, trước khi thực hiện yêu cầu AJAX, chúng tôi kiểm tra xem danh sách không có thứ tự có trống hay không. Nếu nó không trống, điều đó có nghĩa là ít nhất một yêu cầu AJAX thành công đã được thực thi.  
2. Tiếp theo, chúng tôi kiểm tra xem có mục danh sách nào tên thành phố hoặc giá trị của thuộc tính

   4

   18 của nó bằng với giá trị của trường tìm kiếm không
3. Nếu vậy, điều đó có nghĩa là người dùng đã biết thời tiết của thành phố này, vì vậy không cần thực hiện một yêu cầu AJAX nào khác. Như các hành động sau, chúng tôi sẽ hiển thị cho họ một thông báo có liên quan, xóa giá trị của trường tìm kiếm và đặt tiêu điểm cho nó

Lưu ý số 1. Như tôi đã nhận thấy, trong trường hợp bạn tìm kiếm một thành phố có nhiều nhất hai chữ cái không đại diện cho bất kỳ mã quốc gia nào [e. g. athens,aa], API sẽ không trả về bất kỳ thứ gì. Mặt khác, nếu bạn tìm kiếm một thành phố cùng với ít nhất ba chữ cái không đại diện cho bất kỳ mã quốc gia nào [e. g. athens,aaaa], API sẽ bỏ qua phần sau dấu phẩy và trả về tất cả các thành phố có tên là phần đầu tiên [e. g. athens]

Lưu ý 2. Đối với bài tập này, chúng tôi cũng sẽ không đề cập đến trường hợp đặc biệt khi một quốc gia có nhiều hơn một thành phố có cùng tên [e. g. Athens ở Hoa Kỳ]. Vì vậy, ví dụ: nếu người dùng tìm kiếm “athens,us” thì chỉ một thành phố xuất hiện trên màn hình và không nhiều hơn. Để bao quát kịch bản lý tưởng, người dùng bằng cách nào đó nên biết ID thành phố [e. g. có thể cung cấp chúng dưới dạng danh sách thả xuống] và tìm kiếm dựa trên đó thay vì tìm kiếm dựa trên tên của nó

Công việc tuyệt vời, mọi người. Chúng tôi vừa xây dựng ứng dụng của mình. Hãy cùng xem

Ứng dụng thời tiết của bạn đã sẵn sàng

Và chúng tôi đã hoàn thành. Đây thực sự là một hành trình khá dài, nhưng tôi hy vọng rằng bạn thích nó và nó đã giúp nâng cao kỹ năng front-end của bạn

Một lần nữa, đừng quên đặt khóa của riêng bạn để thử nghiệm ứng dụng trực tiếp.  

Xin nhắc lại, chúng ta hãy xem lại cách hoạt động của ứng dụng thời tiết

Xây dựng ứng dụng thời tiết với Vanilla JavaScript bằng cách sử dụng OpenWeatherMap API & Biểu tượng tùy chỉnh

Như mọi khi, cảm ơn rất nhiều vì đã đọc

Bước tiếp theo

Có rất nhiều điều bạn có thể làm để mở rộng chức năng của ứng dụng thời tiết này. Dưới đây là một số suy nghĩ

• Sử dụng vị trí địa lý để lấy vị trí của người dùng, sau đó thực hiện yêu cầu AJAX để truy xuất dữ liệu thời tiết cho các thành phố gần nhất của họ
• Sử dụng localStorage để duy trì dữ liệu ở trên hoặc thậm chí là cơ sở dữ liệu thời gian thực như Firebase
• Sử dụng thư viện biểu đồ như Highcharts. js để xây dựng một siêu dữ liệu sẽ đưa ra dự báo thời tiết. Nếu bạn làm như vậy, hướng dẫn này có thể giúp
• Sử dụng API hình ảnh như API Flickr để trình bày dưới dạng hộp đèn thư viện danh sách ảnh cho từng thành phố

Nếu có bất kỳ điều gì khác mà bạn có thể muốn xem dưới dạng tiện ích mở rộng ứng dụng, hãy cho tôi biết trong phần nhận xét bên dưới

MIỄN PHÍ

1. 1 giờ

Xây dựng một ứng dụng thời tiết đơn giản với JavaScript

Trong khóa học ngắn hạn này, bạn sẽ học cách tạo một ứng dụng thời tiết đơn giản nhưng đầy đủ chức năng bằng vanilla JavaScript và Open Weather API

Xây dựng một ứng dụng thời tiết đơn giản với Vanilla JavaScript. KHÓA HỌC MIỄN PHÍ

Thưởng. Nhận dữ liệu thời tiết theo thời gian thực với API Weatherstack

được tài trợ. Hãy xem hướng dẫn bổ sung này của Jeremy McPeak giải thích về ngăn thời tiết;

Nhận dữ liệu thời tiết theo thời gian thực với API Weatherstack

Khám phá thêm các hướng dẫn và tài nguyên về JavaScript

Bây giờ bạn đã biết cách tạo ứng dụng thời tiết bằng JavaScript và cách tạo trang web thời tiết. Nếu bạn muốn khám phá thêm về JavaScript và tìm hiểu thêm về nó, đây là những hướng dẫn thú vị hơn.