Merge pull request #8655 from electron/thai-translations
Add Thai translations
This commit is contained in:
Kevin Sawicki
GitHub
commit
9b6b8752d4
8 changed files with 893 additions and 18 deletions
|
|
@ -54,6 +54,7 @@ contains documents describing how to build and contribute to Electron.
|
|||
- [Simplified Chinese](https://github.com/electron/electron/tree/master/docs-translations/zh-CN)
|
||||
- [Traditional Chinese](https://github.com/electron/electron/tree/master/docs-translations/zh-TW)
|
||||
- [Turkish](https://github.com/electron/electron/tree/master/docs-translations/tr-TR)
|
||||
- [Thai](https://github.com/electron/electron/tree/master/docs-Translations/th-TH)
|
||||
- [Ukrainian](https://github.com/electron/electron/tree/master/docs-translations/uk-UA)
|
||||
- [Russian](https://github.com/electron/electron/tree/master/docs-translations/ru-RU)
|
||||
- [French](https://github.com/electron/electron/tree/master/docs-translations/fr-FR)
|
||||
|
|
|
|||
|
|
@ -1,26 +1,42 @@
|
|||
## คู่มือ
|
||||
กรุณาตรวจสอบว่าคุณกำลังใช้คู่มือที่ตรงกับเวอร์ชั่นของ Electon ของคุณด้วย ตัวเลขเวอร์ชั่นจะมีบอกใน URL ของหน้าเพจ ถ้าไม่มีหมายความว่าคุณอาจจะใช้เอกสารของ development branch ที่ API อาจจะมีการเปลี่ยนแปลง ซึ่งไม่สามารถใช้ร่วมกับ Electron เวอร์ชั่นที่คุณใช้อยู่ได้ เพื่อที่จะดูเอกสารเวอร์ชั่นเก่า [คุณสามารถที่จะดูแท็ก](https://github.com/electron/electron/tree/v1.4.0) ใน GitHub โดยการที่คลิกที่ "เรียกดูตามกิ่ง/แท็ก" แล้วเลือกแท็กที่ตรงกับเวอร์ชั่นของคุณ
|
||||
|
||||
## คำถามที่ถูกถามบ่อย
|
||||
|
||||
รวบรวมคำถามที่ถูกถามบ่อย กรุณาอ่านก่อนเปิด issue:
|
||||
|
||||
* [คำถามที่ถูกถามบ่อยเกี่ยวกับ Electron](faq.md)
|
||||
|
||||
## คู่มือ
|
||||
|
||||
* [คำศัพท์เฉพาะ](glossary.md)
|
||||
* [แพลตฟอร์มที่รองรับ](tutorial/supported-platforms.md)
|
||||
* [ความปลอดภัย](tutorial/security.md)
|
||||
* [การเผยแพร่แอปพลิเคชัน](tutorial/application-distribution.md)
|
||||
* [แนวทางการส่งแอปเข้า Mac App Store](tutorial/mac-app-store-submission-guide.md)
|
||||
* [คู่มือ Windows Store](tutorial/mac-app-store-submission-guide.md)
|
||||
* [การบรรจุแอปพลิเคชัน](tutorial/application-packaging.md)
|
||||
* [การใช้โมดูลของ Node](tutorial/using-native-node-modules.md)
|
||||
* [การหาข้อผิดพลาดในกระบวนการหลัก](tutorial/debugging-main-process.md)
|
||||
* [การใช้งาน Selenium และ WebDriver](tutorial/using-selenium-and-webdriver.md)
|
||||
* [ส่วนเสริมของ DevTools](tutorial/devtools-extension.md)
|
||||
* [การใช้งานส่วนเสริม Pepper Flash](tutorial/using-pepper-flash-plugin.md)
|
||||
* [การใช้งานส่วนเสริม Widevine CDM Plugin](tutorial/using-pepper-flash-plugin.md)
|
||||
* [การทดสอบบน CI (Travis, Jenkins)](tutorial/testing-on-headless-ci.md)
|
||||
* [การเลนเดอร์นอกหน้าต่าง] (tutorial/offscreen-rendering.md)
|
||||
|
||||
## แนะนำ
|
||||
|
||||
* [เริ่มต้นอย่างคราวๆ](tutorial/quick-start.md)
|
||||
* [การร่วมกันของสภาพแวดล้อมบนเดสทอป](tutorial/desktop-environment-integration.md)
|
||||
* [การตรวจจับเหตุการณ์ออนไลน์หรือออฟไลน์](tutorial/online-offline-events.md)
|
||||
* [REPL](tutorial/repl.md)
|
||||
|
||||
## แหล่งอ้างอิงของ API
|
||||
|
||||
* [สรุปความ](api/synopsis.md)
|
||||
* [โปรเซสออบเจค](api/process.md)
|
||||
* [คำสั่งสำหรับเปลี่ยนแปลงค่าของ Chrome ที่รองรับ](api/chrome-command-line-switches.md)
|
||||
* [Variables สภาพแวดล้อม](api/environment-variables.md)
|
||||
|
||||
### การปรับแต่ง DOM:
|
||||
|
||||
|
|
@ -31,43 +47,48 @@
|
|||
### โมดูลสำหรับกระบวนการหลัก :
|
||||
|
||||
* [app](api/app.md)
|
||||
* [auto-updater](api/auto-updater.md)
|
||||
* [browser-window](api/browser-window.md)
|
||||
* [content-tracing](api/content-tracing.md)
|
||||
* [autoUpdater](api/auto-updater.md)
|
||||
* [BrowserWindow](api/browser-window.md)
|
||||
* [contentTracing](api/content-tracing.md)
|
||||
* [dialog](api/dialog.md)
|
||||
* [global-shortcut](api/global-shortcut.md)
|
||||
* [ipc (main process)](api/ipc-main-process.md)
|
||||
* [menu](api/menu.md)
|
||||
* [menu-item](api/menu-item.md)
|
||||
* [power-monitor](api/power-monitor.md)
|
||||
* [power-save-blocker](api/power-save-blocker.md)
|
||||
* [globalShortcut](api/global-shortcut.md)
|
||||
* [ipcMain](api/ipc-main.md)
|
||||
* [Menu](api/menu.md)
|
||||
* [MenuItem](api/menu-item.md)
|
||||
* [powerMonitor](api/power-monitor.md)
|
||||
* [powerSaveBlocker](api/power-save-blocker.md)
|
||||
* [protocol](api/protocol.md)
|
||||
* [session](api/session.md)
|
||||
* [web-contents](api/web-contents.md)
|
||||
* [tray](api/tray.md)
|
||||
* [systemPreferences](api/system-preferences.md)
|
||||
* [Tray](api/tray.md)
|
||||
* [webContents](api/web-contents.md)
|
||||
|
||||
### โมดูลสำหรับกระบวนการ Renderer (เว็บเพจ):
|
||||
|
||||
* [ipc (renderer)](api/ipc-renderer.md)
|
||||
* [desktopCapturer](api/desktop-capturer.md)
|
||||
* [ipcRenderer](api/ipc-renderer.md)
|
||||
* [remote](api/remote.md)
|
||||
* [web-frame](api/web-frame.md)
|
||||
* [webFrame](api/web-frame.md)
|
||||
|
||||
### Modules for Both Processes:
|
||||
### โมดูลสำหรับทั้งสองกระบวนการ:
|
||||
|
||||
* [clipboard](api/clipboard.md)
|
||||
* [crash-reporter](api/crash-reporter.md)
|
||||
* [native-image](api/native-image.md)
|
||||
* [crashReporter](api/crash-reporter.md)
|
||||
* [nativeImage](api/native-image.md)
|
||||
* [screen](api/screen.md)
|
||||
* [shell](api/shell.md)
|
||||
|
||||
## การพัฒนา
|
||||
|
||||
* [ลักษณะการเขียนโค้ด](development/coding-style.md)
|
||||
* [การใช้ clang-format สำหรับโค้ด C++](development/clang-format.md)
|
||||
* [โครงสร้างไดเรคทอรี่ของซอร์สโค้ด](development/source-code-directory-structure.md)
|
||||
* [ความแตกต่างทางเทคนิคจาก NW.js (หรือ node-webkit)](development/atom-shell-vs-node-webkit.md)
|
||||
* [ภาพรวมการสร้างระบบ](development/build-system-overview.md)
|
||||
* [ขั้นตอนการสร้าง (macOS)](development/build-instructions-osx.md)
|
||||
* [ขั้นตอนการสร้าง (Windows)](development/build-instructions-windows.md)
|
||||
* [ขั้นตอนการสร้าง (Linux)](development/build-instructions-linux.md)
|
||||
* [Setting Up Symbol Server in debugger](development/setting-up-symbol-server.md)
|
||||
* [ขั้นตอนการแก้บัค (macOS)](development/debugging-instructions-macos.md)
|
||||
* [ขั้นตอนการแก้บัค (Windows)](development/debug-instructions-windows.md)
|
||||
* [การติดตั้งเซิร์ฟเวอร์ Symbol Server ใน debugger](development/setting-up-symbol-server.md)
|
||||
* [ลักษณะการแก้เอกสาร](styleguide.md)
|
||||
|
|
|
|||
142
docs-translations/th-TH/faq.md
Normal file
142
docs-translations/th-TH/faq.md
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
# คำถามที่ถูกถามบ่อยเกี่ยวกับ Electron (Electron FAQ)
|
||||
|
||||
## เมื่อไหร่ Electron จะอัพเกรดไปเวอร์ชั่นล่าสุดของ Chrome ?
|
||||
|
||||
โดยส่วยมาก Chrome เวอร์ชั่นใน Electron จะโดนอัพเกรดโดยประมาณหนี่งถึงสองอาทิตย์หลังจากมีเวอร์ชั่นใหม่ของ Chrome ที่เสถียร
|
||||
|
||||
Chrome เวอร์ชั่นที่เสถียรเท่านั้นที่จะถูกใช้ ถ้ามีการแก้บัคที่สำคัญในช่องทางเบต้าหรือพัฒนา เราจะนำมันเข้ามาใช้ด้วย
|
||||
|
||||
สำหรับข้อมูลเพิ่มเติม โปรดดูที่ [บทนำความปลอดภัย](tutorial/security.md)
|
||||
|
||||
## เมื่อไหร่ Electron จะอัพเกรดไปเวอร์ชั่นล่าสุดของ Node.js ?
|
||||
|
||||
เมื่อเวอร์ชั่นใหม่ของ Node.js ถูกปล่อยออกมา เราจะรอโดยประมาณหนึ่งเดือนก่อนที่จะอัพเกรด Node.js ที่อยู่ใน Electron เพื่อที่ว่าเราจะได้ลดความเสี่ยงถึงผลกระทบของบัคใน Node.js เวอร์ชั่นใหม่ซึ่งเกิดขึ้นบ่อยมาก
|
||||
|
||||
ความสามารถใหม่ของ Node.js โดยส่วนมากจะมากับการอัพเกรด V8 เนื่องจาก Electron นั้นใช้ V8 ที่มาพร้อมกับ Chrome browser อยู่แล้ว ทำให้ Electron มีความสามารถใหม่ของ JavaScript ที่มาพร้อมกับ Node.js เวอร์ชั่นใหม่อยู่แล้ว
|
||||
|
||||
## วิธีการแบ่งข้อมูลระหว่างเว็ปเพจ
|
||||
|
||||
ในการที่จะแบ่งข้อมูลนั้น (the renderer processes) วิธีการที่เรียบง่ายที่สุดคือการใช้ APIs ของ HTML5 ซี่งใช้ได้อยู่แล้วในเว็ปบราวเซอร์ ทางเลือกอื่นๆที่ดีคือ [Storage API][storage], [`localStorage`][local-storage],
|
||||
[`sessionStorage`][session-storage], และ [IndexedDB][indexed-db].
|
||||
|
||||
หรือคุณจะสามารถใช้ระบบ IPC ซึ่งสำหรับ Electron มันจะเก็บ objects ในโปรเซสหลักในรูปของ global variable แล้วจึงเรียกมันจากตัว renderer ผ่านทาง `remote` ของ `electron` โมดูล
|
||||
|
||||
```javascript
|
||||
// ในโปรเซสหลัก
|
||||
global.sharedObject = {
|
||||
someProperty: 'default value'
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
// ในเพจหนึ่ง
|
||||
require('electron').remote.getGlobal('sharedObject').someProperty = 'new value'
|
||||
```
|
||||
|
||||
```javascript
|
||||
// ในเพจสอง
|
||||
console.log(require('electron').remote.getGlobal('sharedObject').someProperty)
|
||||
```
|
||||
|
||||
## หน้าต่างของแอพฉันหายไปหลังจากไม่กี่นาที
|
||||
|
||||
เหตุการณ์นี้เกิดขึ้นมื่อ variable ที่ใช้เก็บค่าหน้าต่างโดนหน่วยความจำเก็บกวาด
|
||||
|
||||
* [การจัดการหน่วยความจำ][memory-management]
|
||||
* [ขอบเขตของตัวแปร][variable-scope]
|
||||
|
||||
วิธีการแก้แบบรวดเร็ว: เปลี่ยนตัวแปรให้เป็น global ด้วยการเปลี่ยนจากโค้ดนี้
|
||||
|
||||
```javascript
|
||||
const {app, Tray} = require('electron')
|
||||
app.on('ready', () => {
|
||||
const tray = new Tray('/path/to/icon.png')
|
||||
tray.setTitle('hello world')
|
||||
})
|
||||
```
|
||||
|
||||
เป็น :
|
||||
|
||||
```javascript
|
||||
const {app, Tray} = require('electron')
|
||||
let tray = null
|
||||
app.on('ready', () => {
|
||||
tray = new Tray('/path/to/icon.png')
|
||||
tray.setTitle('hello world')
|
||||
})
|
||||
```
|
||||
|
||||
## ไม่สามารถใช้ jQuery/RequireJS/Meteor/AngularJS ใน Electron
|
||||
|
||||
เนื่องจากการรวบรวม Node.js เข้าไปใน Electron จึงทำให้เกิดการใส่อักขระเพิ่มเตืมลงไปใน DOM เช่น `module`, `export`, `require`
|
||||
|
||||
มันทำให้เกิดปัญหากับ library อื่นๆที่ต้องการจะใช้อักขระตัวเดียวกัน
|
||||
|
||||
ในการแก้ปัญหานี้ คุณจะต้องปิด node ใน Electron:
|
||||
|
||||
```javascript
|
||||
// ในโปรเซสหลัก
|
||||
const {BrowserWindow} = require('electron')
|
||||
let win = new BrowserWindow({
|
||||
webPreferences: {
|
||||
nodeIntegration: false
|
||||
}
|
||||
})
|
||||
win.show()
|
||||
```
|
||||
|
||||
แต่ถ้าคุณยังต้องการที่จะใช้ Node.js และ API ของ Electron คุณจะค้องเปลี่ยนชื่อของอักขระในเพจดังนี้ :
|
||||
|
||||
```html
|
||||
<head>
|
||||
<script>
|
||||
window.nodeRequire = require;
|
||||
delete window.require;
|
||||
delete window.exports;
|
||||
delete window.module;
|
||||
</script>
|
||||
<script type="text/javascript" src="jquery.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
## `require('electron').xxx` is undefined.
|
||||
|
||||
ในตอนที่คุณใช้โมดูลที่มาพร้อมกับ Electron คุณอาจจะเจอปัญหาดังกล่าว:
|
||||
|
||||
```
|
||||
> require('electron').webFrame.setZoomFactor(1.0);
|
||||
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined
|
||||
```
|
||||
|
||||
มันเปิดมาจากคุณได้ลง [module npm `electron`][electron-module] ในเครื่องไม่ว่าจะเป็น locally หรือ globally ซึ่งมันจะทับโมดูลที่มาพร้อมกับ Electron
|
||||
|
||||
เพื่อตรวจสอบว่าคุณกำลังใช้โมดูลที่ถูกต้อง คุณสามารถที่จะส่ง command ที่จะปริ้น path ของ `electron` ได้:
|
||||
|
||||
```javascript
|
||||
console.log(require.resolve('electron'))
|
||||
```
|
||||
|
||||
แล้วก้เช็คว่าผลลัพท์อยู่ในรูปของ:
|
||||
|
||||
```
|
||||
"/path/to/Electron.app/Contents/Resources/atom.asar/renderer/api/lib/exports/electron.js"
|
||||
```
|
||||
|
||||
ถ้าผลลัพท์ที่ได้จากการส่ง command อยู่ในรูปแบบ `node_modules/electron/index.js` คุณจะต้องลบโมดูล `electron` ใน npm หรือไม่ก็เปลี่ยนชื่อมัน
|
||||
|
||||
```bash
|
||||
npm uninstall electron
|
||||
npm uninstall -g electron
|
||||
```
|
||||
|
||||
ถ้าหากว่าคุณกำลังใช้โมดูลที่มาพร้อมกับ Electron แล้วยังเกิดข้อผิดผลาดดังกล่าว มีความเป็นไปได้สูงว่าคุณกำลังใช้โมดูลในโปรเซสที่ผิด
|
||||
|
||||
ยกตัวอย่างเช่น `electron.app` จะสามารถใช้ได้ในโปรเซสหลักเท่านั้น แต่ว่าในขณะเดียวกัน `electron.webFrame` นั้นใช้ได้ในโปรเซส renderer เท่านั้น
|
||||
|
||||
[memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
|
||||
[variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx
|
||||
[electron-module]: https://www.npmjs.com/package/electron
|
||||
[storage]: https://developer.mozilla.org/en-US/docs/Web/API/Storage
|
||||
[local-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
|
||||
[session-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
|
||||
[indexed-db]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
|
||||
157
docs-translations/th-TH/glossary.md
Normal file
157
docs-translations/th-TH/glossary.md
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
# อภิธานศัพท์ (Glossary)
|
||||
|
||||
เพจนี้จะบ่งบอกคำศัพท์ที่ถูกใช่บ่อยๆในการพัฒนา Electron
|
||||
|
||||
### ASAR
|
||||
|
||||
[ASAR (Atom Shell Archive Format)][asar] เป็น extension ของไฟล์
|
||||
มันมีลักษณะความคล้ายครีง `tar` ที่รวมหลายไฟล์ลงไปในไฟล์เดียว
|
||||
Electron สามารถอ่านไฟล์ ASAR ได้เลยโดยที่ไม่ต้อง unpack
|
||||
|
||||
กำลังทำ: ไฟล์ประเภท ASAR นั้น สร้างมาเพื่อเพิ่มประสิทธิถาพบนระบบปฎิบัติการ Windows
|
||||
|
||||
### Brightray
|
||||
|
||||
[Brightray][brightray] เป็น static library ที่ทำให้ [libchromiumcontent] ใช้ได้ง่ายขึ้น
|
||||
ในแอพพิเคชั่น มันถูกสร้างขึ้นมาเพื่อ Electron โดยเฉพาะ
|
||||
แต่ว่ามันสามารถเปิดใช้ในแอพที่ใช้ Chromium's render ซึ่งไม่ถูกสร้างจาก Electron ได้
|
||||
|
||||
Brightray เป็น dependency ของ Electron ที่ไม่ค่อยได้ใช้งานสำหรับผู้ใช้ Electron ทั่วไป
|
||||
|
||||
### DMG
|
||||
|
||||
DMG เป็นรูปแบบไฟล์ที่ใช้กับ Apple Disk Image
|
||||
|
||||
โดยส่วนมากไฟล์ DMG จะถูกใช้ในการแจกแจงตัวติดตั้งของแอพพิเคชั่น
|
||||
คุณสามารถใช้ [electron-builder] ในการสร้างไฟล์ขึ้นมาได้
|
||||
|
||||
### IPC
|
||||
|
||||
IPC ย่อมาจาก Inter-Process Communication ซึ่ง Electron ใช้ IPC
|
||||
ในการที่จะส่งข้อความ JSON ระหว่าง [โปรเซสหลัก][main] และ [ตัวเรนเดอร์][renderer]
|
||||
|
||||
### libchromiumcontent
|
||||
|
||||
เป็น library รวมที่มี Chromium Content โมดูลและ dependencies ต่างๆเข้าไปด้วย
|
||||
(อาทิเช่น Blink, [V8], ฯลฯ)
|
||||
|
||||
### โปรเซสหลัก
|
||||
|
||||
โปรเซสหลักในส่วนมากจะเป็นไฟล์ `main.js` ซึ่งเป็นจุดเริ่มต้นของทุกๆแอพของ Electron
|
||||
โปรเซสหลักเป็นตัวที่กำหนดการทำงานของแอพตั้งแต่ต้นจนจบ มันจะควบคุมองค์ประกอบของแอพเช่น
|
||||
Menu, Menu Bar, Dock, Tray, ฯลฯ โปรเซสหลักนั้นจะรับผิดชอบการสร้างตัวเรนเดอร์ใหม่ในแอพ
|
||||
|
||||
Node API นั้นมาพร้อมกับ Electron
|
||||
|
||||
`package.json` จะสามารถใช้ระบุโปรเซสหลักของทุกๆแอพบน Electron ได้
|
||||
นี้คือเหตุผลที่ `electron .` รู้ว่าไฟล์ไหนควรจะรันตอนเริ่มต้น
|
||||
|
||||
เพิ่มเติม: [process](#process), [renderer process](#renderer-process)
|
||||
|
||||
### MAS
|
||||
|
||||
MAS เป็นตัวย่อของ Mac App Store
|
||||
ในการที่จะส่งไฟล์ลง MAS นั้นโปรดดู [การแนะนำการส่ง Mac App Store](Mac App Store Submission Guide)
|
||||
|
||||
### native modules
|
||||
|
||||
Native โมดูล (อีกชื่อคือ [addons]) คือโมดูลที่เขียนด้วย C หรือ C++
|
||||
ที่สามารถจะโหลดอยู่ใน Node.js หรือ Electron โดยการใช้ฟังค์ชั่น require()
|
||||
และใช้แบบเดียวกับโมดูล Node.js ธรรมดา
|
||||
|
||||
โดยส่วนมากมันถูกใช้เป็นอินเตอร์เฟสระหว่าง JavaScript และ Node.js ผ่านทาง C/C++
|
||||
|
||||
Native Node โมดูลจะได้รับการสนับสนุนจาก Electron
|
||||
แต่ว่ามีความเป็นไปได้ว่า Electron นั้นจะใช้ V8 คนละเวอร์ชั่นกับ Node ที่มีอยู่ในระบบ
|
||||
คุณจะต้องเป็นคนเลือก Electron's header ด้วยตนเอง
|
||||
|
||||
เพิ่มเติม: [วิธีการใช้ Native Node โมดูล][Using Native Node Modules]
|
||||
|
||||
## NSIS
|
||||
|
||||
NSIS ย่อมาจาก Nullsoft Scriptable Install System คือตัวติดตั้งที่ขับเคลื่อนด้วยสคริปท์
|
||||
สำหรับระบบปฎิบัติการ Windows มันได้รับการจดลิขสิทธ์สำหรับใช้ทุกๆคน
|
||||
มันถูกใช้แทนสินค้าเชิงพาณิชย์เช่น InstallShield
|
||||
[electron-builder] นั้นรองรับการสร้าง NSIS
|
||||
|
||||
### process
|
||||
|
||||
โปรเซสคือ instance ของโปรแกรมที่กำลังทำงานอยู่
|
||||
Electron แอพนั้นใช้ [โปรเซสหลัก][main] และ [ตัวเรนเดอร์][renderer] หนึ่งตัวขึ้นไปที่รัน
|
||||
หลายๆโปรเกรมพร้อมๆกัน
|
||||
|
||||
ใน Node.js และ Electron นั้น แต่ละโปรเซสที่กำลังรันอยู่จะมี `process` object
|
||||
Object ตัวนี้เป็น global ที่ให้ข้อมูลและการควบคุมของตัวโปรเซสนั้นๆ
|
||||
|
||||
เพราะว่ามันเป็น global ดังนั้นจึงไม่จำเป็นที่จะเรียก `require()` เพื่อใช้งาน
|
||||
|
||||
เพิ่มเติม: [โปรเซสหลัก](#main-process), [ตัวเรนเดอร์](#renderer-process)
|
||||
|
||||
### renderer process
|
||||
|
||||
ตัวเรนเดอร์ คือ หน้าต่างบราวเซอร์ของแอพพิเคชั่นของคุณ
|
||||
มันแตกต่างจากโปรเซสหลักโดยที่มันจะสามารถมีอยู่พร้อมกันหลายตัวได้
|
||||
และแต่ละตัวนั้นใช้ โปรเซส ที่ต่างกันออกไป
|
||||
นอกจากนั้นมันยังสามารถซ่อนได้อีกด้วย
|
||||
|
||||
ใน บราวเซอร์ ทั่วๆไป
|
||||
เว็ปเพจจะได้รับการรันด้วยสภาพแวดล้อมจำกัดและจะไม่สามารถใช้ทรัพยากร native ได้
|
||||
|
||||
แต่ว่าสำหับผู้ใช้ Electron นั้นเราสามารถให้
|
||||
เว็ปเพจมีการปฏิสัมพันธ์กับระบบปฎิบัติการได้โดยผ่านทาง API ของ Node.js
|
||||
|
||||
เพิ่มเติม: [โปรเซสหลัก](#main-process), [ตัวเรนเดอร์](#renderer-process)
|
||||
|
||||
### Squirrel
|
||||
|
||||
Squirrel เป็น open-source framework ที่ทำให้แอพ Electron นั้น
|
||||
อัพเดทได้อย่างอัตโนมัดเมื่อมีเวอร์ชั่นใหม่เข้ามา
|
||||
|
||||
เพิ่มเติม: [autoUpdater] API เพื่อการใช้งาน Squirrel เบื้องต้น
|
||||
|
||||
### userland
|
||||
|
||||
"Userland" แต่แรกทีมาจากสังคม unix ซึ่งหมายถึงโปรแกรมที่รันข้างนอก kernel ของระบบปฎิบัติการ
|
||||
ภายหลังนี้ "userland" ได้รับความสนใจจากสังคม Node และ npm เพื่อใช้ในการอธิบายความแตกต่าง
|
||||
ของ feature ที่พร้อมไช้งานใน "node core" กับ แพ็คเกจที่ได้รับการแจกจ่ายถายใน npm registry
|
||||
ซึ่งมาจากเหล่าคนใช้ที่กว้างขวาง
|
||||
|
||||
Electron นั้นมีความคล้ายคลึงกับ Node ตรงที่มี API ที่ไม่เยอะแต่ว่ามีความสามารถเพียงพอ
|
||||
ในการพัฒนา multi-platform แอพพิเคชั่น
|
||||
|
||||
ด้วยปรัชญาการออกแบบนี้เองที่ทำให้ Electron นั้นเป็นเครื่องมือที่มีความยืดหยุ่นโดยที่ไม่กำหนดให้ผู้ใช้
|
||||
ใช้งานได้เพียงตามที่ออกแบบไว้
|
||||
|
||||
Userland ได้เปิดโอกาสให้ผู้ใช้สามารถสร้างและแบ่งปันเครื่องมือนอกเหนือจากอะไรก็ตามที่มีอยู่ใน "core"
|
||||
|
||||
### V8
|
||||
|
||||
V8 เป็น JavaScripe engine ของ Google ที่เป็น open source
|
||||
มันถูกเขียนขึ้นด้วย C++ และถูกใช้ใน Google Chrome
|
||||
|
||||
Google Chrome เป็น open source บราวส์เซอร์ของ Google
|
||||
|
||||
V8 สามารถรันแยกเองต่างหากได้ หรือจะสามารถนำไปใช้กับแอพพิเคชั่น C++ อะไรก็ได้
|
||||
|
||||
### webview
|
||||
|
||||
`webview` เป็นแท็กที่ใช้ในการใส่ข้อมูลสำหรับคนใช้ทั่วไป (เช่นเว็ปภายนอก) ใน Electron แอพของคุณ
|
||||
มันมีความคล้ายครึงกับ `iframe` แต่ว่าต่างกันโดยที่ webview รันโดยโปรเซสคนละตัว
|
||||
มันไม่มี permission เหมือนกับเว็ปเพจของคุณและการมีปฏิสัมพันธ์ระหว่าง
|
||||
แอพของคุงกับสิ่งที่ฝังอยู่จะเป็นไปโดยราบลื่นโดยที่ไม่ต้องซิ้งค์ (asynchronous)
|
||||
|
||||
ด้วยเหตุนี้เองทำให้ แอพของคุณปลอกภัยจากสิ่งที่ถูกฝัง
|
||||
|
||||
|
||||
[addons]: https://nodejs.org/api/addons.html
|
||||
[asar]: https://github.com/electron/asar
|
||||
[autoUpdater]: api/auto-updater.md
|
||||
[brightray]: https://github.com/electron/brightray
|
||||
[electron-builder]: https://github.com/electron-userland/electron-builder
|
||||
[libchromiumcontent]: #libchromiumcontent
|
||||
[Mac App Store Submission Guide]: tutorials/mac-app-store-submission-guide.md
|
||||
[main]: #main-process
|
||||
[renderer]: #renderer-process
|
||||
[Using Native Node Modules]: tutorial/using-native-node-modules.md
|
||||
[userland]: #userland
|
||||
[V8]: #v8
|
||||
213
docs-translations/th-TH/styleguide.md
Normal file
213
docs-translations/th-TH/styleguide.md
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
# ลักษณะเอกสาร Electron
|
||||
|
||||
นี้คือกฎในการเขียนเอกสารประกอบ Electron
|
||||
|
||||
## หัวข้อ
|
||||
|
||||
* ทุกๆเพจจะมี `#` อยู่ข้างบนสุดของเอกสาร
|
||||
* ทุกๆบทจะต้องมี `##` ในหัวข้อ
|
||||
* ทุกๆบทย่อยจะเพิ่ม `#` ลงไปในหัวข้อตามความลึกของบทย่อย
|
||||
|
||||
ยกตัวอย่างเช่น `การเริ่มต้น`:
|
||||
|
||||
```markdown
|
||||
# การเริ่มต้น
|
||||
|
||||
...
|
||||
|
||||
## โปรเซสหลัก
|
||||
|
||||
...
|
||||
|
||||
## โปรเซส render
|
||||
|
||||
...
|
||||
|
||||
## การรันแอพ
|
||||
|
||||
...
|
||||
|
||||
```
|
||||
|
||||
สำหรับการอ้างอิงของ API จะไม่ใช้กฎนี้
|
||||
|
||||
## กฎของ Markdown
|
||||
|
||||
* ใช้ `bash` แทน `cmd` ในการเขียน code blocks (เพราะตัวไฮไลท์ syntax)
|
||||
* บรรทัดควรที่จะเริ่มต้นใหม่ที่ 80 คอลัมน์
|
||||
* ไม่ควรใส่ลิสต์ที่มีมากกว่าสองชั้น (เพราะตัว render ของ markdown)
|
||||
* ทุก `js` แลพ `javascript` code blocks จะไฮไลท์ด้วย
|
||||
[standard-markdown](http://npm.im/standard-markdown).
|
||||
|
||||
## การใช้คำ
|
||||
|
||||
* ใช้ 'จะ' แทนที่ 'ควรจะ' ตอนอธิบายผลลัทธ์
|
||||
|
||||
## การอ้างอิงของ API
|
||||
|
||||
กฎดังต่อไปนี้จะใช้สำหรับเอกสาร API เท่านั้น
|
||||
|
||||
### หัวข้อเพจ
|
||||
|
||||
ทุกๆเพจจะใช้ชื่อของ object ที่ได้รับจาก `require('electron')` เป็นหัวข้อ อาทิเช่น `BrowserWindow`, `autoUpdater` และ `session`
|
||||
|
||||
ข้างล่างหัวข้อจะเป็นคำอธิบายหนึ่งบรรทัดเริ่มต้นด้วย `>`
|
||||
|
||||
```markdown
|
||||
# session
|
||||
|
||||
> คำอธิบาย
|
||||
```
|
||||
|
||||
### โมดูล methods และ events
|
||||
|
||||
สำหรับโมดูลที่ไม่ใช่คราสนั้น methods และ events ของมันจะต้องอยู่ในลิสต์ภายใต้บท `## Methods` และ `## Events`
|
||||
|
||||
ยกตัวอย่างเช่น `autoUpdater`:
|
||||
|
||||
```markdown
|
||||
# autoUpdater
|
||||
|
||||
## Events
|
||||
|
||||
### Event: 'error'
|
||||
|
||||
## Methods
|
||||
|
||||
### `autoUpdater.setFeedURL(url[, requestHeaders])`
|
||||
```
|
||||
|
||||
### คราส (Classes)
|
||||
|
||||
* คราส API หรือ คราสที่เป็นส่วนของโมดูลจะต้องอยู่ในบท `## Class: TheClassName`
|
||||
* หนึ่งเพจสามารถมีหลายคราสได้
|
||||
* Constructors จะต้องอยู่ใน `###`
|
||||
* [Static Methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static) จะต้องอยู่ในบทของ `### Static Method`
|
||||
* [Instance Methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Prototype_methods) จะต้องอยู่ในบทของ `### Instance Methods`
|
||||
* ทุกๆ methods ที่มีค่า รีเทิร์น(return) จะต้องเริ่มต้นคำอธิบายด้วย "Returns `[TYPE]` - คำอธิบายค่ารีเทิร์น"
|
||||
* ถ้า method รีเทิร์น `Object` โครงสร้างจองมันจะอธิบายได้ด้วยการใช้ ','(โคล่อน) ตามด้วยบรรทัดใหม่ จากนั้นก็ ลิสต์ของคุณสมบัติที่ไม่เรียงกัน (เหมือนกับ parametres ของฟังค์ชั่น)
|
||||
* Instance ของ Events จะต้องอยู่ในบทของ `### Instance Events`
|
||||
* Instance ของ Properties จะต้องอยู่ในบทของ `### Instance Properties`
|
||||
* จะเริ่มต้นด้วย "A [Type ของ คุณสมบัติ]"
|
||||
|
||||
ยกตัวอย่างเช่น `Session` และ `Cookies` คราส:
|
||||
|
||||
```markdown
|
||||
# session
|
||||
|
||||
## Methods
|
||||
|
||||
### session.fromPartition(partition)
|
||||
|
||||
## Properties
|
||||
|
||||
### session.defaultSession
|
||||
|
||||
## Class: Session
|
||||
|
||||
### Instance Events
|
||||
|
||||
#### Event: 'will-download'
|
||||
|
||||
### Instance Methods
|
||||
|
||||
#### `ses.getCacheSize(callback)`
|
||||
|
||||
### Instance Properties
|
||||
|
||||
#### `ses.cookies`
|
||||
|
||||
## Class: Cookies
|
||||
|
||||
### Instance Methods
|
||||
|
||||
#### `cookies.get(filter, callback)`
|
||||
```
|
||||
|
||||
### Methods
|
||||
|
||||
บท methods จะอยู่ในรูปแบบดังนี้:
|
||||
|
||||
```markdown
|
||||
### `objectName.methodName(required[, optional]))`
|
||||
|
||||
* `required` String - A parameter description.
|
||||
* `optional` Integer (optional) - Another parameter description.
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
หัวข้อจะสามารถอยู่ในรูปของ `###` หรือ `####` (ตามว่าเป็น method ของโมดูลหรือของคราส)
|
||||
|
||||
สำหรับโมดูล `objectName` คือชื่อของโมดูล แต่ว่าสำหรับคราสนั้น ชื่อจะต้องเป็น instance ของคราสและจะต้องไม่ซ้ำกับชื่อโมดูล
|
||||
|
||||
ยกตัวอย่างเช่น method ของคราส `Session` ที่อยู่ใน `session` โมดูลจะต้องใช้ `ses` เหมือนกับ `objectName`.
|
||||
|
||||
หากมี arguments เพิ่มเตินนั้นจะได้รับการบันทึกภายใน `[]` รวมถึงคอมม่ถ้าหากว่า arguement นี้ตามด้วย argument เสริมอื่นๆ
|
||||
|
||||
```
|
||||
required[, optional]
|
||||
```
|
||||
|
||||
ข้างล่าง method จะเป็นข้อคาวมโดยละเอียดเกี่ยวกับ arguments อื่นๆ, ชนิค (Type) ของ argument จะโดนบันทีกตาม type ทั่วไป
|
||||
|
||||
* [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
|
||||
* [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)
|
||||
* [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
|
||||
* [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
|
||||
* [`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
|
||||
* หรือ type พิเศษเช่น Electron [`WebContent`](api/web-contents.md)
|
||||
|
||||
หาก argument หรือ method มีเฉพาะเจาะจงกับ platform นั้น ให้ใช้ตัว italic (เอียง) ลิสต์ตาม datatype
|
||||
โดยที่ตัวลิสต์นั้นจะจำกัดอยู่ที่ `macOS`, `Windows`, หรือ `Linux` เท่านั้น
|
||||
|
||||
```markdown
|
||||
* `animate` Boolean (optional) _macOS_ _Windows_ - เล่นแอนนิเมชัั่น.
|
||||
```
|
||||
|
||||
Arguments ชนิด `Array` จะต้องบอกว่า array นั้นจะใส่อะไรลงไปตามข้อมูลด้านล่าง
|
||||
|
||||
ข้อความอธิบาย arguments ของ ฟังค์ชั่น (function) จะต้องบอกเจาะจงถึงวิธีการใช้งานและชนิดของ parametres ที่ฟังค์ชั่นนั้นรับ
|
||||
|
||||
### อีเว้น (Events)
|
||||
|
||||
บทอีเว้นจะต้องอยู่ในรูปแบบดังนี้:
|
||||
|
||||
```markdown
|
||||
### Event: 'wake-up'
|
||||
|
||||
Returns:
|
||||
|
||||
* `time` String
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
หัวข้อจะสามารถอยู่ในรูปของ `###` หรือ `####` (ตามว่าเป็นอีเว้นของโมดูลหรือของคราส)
|
||||
|
||||
แบบเอกสาร arguments ของอีเว้นจะใช้กฎเดียวกับ methods
|
||||
|
||||
### คุณสมบัติ (Properties)
|
||||
|
||||
บทคุณสมบัติจะต้องอยู่ในรูปแบบดังนี้:
|
||||
|
||||
```markdown
|
||||
### session.defaultSession
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
หัวข้อจะสามารถอยู่ในรูปของ `###` หรือ `####` (ตามว่าเป็นคุณสมบัติของโมดูลหรือของคราส)
|
||||
|
||||
## การแปลเอกสาร
|
||||
|
||||
เอกสารของ Electron ที่ถูกแปลแล้ว จะอยู่ในโฟลเดอร์ `docs-translation`
|
||||
|
||||
ในการสร้างเซ็ตของภาษาใหม่ (เพิ่มในบางส่วน)
|
||||
|
||||
* สร้างที่อยู่ย่อยตามตัวย่อของภาษา
|
||||
* แปลภาษา
|
||||
* อัพเดท `README.md` ภายในเพื่อเป็นสารลิงค์ไฟล์ต่างๆที่แปลแล้ว
|
||||
* เพิ่มลิ้งค์ลง [README](https://github.com/electron/electron#documentation-translations) หลักของ Electron
|
||||
|
||||
โน้ต: ไฟล์ที่อยู่ใน `docs-translations` จะมีแค่ที่แปลแล้วเท่านั้น ไฟล์ต้นตำรับภาษาอังกริษไม่ควรจะโดนก้อปปี้ลงไปด้วย
|
||||
57
docs-translations/th-TH/tutorial/about.md
Normal file
57
docs-translations/th-TH/tutorial/about.md
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
# เกี่ยวกับ Electron
|
||||
|
||||
[Electron](http://electron.atom.io) เป็นโอเพ่นซอร์สไลบรารี พัฒนา โดย GitHub สำหรับการสร้างการใช้งานเดสก์ทอปข้ามแพลตฟอร์มกับ HTML, CSS และ JavaScript Electron เกิดขึ้นได้โดยการ่วม [Chromium](https://www.chromium.org/Home) กับ [Node.js](https://nodejs.org) เข้าด้วยกันเป็นหนึงruntimeและปพลิเคชันสามารถบรรจุสำหรับ Mac, Windows และ Linux
|
||||
|
||||
Electron began in 2013 as the framework on which [Atom](https://atom.io), GitHub's hackable text editor, would be built. The two were open sourced in the Spring of 2014.
|
||||
|
||||
It has since become a popular tool used by open source developers, startups, and established companies. [See who is building on Electron](/apps).
|
||||
|
||||
Read on to learn more about the contributors and releases of Electron or get started building with Electron in the [Quick Start Guide](quick-start.md).
|
||||
|
||||
## Core Team and Contributors
|
||||
|
||||
Electron is maintained by a team at GitHub as well as a group of [active contributors](https://github.com/electron/electron/graphs/contributors) from the community. Some of the contributors are individuals and some work at larger companies who are developing on Electron. We're happy to add frequent contributors to the project as maintainers. Read more about [contributing to Electron](https://github.com/electron/electron/blob/master/CONTRIBUTING.md).
|
||||
|
||||
## Releases
|
||||
|
||||
[Electron releases](https://github.com/electron/electron/releases) frequently. We release when there are significant bug fixes, new APIs or are updating versions of Chromium or Node.js.
|
||||
|
||||
### Updating Dependencies
|
||||
|
||||
Electron's version of Chromium is usually updated within one or two weeks after a new stable Chromium version is released, depending on the effort involved in the upgrade.
|
||||
|
||||
When a new version of Node.js is released, Electron usually waits about a month before upgrading in order to bring in a more stable version.
|
||||
|
||||
ใน Electron, Node.js and Chromium share a single V8 instance—usually the version that Chromium is using. Most of the time this _just works_ but sometimes it means patching Node.js.
|
||||
|
||||
|
||||
### Versioning
|
||||
|
||||
Due to the hard dependency on Node.js and Chromium, Electron is in a tricky versioning position and [does not follow `semver`](http://semver.org). You should therefore always reference a specific version of Electron. [Read more about Electron's versioning](http://electron.atom.io/docs/tutorial/electron-versioning/) or see the [versions currently in use](https://electron.atom.io/#electron-versions).
|
||||
|
||||
### LTS
|
||||
|
||||
Long term support of older versions of Electron does not currently exist. If your current version of Electron works for you, you can stay on it for as long as you'd like. If you want to make use of new features as they come in you should upgrade to a newer version.
|
||||
|
||||
A major update came with version `v1.0.0`. If you're not yet using this version, you should [read more about the `v1.0.0` changes](http://electron.atom.io/blog/2016/05/11/electron-1-0).
|
||||
|
||||
## Core Philosophy
|
||||
|
||||
In order to keep Electron small (file size) and sustainable (the spread of dependencies and APIs) the project limits the scope of the core project.
|
||||
|
||||
For instance, Electron uses just the rendering library from Chromium rather than all of Chromium. This makes it easier to upgrade Chromium but also means some browser features found in Google Chrome do not exist in Electron.
|
||||
|
||||
New features added to Electron should primarily be native APIs. If a feature can be its own Node.js module, it probably should be. See the [Electron tools built by the community](http://electron.atom.io/community).
|
||||
|
||||
## History
|
||||
|
||||
Below are milestones in Electron's history.
|
||||
|
||||
| :calendar: | :tada: |
|
||||
| --- | --- |
|
||||
| **April 2013**| [Atom Shell is started](https://github.com/electron/electron/commit/6ef8875b1e93787fa9759f602e7880f28e8e6b45).|
|
||||
| **May 2014** | [Atom Shell is open sourced](http://blog.atom.io/2014/05/06/atom-is-now-open-source.html). |
|
||||
| **April 2015** | [Atom Shell is re-named Electron](https://github.com/electron/electron/pull/1389). |
|
||||
| **May 2016** | [Electron releases `v1.0.0`](http://electron.atom.io/blog/2016/05/11/electron-1-0).|
|
||||
| **May 2016** | [Electron apps compatible with Mac App Store](http://electron.atom.io/docs/tutorial/mac-app-store-submission-guide).|
|
||||
| **August 2016** | [Windows Store support for Electron apps](http://electron.atom.io/docs/tutorial/windows-store-guide).|
|
||||
40
docs-translations/th-TH/tutorial/accessibility.md
Normal file
40
docs-translations/th-TH/tutorial/accessibility.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
# การเข้าถึง (Accessibility)
|
||||
|
||||
การที่จะทำให้แอพพิเคชั่นนั้นเข้าถึงได้เป็นเรื่องที่สำคัญมาก และ เรามีความสุขที่จะต้อนรับความสามารถใหม่ของเราสู่ [Devtron](http://electron.atom.io/devtron) และ [Spectron](http://electron.atom.io/spectron) ซึ่งได้ให้โอกาสผู้พัฒนาในการที่จะสร้างแอพพิเคชั่นที่ดีขึ้นเพื่อทุกๆคน
|
||||
|
||||
---
|
||||
|
||||
ความกังวลเกี่ยวกับการเข้าถึงของแอพพิเคชั่น Electron นั้นมีความคล้ายครึงกับความกังวลของเว็ปไซต์ เพราะว่าทั้งสองนั้นเป็น HTML ด้วยกัน ในขณะเดียวกันนั้น แต่ว่าในแอพ Electron คุณไม่สามารถใช้ทรัพยากรณ์ออนไลน์ได้เพราะว่าแอพของคุณนั้นไม่มี URL ที่สามารถเข้าถึงได้
|
||||
|
||||
ความสามารถใหม่ๆนี้นำอุปกรณ์การแก้ไขต่างๆเข้ามาใส่แอพ Electron ของคุณ คุณสามารถเลือกที่จะแก้ไขบททดสองของคุณได้ด้วย Spectron หรือว่าใช้มันใน DevTools ด้วย Devtron
|
||||
|
||||
กรุณาอ่านต่อเพื่อบทสรุปของอุปกรณ์หรือดู [เอกสารการเข้าถึง](http://electron.atom.io/docs/tutorial/accessibility) ของเราสำหรับข้อมูลเพิ่มเติม
|
||||
|
||||
### Spectron
|
||||
|
||||
ในการทดสอบเฟรมเวิร์ค Spectron นั้น
|
||||
คุณจะใช้วิธีการแก้ไขทุกๆหน้าต่าง และ แท็ก `<webview>` ในแอพพิเคชั่นของคุณได้
|
||||
|
||||
ยกตัวอย่างเช่น:
|
||||
|
||||
```javascript
|
||||
app.client.autidAccessibility().then(function (audit) {
|
||||
if (audit.failed) {
|
||||
console.error(audit.message)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
คุณสามารถอ่านข้อมูลเพิ่มเติมสำหรับได้ที่ [เอกสาร Spectron](https://github.com/electron/spectron#accessibility-testing)
|
||||
|
||||
### Devtron
|
||||
|
||||
ใน Devtron นั้น จะมีแท็ปการเข้าถึง ซึ่งจะทำให้คุณสามารถจัดการเพจในแอพของคุณได้
|
||||
|
||||
|
||||
|
||||
ทั้งสองเครื่องมือใช้ [Accessibility Developer Tools](https://github.com/GoogleChrome/accessibility-developer-tools) ซึ่งเป็น library ที่สร้างขึ้นโดย Google เพื่อ Chrome
|
||||
|
||||
คุณสามารถศึกษาเพิ่มเติมเกี่ยวกับมันได้ที่ [รีโปนี้](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules)
|
||||
|
||||
ถ้าคุณมีความรู้เกี่ยวกับอุปกรณือื่นๆที่สามารถใช้กับ Electron ได้ โปรดใส่มันเพิ่มใน [เอกสารการเข้าถึง](http://electron.atom.io/docs/tutorial/accessibility) ด้วยการขอดึงจาก Electron (pull request)
|
||||
244
docs-translations/th-TH/tutorial/quick-start.md
Normal file
244
docs-translations/th-TH/tutorial/quick-start.md
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
# การเริ่มต้นอย่างรวดเร็ว
|
||||
|
||||
Electronช่วยให้คุณสามารถสร้างโปรแกรมคอมพิวเตอร์ด้วย JavaScript โดย
|
||||
ให้รันไทม์ที่สอดคล้องกับ APIs ระดับระบบปฏิบัติการ You could see it
|
||||
as a variant of the Node.js runtime that is focused on desktop applications
|
||||
instead of web servers.
|
||||
|
||||
This doesn't mean Electron is a JavaScript binding to graphical user interface
|
||||
(GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also
|
||||
see it as a minimal Chromium browser, controlled by JavaScript.
|
||||
|
||||
### Main Process
|
||||
|
||||
In Electron, the process that runs `package.json`'s `main` script is called
|
||||
__the main process__. The script that runs in the main process can display a GUI
|
||||
by creating web pages.
|
||||
|
||||
### Renderer Process
|
||||
|
||||
Since Electron uses Chromium for displaying web pages, Chromium's
|
||||
multi-process architecture is also used. Each web page in Electron runs in
|
||||
its own process, which is called __the renderer process__.
|
||||
|
||||
In normal browsers, web pages usually run in a sandboxed environment and are not
|
||||
allowed access to native resources. Electron users, however, have the power to
|
||||
use Node.js APIs in web pages allowing lower level operating system
|
||||
interactions.
|
||||
|
||||
### Differences Between Main Process and Renderer Process
|
||||
|
||||
The main process creates web pages by creating `BrowserWindow` instances. Each
|
||||
`BrowserWindow` instance runs the web page in its own renderer process. When a
|
||||
`BrowserWindow` instance is destroyed, the corresponding renderer process
|
||||
is also terminated.
|
||||
|
||||
The main process manages all web pages and their corresponding renderer
|
||||
processes. Each renderer process is isolated and only cares about the web page
|
||||
running in it.
|
||||
|
||||
In web pages, calling native GUI related APIs is not allowed because managing
|
||||
native GUI resources in web pages is very dangerous and it is easy to leak
|
||||
resources. If you want to perform GUI operations in a web page, the renderer
|
||||
process of the web page must communicate with the main process to request that
|
||||
the main process perform those operations.
|
||||
|
||||
In Electron, we have several ways to communicate between the main process and
|
||||
renderer processes. Like [`ipcRenderer`](../api/ipc-renderer.md) and
|
||||
[`ipcMain`](../api/ipc-main.md) modules for sending messages, and the
|
||||
[remote](../api/remote.md) module for RPC style communication. There is also
|
||||
an FAQ entry on [how to share data between web pages][share-data].
|
||||
|
||||
## Write your First Electron App
|
||||
|
||||
Generally, an Electron app is structured like this:
|
||||
|
||||
```text
|
||||
your-app/
|
||||
├── package.json
|
||||
├── main.js
|
||||
└── index.html
|
||||
```
|
||||
|
||||
The format of `package.json` is exactly the same as that of Node's modules, and
|
||||
the script specified by the `main` field is the startup script of your app,
|
||||
which will run the main process. An example of your `package.json` might look
|
||||
like this:
|
||||
|
||||
```json
|
||||
{
|
||||
"name" : "your-app",
|
||||
"version" : "0.1.0",
|
||||
"main" : "main.js"
|
||||
}
|
||||
```
|
||||
|
||||
__Note__: If the `main` field is not present in `package.json`, Electron will
|
||||
attempt to load an `index.js`.
|
||||
|
||||
The `main.js` should create windows and handle system events, a typical
|
||||
example being:
|
||||
|
||||
```javascript
|
||||
const {app, BrowserWindow} = require('electron')
|
||||
const path = require('path')
|
||||
const url = require('url')
|
||||
|
||||
// Keep a global reference of the window object, if you don't, the window will
|
||||
// be closed automatically when the JavaScript object is garbage collected.
|
||||
let win
|
||||
|
||||
function createWindow () {
|
||||
// Create the browser window.
|
||||
win = new BrowserWindow({width: 800, height: 600})
|
||||
|
||||
// and load the index.html of the app.
|
||||
win.loadURL(url.format({
|
||||
pathname: path.join(__dirname, 'index.html'),
|
||||
protocol: 'file:',
|
||||
slashes: true
|
||||
}))
|
||||
|
||||
// Open the DevTools.
|
||||
win.webContents.openDevTools()
|
||||
|
||||
// Emitted when the window is closed.
|
||||
win.on('closed', () => {
|
||||
// Dereference the window object, usually you would store windows
|
||||
// in an array if your app supports multi windows, this is the time
|
||||
// when you should delete the corresponding element.
|
||||
win = null
|
||||
})
|
||||
}
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
// Some APIs can only be used after this event occurs.
|
||||
app.on('ready', createWindow)
|
||||
|
||||
// Quit when all windows are closed.
|
||||
app.on('window-all-closed', () => {
|
||||
// On macOS it is common for applications and their menu bar
|
||||
// to stay active until the user quits explicitly with Cmd + Q
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
}
|
||||
})
|
||||
|
||||
app.on('activate', () => {
|
||||
// On macOS it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (win === null) {
|
||||
createWindow()
|
||||
}
|
||||
})
|
||||
|
||||
// In this file you can include the rest of your app's specific main process
|
||||
// code. You can also put them in separate files and require them here.
|
||||
```
|
||||
|
||||
Finally the `index.html` is the web page you want to show:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hello World!</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello World!</h1>
|
||||
We are using node <script>document.write(process.versions.node)</script>,
|
||||
Chrome <script>document.write(process.versions.chrome)</script>,
|
||||
and Electron <script>document.write(process.versions.electron)</script>.
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Run your app
|
||||
|
||||
Once you've created your initial `main.js`, `index.html`, and `package.json` files,
|
||||
you'll probably want to try running your app locally to test it and make sure it's
|
||||
working as expected.
|
||||
|
||||
### `electron`
|
||||
|
||||
[`electron`](https://github.com/electron-userland/electron-prebuilt) is
|
||||
an `npm` module that contains pre-compiled versions of Electron.
|
||||
|
||||
If you've installed it globally with `npm`, then you will only need to run the
|
||||
following in your app's source directory:
|
||||
|
||||
```bash
|
||||
electron .
|
||||
```
|
||||
|
||||
If you've installed it locally, then run:
|
||||
|
||||
#### macOS / Linux
|
||||
|
||||
```bash
|
||||
$ ./node_modules/.bin/electron .
|
||||
```
|
||||
|
||||
#### Windows
|
||||
|
||||
```bash
|
||||
$ .\node_modules\.bin\electron .
|
||||
```
|
||||
|
||||
### Manually Downloaded Electron Binary
|
||||
|
||||
If you downloaded Electron manually, you can also use the included
|
||||
binary to execute your app directly.
|
||||
|
||||
#### Windows
|
||||
|
||||
```bash
|
||||
$ .\electron\electron.exe your-app\
|
||||
```
|
||||
|
||||
#### Linux
|
||||
|
||||
```bash
|
||||
$ ./electron/electron your-app/
|
||||
```
|
||||
|
||||
#### macOS
|
||||
|
||||
```bash
|
||||
$ ./Electron.app/Contents/MacOS/Electron your-app/
|
||||
```
|
||||
|
||||
`Electron.app` here is part of the Electron's release package, you can download
|
||||
it from [here](https://github.com/electron/electron/releases).
|
||||
|
||||
### Run as a distribution
|
||||
|
||||
After you're done writing your app, you can create a distribution by
|
||||
following the [Application Distribution](./application-distribution.md) guide
|
||||
and then executing the packaged app.
|
||||
|
||||
### Try this Example
|
||||
|
||||
Clone and run the code in this tutorial by using the [`electron/electron-quick-start`](https://github.com/electron/electron-quick-start)
|
||||
repository.
|
||||
|
||||
**Note**: Running this requires [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which includes [npm](https://npmjs.org)) on your system.
|
||||
|
||||
```bash
|
||||
# Clone the repository
|
||||
$ git clone https://github.com/electron/electron-quick-start
|
||||
# Go into the repository
|
||||
$ cd electron-quick-start
|
||||
# Install dependencies
|
||||
$ npm install
|
||||
# Run the app
|
||||
$ npm start
|
||||
```
|
||||
|
||||
For more example apps, see the
|
||||
[list of boilerplates](http://electron.atom.io/community/#boilerplates)
|
||||
created by the awesome electron community.
|
||||
|
||||
[share-data]: ../faq.md#how-to-share-data-between-web-pages
|
||||
Loading…
Add table
Add a link
Reference in a new issue