Saturday, February 23, 2019

Aplikasi web REST API Client Sederhana dengan Codeigniter 3

Aplikasi web REST API Client Sederhana dengan Codeigniter 3 - CodePolitan.com

Pada arsitektur REST, REST server menyediakan resources (sumber daya/data) dan REST client mengakses dan menampilkan resource tersebut untuk penggunaan selanjutnya. Rest client dapat berupa aplikasi web, mobile, maupun desktop.

Untuk memungkinkan komunikasi data antara client dan server, codeigniter mambutuhkan library tambahan berupa library curl. Curl adalah sebuah program yang memungkinan kita memindai data dari atau ke sebuah server. Salah satu library curl yang dapat digunakan adalah library curl dari Phil Sturgeon.

Sebagai contoh penerapan REST API Client pada codeigniter dibawah ini akan dijelaskan langkah-langkah pembuatan REST API Client yang akan memanfaatkan sumber daya dari REST API server yang sebelumnya telah dibuat di Tutorial REST API Server Sederhana dengan Codeigniter 3.

Persiapan

Dalam pembuatan Rest api client ini diperlukan :
  1. Webserver seperti Xampp, Wampp, atau lainnya.
  2. REST API Server yang sebelumnya dibuat pada Tutorial REST API Server Sederhana dengan Codeigniter 3.
  3. Codeigniter 3.1.3 atau versi terbaru yang dapat didownload di https://www.codeigniter.com/download.
  4. Library curl, dapat didownload di https://github.com/philsturgeon/codeigniter-curl untuk versi terbaru, versi yang digunakan disini adalah https://github.com/ardisaurus/ci-curl.
Setelah semua yang diperlukan telah siap, extract Codeigniter dan library curl yang telah didownload, pada hasil extraksi library curl masuk ke folder libraries dan copy file curl.php lalu pindahkan ke direktori codeigniter/application/libraries. Setelah library curl terpasang pada direktori codeigniter lalu pindah direktori codeigniter ke htdocs pada direktori xampp lalu rename folder menjadi rest_ci_client.
Masukan http://127.0.0.1/rest_ci_client/ pada address bar browser anda jika muncul gambar seperti dibawah maka instalasi telah berhasil.

Controller

Buat file php baru dengan nama kontak.php pada direktori rest_ci_client/application/controller
<?php
Class Kontak extends CI_Controller{

    var $API ="";

    function __construct() {
        parent::__construct();
        $this->API="http://localhost/rest_ci/index.php";
        $this->load->library('session');
        $this->load->library('curl');
        $this->load->helper('form');
        $this->load->helper('url');
    }

    // menampilkan data kontak
    function index(){
        $data['datakontak'] = json_decode($this->curl->simple_get($this->API.'/kontak'));
        $this->load->view('kontak/list',$data);
    }

    // insert data kontak
    function create(){
        if(isset($_POST['submit'])){
            $data = array(
                'id'       =>  $this->input->post('id'),
                'nama'      =>  $this->input->post('nama'),
                'nomor'=>  $this->input->post('nomor'));
            $insert =  $this->curl->simple_post($this->API.'/kontak', $data, array(CURLOPT_BUFFERSIZE => 10)); 
            if($insert)
            {
                $this->session->set_flashdata('hasil','Insert Data Berhasil');
            }else
            {
               $this->session->set_flashdata('hasil','Insert Data Gagal');
            }
            redirect('kontak');
        }else{
            $this->load->view('kontak/create');
        }
    }

    // edit data kontak
    function edit(){
        if(isset($_POST['submit'])){
            $data = array(
                'id'       =>  $this->input->post('id'),
                'nama'      =>  $this->input->post('nama'),
                'nomor'=>  $this->input->post('nomor'));
            $update =  $this->curl->simple_put($this->API.'/kontak', $data, array(CURLOPT_BUFFERSIZE => 10)); 
            if($update)
            {
                $this->session->set_flashdata('hasil','Update Data Berhasil');
            }else
            {
               $this->session->set_flashdata('hasil','Update Data Gagal');
            }
            redirect('kontak');
        }else{
            $params = array('id'=>  $this->uri->segment(3));
            $data['datakontak'] = json_decode($this->curl->simple_get($this->API.'/kontak',$params));
            $this->load->view('kontak/edit',$data);
        }
    }

    // delete data kontak
    function delete($id){
        if(empty($id)){
            redirect('kontak');
        }else{
            $delete =  $this->curl->simple_delete($this->API.'/kontak', array('id'=>$id), array(CURLOPT_BUFFERSIZE => 10)); 
            if($delete)
            {
                $this->session->set_flashdata('hasil','Delete Data Berhasil');
            }else
            {
               $this->session->set_flashdata('hasil','Delete Data Gagal');
            }
            redirect('kontak');
        }
    }
}

Pada controller tersebut terdapat fungsi-fungsi dari library curl untuk komunikasi data dengan REST API Server, tampilan antarmuka yang akan ditampilkan ke pengguna pada masing-masing fungsi, dan data apa saja yang diperlukan untuk kominikasi data dengan server REST API server.

Views

Views diperlukan untuk memberikan antarmuka kepada pengguna, views yang diperlukan disini adalah list untuk menampilkan semua data, create yang berupa form tambah data, dan edit yang berupa form untuk mengubah data yang sudah ada.

Buat folder baru pada direktori rest_ci_client/application/views dangan nama kontak

Baca & Hapus Data

Buat file php baru dengan nama list.php pada direktori rest_ci_client/application/views/kontak
<font color="orange">
<?php echo $this->session->flashdata('hasil'); ?>
</font>
<table border="1">
    <tr><th>ID</th><th>NAMA</th><th>NOMOR</th><th></th></tr>
    <?php
    foreach ($datakontak as $kontak){
        echo "<tr>
              <td>$kontak->id</td>
              <td>$kontak->nama</td>
              <td>$kontak->nomor</td>
              <td>".anchor('kontak/edit/'.$kontak->id,'Edit')."
                  ".anchor('kontak/delete/'.$kontak->id,'Delete')."</td>
              </tr>";
    }
    ?>
</table>
<a href="http://localhost/rest_ci_client/index.php/kontak/create">+ Tambah data<a>

Tambah Data

Buat file php baru dengan nama create.php pada direktori rest_ci_client/application/views/kontak
<?php echo form_open_multipart('kontak/create');?>
<table>
    <tr><td>NAMA</td><td><?php echo form_input('nama');?></td></tr>
    <tr><td>NOMOR</td><td><?php echo form_input('nomor');?></td></tr>        
    <tr><td colspan="2">
        <?php echo form_submit('submit','Simpan');?>
        <?php echo anchor('kontak','Kembali');?></td></tr>
</table>
<?php
echo form_close();
?>

Edit Data

Buat file php baru dengan nama edit.php pada direktori rest_ci_client/application/views/kontak
<?php echo form_open('kontak/edit');?>
<?php echo form_hidden('id',$datakontak[0]->id);?>

<table>
    <tr><td>ID</td><td><?php echo form_input('',$datakontak[0]->id,"disabled");?></td></tr>
    <tr><td>NAMA</td><td><?php echo form_input('nama',$datakontak[0]->nama);?></td></tr>
    <tr><td>NOMOR</td><td><?php echo form_input('nomor',$datakontak[0]->nomor);?></td></tr>
    <tr><td colspan="2">
        <?php echo form_submit('submit','Simpan');?>
        <?php echo anchor('kontak','Kembali');?></td></tr>
</table>
<?php
echo form_close();
?>


SUMBER

SASS & SCSS Part I : Mengenal dan Cara Installnya

SASS & SCSS Part I : Mengenal dan Cara Installnya - CodePolitan.com

Mengenal SASS dan SCSS

Hello coders, kali ini kita akan berkenalan dengan SASS dan SCSS.


Mungkin kalian sudah tidak asing lagi dengan yang namanya CSS. Yup CSS (Cascading stylesheet) ini biasa kita gunakan untuk menghias web kita agar terlihat bagus dan cantik. CSS sendiri menggunakan bahasa yang sederhana dan mudah dimengerti, jadi buat kalian yang baru di dunia programming pun dapat belajar CSS, namun bagi kalian yang sudah terbiasa dengan CSS, mungkin membutuhkan cara yang lebih efisien karna mungkin penulisan CSS yang masih kurang efektif atau terbilang sederhana. Maka untuk menjawab semua keluhan kalian, dibuatlah yang namanya CSS Prepocessor cara yang lebih efisien dari menulis CSS biasa. Salahsatu CSS Prepocessor yang biasa dipake adalah SASS.

SASS(Sassy Stylesheet) sendiri memberi kemudahan seperti tidak usah menulis kurung buka /tutup, dan juga tidak perlu menulis titik koma diakhir sintaks. Dengan menggunakan SASS sendiri memudahkan kita dalam menulis CSS seperti penggunaan variabel, nesting, mixins , selector inheritance dll. Keunggulan lainnya seperti CSS yang lebih tersutruktur, rapi, mudah dipahami, dan yang paling penting dapat berjalan baik di semua browser.
Kalian bisa melihat website SASS disini. Lalu ada SCSS, sama seperti SASS namun mungkin bagi kalian yang sedikit kurang faham dengan SASS bisa menggunakan SCSS, lalu apa yang membedakan SASS dengan SCSS ?

SCSS merupakan sintaks yang paling umum digunakan yang merupakan superset dari CSS, yang berarti setiap sintak css yang berada di CSS3 bisa digunakan pada SCSS, tetapi bisa menggunakan fitur seperti yang ada pada SASS dan memang penulisaanya lebih mudah difahami bagi kalian yang baru mengenal SASS dan SCSS ini. Biasanya file SCSS menggunakan format ".scss"

Sedangkan SASS sintaks yang lebih dulu muncul dari SCSS yang dikenal sebagai idented syntax yang biasa mengguanakn format .sass. Dan memang ditujukan untuk pengguna yang memilih kemudahan dalam menulis CSS.
Contoh dan perbedaan SASS dan SCSS:




Cara Instalasi

Ada dua cara menggunakan SASS dan SCSS yaitu dengan menggunakan aplikasi pihak ketiga seperti scout, compass, dll atau menggunakan command prompt / cmd.
Kali ini saya akan menggunakan pilihan yang kedua yaitu lewat cmd. Sebelum itu kita harus meng-install sass dulu.
Pertama, Bagi kalian pengguna windows Kalian perlu meng-install ruby dulu, bisa didownload installernya disini
Kedua, Bagi kalian pengguna windows buka command prompt dan bagi pengguna mac buka terminal.
Lalu, install dengan menuliskan " gem install sass" pada cmd / terminal kalian.

Jika sukses maka akan mucul seperti ini.



Untuk jaga-jaga, silahkan double check dengan menuliskan "sass -v" pada cmd /terminal kalian.




Jika sudah ,berarti selamat kepada kalian karna berhasil me-install sass pada laptop/pc anda.

Sekian pengenalan dan cara instalasinya. Untuk mempelajari SASS dan SCSS akan dibahas pada artikel selanjutnya.

SUMBER

Friday, February 22, 2019

Membuat Realtime Chart dengan Express, ChartJs, MongoDB dan Socket IO

Membuat Realtime Chart dengan Express, ChartJs, MongoDB dan Socket IO - CodePolitan.com

Membuat chart mungkin sudah biasa, bagaimana jika kita buat chart terasa hidup dengan data real-time? hal ini dapat kita capai dengan menerapkan teknologi push dengan websocket.

Pendahuluan

Target pembaca tutorial ini adalah teman-teman yang baru belajar javascript, Node dan Express. Sedikit paham tentang MongoDB. Tujuan tutorial ini untuk memberikan gambaran bagaimana cara penerapan ChartJs dengan sentuhan SocketIO.

SocketIO merupakan tool yang dibangun diatas WebSocket API, dia menyediakan API client dan server yang dapat kita gunakan untuk menerapkan push dalam aplikasi. Sedangkan ChartJs merupakan library chart yang cukup banyak digunakan karena penerapannya yang simple.

Persiapan

Aplikasi yang akan kita buat adalah aplikasi voting sederhana. Tugas dari aplikasi ini adalah menerima data voting yang ditransfer via HTTP Post, kemudian mengakumulasinya dan menampilkan kembali hasil voting dalam bentuk chart. Setiap ada update data dari HTTP post maka chart ini secara real-time akan berubah bentuk dengan sedikit animasi sederhana. Oh ya, kita tidak bikin html form disini, kita akan insert data dari Postman saja (teman-teman bisa gunakan HTTP tool lain), karena pembuatan form tidak terlalu penting dalam konteks tutorial ini.

Membuat Aplikasi

Struktur folder dari aplikasi kita akan terlihat seperti ini :


  1. app.js, menjadi main file dan yang menyimpan semua kode server side kita
  2. folder public, menjadi tempat dimana kode template client side disimpan dan diakses publik.
  3. package.json, tempat simpan daftar package yang kita butuhkan (npm)
  4. node_modules, folder dimana package terinstall

Install Dependency

Oke, disini kita akan tentukan kebutuhan dalam aplikasi, silahkan buat file package.json berisi data seperti ini :
{
name: "RealtimeChart",
main: "app.js",
dependencies: {
    express: "latest",
    mongoose: "latest",
    body-parser: "latest",
    socket.io: "latest"
    }
}

Bisa dilihat, kita membutuhkan dependencies sebagai berikut :
  1. Express sebagai framework
  2. Mongoose (mongodb wrapper) sebagai object modelling, penggunaannya seperti ORM. Untuk memudahkan kita dalam query yang lebih simple
  3. Body-parser, merupakan middleware untuk Express, berguna sebagai parser data dari HTTP Body. Library ini akan mengubah data ke javascript object, agar dapat kita
    panggil dalam aplikasi.
  4. Socket.io, wrapper websocket API untuk penggunaan websocket yang lebih sederhana.
Baiklah, silahkan jalankan npm install. Jika berhasil, folder node_modules beserta isinya akan terbentuk.

Inisialisasi

Selanjutnya mari kita bikin file app.js. Kita akan melakukan inisialisasi dari semua library yang kita butuhkan seperti berikut ini :
// Dependency
var express  = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var app      = express();
var server   = require('http').Server(app);
var io       = require('socket.io')(server);

// Config
app.use(bodyParser.urlencoded({ extended: true }));
app.use(function(req,res,next){
    req.io = io;
    next();
});

// Static files path
app.use(express.static(__dirname + '/public'));
...
Pada baris 2-7 kita bungkus library yang sudah kita unduh dan memasukannya dalam variabel. Baris ke 5 terlihat kita assign framework express, pada baris ke 6 terlihat kita define dependency HTTP server.

Masuk kebagian config, pada baris 10 kita jalankan method app.use dari Express kemudian memasukan function callback dari library body-parser. Hal ini berfungsi memerintahkan Express untuk jalankan parsing body ketika route dipanggil. Kemudian pada baris ke 11 adalah perintah untuk memerintahkan Express jika request adalah socket io kemudian lanjutkan program, hal ini berguna agar library socket io bisa kita gunakan dalam HTTP Route di Express.

Nah, pada baris 17 merupakan perintah pendefinisian dimana folder file static berada. Disitu kita menggunakan express.static yang merupakan fungsi built-in middleware di Express.

Database

Pada program ini kita hanya butuh collection sederhana, berikut ini kode terusan dari bagian "Inisialisasi" diatas. Silahkan tambahkan kode berikut:

// Connect to DB
mongoose.connect("mongodb://127.0.0.1:27017/realtime_chart");

var schema = mongoose.Schema({name: String});
var Vote = mongoose.model('Vote', schema);

...
Note: Jangan lupa untuk menghidupkan dulu service MongoDB untuk menghindari error. Jika teman-teman baru di MongoDB silahkan baca dasar-dasar MongoDB, mungkin artikel ini bisa jd referensi https://www.codepolitan.com/tutorial/pdkt-dengan-mongodb
Untuk database saya menggunakan db dengan nama "realtime_chart", teman-teman bebas menggunakan nama db lain. Pada baris ke 4 kita define collection berisi hanya satu field yaitu "name" berjenis "string". 

Kemudian pada baris ke 5 adalah kode untuk assign mongoose model dengan schema yang sudah kita buat ke dalam variabel Vote. Sebagai catatan, pada kode berikutnya operasi database akan menggunakan model "Vote".

Mendefinisikan Route, Query, dan Broadcast

Oke, masih terusan kode sebelumnya, sekarang masukan kode berikut ini.

// Render homepage.
app.get('/', function(req, res) {
    res.sendfile('index.html');
});

// Route for voting
app.post('/vote', function(req, res) {
    var field = [{name: req.body.name}];

    var newVote = new Vote(field[0]);

    newVote.save(function(err, data) {
        console.log('Saved');
    });

    Vote.aggregate(

        [{ "$group": {
            "_id": "$name",
            "total_vote": { "$sum": 1 }
        }}],

        function(err, results) {
            if (err) throw err;
            console.log(results);
            req.io.sockets.emit('vote', results);
        }
        );

    res.send({'message': 'Successfully added.'});
});

app.get('/data', function(req, res) {
    Vote.find().exec(function(err, msgs) {
        res.json(msgs);
    });
});

...

Pada baris ke 2 kita define homepage. Maksud dari kodenya, ketika url yang diakses adalah (/) jalankan res.sendfile ke file index.html. Kode tersebut akan parsing file template index.html yang terletak pada folder public (kita akan membuat file tersebut pada bagian selanjutnya).

Pada baris ke 7 kita define rute dengan segment vote. Ketika url (/vote) diakses maka jalankan perintah pada callback function. Di dalam fungsi tersebut pada baris ke 8 kita ambil data http body bernama "name" dan memasukannya dalam variabel field.

Nah pada baris ke 10-14 kita membuat document/object baru menggunakan model "Vote". Kemudian pada baris 16-30 adalah kode untuk mengambil data total dari voting. Kita disitu menggunakan method "aggregate", berguna untuk menghitung total document berdasarkan field tertentu.

Oke, coba perhatikan baris 26. Disitu kita menjalankan perintah socket emit (broadcast/push) data ke semua client yang terhubung dengan room "vote". Room dalam konsep websocket berguna untuk mengkategorisasikan client yang terhubung dengan server.

Terakhir, pada baris 33-37 merupakan kode sederhana untuk menampilkan data-data voting dalam bentuk JSON ketika url (/data) dipanggil. Ini kita gunakan untuk kepentingan pengecekan data saja.

Menambahkan Event Socket IO

Oke, ini merupakan bagian akhir dari kode di sisi server. Silahkan tambahkan kode berikut ini :
/*
Socket.io Setting
*/

io.on('connection', function (socket) {

    Vote.aggregate(

        [{ "$group": {
            "_id": "$name",
            "total_vote": { "$sum": 1 }
        }}],

        function(err, results) {
            if (err) throw err;

            socket.emit('vote', results);
        }
        );

});

// Start
server.listen(3000);
console.log('Open http://localhost:3000');

Pada baris ke 5-21 kita menambahkan event handler socket io, ketika ada client terhubung jalankan kode pengambilan data total voting kemudian emit/broadcast datanya ke semua client. Data tersebut akan digunakan untuk mengisi chart ketika pertama kali load.

Selanjutnya pada baris 24-25 kita jalankan server pada port 3000 dan tampilkan log nya.

Membuat Halaman Statis berisi Chart dengan Integrasi Socket IO

Mari kita lanjutkan pada program sisi client. Buatlah file index.html, kemudian simpan file tersebut di dalam folder "public". Isi dengan kode chart sederhana berikut ini :

<html>
<head>
   <style>
   .vote-result-wrapper{
      width: 700px;
      height: 700px;
   }
   </style>
</head>

<body>
   <h1>Quick Vote</h1>
   <div class="vote-result-wrapper">
      <canvas id="vote-result"></canvas>
   </div>
</body>

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>

<script>
// Setting socket
var socket = io();
var data;
var myChart;
var context;

socket.on('vote', function (response) {

   var i = 0;

    for (var key in response) {
      data.labels[i] = response[i]._id;
      data.datasets[0].data[i] = response[i].total_vote;
      i++;
   }

    // Update chart
   myChart.update(); 
});

// Chart Data
data = {
   labels: [],
   datasets: [
        {
            label: [],
            data: [],
        }
    ]
};

context = document.getElementById('vote-result').getContext('2d');
myChart = new Chart(context,{
   type: 'bar',
   data: data,
   animation:{ 
      animateScale:true
   }
});

</script>
</html>

Dalam membuat chart di ChartJs kita membutuhkan elemen canvas. Elemen canvas tersebut juga membutuhkan atribut id untuk kemudian di define dalam library ChartJs. Dalam proyek ini kita sudah membuatnya pada baris ke 14.

Nah dalam sisi client kita juga butuh beberapa library seperti Jquery, SocketIO dan ChartJs. Bisa dilihat pada baris 18-20. Kita ambil library tersebut langsung dari CDN.

Pada baris 44-61 kita inisialisasi sebuah chart dengan membuat object baru dari library ChartJs. Variabel pada baris 44 adalah sebuah variabel config berisi Javascript object untuk menentukan presentasi data yang ditampilkan pada chart. Terlihat data tersebut kosong. Data kosong tersebut baru akan kita isi dalam event handler socket io on "vote" pada baris 33.

Coba lihat baris 40, itu adalah kode untuk mengupdate data chart. Kode ini akan dieksekusi jika ada data baru. Data baru akan diterima client pada saat server emit/broadcast. Lihatlah baris 29, ini adalah kode event handler dari socket io yang berfungsi mendengarkan perubahan yang terjadi.

Menjalankan Program

Semua folder dan file sudah dibuat, mari kita jalankan program ini, buka root dari proyek pada console teman-teman. Kemudian ketik perintah node app.js. Jika berhasil akan terlihat seperti ini :


Kemudian buka url localhost dengan port 3000 dan lakukan pengisian data. Silahkan lakukan post ke url "http://localhost:3000/vote". Detailnya dapat dilihat pada gif berikut ini :



Bisa kita lihat, ketika data kita update maka chart langsung berubah.
Demikian tutorial chart real-time sederhana ini. Teman-teman dapat mengunduh source code lengkap pada tautan berikut https://github.com/gemblue/RealtimeChart

SUMBER

Membuat Realtime Chat Sederhana Menggunakan Android Studio Dengan Database Firebase

Membuat Realtime Chat Sederhana Menggunakan Android Studio Dengan Database Firebase - CodePolitan.com

Tutorial saya kali ini saya akan membuat Chat realtime sederhana dengan firebase saya asumsikan untuk coder yang sudah punya akun firebase , kalau belum tau bisa cari tahu di google , oke langsung saja mulai.
  1. Buka android studio lalu pilih File -> New Project
  2. Berinama Project RealtimeChat tanpa petik, pilih next
  3. Pilih API level 17:Android 4.2 ( Jelly Bean ) ,next
  4. Pilih Empty Activity, next
  5. Nama activity dan class Biarkan saja default -> Finish
  6. Buka browser dan masukan alamat https://console.firebase.google.com/
  7. Pilih Create New Project, isikan Project name Sesuai dengan yang tadi kita
    buat dan pilih juga negaranya yang pasti INDONESIA hehe
  8. Setelah Create New Projek lalu akan di alihakan he halaman seperti berikut, Lalu
    pilih yang di tengah Add Firebase to your android app

  9. Isi Form sesuai Name Package yang ada di projek , Untuk SHA 1 optional
    jika di isi ini caranya :


    1. Refresh Gradlenya
    2. Pilih RealtimeChat -> RealtimeChat (root) -> Tasks ->
      android -> double klik pada signing report
    3. Setelah beberapa saat akan muncul dialog yang berada di bawah, lalu copy SHA 1
      pada Form tadi
  10. Setelah langkah pertama selesai maka akan secara otomatis akan mendownload
    file json, setelah terdwonload copy file json tersebut di folder app

  11. Yang terakhir kita harus menambahkan beberapa baris code pada Gradle
    build
    dan Gradle app level

    Gradle build
    Gradle level app
  12. Buka browser lagi untuk mengubah Permision pada database , Pilih Databse
    -> Rules - > ubah "auth != null" jadi true -> Publish

Source Code

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.darsiwan.fireapp.MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_above="@+id/etNeme_room">
    </ListView>

    <EditText

        android:layout_width="226dp"
        android:layout_height="wrap_content"
        android:id="@+id/etNeme_room"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_toStartOf="@+id/btnAdd_room" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Room"
        android:id="@+id/btnAdd_room"
        android:layout_gravity="right" style="?android:attr/borderlessButtonStyle"
        android:drawableLeft="@drawable/ic_add_black_24dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

MainActivity.java

import android.content.DialogInterface;
import android.content.Intent;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;

import com.firebase.client.Firebase;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

public class MainActivity extends AppCompatActivity {
    private  Button add_room;
    private  EditText room_name;
    private ListView listView;
    private String name;
    private DatabaseReference root = FirebaseDatabase.getInstance().getReference().getRoot();

    private ArrayAdapter<String> arrayAdapter;
    private ArrayList<String> list_of_rooms = new ArrayList();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        add_room = (Button)findViewById(R.id.btnAdd_room);
        room_name = (EditText)findViewById(R.id.etNeme_room);
        listView = (ListView)findViewById(R.id.listView);

        arrayAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,list_of_rooms);
        listView.setAdapter(arrayAdapter);

        request_user_name();
        add_room.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Map<String,Object> map = new HashMap<String,Object>();
                map.put(room_name.getText().toString(),"");
                root.updateChildren(map);

            }
        });
        root.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                Set<String> set = new HashSet<String>();
                Iterator i = dataSnapshot.getChildren().iterator();
                while ( i.hasNext())
                {
                    set.add(((DataSnapshot)i.next()).getKey());
                }
                list_of_rooms.clear();
                list_of_rooms.addAll(set);

                arrayAdapter.notifyDataSetChanged();
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                Intent I = new Intent(getApplicationContext(),chatroom.class);
                I.putExtra("room_name",((TextView)view).getText().toString());
                I.putExtra("user_name",name);
                startActivity(I);
            }
        });

    }

    private void request_user_name() {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Enter Name");
        final EditText input_field = new EditText(this);
        builder.setView(input_field);
        builder.setPositiveButton("OK ", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                name = input_field.getText().toString();
            }
        });
        builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                dialogInterface.cancel();
                request_user_name();
            }
        });
        builder.show();
    }
}

Buat Empty Activity dengan nama activity_chatroom.xml dan chatroom.java

  1. activity_chatroom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.darsiwan.fireapp.chatroom"
    android:weightSum="1">

    <ScrollView
        android:layout_width="378dp"
        android:layout_height="157dp"
        android:id="@+id/scrollView"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_weight="1.04">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:id="@+id/textView" />
    </ScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1">
        <EditText
            android:layout_width="59dp"
            android:layout_height="wrap_content"
            android:id="@+id/editText"
            android:layout_alignTop="@+id/button"
            android:layout_alignParentStart="true"
            android:layout_toStartOf="@+id/button"
            android:layout_weight="1.02" />

        <Button
            android:layout_width="52dp"
            android:layout_height="wrap_content"

            android:id="@+id/button" style="?android:attr/borderlessButtonStyle"
            android:drawableLeft="@drawable/ic_send_black_24dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true" />

    </LinearLayout>

</LinearLayout>
  1. chatroom.java
import android.provider.ContactsContract;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import com.google.firebase.database.ChildEventListener;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;

import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

public class chatroom extends AppCompatActivity {

    private Button btn_send_msg;
    private EditText input_msg;
    private TextView chat_conversation;
    private String user_name ,room_name;
    private DatabaseReference root;
    private String temp_key;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chatroom);
        btn_send_msg = (Button)findViewById(R.id.button);
        input_msg = (EditText)findViewById(R.id.editText);
        chat_conversation = (TextView)findViewById(R.id.textView);
        user_name = getIntent().getExtras().get("user_name").toString();
        room_name = getIntent().getExtras().get("room_name").toString();
        setTitle("Room - "+room_name);

        root = FirebaseDatabase.getInstance().getReference().child(room_name);

        btn_send_msg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Map<String,Object> map = new HashMap<String, Object>();
                temp_key = root.push().getKey();
                root.updateChildren(map);

                DatabaseReference message_root = root.child(temp_key);
                Map<String,Object> map2 = new HashMap<String, Object>();
                map2.put("name",user_name);
                map2.put("msg",input_msg.getText().toString());

                message_root.updateChildren(map2);

            }
        });

        root.addChildEventListener(new ChildEventListener() {
            @Override
            public void onChildAdded(DataSnapshot dataSnapshot, String s) {

                append_chat_conversatin(dataSnapshot);

            }

            @Override
            public void onChildChanged(DataSnapshot dataSnapshot, String s) {
                append_chat_conversatin(dataSnapshot);
            }

            @Override
            public void onChildRemoved(DataSnapshot dataSnapshot) {

            }

            @Override
            public void onChildMoved(DataSnapshot dataSnapshot, String s) {

            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });

    }
private String chat_msg, chat_user_name;

    private void append_chat_conversatin(DataSnapshot dataSnapshot) {
        Iterator i = dataSnapshot.getChildren().iterator();
        while (i.hasNext())
        {
            chat_msg = (String) ((DataSnapshot)i.next()).getValue();
            chat_user_name = (String) ((DataSnapshot)i.next()).getValue();

            chat_conversation.append(chat_user_name + " : "+chat_msg +"\n");

        }
    }
}

Edit androidmanifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.darsiwan.fireapp">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".chatroom"></activity>
    </application>

</manifest>

Jalankan aplikasinya

Penutup

Demikian tutorial saya kali ini kalau ada yang kurang jelas mohon tanyakan pada kolom komentar , Terima Kasih , Semoga bermanfaat !
Unduh aplikasi jadi di sini


SUMBER

Wednesday, February 20, 2019

Tutorial Codeigniter 3 Dalam Satu Jam

Tutorial Codeigniter 3 Dalam Satu Jam - CodePolitan.com

Selamat pagi coders, teknologi framework php sekarang sangat diminati. Salah satunya framework Codeigniter, buat kalian yang belum sempat belajar Codeigniter dan masih berminat mempelajarinya. Inilah saatnya take action, kalian tidak terlambat pelajari bagaimana mudahnya mempelajari coding dengan cara yang tepat sehingga akan lebih cepat untuk dipahami.

Pengen cara cepat ?

Tentu saja sekarang sudah banyak bermunculan metode belajar coding yang efektif, tapi saya katakan cara cepat paham mempelajari coding yaitu dengan mempratekan secara langsung dari tutorial yang disajikan. Buat kalian yang lebih suka visual, pasti belajar menggunakan video akan lebih cepat diserap pikiran. Programmer bukanlah sastra yang harus membaca untuk mengerti coding, saya sangat setuju jika pembelajaran menggunakan video tutorial merupakan cara yang efektif kedua selain langsung berguru ke ahlinya secara langsung.
Saat pertama kali mencoba framework Codeigniter banyak yang bertanya-tanya seperti ini,
Susah gak sih belajar framework Codeigniter?
Pertanyaan tersebut dapat terjawab setelah menyaksikan video yang saya sajikan dalam satu jam secara garis besarnya seperti berikut :
https://www.youtube.com/watch?v=ek45YcEKWbY
Materi yang dibahas dalam video :
  1. Download Codeigniter 3
  2. Menjelaskan basic Codeigniter
  3. Codeigniter 3 di localhost
  4. Setting Config
  5. Setting Autoload
  6. Setting Routes
  7. Menghilangkan index.php
  8. Menjelaskan hubungan MVC (Model, View, Controller)
  9. URI, Parameter dan membuat halaman not found
  10. Setting database
  11. Menampilkan database
  12. Generating Query Result
  13. CRUD (Create Read Update Delete)

Bagaimana, mudah kan?

Untuk lebih memahami pemrograman lebih lanjut, boleh ikuti kursus pemrograman yang disediakan Codepolitan untuk mendapatkan hasil yang optimal langsung dari ahlinya. Atau video tutorial lainnya di kopdar.co.id.
Semangat!


SUMBER

Mempelajari Fitur Generator dan Implementasinya dalam PHP

Mempelajari Fitur Generator dan Implementasinya dalam PHP - CodePolitan.com

Kali ini kita akan belajar tentang php generator. Apa sih generator? Dari namanya saja sudah terwakili, generate (pembangkit), lalu apa yang dibangkitkan? yang dibangkitkan disini adalah komponen penyimpanan sementara yang siap untuk di iterasi kan / loop. Konsep ini bukan hanya milik dunia PHP, namun ada juga dalam beberapa bahasa pemrograman lain.

Dalam dunia nyata seringkali kita menggunakan tipe data array dalam kode. Dan biasanya array tersebut kita gunakan dalam iterasi untuk mengoperasikannya baik memanipulasi maupun sekedar menampilkannya.

Nah disini generator menawarkan cara lain dalam iterasi. Alih-alih kita menggunakan array, kita dapat menggunakan konsep generator. Alhasil kita dapat menghemat alokasi memory.
Istilah Generator juga dipakai dalam dunia framework, generator biasanya berupa suatu command line tools yang berguna buat generate boilerplate / kumpulan kode (scaffolding), seperti Laravel Artisan, Fuel Oil, atau Rails Command.
Supaya lebih terbayang mari kita coba terapkan dalam kode sederhana berikut ini :
<?php
// Get number
function get_numbers() {
    for ($i = 1; $i <= 500; $i++) {
        yield $i;
    }
}

$result = get_numbers();

foreach ($result as $value) {
    echo "$value";
}

function convert($size)
{
    $unit=array('b','kb','mb','gb','tb','pb');
    return @round($size/pow(1024,($i=floor(log($size,1024)))),2).' '.$unit[$i];
}

echo "\n\nMemory terpakai : " . convert(memory_get_usage());

Mari kita telaah kodenya, coba perhatikan baris ke 3, kita membuat fungsi bernama get_numbers untuk membangkitkan angka 1-500. Lihat baris ke 5, hasil dari looping kita simpan dengan keyword yield. Kemudian pada baris ke 9 kita memanggil fungsi tersebut dan meng-assign nya ke variabel result. Setelah itu pada baris ke 11 kita menampilkan kembali hasil fungsi dalam iterasi. Terakhir, pada baris 15-21 kita menampilkan alokasi memory yang terpakai pada program kecil kita.
Cobalah program diatas, teman-teman bebas menggunakan nama file apapun. Kode tersebut akan menghasilkan output sebagai berikut :


Program tersebut menghasilkan angka 1-500 dan terakhir menghitung alokasi memory kemudian menampilkannya. Bisa kita lihat program tersebut memakai 125.66 kb

Yang dapat kita petik dari kode diatas, penggunaan generator di PHP membutuhkan keyword yield sebagai penolong. Kemudian generator harus dibungkus dalam suatu fungsi. Pada fungsi generator kita tidak butuh lagi keyword return.

Mengapa Harus Coba Generator/Generator Function

Teman-teman pasti bertanya-tanya, kalau bisa pakai array kenapa harus menggunakan generator untuk menampung hasil (untuk kepentingan iterasi).


Yang saya pelajari, manfaat penggunaan generator adalah penghematan alokasi memory dan kesederhanaan dalam sintaks. Mari kita buat program dengan output / tujuan yang sama seperti program sebelumnya, namun disini kita akan menggunakan array untuk menampung hasil.
Mari perhatikan kode berikut ini :
<?php
// Get number
function get_numbers() {
    $temp = [];

    for ($i = 1; $i <= 500; $i++) {
        $temp[] = $i;
    }

    return $temp;
}

$result = get_numbers();

foreach ($result as $value) {
    echo "$value";
}

function convert($size)
{
    $unit=array('b','kb','mb','gb','tb','pb');
    return @round($size/pow(1024,($i=floor(log($size,1024)))),2).' '.$unit[$i];
}

echo "\n\nMemory terpakai : " . convert(memory_get_usage());
Yang berubah dibandingkan kode sebelumnya, hanya pada logika dalam fungsi get_numbers. Bisa dilihat kita menggunakan variabel $temp berjenis array sebagai penampung hasil. Lalu mengembalikan nilai operasi dengan keyword return.
Jika kita eksekusi kode tersebut akan menghasilkan output :


Hasil yang sama dengan program sebelumnya, namun penggunaan memory lebih besar, yaitu 166.94 kb

Yah, memang tidak terlalu significant penggunaan memory-nya. Mungkin akan terasa jika program lebih kompleks lagi. Lihat juga sintaks yang digunakan, program versi generator terlihat lebih simple.

SUMBER

Monday, February 18, 2019

Cuma 5 Detik! Cara Hapus Background Foto Tanpa Photoshop


Photoshop dikenal sebagai salah satu software terbaik untuk menampulasi gambar. Software buatan Adobe ini terbukti ambuh untuk menghasilkan gambar-gambar editan baru yang berbeda dari aslinya. Salah satu jenis editan foto yang biasa dilakukan di Photoshop adalah menghapus background.

Jika obyek fotonya sedernaha mungkin proses editingnya tidak terlalu lama namun berbeda cerita jika sedang mengerjakan gambar yang rumit. Untuk mempercepat proses penghapusan gambar latar belakang alias background, kini tersedia layanan online canggih yang bisa digunakan.



Bernama Remove.bg, layanan ini akan mempermudah pengguna untuk menghapus background dan hanya menyisakan obyek utamanya saja. Dengan bantuan AI yang canggih, Remove.bg dapat menghilangkan latar belakang foto hanya dalam hitungan detik.

Bagaimana caranya? Pertama-tama cukup mengunjungi situs Remove.bg lalu masukan foto atau url gambar yang ingin dihapus backgroundnya. Jika sudah situs akan mulai bekerja dan beberapa saat kemudian secara otomatis akan muncul dua gambar, yang asli dengan yang sudah dihilangkan backgroundnya.

Karena tergolong baru, saat ini hanya gambar yang terdapat obyek manusianya saja yang bisa dihilangkan, selebihnya belum bisa. Untuk hasilnya bisa dibilang cukup rapi jika obyeknya tidak terlalu rumit.

SUMBER

GO-FOOD Hadirkan Ganti Lokasi, Fitur Apakah ini?


GO-FOOD, layanan pesan-antar makanan dalam aplikasi GOJEK telah menjadi layanan terbesar di Asia Tenggara dengan jaringan mitra merchant yang luas. Terus berinovasi, GO-FOOD kini meluncurkan fitur baru yang mereka beri nama Ganti Lokasi.

Fitur ini sengaja dihadirkan untuk ditujukan bagi para pengguna yang ingin mengekspresikan kasih sayang melalui pemesanan paket makanan/ minuman bagi orang terkasihnya di kota/ wilayah lain. Tidak hanya memberikan kemudahan bagi pengguna, fitur ini memperluas cakupan wilayah pelanggan.

Aristo Kristandyo – VP Marketing GO-FOOD lewat rilis yang diterima oleh DroidLime menegaskan bahwa fitur Ganti Lokasi bertujuan untuk mempermudah pelanggan setia GO-FOOD mengirim makanan dan minuman dari lokasi atau kota yang berbeda.

“Fitur ganti lokasi di layanan GO-FOOD ini kami luncurkan untuk menjawab kebutuhan dari para pelanggan setia, terutama para pejuang LDR (Long Distance Relationship) yang akan memakai layanan pesan-antar makanan yang dapat dilakukan dari kota, provinsi, bahkan pulau yang berbeda,” ucap Aristo.

Fitur ini dapat digunakan untuk memesan makanan atau minuman dengan jarak maksimum 25 kilometer dari lokasi pemesanan yang ditentukan oleh pelanggan. Kehadiran fitur ini sekaligus menegaskan misi utama GO-FOOD untuk meningkatkan skala dan cakupan wilayah bisnis para mitra merchant.

“Memasuki tahun keempat, GO-FOOD menjadi sahabat setia masyarakat Indonesia. Kami tidak hanya menghadirkan penawaran-penawaran menarik bagi konsumen, tapi juga selalu berupaya untuk menjembatani kebutuhan para pelaku usaha,” pungkas Aristo.


Hingga kini, GO-FOOD telah bermitra dengan hampir 400.000 mitra merchant dimana 80 persen diantaranya merupakan pelaku UMKM kuliner rumahan. Melalui inovasi teknologi yang terus dikembangkan, GO-FOOD berharap bisa mendukung bisnis para pelaku kuliner di Tanah Air.

SUMBER

Sunday, February 17, 2019

Tips Hemat Kuota Data saat Anda Bermain Instagram

https: img-o.okeinfo.net content 2018 12 07 92 1988124 tips-hemat-kuota-data-saat-anda-bermain-instagram-MgHbKRwKMk.jpg 
  (Foto: Shutterstock)

Instagram menjadi salah satu platform media sosial terpopuler. Platform berbagi foto ini seringkali dianggap sebagai aplikasi yang sangat menguras kuota.

Tanpa disadari dengan melihat story, video lucu, berita, bahkan sekadar scrolling timeline pun dapat menguras habis kuota internet Anda. 

Instagram sebenarnya sudah mempunyai fitur penghemat kuota. Fitur ini tersedia di platform iOS dan Android. Fitur tersebut terletak di bawah menu Pengaturan yang ada di Profil Instagram Anda. Pada iOS, fitur ini bernama “Mobile Data Use” dan di Android disebut “Cellular Data Settings”.

Pertama, Anda harus membuka menu “Settings” di Instagram Anda. Setelah itu, Anda bisa langsung mulai mengaktifkan mode hemat data, dengan memilih tombol “Use Less Data”. Dengan begitu, Anda sudah bisa menghemat kuota Anda.

 

Perlu diketahui, pengguna iOS hanya memiliki satu fungsi untuk mengaktifkan atau menonaktifkannya. Sedangkan pengguna Android dapat memilih antara memutar video secara otomatis di data seluler dan jaringan Wi-Fi atau hanya pada Wi-Fi.

Meskipun penggunaan kuota internet menjadi lebih hemat akan tetapi setelah fitur tersebut aktif, proses loading foto dan video akan lebih melambat. Hal ini mungkin menjadi mengganggu bagi Anda yang terbiasa dengan pengalaman bermain Instagram tanpa loading lambat.



 

SUMBER

Twitter Mudahkan Pengguna Intip Akun yang Tak Dikenal

https: img.okeinfo.net content 2019 02 14 207 2017742 twitter-mudahkan-pengguna-intip-akun-yang-tak-dikenal-zLq4gQDuYF.jpg 
  Tampilan Fitur Baru Twitter untuk iOS (Foto: Engadget)

Twitter tengah menguji fitur baru bagi para pengguna di iOS. Fitur ini dapat mempermudah pengguna untuk melihat profil seseorang. Tepatnya, pratinjau profil di iOS dapat menunjukan lebih banyak profil pengguna tanpa harus membuka lebih jauh timeline.

Dilansir dari laman Engadget, Kamis (14/2/2019), jika Anda merupakan bagian dari uji coba ini, maka pengguna dapat melihat profil seseorang dengan mengarahkan kursor ke @namaakun tanpa membukanya.

Lalu Twitter akan memberi Anda opsi untuk mengikuti atau membisukan mereka. Sehingga Anda dapat kembali ke penjelajahan Anda atau melihat profil lengkap mereka jika membutuhkan detail lebih lanjut.

“Kami sedang menguji cara yang lebih mudah untuk memeriksa profil di iOS tanpa meninggalkan timeline Anda! Cukup ketuk sembarang pegangan @ di Tweet, intip, ikuti, dan kembali ke sana. Beri tahu kami pendapat Anda!,” kata pihak Twitter di akun resminya.


Menurut pihak Twitter, fitur ini dihadirkan untuk mengetahui siapa yang terlibat di sekitar akun pengguna. Sehingga nantinya pengguna dapat lebih mudah memeriksa profil sebelum mereka merespon orang asing atau tidak dikenal.

Seperti diketahui saat ini media sosial baik Twitter, Instagram, dan Facebook memungkinkan berbagai orang untuk saling menanggapi suatu postingan secara bebas.   

SUMBER                                                

Saturday, February 16, 2019

Gahar, Ponsel Ini Usung Baterai 18.000 mAh

https: img-z.okeinfo.net content 2019 02 15 57 2018563 gahar-ponsel-ini-usung-baterai-18-000-mah-s6FfxwUej0.jpg 
  Ilustrasi Baterai (Foto: Design TutsPlus)


Smartphone Energizer telah mengukuhkan diri sebagai ponsel dengan baterai gahar. Tak tanggung, perusahaan yang berbasis di Amerika tersebut akan membuat ponsel dengan baterai 18.000 mAh, Energizer P18K Pop.

Dilansir dari laman Android Pit, Sabtu (16/2/2019) bahkan Energizer mengklaim jika perangkat tersebut merupakan smartphone pertama di dunia yang mengintegrasikan baterai yang sangat kuat.

Lebih lanjut, ketahanan baterai akan membuat ponsel dapat melakukan 100 jam pemutaran music, dua hari video non stop. Bahkan, dalam modus siaga ponsel akan bertahan hingga 50 hari dan juga didukung dengan port USB-C.




Energizer

Tak hanya menjual baterai gahar, Energizer juga mengatakan jika pihaknya akan mengoptimasi perangkat lunak yang dikombinasikan dengan teknologi hemat energi yang menjamin manajemen baterai lebih baik untuk penggunaan tanpa batas.

Kemudian, akan ada lima kamera dengan konfigurasi tiga di belakang (12 MP+ 5 MP + 2 MP) dan dua di depan (16 MP+2 MP). Layarnya memiliki ukuran diagonal 6,2 inci dan resolusi Full HD+.

Dari sisi internal, ponsel kabarnya akan menanamkan chipset Helio P70 MediaTek dengan dukungan RAM 6GB dan penyimpanan internal 128GB. 

SUMBER

Teknologi Machine Learning dan AI untuk Lawan Berita Hoaks

https: img.okeinfo.net content 2019 02 01 207 2012413 teknologi-machine-learning-dan-ai-untuk-lawan-berita-hoaks-Fea6dYfpi7.jpg 
  (Foto: Entrepreneur)

Kementerian Komunikasi dan Informatika (Kominfo) Republik Indonesia menyatakan bahwa sekira 800 ribu konten terkait berita palsu tersebar di Indonesia setiap tahun.

Sirkulasi berita palsu yang menyebar semakin cepat terjadi di masyarakat Indonesia, berkat maraknya media sosial. Berdasarkan data dari NextWeb, Indonesia menempati peringkat ke-3 di seluruh dunia dengan pengguna Facebook terbanyak (120 juta), dan peringkat ke-4 secara global dengan pengguna Instagram terbanyak (56 juta).

Melalui data ini, jangan heran bila media sosial berubah menjadi media baru di Indonesia, dan bertambah rumit dengan adanya konsep "netizen" yang jarang mengklarifikasi konten yang mereka baca di media sosial.

Berdasarkan survei terbaru yang dilakukan oleh DailySocial, dari 2.032 responden yang disurvei, 44,19% tidak dapat mendeteksi konten yang merupakan berita palsu yang beredar di berbagai platform media sosial.

Terutama menjelang Pemilihan Umum, pada April 2019, ada banyak berita palsu yang beredar untuk menjatuhkan lawan politik masing-masing kandidat.

Pentingnya Manusia dan Teknologi dalam Mendeteksi Berita Palsu

Untuk alasan ini, pemerintah dari Kominfo telah secara aktif memblokir peredaran berita palsu, dengan berkolaborasi dengan platform digital, seperti Google, Facebook, Twitter, atau Youtube untuk menghentikan iklan dari portal yang menyebarkan pencemaran nama baik.


 

Memiliki visi yang sama dengan pemerintah, banyak media di Indonesia dan agregator konten setuju untuk mencegah dan menghapus berita palsu yang beredar melalui platform mereka, untuk menyambut Pemilu secara damai dan Pemilihan Presiden.

Sebagai salah satu platform agregator berita terkemuka di Indonesia, BaBe memiliki caranya sendiri untuk mencegah berita palsu yang masuk ke platform mereka. “Melalui sistem moderasi kelas dunia yang menggabungkan algoritma dengan tim evaluasi konten kami, BaBe dapat mencegat dan menghapus konten yang tidak terverifikasi pada platform BaBe, seperti tips kesehatan yang menyesatkan atau berita lama yang diunggah kembali,” kata Indira Melik, Content Operations Manager, BaBe.

Teknologi BaBe juga telah dilatih untuk menemukan kata-kata "sensasional" seperti judul berita clickbait, yang memperingatkan tim moderasi konten lokal BaBe untuk ditinjau lebih lanjut. "Berita secara umum yang masuk di BaBe akan ditandai oleh kecanggihan teknologi yang dimiliki dalam mendeteksi kata-kata terkait, kemudian ditinjau kembali oleh tim BaBe dalam mengevaluasi berita tersebut,” tambah Indira.

Selain memanfaatkan sistem moderasi, BaBe terus-menerus mendorong pengguna untuk berbagi umpan balik membantu menandai setiap konten yang potensial untuk ditinjau lebih lanjut.

 

Friday, February 15, 2019

Intip Teknologi Canggih yang Hadir di 2019

https: img-k.okeinfo.net content 2018 12 17 207 1992456 intip-teknologi-canggih-yang-hadir-di-2019-x4kI1fKv7W.jpg 
  Ilustrasi Ponsel Lipat (Foto: T3)


Teknologi canggih sudah banyak beredar sepanjang tahun 2018. Tak menutup kemungkinan jika teknologi masa depan sudah bisa rilis tahun 2019 mendatang. Apa sajakah teknologi tersebut? 

1. Koneksi 5G

Jaringan 5G

Dahulu jaringan 5G diprediksi akan meluncur pada 2020. Tetapi saat ini sudah banyak beberapa perusahaan modem dan smartphone mendukung teknologi ini dan akan siap meluncurkannya pada 2019.
Jaringan ini diklaim punya kecepatan 50x lebih cepat dibanding jaringan 4G. Penelitian mencatat, dengan koneksi 5G proses transfer data sekitar 7,5 Gbps atau sekitar 940 MB per-detiknya dalam kondisi tak bergerak.

Sedangkan dalam kondisi bergerak, data yang dapat ditransfer sekitar 1,2 Gbps atau sekitar 150 MB per-detik. 

2. Artificial Intelegence (AI)



Artificial Inteligent

Teknologi ini sudah banyak tertanam di berbagai alat virtual rumah tangga, chatbot digital, bahkan ponsel untuk membantu beberapa pekerjaan di bidang apapun. Teknologi AI juga diprediksi dapat mengetahui peluang bisnis bahkan kecocokan pasangan.

AI didesain untuk belajar dan terus beradaptasi tiap digunakan. Kecerdasan buatan ini sudah banyak digunakan smartphone untuk mendeteksi objek, penerjemah real-time dan membantu tugas harian pengguna. Selain itu AI juga digunakan untuk vitur deteksi wajah, jenis kulit, warna kulit sampai jenis kelamin.

Dengan hadirnya asisten digital seperti Siri, Bixby atau Google Assistant yang semakin canggih di tahun 2018, tidak menutup kemungkinan teknologi ini akan mengalami perkembangan baru di tahun 2019.

3. Bezel Tipis dan Notch

iPhone

Bezel yang tipis bahkan tanpa bezel menjadi simbol kecanggihan smartphone di masa depan. Selain itu, bezel tipis juga meningkatkan kecantikan smartphone Anda dari biasanya.

Semenjak iPhone X menampilkan kecanggihan notch dan bezel, banyak smartphone lain yang menjadikan kecanggihan tersebut sebagai tren masa kini. Teknologi ini diprediksi akan terus menjadi tren pada smartphone yang rilis di tahun 2019 mendatang.

4. Ponsel Lipat



Ponsel Lipat

Perkembangan teknologi yang pesat memungkinkan ponsel mempunyai layar yang fleksibel atau dapat dilipat. Awalnya fitur ini tidak dipercaya dapat hadir dalam waktu dekat.

Beberapa perusahaan smartphone, seperti Samsung tengah mengembangkan ponsel lipatnya yang dikabarkan akan rilis dalam waktu dekat. Tetapi teknologi ini sudah disalip terlebih dahulu oleh produsen ponsel Royole yang Desember ini merilis ponsel layar lipat FlexPai.

Ini tak menutup kemungkinan produsen ponsel lainnya akan mengeluarkan produk tersebut pada 2019. 

SUMBER                                                                              
                                                                                                

Rekomendasi Aplikasi Penghasil Cuan :D Dirumah saja tetap Dapet Duit !!!

Hallo Bosskyuuh semua. Perkenalkan aku Patrick Ananta berasal dari Jawa Tengah. Aku sudah lama sekali dirumahkan dikarenakan covid19 sehingg...