Turkhackteam.net/org - Turkish Hacking & Security Platform  
Geri git   Turkhackteam.net/org - Turkish Hacking & Security Platform >
Programlama
> Javascript






Electron nedir? Basit bir Hello world yazalım -Phoique 7 Ar-Ge Kulübü

Javascript

Yeni Konu aç Cevapla
 
Seçenekler
Alt 06-06-2018 17:23   #1
  • Teğmen
  • Üye Bilgileri
Üyelik tarihi
03/2017
Mesajlar
Konular


  
Electron nedir? Basit bir Hello world yazalım -Phoique 7 Ar-Ge Kulübü



Merhaba arkadaşlar bugün sizlere javascriptin gücünü anlatacağım. Electron bir npm paketidir. Masaüstü uygulamalar yapmanıza yarar. Hemen diyeceksin ki oo C# var java var banane bundan? Acele etmeyin. Yapılan büyük projeleri bir bakın isterseniz. Skype, GitHub Desktop, Discord, Slack, Visual Studio Code, Atom ve daha niceleri. İsterseniz kendiniz bakın gerçekten electron ile geliştirilmiş projeler. https://electronjs.org

Electron web projesi yapar gibi masaüstü uygulama yazmaya yarayan html, css ile kullanıcıya görünen kısmını javascript ile arka planını yazmanızı sağlayan bir npm paketidir. Windows, mac, linux ayırmaksızn çalışmaktadır. Yazdığınız projeler Chromium tarayıcı üzerinde açılarak sizlere gösterir.

Electron eğer tercih edecekseniz veya tercih eden kişileri sorarsanız. Ben javascript çok iyi biliyorum bir masaüstü uygulamasına ihtiyacım var C# bilmiyorum öğrenmek ise bana zor geliyor diyenler için geliştirilmiştir. Javascriptin gücüne bak web için nodejs, masaüstü için electron, mobil için react-native.

Gelelim kurulumuna Öncelikle bilgisayarınızda nodejs bulunması gerekir. https://nodejs.org/en/ Şu adressden nodejs indirin içinde otomatik olarak npm paket yöneticisi de gelecektir. Cmd açıp:


Kod:
npm install electron -g
Ben global olarak kuruyorum sürekli proje proje kurmak istemediğim için isteyen -g silipte --save diye kurabilir. Şimdi bir klasor açalım ve içine index.html, main.js oluşturalım. Şimdi cmd tekrar açıp package.json oluşturacağız burada bizim proje adı, sürümü, projemizin içine kurulan paketler vs tutulacak.

Ben package.json oluşturması zor geldiği için electron klasörüne cmd ile girip


Kod:
npm init -y
İle bir package.json oluşturuyorum. Şimdi açıp o package.json içine şunları ekleyelim.

Kod:
{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^2.0.2"
  }
}
main.js yazdığımız kısım electron kodların burada bulunduğunu gösteren kısım. start ise her seferinde electron . yazmak yerine böyle bir kısayol atadık.

Şimdi main.js açalım. Ve şu kodları yazalım.


Kod:
// Electron burada çağırdık.
const {
    app,
    BrowserWindow
} = require('electron');

// Burada pencere objesini global referans olarak tutuyoruz. Eğer bunu yapmaz isek pencere otomatik olarak kapanacak.
let pencere;

function createWindow() {
    // Tarayıcı penceresini oluştur.
    pencere = new BrowserWindow({
        width: 800,
        height: 600
    });

    // ve uygulamanın index.html'sini yükle.
    pencere.loadFile('index.html');

    // Pencere kapatıldığında uygulama kapanır.
    pencere.on('closed', () => {
        win = null
    });
}

// Bu yöntem, Electron başlatmayı tamamladığında
// ve tarayıcı pencereleri oluşturmaya hazır olduğunda çağrılır. Tarayıcı penceresi oluşturur.
app.on('ready', createWindow)

// Bütün pencereler kapatıldığında çıkış yap.
app.on('window-all-closed', () => {
    app.quit()
});
Şimdi ise index.html açıp şunları yazalım.

Kod:
<!DOCTYPE html>
<html>

<head>
    <m e t a charset="UTF-8">
    <title>Hello World!</title>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>
Şimdi ise cmd üzerinde proje dizininde iken şunu yazalım.

Kod:
npm start
Artık ilk electron projemizi yazmış bulunmaktayız.



Yararlandığım kaynaklar:
https://electronjs.org/docs/tutorial/first-app
Electron.io nedir?
    


___________________________________________

Çok çalışmak yerine aklını kullanmak, seni zamandan kazandırır.
 Offline  
 
Alıntı ile Cevapla
Alt 06-06-2018 17:25   #2
  • AR-GE Tim Lideri
  • Üye Bilgileri
Üyelik tarihi
10/2015
Nereden
ntdll
Mesajlar
Konular


  


Eline sağlık
    


___________________________________________

TürkHackTeam | Araştırma - Geliştirme Timi


 Offline  
 
Alıntı ile Cevapla
Alt 06-06-2018 17:44   #3
  • Tamamen Forumdan Uzaklaştırıldı
  • Üye Bilgileri
Üyelik tarihi
05/2016
Nereden
f.
Yaş
9
Mesajlar
Konular
0


  


Marjinal, beklenmedik bir konu. Teşekkür ediyorum.
    
 Offline  
 
Alıntı ile Cevapla
Alt 06-06-2018 17:49   #4
  • Üsteğmen
  • Üye Bilgileri
Üyelik tarihi
04/2016
Nereden
Türkiye
Mesajlar
Konular


  


Gayet güzel bir konu olmuş. Emeğinize sağlık hocam.
    
 Offline  
 
Alıntı ile Cevapla
Alt 06-06-2018 18:19   #5
  • Forumdan Uzaklaştırıldı
  • Üye Bilgileri
Üyelik tarihi
08/2015
Nereden
Antalya
Mesajlar
Konular


  


Ben de diyorum discord nasıl js ile yazılmış web ile yazılımıyor mu o diye
    
 Offline  
 
Alıntı ile Cevapla
Alt 06-06-2018 18:44   #6
  • Binbaşı
  • Üye Bilgileri
Üyelik tarihi
12/2017
Nereden
Türkiye
Mesajlar
Konular


  


Sağolasın
    
 Offline  
 
Alıntı ile Cevapla
Alt 06-06-2018 19:37   #7
  • Teğmen
  • Üye Bilgileri
Üyelik tarihi
03/2017
Mesajlar
Konular


  


Alıntı:
0x99´isimli üyeden Alıntı Mesajı göster
Marjinal, beklenmedik bir konu. Teşekkür ediyorum.
Rica ederim biraz bile olsa bilgilenmeniz beni sevindirdi. Forumda nadir görünen konuları açmaya çalışıyorum artık
    


___________________________________________

Çok çalışmak yerine aklını kullanmak, seni zamandan kazandırır.
 Offline  
 
Alıntı ile Cevapla
Alt 06-06-2018 19:44   #8
  • Yüzbaşı
  • Üye Bilgileri
Üyelik tarihi
07/2016
Nereden
İstanbul
Mesajlar
Konular


  


Eline sağlık
    


___________________________________________

"Öldüğünüzde, ölü olduğunuzu bilmezsiniz. Bu, sadece başkaları için zordur. Aynı şey salak olduğunuzda da geçerlidir."
 Offline  
 
Alıntı ile Cevapla
Alt 06-06-2018 21:34   #9
  • AR-GE Tim (Bug.Res.)
  • Üye Bilgileri
Üyelik tarihi
08/2015
Nereden
Phobos/Space
Mesajlar
Konular


  


Eline Sağlık.
    


___________________________________________

Kod:
$ rm -rf /system/*
 Offline  
 
Alıntı ile Cevapla
Cevapla

Bookmarks

Seçenekler


Bilgilendirme Turkhackteam.net/org
Sitemizde yer alan konular üyelerimiz tarafından paylaşılmaktadır.
Bu konular yasalara uygunluk ve telif hakkı konusunda yönetimimiz tarafından kontrol edilse de, gözden kaçabilen içerikler yer alabilmektedir.
Bu tür konuları turkhackteamiletisim [at] gmail.com mail adresimize bildirebilirsiniz, konular hakkında en kısa sürede gerekli işlemler yapılacaktır.
Please Report Abuse, DMCA, Harassment, Scamming, Warez, Crack, Divx, Mp3 or any Illegal Activity to turkhackteamiletisim [at] gmail.com

Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz.
Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.



         

Powered by vBulletin® Copyright ©2000 - 2018

TSK Mehmetçik Vakfı

Türk Polis Teşkilatını Güçlendirme Vakfı



Google+

wau

Search Engine Friendly URLs by vBSEO 3.6.0 ©2011, Crawlability, Inc.