Nostra Technology: SpringBoot Facebook Social Application

Friday, December 14, 2018

SpringBoot Facebook Social Application

Halo sobat Nostra,
kali ini saya akan coba membahas tentang SpringBoot Facebook Social Application dimana datanya akan kita consume dari postingan kita yang ada di facebook

Langkah pertama yang harus kita siapkan tentunya adalah create project baru spring-boot.

Struktur project

tambah code berikut di pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.social</groupId>
    <artifactId>spring-social-facebook</artifactId>
</dependency>

Kemudian kita akan membuat page html sebagai tampilan pertama ketika kita menjalankan project spring-boot => resources/templates/connect/facebookConnect.html

<html>
<head>
   <title>SpringBoot Facebook</title>
</head>
<body>
<h3>Connect to Facebook</h3>
<form action="/connect/facebook" method="POST">
    <input type="hidden" name="scope" value="user_posts" />
    <div class="formInfo">
      <p>Anda belum terhubung ke facebook. 
      Tekan button untuk terhubung ke akun facebook.</p>
    </div>
      <p><button type="submit">Connect to Facebook</button></p>
</form>
</body>
</html>

Selanjutnya page jika sudah terhubung ke facebook => resources/templates/connect/facebookConnected.html

<html>
<head>
  <title>Hello Facebook</title>
</head>
<body>
<h3>Connected to Facebook</h3>
   <p> Terhubung ke Facebook
   Klik <a href="/">disini</a> untuk melihat postingan Facebook Anda
</p>
</body>
</html>

Terakhir page untuk tampilan postingan-postingan kita yang ada di Facebook => resources/templates/hello.html

<html>
<head>
     <title>Hello Facebook</title>
</head>
<body>
<h4>Some your feeds:</h4>

<div th:each="post:${feed}">
    <b th:text="${post.from.name}">from</b> wrote:
    <p th:text="${post.message}">post message</p>
    <img th:if="${post.picture}" th:src="${post.picture}"/>
    <hr/>
</div>
</body>
</html>

Nah, untuk controller yang akan get data dari facebook => FacebookFetchFeeds.java

package drools.controller;
import org.springframework.social.connect.ConnectionRepository;
import org.springframework.social.facebook.api.Facebook;
import org.springframework.social.facebook.api.PagedList;
import org.springframework.social.facebook.api.Post;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class FacebookFetchFeeds {
    private Facebook facebook;
    private ConnectionRepository connectionRepository;

    public FacebookFetchFeeds(Facebook facebook, 
                   ConnectionRepository connectionRepository) {
        this.facebook = facebook;
        this.connectionRepository = connectionRepository;
    }

    @GetMapping("/")
       public String getFacebookFeed(Model model) {
        if(connectionRepository.findPrimaryConnection(Facebook.class) == null) 
         {
          return "redirect:/connect/facebook";
         }

        PagedList<Post> feed = facebook.feedOperations().getFeed();
        model.addAttribute("feed", feed);
        return "hello";
      }
}

Object Facebook dari controller diatas merupakan reference untuk binding API Spring Facebook.
Aplikasi spring ini akan berinteraksi dengan akun Facebook maka kita akan membutuhkan Application ID dan Application Secret. Nah ini juga bisa digunakan untuk mengintegrasikan login menggunakan Facebook.
Bagaimana cara mendapatkan Aplication ID dan Aplication Secret Facebook?
Gampang . .
Akses halaman https://developers.facebook.com/apps

- Kemudian pilih product => Facebook Login
- Pilih Setting->Basic, maka kita akan mendapatkan App ID dan App Secret

- Pada application.properties tambah App ID dan App secret

spring.social.facebook.appId=990672621133932
spring.social.facebook.appSecret=4f66962b5610358ec55f8ed1b6cc2604

selesai sudah,
Run project spring dan lihat hasilnya

Klik button "Connect to Facebook", dan lakukan autentikasi facebook
Jika sudah terhubung ke facebook maka akan redirect ke page selanjutnya

Kemudian klik button "disini", dan postingan-postingan kita di facebook akan ditampilkan

Sekian penjelasan saya mengenai springboot facebook social application, semoga bermanfaat
Terima kasih

Friday, December 14, 2018

SpringBoot Facebook Social Application

No comments:

Post a Comment

Category