Cách tạo ứng dụng Android theo dõi COVID-19 bằng API REST

Đăng bởi: Admin | Lượt xem: 1884 | Chuyên mục: Android

Thế giới đang đối mặt với một trong những dịch bệnh tồi tệ nhất, sự bùng phát của COVID-19 , tất cả các bạn đều biết điều đó. Vì vậy, trong thời gian khóa này, hãy tạo Ứng dụng Android theo dõi COVID-19 bằng API REST, theo dõi Chỉ số toàn cầu .


Bước 1: Mở một dự án mới

  • Mở một dự án mới chỉ cần nhấp vào File ở góc trên cùng bên trái.
  • Sau đó bấm vào New và mở một dự án mới với bất kỳ tên nào bạn muốn.
  • Bây giờ chúng ta sẽ làm việc với Empty Activity với ngôn ngữ là Java. Để lại tất cả các tùy chọn khác là mặc định

Bạn có thể thay đổi tên của dự án.

  •  
  • Theo mặc định, sẽ có hai tệp Activity_main.xml và MainActivity.java .

Bước 2: Trước khi đến phần coding, trước tiên bạn phải thực hiện một số nhiệm vụ trước.

  • Chuyển đến phần app-> res-> value-> colors.xml và đặt màu cho ứng dụng của bạn.

Colors.xml

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <color name="colorPrimary">#42C14B</color> 
    <color name="colorPrimaryDark">#3BC545</color> 
    <color name="colorAccent">#05af9b</color> 
  
    <color name="color_one">#fb7268</color> 
    <color name="color_white">#ededf2</color> 
  
</resources>
  •  
  • Đi đến phần Gradle Scripts-> build.gradle (Module: app) và nhập các dependencies và nhấp vào Sync Now.

build.gradle (Module:app)

// Volley library 
implementation 'com.android.volley:volley:1.1.1'
  •  
  • Chuyển đến phần app-> manifest-> AndroidManifests.xml và cho phép quyền Internet Permission .

AndroidManifests.xml

<!--Allow Internet Permission-->
<uses-permission android:name="android.permission.INTERNET" />

Bước 3: Thiết kế giao diện người dùng

  • Dưới đây là mã cho tệp xml.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<ScrollView
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@color/color_white"
	android:orientation="vertical"
	tools:context=".MainActivity"> 


	<!--Linear Layout to display all the details-->
	<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:padding="20dp"
		android:orientation="vertical"> 

		<!--Text view to display Global stats-->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="Global Stats"
			android:textColor="#050505"
			android:textAllCaps="true"
			android:textAlignment="center"
			android:textSize="35sp"
			android:textStyle="bold"/> 

			<!--Text view to display Total Cases-->
			<TextView
				android:layout_width="match_parent"
				android:layout_height="wrap_content"
				android:fontFamily="sans-serif-light"
				android:layout_marginTop="20dp"
				android:text="Total Cases"
				android:textAlignment="center"
				android:textStyle="bold"
				android:textSize="30sp"/> 

			<!--Text view to display the updated number when data 
			will fetch from the API. For now default set to 0 -->
			<TextView
				android:layout_width="match_parent"
				android:layout_height="wrap_content"
				android:text="0"
				android:id="@+id/tvCases"
				android:textAlignment="center"
				android:textSize="25sp"
				android:textColor="@color/color_one"
				android:textStyle="bold"
				android:fontFamily="sans-serif-light" /> 

		<!--Text view to display Recovered Cases-->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:fontFamily="sans-serif-light"
			android:text="Recovered"
			android:textAlignment="center"
			android:textStyle="bold"
			android:textSize="30sp"/> 

		<!--Text view to display the updated number when data 
		will fetch from the API. For now default set to 0 -->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="0"
			android:id="@+id/tvRecovered"
			android:textAlignment="center"
			android:textSize="25sp"
			android:textColor="@color/color_one"
			android:textStyle="bold"
			android:fontFamily="sans-serif-light" /> 

		<!--Text view to display Critical Cases-->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:fontFamily="sans-serif-light"
			android:text="Critical"
			android:textAlignment="center"
			android:textStyle="bold"
			android:textSize="30sp"/> 

		<!--Text view to display the updated number when data 
		will fetch from the API. For now default set to 0 -->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="0"
			android:id="@+id/tvCritical"
			android:textAlignment="center"
			android:textSize="25sp"
			android:textColor="@color/color_one"
			android:textStyle="bold"
			android:fontFamily="sans-serif-light" /> 

		<!--Text view to display Active Cases-->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:fontFamily="sans-serif-light"
			android:text="Active"
			android:textAlignment="center"
			android:textStyle="bold"
			android:textSize="30sp"/> 

		<!--Text view to display the updated number when data 
		will fetch from the API. For now default set to 0 -->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="0"
			android:id="@+id/tvActive"
			android:textAlignment="center"
			android:textSize="25sp"
			android:textColor="@color/color_one"
			android:textStyle="bold"
			android:fontFamily="sans-serif-light" /> 

		<!--Text view to display Today Cases-->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:fontFamily="sans-serif-light"
			android:text="Today Cases"
			android:textAlignment="center"
			android:textStyle="bold"
			android:textSize="30sp"/> 

		<!--Text view to display the updated number when data 
		will fetch from the API. For now default set to 0 -->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="0"
			android:id="@+id/tvTodayCases"
			android:textAlignment="center"
			android:textSize="25sp"
			android:textColor="@color/color_one"
			android:textStyle="bold"
			android:fontFamily="sans-serif-light" /> 

		<!--Text view to display Total Deaths-->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:fontFamily="sans-serif-light"
			android:text="Total Deaths"
			android:textAlignment="center"
			android:textStyle="bold"
			android:textSize="30sp"/> 

		<!--Text view to display the updated number when data 
		will fetch from the API. For now default set to 0 -->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="0"
			android:id="@+id/tvTotalDeaths"
			android:textAlignment="center"
			android:textSize="25sp"
			android:textColor="@color/color_one"
			android:textStyle="bold"
			android:fontFamily="sans-serif-light" /> 

		<!--Text view to display Today Deaths-->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:fontFamily="sans-serif-light"
			android:text="Today Deaths"
			android:textAlignment="center"
			android:textStyle="bold"
			android:textSize="30sp"/> 

		<!--Text view to display the updated number when data 
		will fetch from the API. For now default set to 0 -->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="0"
			android:id="@+id/tvTodayDeaths"
			android:textAlignment="center"
			android:textSize="25sp"
			android:textColor="@color/color_one"
			android:textStyle="bold"
			android:fontFamily="sans-serif-light" /> 

		<!--Text view to display Affected Countries-->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:fontFamily="sans-serif-light"
			android:text="Affected Countries"
			android:textAlignment="center"
			android:textStyle="bold"
			android:textSize="30sp"/> 

		<!--Text view to display the updated number when data 
		will fetch from the API. For now default set to 0 -->
		<TextView
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:text="0"
			android:id="@+id/tvAffectedCountries"
			android:textAlignment="center"
			android:textSize="25sp"
			android:textColor="@color/color_one"
			android:textStyle="bold"
			android:fontFamily="sans-serif-light" /> 

		</LinearLayout> 

</ScrollView>
  •  
  • Sau khi sử dụng mã này trong tệp .xml , giao diện người dùng sẽ như sau:

​​​​​​​

Bước 4: Làm việc với tệp Java

  • Mở tệp MainActivity.java ,tạo đối tượng TextView .
​
// Create the object of TextView Class
TextView tvCases, tvRecovered, tvCritical, tvActive, tvTodayCases, tvTotalDeaths, tvTodayDeaths, tvAffectedCountries;

​

​​​​​​​

  •  
  • Bên trong phương thức onCreate(), chúng ta phải liên kết các đối tượng đó với id tương ứng mà chúng đã đưa ra trong tệp .XML.
// link those objects with their respective id’s that we have given in .XML file
tvCases = findViewById(R.id.tvCases);
tvRecovered = findViewById(R.id.tvRecovered);
tvCritical = findViewById(R.id.tvCritical);
tvActive = findViewById(R.id.tvActive);
tvTodayCases = findViewById(R.id.tvTodayCases);
tvTotalDeaths = findViewById(R.id.tvTotalDeaths);
tvTodayDeaths = findViewById(R.id.tvTodayDeaths);
tvAffectedCountries = findViewById(R.id.tvAffectedCountries);

​​​​​​​

  •  
  • Tạo một phương thức private void fetchdata() bên ngoài phương thức onCreate() và định nghĩa nó.
  • Trong phương thức fetchdata(), nhiệm vụ quan trọng nhất là cách tìm nạp dữ liệu từ API của bên thứ ba và triển khai nó trong ứng dụng . Hãy đọc kỹ hai bài viết Thư viện Volley trong Android và REST API (Giới thiệu) để hiểu các khái niệm.
  • Tạo một yêu cầu String bằng Thư viện Volley và gán liên kết url với link https://corona.lmao.ninja/v2/all .
// Create a String request using Volley Library 

String url = "https:// corona.lmao.ninja/v2/all"; 

StringRequest request 
	= new StringRequest( 
		Request.Method.GET, 
		url, 
		new Response.Listener() { 
			@Override
			public void onResponse( 
				String response) 
			{ 
			} 
		}, 
		new Response.ErrorListener() { 
			@Override
			public void onErrorResponse( 
				VolleyError error) 
			{ 
			} 
		}); 

RequestQueue requestQueue 
	= Volley.newRequestQueue(this); 
requestQueue.add(request);
  •  
  • Vui lòng tham khảo trang web này để xem dữ liệu được yêu cầu ở định dạng JSON .

​​​​​​​

  •  
  • Bên trong phương thức onResponse() tạo đối tượng của lớp JSONObject, sau đó thiết lập dữ liệu trong chế độ xem văn bản có sẵn ở định dạng JSON với sự trợ giúp của jsonobject. Hãy nhớ rằng tham số bên trong getString() phải khớp với tên được đặt ở định dạng JSON.
// Handle the JSON object and handle it inside try and catch 

try { 
	// Creating object of JSONObject 
	JSONObject jsonObject 
		= new JSONObject( 
			response.toString()); 

	// Set the data in text view 
	// which are available in JSON format 
	// Note that the parameter 
	// inside the getString() must match 
	// with the name given in JSON format 
	tvCases.setText( 
		jsonObject.getString("cases")); 
	tvRecovered.setText( 
		jsonObject.getString("recovered")); 
	tvCritical.setText( 
		jsonObject.getString("critical")); 
	tvActive.setText( 
		jsonObject.getString("active")); 
	tvTodayCases.setText( 
		jsonObject.getString("todayCases")); 
	tvTotalDeaths.setText( 
		jsonObject.getString("deaths")); 
	tvTodayDeaths.setText( 
		jsonObject.getString("todayDeaths")); 
	tvAffectedCountries.setText( 
		jsonObject.getString("affectedCountries")); 
} 
catch (JSONException e) { 
	e.printStackTrace(); 
}
  •  
  • Và bên trong phương thức onErrorResponse() bạn nên hiển thị Toast message nếu có lỗi xảy ra.
Toast.makeText(MainActivity.this, 
               error.getMessage(), 
               Toast.LENGTH_SHORT)
     .show();
  •  
  • Cuối cùng gọi phương thức fetchdata() bên trong phương thức onCreate().

Dưới đây là mã hoàn chỉnh cho tệp MainActivity.java:

MainActivity.java:

package com.example.covid_19tracker; 

import androidx.appcompat.app.AppCompatActivity; 

import android.os.Bundle; 
import android.widget.TextView; 
import android.widget.Toast; 

import com.android.volley.Request; 
import com.android.volley.RequestQueue; 
import com.android.volley.Response; 
import com.android.volley.VolleyError; 
import com.android.volley.toolbox.StringRequest; 
import com.android.volley.toolbox.Volley; 

import org.json.JSONException; 
import org.json.JSONObject; 

public class MainActivity 
	extends AppCompatActivity { 

	// Create the object of TextView 
	TextView tvCases, tvRecovered, 
		tvCritical, tvActive, 
		tvTodayCases, tvTotalDeaths, 
		tvTodayDeaths, 
		tvAffectedCountries; 

	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{ 
		super.onCreate(savedInstanceState); 
		setContentView(R.layout.activity_main); 

		// Link those objects with their respective id's 
		// that we have given in .XML file 
		tvCases 
			= findViewById(R.id.tvCases); 
		tvRecovered 
			= findViewById(R.id.tvRecovered); 
		tvCritical 
			= findViewById(R.id.tvCritical); 
		tvActive 
			= findViewById(R.id.tvActive); 
		tvTodayCases 
			= findViewById(R.id.tvTodayCases); 
		tvTotalDeaths 
			= findViewById(R.id.tvTotalDeaths); 
		tvTodayDeaths 
			= findViewById(R.id.tvTodayDeaths); 
		tvAffectedCountries 
			= findViewById(R.id.tvAffectedCountries); 

		// Creating a method fetchdata() 
		fetchdata(); 
	} 

	private void fetchdata() 
	{ 

		// Create a String request 
		// using Volley Library 
		String url = "https:// corona.lmao.ninja/v2/all"; 

		StringRequest request 
			= new StringRequest( 
				Request.Method.GET, 
				url, 
				new Response.Listener<String>() { 
					@Override
					public void onResponse(String response) 
					{ 

						// Handle the JSON object and 
						// handle it inside try and catch 
						try { 

							// Creating object of JSONObject 
							JSONObject jsonObject 
								= new JSONObject( 
									response.toString()); 

							// Set the data in text view 
							// which are available in JSON format 
							// Note that the parameter inside 
							// the getString() must match 
							// with the name given in JSON format 
							tvCases.setText( 
								jsonObject.getString( 
									"cases")); 
							tvRecovered.setText( 
								jsonObject.getString( 
									"recovered")); 
							tvCritical.setText( 
								jsonObject.getString( 
									"critical")); 
							tvActive.setText( 
								jsonObject.getString( 
									"active")); 
							tvTodayCases.setText( 
								jsonObject.getString( 
									"todayCases")); 
							tvTotalDeaths.setText( 
								jsonObject.getString( 
									"deaths")); 
							tvTodayDeaths.setText( 
								jsonObject.getString( 
									"todayDeaths")); 
							tvAffectedCountries.setText( 
								jsonObject.getString( 
									"affectedCountries")); 
						} 
						catch (JSONException e) { 
							e.printStackTrace(); 
						} 
					} 
				}, 
				new Response.ErrorListener() { 
					@Override
					public void onErrorResponse(VolleyError error) 
					{ 
						Toast.makeText( 
								MainActivity.this, 
								error.getMessage(), 
								Toast.LENGTH_SHORT) 
							.show(); 
					} 
				}); 

		RequestQueue requestQueue 
			= Volley.newRequestQueue(this); 
		requestQueue.add(request); 
	} 
}

Đầu ra:

Tags Android Covid_19 API REST
vncoder logo

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!

Chia sẻ bài viết

Bài viết liên quan

Firebase ML Kit: Trả lời thông minh ( Smart Reply) trong Android
Firebase ML Kit: Nhận diện khuôn mặt ( Face Detection) trong Android
Cách tạo bố cục hai khung cho máy tính bảng hoặc khi xoay ngang thiết bị di động (dual pane layout in Android) sử dụng Fragment trong Android (Phần 1)
CÁCH TẠO ỨNG DỤNG TRÌNH XEM PDF TRÊN ANDROID
Hướng dẫn xây dựng ứng dụng sử dụng API vân tay (FINGERPRINT API) để đăng nhập, đăng ký người dùng trong Android (P1)

Bài viết mới

Hướng dẫn xây dựng ứng dụng sử dụng API vân tay (FINGERPRINT API) để đăng nhập, đăng ký người dùng trong Android (P2)
Hướng dẫn xây dựng ứng dụng sử dụng API vân tay (FINGERPRINT API) để đăng nhập, đăng ký người dùng trong Android (P1)
Clean Architecture là gì? Lợi ích và hạn chế của Architecture? So sánh MVP và MVVM
Content Provider trong Android là gì? Cách sử dụng Content Provider và ví dụ minh họa.
Xây dựng ứng dụng chuyển văn bản thành lời nói Android (Text to Speech)
Intent Service là gì? Ví dụ minh họa Intent Service
Bounded Service (Dịch vụ ràng buộc) là gì? Ví dụ xây dựng app dự báo thời tiết sử dụng Service
UnBuonded Service - Started Service (Service không ràng buộc) là gì? Ví dụ xây dựng app nghe nhạc (Music) chạy ngầm sử dụng Service
Service là gì? Vòng đời Service? So sánh Bounded Service (Service ràng buộc), UnBounded Service (Service không ràng buộc) và Intent Service
Chuyên mục khác

Được xem nhiều nhất

Chuyên mục: Android
[Android] Xây dựng biểu đồ trong ứng dụng Android bằng thư viện MPAndr...
05/03/2020 | Lượt xem: 7466
Bổ sung tính năng Item Click cho RecyclerView trong Android
09/04/2020 | Lượt xem: 7432
[Android] Tìm hiểu về Internal Storage, External Storage và Scoped Sto...
16/04/2020 | Lượt xem: 6822
[Android] 30 câu hỏi phỏng vấn Android kinh điển
22/03/2020 | Lượt xem: 6560
Cách xây dựng ứng dụng trình phát nhạc đơn giản bằng Android Studio
01/08/2020 | Lượt xem: 6349

Khóa học liên quan

Khóa học: Android
Học Kotlin cơ bản
Số bài học:
Lượt xem: 17558
Đăng bởi: Admin
Chuyên mục: Android
Học lập trình Flutter cơ bản
Số bài học:
Lượt xem: 58303
Đăng bởi: Admin
Chuyên mục: Android
Lập trình Android cơ bản
Số bài học:
Lượt xem: 22931
Đăng bởi: Admin
Chuyên mục: Android