Buatlah proyek baru untuk menampilkan data API nama-nama cryptocurrency yang ada di dunia yang

diambil dari API online dengan alamat: https://api.coinlore.net/api/tickers/

Buat tampilan aplikasi mobile dengan tampilan sebagai berikut, dengan menampilkan
atribut/kolom/field name, symbol, dan price_usd dengan tampilan layar sebagai berikut:

• Tampilkan dan jelaskan file yang anda buat untuk menampilkan data di atas

• Sertakan Source Code dalam bentuk teks atau file

Jawab :

a. Tampilan activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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/white
tools:context=".MainActivity">

<Button
android:id="@+id/btn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Get Data"
android:background="@drawable/bg_btn" android:layout_marginTop="50dp"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

<TextView android:layout_width="match_parent" android:layout_height="1dp"

android:background="@color/black" android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@id/btn"/>

<TextView android:id="@+id/name" android:layout_width="100dp"

android:layout_height="wrap_content" android:text="Name" android:textSize="15sp"
android:textColor="@color/black" android:gravity="center" android:textStyle="bold"
android:layout_marginTop="20dp" android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/symbol"
app:layout_constraintTop_toBottomOf="@id/btn"/>

<TextView android:id="@+id/symbol" android:layout_width="100dp"

android:layout_height="wrap_content" android:text="Symbol" android:textSize="15sp"
android:textColor="@color/black" android:gravity="center" android:textStyle="bold"
android:layout_marginTop="20dp"

android:layout_marginStart="10dp" android:layout_marginEnd="10dp"
app:layout_constraintStart_toEndOf="@id/name"
app:layout_constraintEnd_toStartOf="@id/harga"
app:layout_constraintTop_toBottomOf="@id/btn"/>

<TextView android:id="@+id/harga" android:layout_width="100dp"

android:layout_height="wrap_content" android:text="Harga USD" android:textSize="15sp"
android:textColor="@color/black" android:gravity="center" android:textStyle="bold"
android:layout_marginTop="20dp" android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toEndOf="@id/symbol"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/btn"/>

<TextView android:layout_width="match_parent" android:layout_height="1dp"

android:background="@color/black" android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@id/name"/>

<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent" android:background="@color/white"
android:layout_marginTop="150dp">

<ListView android:id="@+id/listView"
android:layout_width="match_parent" android:layout_height="match_parent"
android:divider="@null" android:dividerHeight="7dp" android:paddingTop="5dp"
android:paddingBottom="5dp" android:scrollbars="none" />
</RelativeLayout>

<TextView android:layout_width="1dp"
android:layout_height="match_parent" android:background="@color/black"
android:layout_marginTop="108.5dp" app:layout_constraintStart_toStartOf="parent"/>

<TextView android:layout_width="1dp"
 android:layout_height="match_parent" android:background="@color/black"
android:layout_marginTop="108.5dp" app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

b. Tampilan list_item.xml (agar tampilan menjadi list dan bisa di scroll)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="@color/white">

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/card"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_marginTop="10dp" android:layout_marginBottom="10dp"
android:paddingBottom="10dp" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">

<TextView android:id="@+id/name" android:layout_width="100dp"

android:layout_height="wrap_content" android:textSize="15sp"
android:textColor="@color/black" android:gravity="center" android:textStyle="bold"
android:layout_marginTop="10dp" android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/symbol"
app:layout_constraintTop_toTopOf="parent"/>

<TextView android:id="@+id/symbol" android:layout_width="100dp"

android:layout_height="wrap_content" android:textSize="15sp"
android:textColor="@color/black" android:gravity="center" android:textStyle="bold"
android:layout_marginTop="10dp" android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" app:layout_constraintStart_toEndOf="@id/name"
app:layout_constraintEnd_toStartOf="@id/harga"
app:layout_constraintTop_toTopOf="parent"/>

<TextView android:id="@+id/harga" android:layout_width="100dp"

android:layout_height="wrap_content" android:textSize="15sp"
android:textColor="@color/black" android:gravity="center" android:textStyle="bold"
android:layout_marginTop="10dp" android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toEndOf="@id/symbol"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

c. Tampilan MainActivity.xml
package com.example.tugas;
Import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button; import android.widget.ListView; import
android.widget.TextView; import android.widget.Toast;

import com.android.volley.NoConnectionError; import com.android.volley.Request;

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

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

import java.util.ArrayList; import java.util.HashMap; import java.util.List; import

java.util.Map;

public class MainActivity extends AppCompatActivity { ListView listView;

private List<ListItem> listItems;
Button btn;

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

btn = findViewById(R.id.btn);
listView = findViewById(R.id.listView); listItems = new ArrayList<>();

btn.setOnClickListener(new View.OnClickListener() { @Override

public void onClick(View view) { loadData();
}
});
}
void loadData() {
StringRequest stringRequest = new StringRequest(Request.Method.GET,
"https://api.coinlore.net/api/tickers/",
new Response.Listener<String>() { @Override
public void onResponse(String response) {

try {
JSONObject obj = new JSONObject(response); JSONArray playerArray =
obj.getJSONArray("data");

for (int i = 0; i < playerArray.length(); i++) {

JSONObject playerObject = playerArray.getJSONObject(i); ListItem listItem = new ListItem(

playerObject.getString("name"),
playerObject.getString("symbol"), playerObject.getString("price_usd")
);

listItems.add(listItem);
}

ListviewItem adapter = new ListviewItem(listItems, MainActivity.this);

listView.setAdapter(adapter);

} catch (JSONException e) { e.printStackTrace();

}

}
},
new Response.ErrorListener() { @Override
public void onErrorResponse(VolleyError error) { if (error instanceof ServerError) {
Toast.makeText(MainActivity.this, "Server Bermasalah", Toast.LENGTH_SHORT).show();
Toast.makeText(MainActivity.this, "Klik Tombol Get Data",
Toast.LENGTH_SHORT).show();
} else if (error instanceof NoConnectionError) { Toast.makeText(MainActivity.this,
"Tidak Terhubung Ke Internet", Toast.LENGTH_SHORT).show();
Toast.makeText(MainActivity.this, "Klik Tombol Get Data",
Toast.LENGTH_SHORT).show();
} else if (error instanceof TimeoutError) { loadData();
}

}
}){

@Override
protected Map<String, String> getParams() {
Map<String, String> params = new HashMap<String, String>();

return params;
}
};

RequestQueue requestQueue = Volley.newRequestQueue(MainActivity.this);

requestQueue.add(stringRequest);
}

d. Tampilan untuk menampung list atau data yang ada pada API package
com.example.tugas;
import org.json.JSONObject; import java.io.Serializable;

public class ListItem implements Serializable { String name, symbol, harga;

public ListItem(String name, String symbol, String harga) { this.name = name;

this.symbol = symbol; this.harga = harga;
}
public String getName() { return name;
}

public String getSymbol() { return symbol;

}

public String getHarga() { return harga;

}

f. Tampilan untuk menampilkan data ke main activity package com.example.tugas;

import android.annotation.SuppressLint; import android.content.Context;

import android.view.LayoutInflater; import android.view.View;
import android.view.ViewGroup; import android.widget.ArrayAdapter; import
android.widget.TextView;

import java.util.List;

public class ListviewItem extends ArrayAdapter<ListItem> { private List<ListItem> listItems;

private Context context;

public ListviewItem(List<ListItem> listItems, Context context) { super(context,

R.layout.list_item, listItems);
this.listItems = listItems; this.context = context;

@SuppressLint("SetTextI18n") @Override
public View getView(final int position, View convertView, ViewGroup parent)
{
LayoutInflater inflater = LayoutInflater.from(context);

View listviewItem = inflater.inflate(R.layout.list_item, null, true);

TextView name = listviewItem.findViewById(R.id.name); TextView symbol =

listviewItem.findViewById(R.id.symbol); TextView harga =
listviewItem.findViewById(R.id.harga);

ListItem listItem = listItems.get(position);

name.setText(listItem.getName()); symbol.setText(listItem.getSymbol());
harga.setText(listItem.getHarga());

return listviewItem;
}

g. Agar dapat mengakses API

implementation 'com.android.volley:volley:1.2.1'
Adapun cara lain yaitu Untuk membuat proyek sederhana yang menampilkan data dari
https://api.coinlore.net/api/tickers/ dengan atribut "name", "symbol", dan "price_usd", Anda dapat
menggunakan bahasa pemrograman tertentu dan sebuah framework atau library untuk membantu
dalam pengembangan web. Sebagai contoh, saya akan memberikan panduan menggunakan Python
dan Flask, sebuah framework web ringan.

1. Install Flask:

Pastikan telah menginstal Flask. Jika belum, dapat menginstalnya dengan perintah berikut:

pip install Flask

Buat file app.py dan tambahkan kode berikut:

from flask import Flask, render_template

import requests

app = Flask(name)

@app.route('/')
def index():
# Ambil data dari API
api_url = 'https://api.coinlore.net/api/tickers/'
response = requests.get(api_url)
data = response.json()['data']

# Ambil atribut yang diperlukan: name, symbol, price_usd

coins = [{'name': coin['name'], 'symbol': coin['symbol'], 'price_usd':
coin['price_usd']} for coin in data]

# Render template HTML dengan data yang diambil

return render_template('index.html', coins=coins)

if name == 'main':
app.run(debug=True)

Buat file templates/index.html dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coin Data</title>
</head>
<body>
<h1>Coin Data</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Price (USD)</th>
</tr>
{% for coin in coins %}
 <tr>
<td>{{ coin.name }}</td>
<td>{{ coin.symbol }}</td>
<td>{{ coin.price_usd }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>

Jalankan aplikasi Flask:

python app.py

Buka browser dan akses http://127.0.0.1:5000/ untuk melihat hasil. Pastikan bahwa komputer
terhubung ke internet karena aplikasi ini akan mengambil data dari API secara real-time. Jika ingin
mengembangkan lebih lanjut, dapat menambahkan fitur seperti tampilan grafik atau informasi
tambahan mengenai setiap mata uang kripto.