Selamat kepada para developer yang telah berhasil mendapatkan akses ke Ericsson API. Pada artikel sebelumnya kami telah menyediakan tutorial bagaimana caranya memanfaatkan Ericsson Networked Event API yang bisa Anda baca disini. Artikel tersebut bisa Anda jadikan panduan untuk mengembangkan aplikasi dan diikutkan dalam Sport Digital Experience.
Selain ENE API, Ericsson juga telah menyediakan Safe City API yang bisa Anda manfaatkan untuk mengembangkan aplikasi bertemakan Smart City Digital Service. Pada artikel ini kami akan memberikan tutorial penggunaan Ericsson Safe City API. Disini akan dicontohkan bagaimana caranya membuat aplikasi untuk mengetahui lokasi darurat dan tempat umum di sekitar pengguna.
Pada artikel sebelumnya Anda sudah mengenal Ericsson Developer Portal yang bisa Anda akses melalui http://asiangamesdigitalchallenge2017.kemkominfo-ericsson.com/. Terdapat 3 pilihan menu pada portal tersebut. Pilihlah menu Safe City untuk melihat service yang disediakan.
Ericsson Developer Portal
Pengenalan Ericsson Safe City API
Safe City API adalah API yang menyediakan data seputar Safe City seperti Emergency response ticket, Emergency vehicle, serta Sensor and Actuators. Emergency response ticket dan Emergency vehicle dapat diakses dengan menggunakan id atau dengan mencarinya berdasarkan radius dalam peta melalui REST API. Sedangkan untuk posisi Emergency vehicle dapat diakses dengan menggunakan protokol MQTT. Untuk lebih lengkapnya Anda bisa eksplore sendiri pada link berikut. Terdapat juga Workforce Manager yang bisa digunakan untuk manage data seputar Safe City. Workforce Manager bisa Anda akses melalui link berikut.
Workforce Manager
Mengakses REST API dengan Swagger atau Postman
Pada API Documentation terdapat 3 pilihan yang bisa Anda pelajari yaitu WIKI, REST API, dan MQTT. Pada artikel ini hanya akan dijelaskan cara mengakses REST API, untuk MQTT bisa Anda eksplorasi sendiri. Silahkan pilih REST API pada API Documentation untuk masuk ke dalam Swagger.
API Documentation
Untuk dapat mengakses semua service pada Safe City API, Anda harus mendapatkan Authentication Token terlebih dahulu dengan cara memilih service authentication dan memasukan username serta password dari akun Ericsson Developer Portal. Anda akan mendapatkan reponse berupa projectId dan token. Gunakan token tersebut sebagai header Authorization untuk mengakses semua service yang ada pada Safe City API.
Token Response
Klik tombol Authorize di sebelah kanan atas pada portal swagger dan masukkan token yang didapat untuk melakukan otorisasi. Jika berhasil maka Anda sudah bisa mengakses semua service yang ada. Misalnya Anda ingin mengetahui daftar Emergency ticket response di sekitar lokasi Anda, pilihlah service ticket dengan method GET : /ticket/find/{radius} kemudian masukkan radius dalam satuan meter. Tekan tombol Execute maka akan didapatkan data Emergency ticket response dalam bentuk JSON response.
JSON Response
Jika Anda ingin mengakses Safe City API dengan Postman, masukkan base url diikuti path dari service yang akan diakses. Contohnya Anda ingin mengakses service pointofinterest maka request url-nya adalah http://wfm.asiangamesdigitalchallenge2017.kemkominfo-ericsson.com/wfm/rest/v1/pointinterest/all/{radius} . Kemudian pada Headers masukkan ‘Authorization : token’ dan ‘Content-type : application/json’. Tekan tombol Send, jika berhasil akan didapatkan response berupa data PoI dalam radius yang telah ditentukan.
Request API via Postman
Implementasi ke dalam aplikasi Android
Seperti pada artikel sebelumnya, kita akan mencoba mengimplementasikan Safe City API ke dalam aplikasi Android. Untuk struktur project, development pattern, dan library yang akan digunakan masih sama seperti pada artikel sebelumnya.
Google Maps API Key
Anda perlu membuat credentials dari Google Maps API untuk mendapatkan API Key yang nantinya akan ditambahkan pada AndroidManifest.xml. Untuk cara membuatnya silahkan ikuti caranya pada link berikut.
POJO (Plain Old Java Object)
Siapkanlah model dalam bentuk POJO untuk menerima Emergency ticket response dan Point of Interest response. Anda bisa menggunakan http://www.jsonschema2pojo.org/ untuk melakukan konversi dari JSON ke POJO.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
@SerializedName("categoryName") @Expose private String categoryName; @SerializedName("priorityName") @Expose private String priorityName; @SerializedName("latitude") @Expose private float latitude; @SerializedName("longitude") @Expose private float longitude; public String getCategoryName() { return categoryName; } public String getPriorityName() { return priorityName; } public float getLatitude() { return latitude; } public float getLongitude() { return longitude; } |
Service dan API Builder
Buatlah class dengan beberapa method yang akan digunakan untuk request ke Safe City API.
|
1 2 3 4 5 6 7 |
public interface ApiService { @GET("v1/ticket/find/{radius}") Call<List<TicketResponse>> getTicketList(@Path("radius") int radius); @GET("v1/pointinterest/all/{radius}") Call<List<PoiResponse>> getPoiList(@Path("radius") int radius); } |
Kemudian Anda perlu membuat Retrofit Builder dengan menggunakan Interceptor dari OkHttp. Di class ini Anda harus menambahkan base url dan authorization header dengan token yang sudah Anda peroleh tadi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
public static ApiService call(){ OkHttpClient.Builder httpClient = new OkHttpClient.Builder() .addInterceptor(new Interceptor() { @Override public Response intercept(Chain chain) throws IOException { Request original = chain.request(); Request request = original.newBuilder() .header("Content-Type", "application/json") .header("Authorization", "YOUR_TOKEN") .removeHeader("Pragma") .build(); return chain.proceed(request); } }); Retrofit retrofit = new Retrofit.Builder() .baseUrl("http://wfm.asiangamesdigitalchallenge2017.kemkominfo-ericsson.com/wfm/rest/") .addConverterFactory(GsonConverterFactory.create()) .client(httpClient.build()) .build(); return retrofit.create(ApiService.class); } |
Layout
Pada layout activity_main.xml, tambahkanlah map fragment dan spinner seperti berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.dicoding.safecity.home.MainActivity"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map_view" tools:context=".destination.detail.DestinationDetailActivity" android:name="com.google.android.gms.maps.SupportMapFragment" /> <Spinner android:id="@+id/spinner" style="@style/SpinnerTheme" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp" android:spinnerMode="dropdown" android:entries="@array/spinnerItems"/> </RelativeLayout> |
Presenter
Buatlah class Presenter, tambahkan method getTicketList dan getPoiList dengan parameter radius.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
public void getTicketList(int radius) { ApiService service = ApiBuilder.call(); service.getTicketList(radius).enqueue(new Callback<List<TicketResponse>>() { @Override public void onResponse(Call<List<TicketResponse>> call, Response<List<TicketResponse>> response) { view.setVisibilityProgressBar(View.GONE); view.getEventTicketSuccess(response); } @Override public void onFailure(Call<List<TicketResponse>> call, Throwable t) { view.setVisibilityProgressBar(View.GONE); } }); } public void getPoiList(int radius) { ApiService service = ApiBuilder.call(); service.getPoiList(radius).enqueue(new Callback<List<PoiResponse>>() { @Override public void onResponse(Call<List<PoiResponse>> call, Response<List<PoiResponse>> response) { view.setVisibilityProgressBar(View.GONE); view.getEventPoiSuccess(response); } @Override public void onFailure(Call<List<PoiResponse>> call, Throwable t) { view.setVisibilityProgressBar(View.GONE); } }); } |
Location Manager
Location Manager digunakan untuk mengetahui lokasi device saat ini. Method ini nantinya akan digunakan untuk mendapatkan latitude dan longitude yang kemudian akan dipakai sebagai acuan untuk menampilkan data Emergency ticket response dan PoI berdasarkan radius yang telah ditentukan.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
private final LocationListener mLocationListener = new LocationListener() { @Override public void onLocationChanged(final Location location) { double lat = location.getLatitude(); double lng = location.getLongitude(); LatLng latLng = new LatLng(lat, lng); CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(latLng, 15); map.animateCamera(cameraUpdate); } @Override public void onStatusChanged(String s, int i, Bundle bundle) {} @Override public void onProviderEnabled(String s) {} @Override public void onProviderDisabled(String s) {} }; |
Parsing Data Emergency ticket response
Setelah berhasil mendapatkan data dari Emergency ticket response maka selanjutnya Anda harus menampilkan data tersebut ke dalam map fragment dalam bentuk marker. Dan setiap marker akan dibedakan warnanya berdasarkan tingkat Emergency.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@Override public void getEventTicketSuccess(Response<List<TicketResponse>> response) { map.clear(); for (int i = 0; i < response.body().size(); i++){ String categoryName = response.body().get(i).getCategoryName(); String priorityName = response.body().get(i).getPriorityName(); BitmapDescriptor bitmapDescriptor = null; if (Objects.equals(priorityName, "Low")){ bitmapDescriptor = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN); } else if (Objects.equals(priorityName, "Medium")){ bitmapDescriptor = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW); } else if (Objects.equals(priorityName, "High")){ bitmapDescriptor = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED); } LatLng location = new LatLng(response.body().get(i).getLatitude(), response.body().get(i).getLongitude()); map.addMarker(new MarkerOptions() .position(location) .title(categoryName) .snippet("Priority : " + priorityName) .icon(bitmapDescriptor)); } } |
Parsing Data Point of Interest
Sama dengan data yang diperoleh dari Emergency ticket response, data dai PoI juga akan kita parsing ke dalam map fragment berupa marker berdasarkan jenis PoI. Dan ketika marker tersebut disentuh, marker akan menampilkan dialog detail dan juga tombol get direction untuk menampilkan rute menuju lokasi di dalam Google Maps.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
@Override public void getEventPoiSuccess(Response<List<PoiResponse>> response) { map.clear(); for (int i = 0; i < response.body().size(); i++){ BitmapDescriptor bitmapDescriptor = null; if (Objects.equals(response.body().get(i).getPointInterestTypeName(), "Hotel")){ bitmapDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.hotel); } else if(Objects.equals(response.body().get(i).getPointInterestTypeName(), "Restaurant")){ bitmapDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.restaurant); } LatLng location = new LatLng(response.body().get(i).getLatitude(), response.body().get(i).getLongitude()); map.addMarker(new MarkerOptions() .position(location) .title(response.body().get(i).getName()) .snippet(response.body().get(i).getDescription()) .icon(bitmapDescriptor)); if (isPublicPlace){ map.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() { @Override public boolean onMarkerClick(final Marker marker) { AlertDialog alertDialog = new AlertDialog.Builder(MainActivity.this).create(); alertDialog.setTitle(marker.getTitle()); alertDialog.setMessage(marker.getSnippet()); alertDialog.setButton(AlertDialog.BUTTON_POSITIVE, "Get Direction", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { Intent intent = new Intent(android.content.Intent.ACTION_VIEW, Uri.parse("http://maps.google.com/maps?daddr=" + marker.getPosition().latitude + "," + marker.getPosition().longitude)); startActivity(intent); } }); alertDialog.show(); return false; } }); } } } |
Dan hasilnya akan seperti ini jika Anda menjalankan aplikasi ke device.
Source code dari contoh aplikasi di atas dapat dilihat melalui link berikut. Buatlah aplikasi yang berguna untuk mendukung kesuksesan Asian Games 2018. Jangan lupa submit aplikasi Anda pada challenges Smart City Digital Service.
Jika ada pertanyaan silahkan tulis di kolom komentar. Semoga sedikit tutorial di atas dapat bermanfaat.
