WEBGL yazı dizisi-5 Ekrana üçgen, dörtgen çizdirme

Bu yazıda artık ilk 4 yazıda öğrenmemiz gereken şeyleri öğrendikten sonra birşeyler çizmeye başlayabiliriz. webgl ile ekrana bir kırmızı üçgen ve dörtgen çizimi şlemi yapacağız. Kaynak kodlara buradan ulaşabilirsiniz.

Kaynak kodu verdikten sonra biraz kodumuzu incelemeye geçelim.

gereksinimler

ilk olarak shader sınıfı ve matematik kütüphanesini import ediyorum. Webgl için gerekli matrix ve matematiksel işlemler için gl-matrix kütüphanesini kullandım. İsterseniz kaynak kodunu inceleyebilirsiniz. Uzun uzun matematik kodlarına girmeyeceğim.

import { CreateShaderProgram } from “../Shader/shader.js”
import { mat4, mat3, glMatrix} from “../lib/Math/gl-matrix.js”

gl parametrelerinin ayarlanması

Canvas ve shader programını oluşturduktan sonra gl objemi alıyorum. Daha sonra bazı gl kodları ile başlıyorum:

this.gl.viewport(0,0,this.canvas.width, this.canvas.height) // görüntü alanı 
                    //olarak kanvasın bütününü kullanacamızı belirtiyoruz
this.gl.enable(this.gl.DEPTH_TEST) // eğer derinlik oalrak üst üste gelen
                                   // bir pixel değeri varsa fragment shaderde 
                                   //işleneceğini ayarlıyor.
this.gl.clearColor(0.4689,0.5006,1,1) // arka fona verdiğim renk
this.gl.clear(this.gl.COLOR_BUFFER_BIT) // ayarlanan renk ile ekranı siler
this.gl.useProgram(this.shaderProgram) // shader kullnaımını set ediyorum.

Shader adresleri

Bu ksımdan sonra önceki shader yazılarından anlayacağımız üzere shaderden model matrix, position ve renk değişken adreslerini alıyorum:

this.vertexPos= this.gl.getAttribLocation(this.shaderProgram,"aVertexPosition")
this.ModelLoc = this.gl.getUniformLocation(this.shaderProgram,"uModelViewMatrix")
this.colorPos= this.gl.getUniformLocation(this.shaderProgram,"vColor")

Gene önceki yazılardan tanıdığımız bir kod vertexPos attribute adresini aktif ediyorum

this.gl.enableVertexAttribArray(this.vertexPos)

Model matrisi ve çizim

Sonraki adımda model düzlemimi belirleyen matrisi ayarlıyorum. Ben ortogonal yani dikey düzlem kullanacağım. dikey düzlemde perspektif olmaz. Dümdüz görürsünüz.
this.ModelMatrix = new Float32Array(16)
mat4.ortho(this.ModelMatrix,-2,2,-2,2,-2,2) // ilk iki sayı genişlik, sonraki yükseklik ve ensondaki derinliği ifade eder.
console.log(this.ModelMatrix);

Daha sonra çizim işlemi için vertex verileri ve bufferları dolduruyorum ve çizim yapıyorum.

var vertex =[
-0.5,-0.5,0,
-0.5, 0.5,0,
0.5,-0.5,0,
]

var vertexBuffer=this.FillBuffer(vertex)

this.gl.uniformMatrix4fv(this.ModelLoc, false, this.ModelMatrix)
this.gl.uniform4fv(this.colorPos, [1,0,0,1])

this.gl.bindBuffer(this.gl.ARRAY_BUFFER,vertexBuffer)
this.gl.vertexAttribPointer(this.vertexPos, 3, this.gl.FLOAT, false, 0 ,0)
this.gl.drawArrays(this.gl.TRIANGLES,0,3)

Ve sonuç biçok yazıdan sonraki sonuç:

webgl

WEBGL yazı dizisi-4 Vertex Shader ve Fragment Shader açıklama

Bu yazıda shaderlerden bahsedip sonra shader programla olan ilişkisini açıklayacağım. Daha sonaki yazılarda webgl kısmı ile ekrana birşeyler çizdirmeye başlayacağım. Vertex shader ve Fragment shader webgl tarafında çizim için çok gerekliler bu yüzden bu kısımları iyi öğrenmemiz gerekiyor. Çok hızlı bir süreç değil fazla şey bilmek gerekiyor ama bildikten sonra yapması eğlenceli.

Vertex Shader:

Öncelikle shader language yazısında kullandığım vertex shader kodundan açıklamaya başlayalım.

const vsSource = `
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

void main(void) {
gl_Position = uModelViewMatrix * vec4(aVertexPosition,1);
}
`;

yukarıdaki vertex shader kod parçacığında ilk olarak attribure değişkenleri olarak aVertexPosition, ve aVertexColor değişkenleri tanımlıyoruz bunlar attribute tipinde çünkü her vertexin kendine özel koordinat ve renk bilgisi var. Sonra sabit dışarıdan verdiğimiz uModelViewMatrix ve uProjectionMatrix 4×4 matrisleri var bunlarında tipi uniform yani dışarıdan biz tekar set etmediğimiz sürece aynı kalan değişkenler. Zaten bu değişken tiplerine önceki yazımda değinmiştim.

Peki yukarıdaki olay nedir? Model matris ile vertex vektörünü çarpıp cismin clip spacedeki yeni buluyoruz. yukarıdaki kodda uProjectionMatrix ile çarpmadım yani herhangi bir perspektife sahip değil. Eğer perspektif eklemek istiyorsak en başa uProjectionMatrix i çarpım olarak yazmamız gerekirdi.

Mesela yukarıdak kodda aVertexPosition vec3 tipinde yani 3 eksenli bir koordinat ama bu 2 eksenli de olabilirdi iki eksenli olsaydı yani vec2 aVertexPosition; o zaman çarpımda kullandığımız değer şu şekilde olacaktı *vec4(aVertexPosition,0,1)

 

Fragment shader :

Gene shader language yazımdaki fragment shader kodunu alacağım.

const fsSource = `
uniform lowp vec4 vColor;

void main(void) {
gl_FragColor = vColor;
}
`;

Burada ilk olarak dikkat ettiğimiz vColor değişkeninin lowp limitinde olması bunun nedeni renk değeri 0 ile 1 arasında oluyor. yani beyaz vec3(1,1,1) rengi opaklığı da eklersek vec4(1,1,1,1) şeklinde olur. Bu renklerde de çok çok büyük sayılar kullanmıyorsak en düşük limitler işimi çok rahatlıkla görecektir. Buradaki shader kodlar en sade haliyle mesela fragment shaderde şu an texture eklemedik. Çizdiğimiz şeye sadece renk veriyoruz.

 

Shader Program:

Shader kodları bu şekilde tanımlandıktan sonra gl ile vertex shader ve fragment shader nesneleri oluşturuluyor.

const vertShader = gl.createShader(gl.VERTEX_SHADER)
const fragShader = gl.createShader(gl.FRAGMENT_SHADER)

daha sonra bu shaderlere yukarıdaki kaynak kodlar gösterilip bu kodlar bu nesneler için derleniyor.

gl.shaderSource(vertShader,vsSource)
gl.compileShader(vertShader)

gl.shaderSource(fragShader,fsSource)
gl.compileShader(fragShader)

Bu adımdan sonra gl ile gpu da koşacak programımızı oluşturuyoruz.

const shaderProgram = gl.createProgram()

Ve oluşturulan bu programa shaderer tutuşturulup vertex shader ve fragment shader birbirine bağlanıyor.

gl.attachShader(shaderProgram, vertShader)
gl.attachShader(shaderProgram, fragShader)
gl.linkProgram(shaderProgram)

Yani shader programı yaratılırken hangi shaderleri derleyip hangisinin birbiriyle bağlanacağına biz karar veriyoruz. Program GPU da koşuyor ama yönetim bizde oluyor. Bir sonraki yazıda artık ekrana birşeyler çizdireceğim. Tabi bu aşamada da shader programına hangi değişkenlere hangi değerlerin gideceği konusunda bizim yardım etmemiz gerekiyor bu adımları da görmüş olacağız.

WEbGL yazı dizisi-3 GLSL değişkenler ve yazım kuralları nedir?

Önceki yazımda webgl e hızlı bir giriş yaptım ve bu yazımda GLSL değişkenler ve yazımı üzerinde duracağım.Bu değişkenler ve kurallar önemli çünkü bunları bilirsek daha karmaşık shaderler üretebiliriz. Shaderimizin içinde sadece main fonksiyonu olmak zoruna değil yeni fonksiyonlar ekleyip bunları çağırabiliriz.

Veri tipleri:

Standart bildiğimiz int, float, bool, void tiplerinin yanında grafik kartına özel başka değişkenler var bunlar:
mat2(2×2) mat3(3×3) mat4(4×4) matris(iki boyutlu dizi) oluşturmak için kullanılıyor.
vec2, vec3, vec4 float point vektör(tek boyutlu dizi) oluşturmak için kullanılıyor.
bvec2, bvec3, bvec4 boolean değerleri tutan vektörler oluşturmak içni kullanılıyor.
ivec2, ivec3, ivec4 işaretli int değerler tutan vektörler oluşturmak için kullanılıyor.
sampler2D texture(doku) a ulaşmak için kullanılan değer.
samplerCube texture ile alakalı bir değer bunu kullanmadım.

3 adet niteleyicimiz var bunlar:

Attribure:

Shaderin her çalışmasında her vertex için kullanılan değişkendir, değeri her draw işleminde değişir.Yani hesaplamalrda tekrar tekrar kullandığımız değişkenlerdir. Örneğin önceki yazıdaki :

ttribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

değişkenleri gibi. Bu değişkenler her vertex için kullanılır ve her seferinde değer o vertex için hesaplanır.

Uniform:

Bu değişkenler sabit değere sahiptir shader içinde sadece okuma özelliği olan değişkenlerdir dışarıdan bizim müdahalemiz ile değişebilir ancak shader programı bu değeri değiştiremez. Bir kere atadığımızda hep o değer geçerli olur. Örneğin önceki yazıdaki fragment shader deki

uniform lowp vec4 vColor; //lowp ve vec4 aşağıda açıklanacak

değişkeni gibi. Bu değişkene değer atarken şu şekilde atadığımızda hep o değişken sabit kalır

gl.uniform4fv([0,0,255,1]) // daha sonra açıklayacağım

Varying:

Vertex shader ve Fragment shader arasındaki bağlantılı olan değişkenleri ifade eder. Örneğin vertex shader deki bir değişkeni fragment shader de kullanmak istediğimizde o değişkeni varying olarak belirtmemiz gerekir. Örneğin

//vertex shader da
uniform vec4 baskaDeger;
varying vec4 vector;
void main(void){
vector = baskaDeger;
}

//fragment shader da
varying vec4 vector;
void main(void){
//baskaDeger değişkenini değeri burada vector değişkeninden kullanılabilir.
}

Sayı limitleri:

Shader lerde kullandığımız sayı değerlerine bellirli limitler ekleyerek istediğimiz aralıkta sayılar üretilmesini sağlayabiliriz. Tabi bu aralığı vermezsek default aralıkta program gene çalışır.Ancak ayar yapma gereği duyduğumuzda bunları kullanabiliriz.

Bu aralıklar highp, mediump ve lowp olarak adlandırılıyor. Aşağıdaki grafikte aralıkları görebilirsiniz.

GLSL sayı limtleri

WEBGL yazı dizisi-2 Shader Language

Shader language yada OpenGL SL(Shader Language) yada GLSL, opengl in yeni sürümlerinde kullanılan grafik kartı üzerinde küçük programcıklar çalıştırmaya yarayan C diline benzer yazım kuralları olan bir dildir. WEBgl GLSL kullanır. GLSL ile artık grafik kartında işlenecek koda daha fazla müdehale edebiliyoruz ve işlem yoğunluğu gerektiren kısımları grafik kartına yıkarak daha hızlı bir şekilde yapabiliyoruz.

Ben WEBgl yazı dizisi oluşturduğum için WEBgl ile kullanım biçimine göre anlatımımı yapacağım.

Vertex Shader:

Grafik kartına her vertex i nasıl işleyeceği ve bu vertexler için gerekli matematiksel işlemleri(matris çarpımı) nasıl yapacağını belirttiğimiz yer. Temel olarak projeksiyon matris, model matris ve vertex vektörünü çarparak bir uzay elde edildiği kısım.

Fragment Shader:

Fragment Shader ise her pixel için herekli renk veya texture işlemlerinin belirtildiği yer.

Aşağıdaki resimde nasıl olduğuna dair bir resim paylaşıyorum:

fragment shader,vertex shader
fragment shader,vertex shader

Aşağıdaki örnekte ES6 ile yazığım bir classta shaderleri nasıl oluşturduğum yer alıyor, bunları örnek olarak koyuyorum ileriki yazılarda Vertex Shader ve Fragment Shader e daha detaylıca değineceğim.:


class CreateShaderProgram {
  constructor() {

  }
  CreateShader(gl){

    const vsSource = `
      attribute vec3 aVertexPosition;
      attribute vec4 aVertexColor;

      uniform mat4 uModelViewMatrix;
      uniform mat4 uProjectionMatrix;

      void main(void) {
        gl_Position = uModelViewMatrix * vec4(aVertexPosition,1);
      }
      `;

    const vertShader = gl.createShader(gl.VERTEX_SHADER)

    gl.shaderSource(vertShader,vsSource)

    gl.compileShader(vertShader)


    const fsSource = `
      uniform lowp vec4 vColor;

      void main(void) {
        gl_FragColor = vColor;
      }
      `;

    const fragShader = gl.createShader(gl.FRAGMENT_SHADER)

    gl.shaderSource(fragShader,fsSource)

    gl.compileShader(fragShader)

    const shaderProgram = gl.createProgram()
    gl.attachShader(shaderProgram, vertShader)
    gl.attachShader(shaderProgram, fragShader)
    gl.linkProgram(shaderProgram)

    return shaderProgram
  }
}

export { CreateShaderProgram }

Webpack katili Parcel nedir ?

Neden parcel ?

 

Günümüzde web uygulamaları için geniş özelliklere sahip birçok demetleyici bulunmaktadır, bunların en çok kullanılanları webpack ve browserify da dahil.

Bir çok demetleyici konfigurasyon ve eklentiler ile kurulur ve sadece birşeylerin çalışması için 500 satırdan fazla satır sayısı olan konfigurasyon doslayarı genellikle var olan şeyler. Bu konfigurasyonlar sadece sıkıcı ve zaman harcayan şeyler değil ayrıca her uygulama için çoğaltmak ve doğru ayarı yapmak da zor. Sıklıkla ürün kısmına geçmede alt optimizasyonların gerektiği bir hal alabiliyor. Parcel sıfır configurasyon ayarı olacak şekilde tasarlanmıştır. SAdece giriş noktanızı belirtmeniz yeterli o geri kalanı doğru bir şekilde yapacaktır.

Var olan demetleyicilerin bir olumsuz yanı da çok yavaş olmalarıdır. Geliştirme sürecinde fazlaca değişiklierin yapılması çok fazla bağımlılığı ve fazla dosyaların olduğu büyük uygulamalarda demetleme sürecinin dakikalar alması acı verici bir durumdur. Parcel modern çok çekirdekli işlemcilerden yaralanarak kodunuzu paralel işlemlerle derler. Sonuç olarak ilk demetlemede büyük bir hız artışı olur. Ayrıca her dosya için dosya sistemi önbelleğine sahiptir, böylece ileriki başlangıçlarda da hızlıdır.

Sonuç olarak var olan demetleyiciler string yükleyiciler/dönüştürücüler üzerine kurulmuştur. Bir stringi alırlar parse ederler bazı dönüşümlerden eçirerek tekrar kod üretirler.Bu da bir dosya için fazla sayıdadönüşüm ve kod üretme anlamına gelir, pek etkili bir yol değildir bunu aksine Parcel her dosya için bir kere parse eder, birçok kez dönüşüm uygular ve birçok dönüşümden geçirerek bir defa kod üretir.

 

Yükelemek için :

yarn global add parcel-bundler

Başlangıç noktası göstermek için :

parcel index.html

Bu kadar artık geliştirme işlemine başlayabiliriz.

 

Ana sayfası: https://parceljs.org/

Github sayfası: https://github.com/parcel-bundler/parcel

Kullanımı video:

 

 

Webpack nedir?

Webpack benim de yeni kullanmaya başladığım tarayıcı tarafında yazılım geliştirikenkaranlıkta kalan çoğu yerleri aydınlatan bir paket.

Webpack aslında es6 ile npm paketleri kullanarak yazdığımız projelerde bize paketlenmiş tek bir .js çıktısı veren bir araçtır. Ayrıca dışarıdan eklediğimiz resimler, dosyalar da dahil bize hepsini güzelce derleyip toplayarak çıktı verir.

Hatta es6 ve Commonjs combine olsada bize toplayıp verebiliyor Ayrıca tarayıcınızın desteklemediği şeyleri de çevirebilir.

Şimdi webpack kurulumuna başlayalım:

Önce babel gereksinimlerimi kuralım:
npm install babel-cli babel-preset-es2015 --save-dev
npm install babel-core --save-dev
npm install babel-loader --save -dev

veya

yarn add babel-core -dev
yarn add babel-loader -dev

.babel.rc dosyamızı ayarlayalım:

{
"presets": ["es2015"]
}
webpack ve webpack-cli paketlerimizi yükleyelim:
npm install webpack webpack-cli --save-dev

veya

yarn add webpack webpack-cli --dev

html pluginimizi yükleyelim bu sayede derlediğimizde index.html dosyasınıda oluşturacak tek yapmamız gereken o dosyayı açmak olacak:

npm install --save-dev html-webpack-plugin
yarn add html-webpack-plugin --dev

şimdi

webpack.config.js dosyamızı ayarlayalım:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},

//bazı durumlarda bir dosya çok büyük boyutlarda olduğu için bizden ayırmamızı
// istiyor performans açısından problem olmaması için o zaman aşağıdaki şekilde
// düzenlememiz gerekir:
entry: {
index:"./src/index.js",
ikinci: "./src/ikinci.js",
ücüncü: "./src/ucuncu.js"
},

mode: 'development', // ürünü bitirdiğimizde production ayarı ile bundle ediyoruz şimdilik development modunda

//babel loaderimizi ekleyelim:

module:{
rules:[
{
test: /\.js$/,
exclude: /(node_modules | bower_components)/,
use:{
loader: "babel-loader",
options:{
presets:['es2015']
}
},
}
]
},

output: {
filename:[name]bundle.js,
path: path.resolve(__dist, 'dist'),
//publicPath:'/' // bu kısım htaccses ayarı ile .js dosyalarının kaynağını belirtmek için kullanabilirsiniz
},

plugins:[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ title: "Output Managment"}) // bu kısım html sayfamızın tittlesini ayarlıyor.
]

};

Buraya kadar olan kısımla package.json dosyamıza :

"scripts": {
"wb": "webpack"
}

diyerek konsoldan

npm run wb

dediğimizde bize bundlemizi vermiş olacak.

webpack-dev-server kuralumu yapalım:

Şimdi bir de geliştirme sürecinde sürekli bundle etmemek için webpack-dev-server kurmamız gerekiyor böylece her değişiklikiği kaydettiğimizde bir localhost un bir portundan değişikliğimizle sayfamız sürekli yenilenecek.

npm install webpack-dev-server --save-dev
yarn add webpack-dev-server -dev

daha sonra webpack.config.js dosyamıza plugins ten sonra ayarlarımız ekleyelim

devServer:{
contentBase: parh.join(__dirname, "build")
compress: true,
port: 9000,
//index: "index.html" // html dosyanızın yolunu verebilirsiniz.
}

şimdi tekrar package.json dosyamızda scripts kısmına komutumuzu ekleyelim

"scripts": {
"wb": "webpack",
"wd": "webpack-dev-server"
}

komut satırına npm run wd yazdığımızda projemiz localhost:9000/ de bize sunulmuş olarak karşımıza çıkacak.
publicpath kısmını değiştirerek başka yollarda verebilirsiniz o zaman localhost:9000/ilkdeneme gibi linkler elde edebilirsiniz. Benim anlatacaklarım şimdilik bu kadar daha ayrıntılı bakmak isterseniz webpackin sitesinden dökümanlarını inceleyebilirsiniz.

 

Not: yukarıdaki işlemler:

"webpack": "^4.4.1",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
"babel-loader": "^7.1.4"
"babel-core": "^6.26"

sürümleri ile gerçekleştirilmiştir.

Bu kadar anlatımdan sonra sizler için:

 
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }

özelliklere sahip ayarlanmış bir webpack projesi hazırladım  sadece başlangıç için. Sadece css ve img kullnamak isterseniz onlar için loaderleri ayarlamanız gerekiyor. İki adet config var biri develpment, biri build için. WEbpack Proje Başlangıç

Angular2 Components ve Templates

Angular2 Companents:

angular2 Components
Components

Angular2 versiyonunda, Component view(görünüm) olarak adlandırdığımız ekran yamasını kontrol eder.

Örneğin şu görünümler componentler tarafından kontrol edilir:
-Navigasyon bağlantıları olan root uygulama,
-Kahraman listesi.
-Kahraman editörü.

Component uygulama mantığı -görünümün neyi desteteklediği- class ların içinde tanımlanır. Class lar görünümlerle API nin özellikleri veya metodları ile etkileşime geçer.

 

Örneğin HeroListComponenet bir hero metoduna sahip ve metod servisten alınan hero dizisini geri döndürüyor. HorolistComponent ayrıca selectHero() motoduna sahiptir bu metod kullanılarak kullanıcı listeden seçilen bir kahramana tıkladığında selectedHero özelliği ile ayarlar.

angular2 components
Components

Angular kullanıcı uygulamadayken componentleri create, update ve destroetme özelliğine sahiptir. Uygulamanız opsiyonel yaşamdöngüsü(lifecycle) kancalarına göre her anda bir aksiyon alabilir, yukarıda resimde belirtilen ngOnInit() gibi.

 

Templates:

angular2 templates
Templates
angular2 template
Template

Bir componentin görünümünü(view) template(şablon) ile tanımlarız. Template Angular a nasıl render edeceğini söyleyen HTML in formudur.

Bir template normal HTML gibi gözükür ama ufak tefek farklilıkları vardır.

HeroListComponent:
(resim)

Tipik <h>, <p> gibi HTML elementlerini kullanılmasına rağmen ayrıca bazı değişiklikler de vardır: *ngFor, {{hero.name}}, (click), [hero] ve <hero-detail> gibi Angular syntaxını kullanırlar.

Son satırdaki <hero-detail> tagı yeni bir component -HeroDetailComponent- hazırlayan özel bir tagdır.

HeroDetailComponent daha önce incelediğimiz HeroListComponent componentinden farklı bir componenttir. HeroDetailComponent (kodu gösterilmedi) kullanıcının HeroListComponent ile sunulmuş kahraman listesinden kullanıcının seçmiş olduğu belli kahramanlar hakkında bilgileri gösteriyor. HeroDetailComponent, HeroListComponent in çucuğudur.

angular2 component tree
Component tree

<hero-detail> tagının normal html tagları arasında nasıl kolayca yer edindiğine dikkat edin. Özel componentler HTML ile aynı layoutta sorunsuz bir şekilde karıştırılabilir.

Önceki yazı <<-

 

Angular2 Moduller

Moduller:

Angular Module
Angular Module

Angular uygulamaları modülerdir ve NgModules (bir uygulamanın koordineli bloklar halinde düzenlenmesine yardımcı olur) adında kendi modülerlik sistemine sahiptir. NgModules büyük önem taşır daha ayrıntılı bilgiyi bu sayfadan(https://angular.io/guide/ngmodule) bulabilirsiniz.

Her angular uygulaması alışılmış olarak AppModule isminde, root module olan en az bir NgModule sınıfı içerir.

Root module küçük bir uygulamadaki tek modül olabilse de, çoğu uygulamanın daha birçok özellikte modülü vardır; her biri, bir uygulama alanına, iş akışına veya yakından ilgili bir dizi özellik için ayrılmış bir kod bloğu vardır.

NgModule, bir kök veya özellik olsun, @NgModule dekoratörlü bir sınıftır.

NgModule modül özelliklerini açıklayan tek bir meta data objesi alan bir dekoratör fonksiyonudur. En önemli özellikler şunlardır:

 

Declarations: view clasları da bu modüle aittir. Angular 3 view classına sahiptir bunlar: components, directives, pipes.

Exports: declarationların alt kümesi olarak modüllerin templatelerinde görülebilir veya kulanılabilir hale gelirler.

İmports: Başka modüllerin export edilmiş classlarına, component temlatesi tarafından ihtiyaç duyulduğunda burada tanımlanır.

Providers: Servis sağlayıcıları olarak adlandırılabilir, bu modül servislerin global bir koleksiyon olmasını sağlar, bu sayede uygulamanın her yerinden ulaşılabilir hale gelirler.

Bootstrap: Ana uygulama görünümüne sahip root componenti belirtir. Diğer bütün uygulama görünümlerini barındırır. bootstrap özelliği sadece root componentine atanır.

Örnek bir root module:

root module
root module

Yukarıdaki örnekte sadece export kısmının nasıl çalıştığını göstermek için kullanıldı. Root modulünün herhangi birşey export etmesine gerek yok çünkü diğer modüllerin root modülünden birşey import etmesine ihtiyacı yok.

Bir uygulama root modülünün önyükleme yapılması ile çalıştırılır. main.ts içerisinde şu şekilde görebilirsiniz:

bootstrapping module
bootstrapping module

NgModules vs JAvaScript Modules:

NgModule (@NgModule ile dekore edilmiş bir sınıf) Anguların temel bir özelliğidir.

Javascript obje kolaksiyonlarını yönetmek için kendi modül yönetim sistemine sahiptir. NgModule sisteminden tamamen ayrı ve ilişkisi yoktur.

Javascripte Her dosya bir modüldür ve bu module ait bütün objeler bu dosyada tanımlanır. Modülde bazı sınıflar public anlamına gelen “export” anahtarı ile işaretlenir. Diğer javascript modulleri başka sınıfların public sınıflarına ulaşmak için “import” ifadelerini kullanır.

Js import export
Js import export

Angular Libraries:

Angular2 library
Angular2 library

Angular, Javascript modülleri koleksiyonu olarak düşünülebilir.

Her angular kütüphanesi “@angular” öneki ile başlar.

npm paket yöneticisi ile indirip javascript “import” ifadesi ile onları ekleyebiliriz.

Örneğin Angular ın “Component” decoratörünü “@angular/core” kütüphanesinden şöyle ekleyebiliriz:

js import
js import

Bunun yanında Javascript import ifadelerini kullanarak NgModules de ekleyebiliriz:

js import
js import

Yukarıdaki örnek root modülünde “Browsermodule” kısmını javascript import ifadesi ile eklemiştik, Bu metariale ulaşmak için @ngModule de import metadatasına şu şekilde eklememiz gerekir:

Ng module import
Ng module import

Bu şekilde hem angular hemde Javascript import sistemini kullanmış olduk.

Önceki yazı <<-

->> Sonraki yazı

Kali Linux Nedir ?

Kali linux:

Kali Linux sızmatesti ve siber güvenlik uzmanlarına hitap eden *Debian temelli bir Linux dağıtımıdır. Kali bilgi güvenliği görevlilerine yönelik yüzlerce çeşit araç içerir. Örneğin sızma testleri, güvenlik araştırmaları, adli bilişim, tersine mühendislik gibi. Dağıtımın geliştirilmesi, desteklenmesi ve bakımı önemli bir bilgi güvenliği eğitimi şirketi olan *Offensive Security tarafından gerçekleştirilmektedir.

Kendinden Önceki Sürüm olan  *BackTrack Linux’un baştan aşağıya yeniden derlenmesi ile Debian geliştirme standartlarına bağlı kalınarak 13 Mart 2013’te yayınlanmıştır.

Kali Linux
Kali Linux

Sistem Hakkında:

600 den fazla sızma testi aracı içerir: BackTrack’teki araçların gözden geçirilmesinden sonra çok sayıda araç kaldırıldı basitçe kaldırılan araçlar: çalışmayan araçlar, aynı fonksiyonelliğe sahip yada birbirini tekrar edenlerden oluşuyorlar. Kali nin içerdiği araçları *Kali Tools sitesinden görebilirsiniz.

Ücretsizdir ve daima öyle olacaktır: BackTrack gibi bedavadır hiçbir zaman Kali Linux için ödeme yapmak zorunda kalmayacaksınız.

Açık kaynak git ağacı: Kali Linux için açık kaynak geliştirilme taahhüt edilmektedir. *Geliştirme ağacı herkesin görebilmesi için açıktır. Kali Linux a giren her koda herkes ulaşabilir veya isteyen herkes bu kodlarda değişiklik yapabilir, *pakeleri kendi özel ihtiyaçlarına göre tekrar derleyebilir.

FHS(DSH) uyumluluğu: Kali Linux *Dosya Sistemi Standardı’na(Filesystem Hierarchy Standard) bağlı kalmıştır, Linux kullanıcılarının kolayca binaryler, destek dosyalar ve kütüphaneleri tutmasına izin verir.

Geniş aralıkta kablosuz aygıt desteği: Linux dağıtımları ile birleşme noktalarından biri de desteklediği kablosuz ağ arayüzleridir. Kali Linux derlenirken mümkün olduğunca çok sayıda kablosuz ağ aygıtını destekleyecek şekilde ayarlandı. Bu sayede kullanıcılara sayısız USB ve kablosuz cihazı geniş çeşitlilikte donanımın uygumlu biçimde çalıştırabilmesine olanak sağlar.

Özel kernel, enjeksiyon için yamalı: Sızma testçileri olarak, geliştirici takımının sıklıkla kablosuz değerlendirmeler yapması gerekir, bu yüzden kernel son enjeksiyon yamalarını içerir.

Güvenli bir ortamda geliştirme: Kali Linux takımı az sayıda ve güvenilir kişilerden oluşur. Bu kişiler paketleri işlemeve depolarla etkileşim gib işleri çoklu güvenlik protokollerini uygulayarak yapar.

GPG imzalı paket ve depolar: Kali Linuxtaki her paket paketi derleyen yada işleyen her geliştirici birey tarafından imzalanır hemde sonradan depoya geçtiğinde de imzalama işlemi olur.

Çoklu Dil desteği: Sızma araçları İngilizce yazılma eğiliminde olsada, daha çok kullanıcının kendi ana dilinde araçları kendi işleri için kullanmasını sağlamak adına doğru çoklu dil desteği sağlanmıştır.

Tamamen özelleştirilebilir: Herkesin aynı tasatım anlayışında olmayacağını kabul ederek maceraperest kullanıcılar için çekirdeğe kadar *Kali Linux özelleştirme mümkün kılınmış.

ARMEL ve ARMHF desteği: ARM tabanlı single-board sistemler Raspberry Pi, BeagleBone Black ve diğer birçoğu yaygınlaşmaya ve ucuz hale gelmesinden beri  *Kali’nin Arm desteği ARMEL ve ARMHF için tam kapasite çalışma gerçekleştiriliyor. Kali Linux *geniş aralıkta ARM cihazlarını destekler ve ARM depoları ana hat depolar ile entegredir.
Yani ARM için güncellenen bir araç geri kalan diğer dağımlarda da güncellenir.

Kali Linux sızma testi uzmanları için özel olarak yapılmıştır. Bu nedenle geri kalan bütün dökümanlar genel olarak Linux işletim sistemi hakkında ön bilgiye, yatkınlığa sahip olduğunuzu varsayar.

Kaynak

Angular2 nedir?

Angular2 Mimarisi:

Bu yazı dizisinde kaynak olarak Angular2 quickstart dökümanından çevirerek ilerleyeceğim. versiyon 2 ile birlikte yapısal bir değişkliğe gidildiği için devamında angular olarak da bahsedebilirim artık birinci sürümün pek bir önemi yok. Çevirmeler bitikten sonra kod örneklerine de geçebilirim fırsat oldukça bu şekilde ilerleme yapacağım. Bu yazı dizisinde amacım çok üstünkörü değil temelleriyle birlikte anlatmaya çalışmak. Bir şeyi ne kadar temelden öğrenirseniz o kadar faydalı olur.  Hadi temelden angular nedir öğrenmeye başlayalım:

Angular client uygulamaları yapmak için HTML ve Javascript yada Javascripti derleyen bir dil olan TypeScript(classlar oluşturarak daha rahat ve daha az karmaşık js kodu yazmamızı sağlar .ts uzantılıdır derlendiğinde normal javascript koduna dönüşür.) i kullanan bir frameworktür.

Angular frameworkü bazı temel kütüphaneler yada seçime bağlı kütühanelerden oluşur.

Angular uygulamaları yazılırken HTML *tema parçalarını(templates) Anglularize olmuş işaretlerle oluşturulur, bu temaları kontrol etmek için *companent sınıfları(class) yapılır, *servislerde uygulama mantığı eklenir.

Daha sonra uygulama onyükleyici(bootstrapping) root modülü tarafından çalıştırılır. Angular devreye girer ve uygulama tarayıcıda tarayıcıda sağlamış olduğunuz talimatlar doğrultusunda kullanıcıdan yanıt bekler.

 

Angular2 Mimari
Angular2

->> devam yazısı Modüller ve diğerleri

Sözlük sitelerinin internet ortamını kirletmesi

İnternet ortamında sosyal medya devrimi hayatta kalabilen az sayıda mecralardan biride sözlük diye tabir edilen siteler. Burada daha kolay bir biçimde içerik girebiliyoruz, çok fazla bir tartışma ortamından çok içerik üretilen bir ortam.

Kutsal bilgi kaynağı mı çöplük mü ?

Benim şahsi görüşüm sözlük sitelerinin pek bir yararlı içeriğe sahip olmadığı yönünde bu yüzden pek kullanmak istemiyorum. En ünlüsü ekşi sözlükte çok bir kaliteli içerik olduğunu zannetmiyorum. Tamam her türden insan var belli bir ifade özgürlüğü var bunlar güzel şeyler ama içerik üreten insanlar pek de sözlük derecesinde içerik üretebilen kişiler değil. Mesela şu an gündem konusuna baktığınızda kaliteli bir içerik göremezsiniz genelde sistemi eleştiren  ya toplum şöyle böyle diyenler ya siyasi görüş bildiren ya birlerine nefret söyleminde bulunanların olduğu bir ortam. Bunun kime ne faydası var ??

 

Orada vakit geçiren bir insana bu içerikler nasıl bir fayda sağlayabilir ? Kutsal bilgi kaynağı sloganı içi boş bir laf mı ? Bir kişiye sanal bir yazar sıfatı eklendiğinde o insan aniden nirvanaya mı ulaşıyor ? O insan aydın insan mı olmuş oluyor ? Tabiki hayır. Lüten bunları bir düşünün daha iyi kaliteli bir internet ortamına sahip olabiliriz. Bu kadar kirli bir ortam olmasına gerek yok.

Object Storage nedir ?

Object storage çok büyük veriler için kullanılan bir depolama sistemidir.  Tanımına girmeden önce block storage ve file systems hakkında bilgi kısa bilgiler:

BLOCK STORAGE

Block Storage ın en yaygın örnekleri SAN ISCSI, ve yerel disklerdir.Bir Block Storage birimi doğrudan işletim sistemine bağlıdır ve etkileşimler genellikle dosya sisteminin parametreleriyle birlikte gerçekleşir, ayrıca bunula birlikte blok aygıtının doğrudan byte seviyesinde veriye ulaşması da mümkündür. Block Storage bütün storage tiplerinde en alt seviye olandır, Byte seviyesinde veriye uygun değişimin yapılmasına izin verir. Fazla random I/O gerektiren ve verinin sadece belli bir parçasına erişim gerektiren uygulamalarda kullanışlıdır.

FILE STORAGE

File storage ‘ın en yaygın örnekleri NAS lardır. Dosya Depolama işletim sistemi ve NAS cihazı üzerinde yatan dosya sistemi arasında bir soyutlama katmanı gibi davranan bir ağ dosya sistemi kullanımını gerektirir. İŞletim sistemi depolamayı lokal dosyasistemi gibi görür ama aslında depolamanın bulunduğu yere doğrudan ileitşim kuramaz. İşletim sistemi komutları ağ dosya sistemi tarafından yorumlanır ve temel tabaka dosya sisteminin komutlarına çevirir. Farklı işletim sistemleri birbirini desteklemese dahi temel tabaka dosya sistemi sayesinde birbirleriyle düzgün bir şekile iletişim kurabildikleri için birden fazla makinenin uzak server de aynı içerğe ulaşmasını sağlar.

OBJECT STORAGE

Object storage’ın block storageden farkı işletim sisteminin uygulama seviyesine dosya sistemi üzerinden ulaşması yerine api üzerinden uygulama seviyesine ulaşmasıdır.

Öncelikle Object storage doğrudan işletim sistemi tarafından ulaşılabilir değildir. Lokal ya da uzak dosya sistemleri gibi değildir. Bunun yerine uygulama seviyesine API üzerinden etkileşim gerçekleştirir. Block storage ve File Storage işletim sistemi tarafından kullanılmak üzere tasarlanmıştır, Object storage ise uygulamalarınız tarafından kullanılmak üzre tasarlanmıştır.

Bunun birkaç anlamı vardır:

1. Objelerle etkileşim bütünseldir. Başka bir deyişle byte-level etkileşim mümkün değildir. Bunun yerine tüm objeler depolanabilir yada geri alınabilir. Not olarak bazı uygulamalarda bir objenin aralıklarına ulaşmak mümkündür ama low level etkileşim Block/File Storage ile karşılaştırıldığında çok limitlidir.

2. Etkileşim tek bir API endpointinden meydana gelir. Bu karmaşık LUN haritalama, depolama, ağ topolojileri vs. uygulama temel tasarımından çıkarılmasını sağlar. Bu ayrıca depolama sistemine yapılabilecek saldırı olanalaklarını da büyük ölçüde azaltır. Yalnızca HTTP/HTTPS API si ve servis sağlayıcı API fonksiyonları kullanılabilir.

3. Dosya Sistemi seviyesindeki araçlar (örneğin POSIX araçları) objelerde doğrudan etkileşemezler. Bu özelliği taklit etmek için bazı FUSE driverler vardır fakat bu kullanımda Object Storage in performans karakteristiği ve özellikleri idealden uzaklaşır.

Dizin ağacı yoktur (dizin ağacı yerine container kullanımı):

ikinci olarak, Object storage esnek bir yapı kullanır, iç içe dizin ağaçları yerine objeleri containerlerde depolar. object storage ın birçok gerçekleştiriminde dizini yapsını taklit eder ve hiyerarşinin bir yanılsımasını verir ama aslında temel depolama esnektir. Bu object storageın büyük oranda ölçeklenebilir olmasını sağlayan başka bir özelliğidir: büyük performans sorunlarından biri de genel olarak bir kez gösterimde on milyonlarca dosyayı dosya sisteminin elemesidir, object storage büyük miktarda dizin metadatasının izinin tutulmasını yük olmaktan çıkarır.

Metadata objeler ile birlikte:

Object storage ın diger depolama sistemlerinden bir farkı da meta dataların ayrı bir node yerine direkt olarak objelerde yer almasıdır. Bu çok kullanışlıdır çünkü depolama platformunda genelde onlarca yada yüzlerce PB boyuntunda data olması arzu edilir bu da geleneksel geleneksel depolama elamanlarının işleyebileceği ölçekten çok daha büyük işlemleri içerir.

Örneğin bir kütüphanedeki bütün kitapları tek bir depolama platformunda depolamak istiyoruz. Kitap içeriğine ek olarak metadataları da saklamak istiyoruz. yazar, basım tarihi, yayıncı, ISBN kodu, telif hakalrı vs. Bu data aralığı birkaç KB den her obje için birkaç MB seviyelerine ulaşır. Geleneksel olarak bütün bilgiler bir ilişkisel veritabanında tutulmalı ve bilgi ve objeler arasında ilişki kurabilecek bir uygulama olmalı. 35 milyon ve daha büyük sayılarda objelerde geleneksel depolama yöntemleriyle bu işlemi yapmak büyük bir sorun teşkil etmektedir. Object storage ölçeklendirme sorunu yoktur, veriler objelerle birliktedir ve tek bir apı çağrısı ile ilişkisel veritabanı ile ilişki kurmaya gerek kalmadan alınabilir.

Ölçeklenebilirlik:

Object storage özelliklerinin küçük datalar için pek kullanışlı değildir. Ancak data boyutu yüzlerce TB ve PB seviyelerine geldiğinde ve bununda ötesinde, bu özellikler kullanışlı hale gelir ve hemen hemen her boyutta data için yatay ölçeklenebilirlik sağlar.

Dayanıklılık:

Birçok object storage tasarımı içni gerekn dayanıklılık seviyesi geleneksel depolama ile karşılaştırıldıgında oldukça yüksektir.(99.99999% den 99.999999999%, 100 kat daha fazla dayanıklı ). Object storage dosya tutarlılığı doğrulamak, hatalı diskleri işlemek, bit-rot, sunucu ve cabitnet hataları vs. için kendi iç makanizmasına sahiptir. Bu özellikler sisteme dosyaları kendiliğinden koplayamasına izin verir ve ihtiyaç olduğunda gereken sayıda data kopyasının elde edilmesini sağlar. Bu sayede oldukça yüksek oranda dayanıklılık ve kullanşlılık sağlar.

Maliyet:

Genelde aylık bir GB için peni seviyesinde maliyeti vardır. Taperlerle aynı seviyede maliyete sahiptir ve tapelerden daha dayanıklıdır ve sağladığı performans ile bulut depolama platformları için idealdir.

Özetle object storage çok büyük veriler için kullnaılabilir bri yapıdadır. Örneğin video, sesi internet içeriği gibi büyük sayıda(PB lar seviyesinde) datanın tutulmasını kolaylaştırır.

Daha iyi anlaşılması için birkaç görsel:

object1

object3

object4 obect3 object5 object6

Kaynak

Save

Save

duckduckgo ile internette gizli arama yapmak

duckduckgo
gizli arama  duckduckgo

 

İnternette gizli arama yapmak için kullanabileceğimiz bir tarayıcı var duckduckgo.com bu yazıda biraz bu tarayıcı hakkında bilgi vereceğim kendisini yaklaşık bir yıldır kullanıyorum ve menunum diyebilirim.

Arama sızıntısı nedir?

Diğer arama motorlarında birşey aradığınızda ve linke tıkladığınızda arama terimleriniz site ye gönderilir.

Örneğin, özel birşey aradığınızda bu gizli bilgiyi yalnızca arama motorunuzla değil, aramada bulduğunuz linke tıkladığınızda site ile de paylaşırsınız.

Ayrıca bir siteyi ziyaret ettiğniizde bilgisayarınız otomatik olarak tarayıcı bilgileri ve ip adresinizi gönderir. Bu bilgi sizi kimliklendirmede kullanılabilir.

Duckduckgo varsayılan olarak arama sızıntısını önler. Bir terim aradığınızda sizi o siteye yönlerdirirken arama teriminizi o siteye göndermez. Siteler sizin onları ziyaret ettiğinizi bilir ancak ne arayarak siteye ulaştığınızı bilmezler.

Duckduckgo gibi bazı arama motroları HTTPS in Kullanıcıların arama terimini sitelere yollamayan şifreli sürümünü kullanır. Ancak bu versiyonlarda bağlantı yavaştır ve siteye tıkladığınızda HTTPS kullansa dahi arama teriminiz yollanır. Bununla birlikte, şifreli versiyon sizinle bizim aramıza geçerek aramanızı korur ve  bilgisayarınız üzerinden arama kaçağı olmasını engeller.

Duckduckgo da, şifreli verisyonumuz dahada ileri gider otomatik olarak ana web siteden noktaya sitelerin şifrelenmiş versiyonlarının linklerin numaralarını değiştirir. Bu HTTPS Everywhere Firefox eklentisinden sonra modellenmiştir.

Arama sızıntısını engellemenin bir başka yoluda
tarayıcınızda aramalarınızı göstermeyen ve bunun sonucunda başka sitelere bilgi göndermeyen bir özelliğe sahip olan POST isteği adında bir metod da kullnılabilir. POST isteği ayarını Ayarlar sayfasından yapabilirsiniz değiştirmek size kalmış. POST isteği tarayıcı geri tuşunu geçersiz yapar ve buda sizin için biraz zorluk oluşturabilir.

Sonuç olarak, sitelerin onları ziyeret ettğini bilmesini de istemiyorsanız Tor browser kullanabilirsiniz. Böylece hem kimliksiz hem de gizli arama yapabilirsiniz.

Wireshark Linux kaynak koddan kurulum

Wireshark aracı dünyadaki en popüler network analiz aracıdır tanıtım yazısına buradan ulaşabilirsiniz.

Wireshark siesinden kaynak kodu indirip klasöre çıkartalım.

klasöre giriş:
cd /dizin-yolu/wireshark-2.0.2

root olma:
sudo su

Hata oluşursa çıktıları kontrol edin ona göre eksik paketleriniz varsa oradan görebilirsiniz.Benim sistemim ubuntu 15.10 gtk3 ve libpcap yüklü olmadığı için configure komutu çalışmadı bu paketleri yükleyip kuruluma devam edebilirsiniz.

libpcap ve gtk3 paketlerini yüklemek için:

sudo apt-get install libpcap-dev

apt-get install libgtk-3-dev


kurulum adımları:

./configure
make

make install

Programı çalıştırmak için wireshark-2.0.2 klasöründe

./wireshark

komutunu çalıştırmak ve wireshark karşınızda

wireshark ekran görüntüsü
wireshark ekran görüntüsü

Wireshark Nedir ?

 

 

Wireshark

Wireshark, dünyanın en önde gelen network protokol analizi progrmaıdır. Mikroskobik seviyede ağınızda ne olduğunu görmenize olanak sağlar. Birçok kurumsal ve eğitim kurumunda yasal standarttır.

Wireshark ın geliştirilmesi dünya genelindeki network uzmanlarının katkısıyla gerçekleşir. 1998 den bu yana devam eden bir projedir.

Örnek kullanım alanları:

-Network uzmanları network hatalarını gidermek için ,
-Network güvenlik uzmanları network problemlerini incelemek için ,
-Developer lar protokol uygulamalarını debug yapmak için ,
-Network protokolünün iç yapısını öğrenmede kullanılır.

Bu örneklerin yanında Wireshark daha birçok konuda da yardımcı olabilir.

Özellikleri:

-Unix ve Windows ta kullanılabilir,
-Canlı network data paketlerini yakalar,
– tcpdump/WinDump, Wireshark ve buna benzer paket yakalayan programların yakaladığı data paketlerini içeren dosyaları açar,
-Paket datalarının hexedecimal dökümlerini içeren text dosyalarını import eder,
-Paketlerin ayrıntılı detaylandırılmış protokol bilgilerini gösterir,
-Yakalanan paket bilgilerini kaydeder,
-Yakaladığı dosya formatlarında çoğunluğunu export eder,
-Birçok kritere göre paketleri fitreler,
-Birçok kritere göre paket arar,
-Paket görünümünü filtrelere göre renklendirir.
-Çeşitli istatistikler oluşturulabilir.
–  … ve daha birsürü şey …

Paket yakalama ve içeriği inceleme:

paket yakalama
paket yakalama

 

Ne değildir ?

Bir saldırı tespit sistemi değildir. Birisi networkunuzde sizin onaylamadığınız olan dışı bir hareket olduğunda sizi uyarmaz. Ancak olağan dışı birşey olduğunda ne olduğunu farkına varmanıza yardımcı olur.

Network te birşeyleri manipüle etmez, sadece “ölçüm” işlemi için kullanılır. Paket gönderme veya diğer bazı aktiviteleri yapmaz.

 

Wireshark kurulumu için tıklayınız.

Ayrıca Kali Lİnux Nedir? yazısı

 

Toolchain nedir ? ne işe yarar ?

 

 

toolchain
toolchain

Genellikle başka bilgisayar programları yada programlar arasında ilişi kuran, karmaşık yazılım geliştirme görevlerini yapmak ya da yazılım ürünü oluşturmada programlama araçlarını ayarlamak için kullanılan yazılımdır. Genel olarak toolchain aracı ardışık çalışan bir formdadır bu yüzden her tool un çıktı yada sonuç durumu bir sonraki için giriş yada başlangıç durumunu oluşturur, aynı zamanda set edilmiş ilişkili toollara bakrak çalışabilir bu yüzden her zaman sıralı çalışması gerekmez.

Basit bri yazılım geliştirme toolchain i complier, linker(kaynak kodu çalıştırılabilir bir dosyaya dönüştüren yapı), libraries(İşletim sistemine kullanıcı arayüzü oluşturan yapı) ve debuggerdan(programı test etmek için kullanılan yapı) oluşur. Karmaşık bir yazılım ürünü örneğin video oyunları ses efektleri, müzik yapıları, 3d animasyon modeller ve animasyonların birlikte ek tool larla birleştirilerek  bu kaynakların hazırlanıp bir ürün oluşturmasına ihtiyaç duyar.