D3.js : Handling Event (Click, MouseOver and MouseOut)

Okay, after my previous post about D3 selection and modifying elements.. (sorry if its not well arranged), now i want to share about how to add event in D3.js. Some events ,  like, on-click event, on-mouseover, mouseout, etc.

I have a circle :

var circleAttrs = {
          cx: function(d) { return xScale(d.x); },
          cy: function(d) { return yScale(d.y); },
          r: radius

Click Event

svg.on("click", function() {
          var coords = d3.mouse(this);
          svg.selectAll("circle")  // For new circle, go through the update process
            .attr(circleAttrs)  // Get attributes from circleAttrs var
            .on("mouseover", handleMouseOver)
            .on("mouseout", handleMouseOut);

Mouseover and MouseOut

// Create Event Handlers for mouse
      function handleMouseOver(d, i) {  // Add interactivity

            // Use D3 to select element, change color and size
              fill: "orange",
              r: radius * 2

            // Specify where to put label of text
               id: "t" + d.x + "-" + d.y + "-" + i,  // Create an id for text so we can select it later for removing on mouseout
                x: function() { return xScale(d.x) - 30; },
                y: function() { return yScale(d.y) - 15; }
            .text(function() {
              return [d.x, d.y];  // Value of the text

      function handleMouseOut(d, i) {
            // Use D3 to select element, change color back to normal
              fill: "black",
              r: radius

            // Select text by id and then remove
            d3.select("#t" + d.x + "-" + d.y + "-" + i).remove();  // Remove text location

handleMouseOver is function to handle mouseover event, occurs when the mouse pointer is over the selected element. The mouse over only triggered when the mouse enter the selected elements. On the code above, will make the selected element fill color is orange and the radius 2x the existing radius. then append text to selected elements, valued it’s position (dx and dy)

handleMouseOut The mouseout event occurs when the mouse pointer leaves the selected element. The mouseout() method triggers the mouseout event, or attaches a function to run when a mouseout event occurs. The mouseleave event only triggers when the mouse pointer leaves the selected element. On the example, mouseout function will make the element fill color into black, and set the radius; then also remove the elements with id #t.


D3.js : Modifying Elements

After selecetion, i would like to share about styling in D3.js. Modifying element atribut like change the circle radius, color, width, stroke, fill color etc, it means we change the style, so i called it styling.

I will make it so simple, so i have a circle like this :

var svg = d3.select(“svg”),
width = +svg.attr(“width”),
height = +svg.attr(“height”);

svg.append(“circle”) // attach a circle
.attr(“cx”, 200) // position the x
.attr(“cy”, 100) // position the y
.attr(“r”, 50) // set the radius
.style(“fill”, “red”); // set the fill


There’s some atribut  like x and y position, the radius and fill color. If we want no color just add .style(“fill”, “none”). And we can also add color like  (.style("fill", "rgb(255,0,0)");) or in hexadecimal (.style("fill", "#f00");)

Styles in D3:

  • fill
  • stroke
  • opacity
  • fill-opacity
  • stroke-opacity
  • stroke-width
  • stroke-dassharay
  • stroke-linecap
  • stroke-linejoin
  • writing-mode
  • glyph-orientation-vertical

I added some styles to the circle, and then it look like this :


d3.select(“circle”) // select a circle
.attr(“cx”, 200) // position the x
.attr(“cy”, 100) // position the y
.attr(“r”, 50) // set the radius
.style(“fill”, “red”) // set the fill colour
.style(“fill-opacity”, 0.4) // set fill opacity
.style(“stroke”, “blue”) // set the line color
.style(“stroke-width”, 3 ) // set the line width
.style(“stroke-dasharray”, (“10,3”)) // make the stroke dashed

Then, i tried to make lines and add some styles, looks like this:

svg.append(“line”) // attach a line
.style(“stroke”, “blue”) // colour the line
.style(“stroke-width”, 20) // adjust line width
.style(“stroke-linecap”, “butt”) // stroke-linecap type
.attr(“x1”, 100) // x position of the first end of the line
.attr(“y1”, 50) // y position of the first end of the line
.attr(“x2”, 300) // x position of the second end of the line
.attr(“y2”, 50); // y position of the second end of the line

svg.append(“line”) // attach a line
.style(“stroke”, “blue”) // colour the line
.style(“stroke-width”, 20) // adjust line width
.style(“stroke-linecap”, “round”) // stroke-linecap type
.attr(“x1”, 100) // x position of the first end of the line
.attr(“y1”, 100) // y position of the first end of the line
.attr(“x2”, 300) // x position of the second end of the line
.attr(“y2”, 100); // y position of the second end of the line

svg.append(“line”) // attach a line
.style(“stroke”, “blue”) // colour the line
.style(“stroke-width”, 20) // adjust line width
.style(“stroke-linecap”, “square”) // stroke-linecap type
.attr(“x1”, 100) // x position of the first end of the line
.attr(“y1”, 150) // y position of the first end of the line
.attr(“x2”, 300) // x position of the second end of the line
.attr(“y2”, 150); // y position of the second end of the line

Attrributes in D3:

      • xy ;
        Using the x and y attributes places the anchor points for these elements at a specified location. Of the elements that we have examined thus far, the rectangle element and the text element have anchor points to allow them to be positioned
      • x1x2y1y2

        • x1: The x position of the first end of the line as measured from the left of the screen.
        • y1: The y position of the first end of the line as measured from the top of the screen.
        • x2: The x position of the second end of the line as measured from the left of the screen.
        • y2: The y position of the second end of the line as measured from the top of the screen.
      • points
        The points attribute is used to set a series of points which are subsequently connected with a line and / or which may form the bounds of a shape. These are specifically associated with the polyline and polygonelements. Like the xy and x1x2y1y2 attributes, the coordinates are set from the top, left hand corner of the web page.
        The data for the points is entered as a sequence of x,y points in the following format;
        .attr("points", "100,50, 200,150, 300,50");
      • cxcy

        The cxcy attributes are associated with the circle and ellipse elements and designate the centre of each shape. The coordinates are set from the top, left hand corner of the web page.
        • cx: The position of the centre of the element in the x axis measured from the left side of the screen.
        • cy: The position of the centre of the element in the y axis measured from the top of the screen.
      • r, to set radius of the element
        .attr("5", "50");
      • rx, ry
        The rxry attributes are associated with the ellipse element and designates the radius in the x direction (rx) and the radius in the y direction (ry).
        • rx: The radius of the ellipse in the x dimension from the cxcy position to the perimeter of the ellipse.
        • ry: The radius of the ellipse in the y dimension from the cxcy position to the perimeter of the ellipse.
        • translate: Where the element is moved by a relative value in the x,y direction.
        • scale: Where the element’s attributes are increased or reduced by a specified factor.
        • rotate: Where the element is rotated about its reference point by an angular value.transform (translate(x,y), scale(k), rotate(a)) 
          The transform attribute is a powerful one which allows us to change the properties of an element in several different ways.
          .attr("transform", "translate(50,50)") // translate the circle
          .attr("transform", "scale(2)"); // scale the circle attributes

          The translate-rotate attribute will rotate an element and its attributes by a declared angle in degrees.

          svg.append("text") // append text
          .style("fill", "black") // fill the text with the colour black .attr("x", 200) // set x position of left side of text
          .attr("y", 100) // set y position of bottom of text
          .attr("dy", ".35em") // set offset y position .attr("text-anchor", "middle") // set anchor y justification .attr("transform", "rotate(10)") .text("Hello World"); // define the text to display
      • widthheight 

        width and height are required attributes of the rectangle element. width designates the width of the rectangle and height designates the height (If you’re wondering, I often struggle defining the obvious).

      • text-anchor

        The text-anchor attribute determines the justification of a text element
        Text can have one of three text-anchor types;
        • start where the text is left justified.
        • middle where the text is centre justified.
        • end where the text is right justified
      • dxdy
        dx and dy are optional attributes that designate an offset of text elements from the anchor point in the x and y dimension . There are several different sets of units that can be used to designate the offset of the text from an anchor point. These include em which is a scalable unit, px (pixels), pt (points (kind of like pixels)) and %(percent (scalable and kind of like em))
      • lenghtAdjust

        The lengthAdjust attribute allows the textLength attribute to have the spacing of a text element controlled to be either spacing or spacingAndGlyphs;
        • spacing: In this option the letters remain the same size, but the spacing between the letters and words are adjusted.
        • spacingAndGlyphs: In this option the text is stretched or squeezed to fit
      • textLength
        The textLength attribute adjusts the length of the text to fit a specified value.

And also i have summaries :

Source :




It’s a very useful site btw, i highly recommend you to visit the site if you wanna learn about D3 (as beginner). But so sad that the last post on that site in 2016. There’s some version D3, try the latest (V4)

Ionic 1 vs Ionic 2 April 2016 : What should i use?

Hello again guys, after exploring ionic framework for several times, now let’s discuss about ionic 1 and ionic 2 (which is now is still in beta version, current beta 8).

I’ve been learing for the last 2 months (o my good, may be it took so long) *or because no progress on my project, i learn about ionic, both ioinic 1 and 2 (beta). I have 2 projects, at first, both using ionic 2, but at the end, my senior said the project would be in ionic 1 (stable) for development because we don’t have so much time and we need stable version that have everythings work well. As we know, in beta version some function still can’t be used (read,  http://blog.ionic.io/ ) and may be we don’t think much about migration.

As for my second project, until this time i still make it in ionic 2. Because we still have time to build, and we don’t need some complex function right now, we still develop from the very beginning. Have enough time to wait about ionic 2 issues. And with current beta version, we still had enaugh. Based on what i’ve read here.

Ionic 1 using angular 1, ionic 2 using angular 2. Here’s good article for you to read : http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/

I’ll write some for you :

  1. Organization and Structure
    In Ionic 2, every page or component in your application has its own folder with its own class file, template file and style file. If I have two pages in my application, Home and About, I would have the following structure :

    • home
      • home.js
      • home.html
      • home.scss
    • about
      • about.js
      • about.html
      • about.scss

    While ionic 1 project collect all html files in templates folder, and all js files in js folder, but you can still organized your ionic project file just like the structure above, but it’s not the default style that was used. It would require prior knowledge and motivation to achieve a sensible and scalable structure like this in Ionic 1.

  2. Toolingionic g page mypage

    you run it from CLI, and you would have MyPage folder with the following :

    • mypage
      • mypage.js
      • mypage.html
      • mypage.scss

    With the Ionic 2 CLI you can automatically generate pages, providers, tabs, pipes, components and directives and it will set up all the files you need and some boiler plate code for you.

  3. Navigation
    with ionic 1 you need to define $stateProvider like this

      .state('intro', {
        url: '/',
        templateUrl: 'templates/mypage.html',
        controller: 'IntroCtrl'

    and for ionic 2 , you can do it just like this
    you can push a page onto the navigation stack to make it the current page, and you can pop a page to remove it from the navigation stack and go back to the previous page. Just like pushing and popping an array.

  4. Template syntax
    Ionic 1:

    <img ng-src="{{photo.image}}" />

    Ionic 2:

    <img [src]="photo.image" />

    The difference here is inconsequential really, but the second code block certainly looks cleaner. Here’s another example:

    Ionic 1:

    <button ng-click="doSomething()">

    Ionic 2:

    <button (click)="doSomething()">
  5. Building
    In Ionic 2 almost all of your coding will be done inside of the app folder, which is completely separate to the www folder which contains the code that is actually served to the browser. When you run an Ionic 2 application, the code in the app folder is automatically transpiled and bundled into a single Javascript file which is copied into the www folder and served. For the most part, you don’t have to touch your index.html file at all.

    Of course, you can read more about it here : http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/ and Josh Morony also provide a good e-book for us to learn about ionic 2, it’s so helpful.  You can also buy it here : https://www.joshmorony.com/building-mobile-apps-with-ionic-2/?utm_source=homepage&utm_medium=banner&utm_campaign=incontent#buy

    Also, if you already have ionic 1 project, may be you want to read about ionic 2 migration here : http://ionicframework.com/docs/v2/getting-started/migration/

    Thanks for visiting my blog! Cheers ^^,

How to get start with Ionic 2

Now, i wanna share about how to start with ionic. Official site ; http://ionicframework.com/

Ionic 2 is still in beta release but, you may want to read about ionic 1 and 2 and should you upgrade to ionic 2 or not ->  here.

First of all you have to make sure this following things already installed to your computer :

  1. Android SDK
  2. Java JDK
  3. NodeJS
  4. AntJS
  5. Cordova Latest Version

And now, we’re ready to start about ionic. http://ionicframework.com/getting-started/

For you who just heard about ionic, you can visit my previos post about ionic right here.

We use Nodejs command line tools to run ionic command , you can read more here https://www.npmjs.com/package/ionic

  1. Install ionic
    $ npm install -g ionic@beta
  2. Create Project
    use –v2 to create ionic 2 project, if you do not add this line, it will install ionic 1 by default. ex : $ ionic start myApp ==> ionic 1 version

    $ ionic start myApp [template] --v2
    $ ionic start myApp tabs --v2 
    ionic create porject

    ionic create porject

    I can’t believe i’m having trouble when start ionic project, the installation is stuck on “installing npm packages…” this command try to call the npm packages source but i’ve been waiting for an hour and theres nothing changed. I terminated it, and then try to start a project test again and still the same. My friend, Hadi, wait for it, so long but end up with an error. My senior said, how about restart the PC? Then me and my friend doing that, and still failed. And then, we both try to uninstall the cordova, the ionic again and when start project it is still failed. We spent the day by doing that and still not working. I can’t believe i had something trouble like this, so frustating and finally,  i think this is about the connection -_- Okay, i start again this day. And i try to use my own connection instead of office’s. And i am get through it. Oh my god, i can’t belive, my senior said: ya, because office connection is too slow -_-

  3. Add platform
    $ cd myApp
    $ ionic platform add android
    $ ionic build android
    Oh, and let me show you my ionic info by run this command -> $ ionic info

    ionic info

    ionic info

  4. Emulate project
    $ ionic emulate android
  5. Run Project
    $ ionic run android
  6. Run in browsers
    $ ionic serve or $ ionic serve lab
    Next, i have to learn the components~ okay, noted! start from today yo! :D
  7. And here some commands that can help you :
    $ ionic g page detail -> will generate your page named 'detail' . A folder 'detail' and by contain detai.html, detail.js and detail.scss like this one :
    g page
    $ ionic g provider mydata -> will add new file named "mydata.js" under provider folder


Maven, Continuum dan Artifactory

Menyusul tulisan-tulisan yang sebelumnya, explore sesuatu, sudah didokumentasikan, maka sekaranglah saatnya untuk dibagi *meski agak telat juga, karna ini hasil explorasi bulan juni -_-

Ini adalah hasil explorasi untuk mengintegrasikan library yang kami miliki untuk keperluan development program, karena kadang2 ketika kita develop, push ke repo, kadang ada error karena librarynya yang belum di add, atau mungkin berbeda versi, atau bisa jadi library yang udah di tambahkan ternyata memiliki depedency pada library yang lain dan seterusnya, nah, repot? dan kita maunya project itu di build di satu tempat aja.. so, kita mau pakai maven, continuum dan artifactory untuk dijalankan beriringan biar kayak penganten *ups*

  1. Continuum
    Salah satu program Intergrasi server berkesinambungan (Continous Integration Server) yang memungkinkan bagian-bagian suatu project dikerjakan oleh perseorangan namun dibangun dalam satu server dan dibuild pada satu tempat, sehingga pembaharuan program dapat di kontrol dan hasil suatu program dapat seragam dan merata. Beberapa fitur dari Apache Continuum adalah :

    • Automated build
    • Relese management
    • Scheduler
    • Role-based security
  2. Maven
    Maven merupakan alat untuk melakukan build secara otomatis yang digunakan terutama untuk project Java. Kelebihan dari Maven adalah mampu mendeskripsikan sendiri kebutuhan software yang akan dibangun dan mampu mendeskripsikan dependency-nya atau bahkan mencarikan dependency yang dibutuhkan. Maven membahas 2 aspek dalam membangun project yaitu :

    • Mendeskripsikan bagaimana perangkat lunak akan dibangun
    • Mendeskripsikan dependency-nya
  3. Artifactory
    Artifactory merupakan local repository yang berisi kumpulan library yang diperlukan dalam membangun suatu project. Beberapa kelebihan Artifactory adalah:
  • Kemudahan administrasi artifactin house”, library dependency yang di bangun internal
  • Artifactory sangat membantu menyediakan library lokal dalam suatu jaringan intranet
  • Artifactory memungkinkan sync secara otomatis dengan central repository.
  • Mudah untuk untuk mengexport atau mengimport repository.
  • Memudahkan dalam management library.

Baiklah, supaya ga repot kemana-mana, jadi saya unggah saja makalah yang telah kami buat.

Silahkan yang ingin mampir atau sekedar lihat-lihat ^_^

Download Makalah Maven, Continuum dan Artifactory

Choosing Best Mobile Apps Technology : Native vs Hybrid Mobile Apps

Okay, hi again all.. Since my previous article is about starting to build hybrid apps,

So, you may want to comparise hybrid vs native mobile apps.

It’s an age old question that refuses to go away, we thought it was time to revisit… Which one you gonna use?

But, i think we should stop this debate. Going hybrid or native is depend on your own preference, kind of apps you wanna build and what you need to build.

I prefer use hybrid cz its easier for me to adapt. I’m a front-end developer, i knows well about html5, css and jaavscript. Since hybrid allows me to use that kind of development tools, so, hybrid make it easier for me.  And.. i need to build cross-paltorm application ( i need to run my application on android and iOS, but i don’t have basic on objective-C). Also, phonegap provide enaugh API to access hardware capabilities of the mobile device that i need. In this case, i just need camera, acces to gallery, open file browser and gps to detect location.

With hybrid, i can run faster, and low cost, and save time cz its a cross-paltform application.

Native, HTML5, Hybrid mobile apps

Native vs HTML5 Hybrid

Here some useful links for you to help you decide 😀

What is hybrid mobile apps?

Native, HTML 5 or Hybrid : Understanding Your Mobile Application Development Options

Native vs Hybrid Comparison

Choosing The Best Mobile Application Development Technology


Agile Scrum

Okay, it’s not something new but i want so share what i’ve learn to all of you *who read this post* and, also for myself someday i need this kind of documentation.

And i’m sorry karna postingan akhir2 ini lebih ke teori2 saja, ga ada tutorial maupun contoh2 praktiknya, nanti ya, nanti kalau saya udah mulai terjun, #hohhhh#

Well, now we start :

Agile Scrum ; ini merupakan salah satu SDLC (System Development Life Cycle). Mungkin yang familiar bagi teman-teman, SDLC yang udah dari jaman lama, yang mungkin masih sebagian besar teman-teman pakai sampai sekarang yaitu Waterfall. Sebuah metodologi pengembangan perangkat lunak yang sistematik dan sequensial, urut mulai dari requirement, design, implementation, verification hingga maintenance.



Waterfall ini rigid (kaku), jadi harus bener-bener step by step, kalau satu tahap belum selesai, tidak diperkenankan untuk memulai tahap selanjutnya. Nah, disini yang jadi kendala, apabila ketika kita akan membangun suatu sistem, biasanya requirement dari customer sering berubah-ubah, jadi terkadang sampai tahap analisa ga kelar-kelar karena ada banyak perubahan, sementara makin lama disitu, makin banyak cost. Dan waktu juga terus berjalan, bisa jadi lebih lama. Sementara project ini kejar tayang, so, terkadang kita terpaksa langsung terjun koding dengan desain yang ada, perkara ada perubahan jadi disampaikan ditengah jalan, tidak efektif bukan? Belum lagi ketika soal dokumentasi, entah versi yang keberapa yang diimplementasikan dalam code. Itu di tahap perqancangan, bayangin, jika itu terjadi setelah release? Serasa ngulang kembali dari awal kan? hehe

Agile , mulai diperkenalkan pada tahun 90-an. Kata agile bersifat cepat, ringan, bebas bergerak sehingga metode ini sangat adaptive, terdiri dari perencanaan-perencanaan jangka pendek sehingga dapat cepat dalam merespon perubahan.

Agile manifesto :

  1. Individual and interactive
  2. Working software
  3. Customer Collaboration
  4. Responding to change

Scrum adalah sebuah kerangka kerja untuk menyelesaikan permasalahan kompleks yang senantiasa berubah, di saat yang bersamaan, menghasilkan produk bernilai tinggi dengan kreatif & produktif ~ Scrum Guide (Juli 2013), Ken & Jeff.

Understanding Scrum

Berikut gambaran mengenai scrum, agar lebih mudah dipahami 🙂


Scrum Activity

Scrum adalah suatu kerangka kerja yang menggunakan pendekatan Agile, dimana kita membuat perencanaan-perencaan jangka pendek dan cepat untuk meresponse perubahan. Pendekatan team-based, kolaborasi antar team member sangat diperlukan dalam mengerjakan suatu project. Scrum merupakan iterative dan incremental, jadi, terdiri dari pengulangan-pengulangan, dalam scrum disebut sprint dengan goal yang telah ditentukan sebelumnya, sehingga akan ada peningkatan tentang pekerjaan yang telah selesai berdasarkan product backlog yang telah dibuat. Dan scrum, selalu fokus untuk mendeliver suatu product bernilai tinggi.

Scrum Roles

  1. Product Owner, bertanggungjawab untuk membuat dan mengelola prooduct backlog agar transparan, jelas dan mudah dipahami. Product owner harus paham betul tentang product yang akan dibangun, memaksimalkan nilai product dan kinerja tim. Similar to Project Manager.
  2. Scrum Master, memastikan scrum telah dipahami dan dilaksanan oleh semua team member, mengikuti teori, praktik dan aturan main dalam scrum serta memfasilitasi acara-acara scrum, misal : daily scrum meeting. Similar to Team Leader.
  3. Team Member, cross-functional, team harus lengkap, terdiri dari analys, programmer, QA dll. Setiap team member itu self-organize, bertanggungjawab pada pekerjaanya masing-masing. Saat sprint planning, dia sendiri yang akan menentukan akan mengerjakan apa, dalam waktu berapa lama, dan dia harus commit pada pekerjaannya.

Scrum Ceremony

  1. Sprint Planning adalah pertemuan diawal sprint untuk menentukan sprint yang akan dijalankan. Memilih item dari product backlog, mana yang akan dikerjakan, kemudian mendetailkannya menjadi sprint backlog.
  2. Sprint Review, meeting setelah sprint telah selesai. Mereview pekerjaan yang dikerjakan selama sprint, mana saja sudah selesai, masih ada yang pending, atau masih on going untuk dilanjutkan ke sprint berikutnya. Atau sudah benar-benar done. Definisi done disini yang memutuskan adalah product owner. Benar-benar sudah selesai atau masih harus diperbaiki lagi.
  3. Sprint Retrospective, pertemuan diakhir sprint, setelah sprint review mengenai cara kerja dalam sprint, apakah sudah baik dan dipertahankan pada sprint selanjutnya, ataukah ada yang perlu diperbaiki, misalnya pola komunikasi antar team selama ini bagaimana, sudah bagus atau perlu ditingkatkan.
  4. Daily Scrum Meeting merupakan pertemuan setiap hari, setiap pagi sebelum mulai bekerja. Dihadiri semua team member, dipimpin oleh scrum master. Semua berdiri, diwaktu yang sama dan ditempat yang sama setiap harinya. Ada 3 pertanyaan yang harus dijawab oleh setiap team member, yaitu : ‘What did you do yesterday?’ ‘What will you do today?’ and ‘Is anything on your way?’; Yang perlu diingat, daily scrum ini bukanlah tempat problem solving. Pertemuan berlangsung hanya selama 10-15menit setiap pagi.

Scrum Artifacts

  1. Product Backlog adalah daftar kebutuhan sebuah system, ini dibuat oleh product owner, dan disusun berdasarkan prioritas pada setiap itemnya. Berupa story line, misal as a user, i want to log in, so i can access the web. Atau bisa berupa task based, misal : tambahkan validasi di setiap form, jika user tidak melakukan aktifitas selama 2 jam maka sistem akan otomatis log out.
  2. Sprint Backlog adalah subset dari product backlog item yang detailkan menjadi task-task untuk sebuah sprint yang dibuat oleh team member. Teriri dari nama task, siapa yang mengerjakan dan estimasi pekerjaan (dalam jam) Setiap item punya status dan harus diupdate setiap hari (not started, in progress, done).
  3. Chart Burndown merupakan grafik yang merepresentasikan pekerjaan yang telah selesai. Bisa berupa progress sprint, progress backlog, maupun release burndown chart. Dari grafik ini kita dapat melihat pekerjaan yang telah selesai, yang belum dikerjakan dan estimasi waktu yang tersisa.

Berikut gambaran Scrum activity :

scrum activity

scrum activity

Dari product backlog yang telah dibuat, kemudian kita membuat rencana sprint dari item-item yang ada di product bakclog yang kita sebut dengan sprint backlog. Berisi detail pekerjaan yang akan dilakukan, siapa yang akan mengerjakan,  stimasi lama pengerjaan, dan juga status pekerjaan (done, on going, atau not started). Sprint meeting dilakukan 2 sampai 4 minggu sekali, sedangkan dalam jalannya sprint, akan ada daily scrum meeting yang durasinya 20-15menit setiap pagi yang akan difasilitasi oleh Scrum Master. Dari hasil sprint ini kemudian akan terlihat pekerjaan mana saja yang sudah selesai, sehingga menghasilkan product increment.

Untuk lebih detailnya saya upload File .ppt tentang ini  di academia sih, bisa di download untuk teman-teman.. ada contoh-contoh backlog di scrum, juga ada sedikit review perbandingannya dengan waterfall dan spiral model.


Semoga bermanfaat ya teman-teman ^_^