Munchkin
2 likes•816 views
1. The document discusses building an app called Munchkin using Electron and React-Photonkit. It describes setting up the app skeleton with different components like a header, sidebar, and viewer. 2. It then covers using IPC to communicate between the main and renderer processes to update device data from ADB in real-time. Methods for sending and receiving IPC messages are demonstrated. 3. Troubleshooting resolving the Electron module is discussed, along with ensuring the proper webpack configuration is set up for an Electron target.
![ipcRenderer
// In renderer process (web page).
const ipcRenderer = require('electron').ipcRenderer;
componentDidMount() {
ipcRenderer.on('on-add-device', (event, arg) => {
var devices = this.state.devices;
devices[arg.id] = arg;
this.setState({ devices: devices });
});
ipcRenderer.on('on-change-device', (event, arg) => {
var devices = this.state.devices;
devices[arg.id] = arg;
this.setState({ devices: devices });
});
ipcRenderer.on('on-remove-device', (event, arg) => {
var devices = this.state.devices;
delete devices[arg.id];
this.setState({ devices: devices });
});
ipcRenderer.send('check-devices');
}](https://image.slidesharecdn.com/munchkin-160127030457/85/Munchkin-27-320.jpg)
![[webpack] config
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: …,
output: …,
target: 'electron',
module: {
loaders: [
…
…
webpack… 싫음](https://image.slidesharecdn.com/munchkin-160127030457/85/Munchkin-34-320.jpg)
Munchkin
- 1. Munchkin Jaewe Heo · !iiid! · @importre Jan 27, 2016
- 2. About me • !iiid! • @importre • Kotlin • Electron
- 3. Goal • Electron과 react-photonkit을 이용하여 앱 같은 앱 만들기
- 4. Agenda • photonkit • react-photonkit • munchkin
- 5. photonkit
- 9. History • Oct 15, 2015 • 첫 커밋 • Oct 29, 2015 • Electron Korea Meetup #1 에서 소심하게 프로젝트 공개 • @ragingwind(Jimmy Moon)님과 협업 시작 • Nov 3, 2015 • v0.4.1 릴리즈
- 10. Todo • coffescript -> es2015 • webpack -> ??? • improvement of tests • issues
- 11. Munchkin 🐈
- 12. Android Finder • 한 것 • 단말기 연결 목록 실시간 업데이트 • 폴더 이동 가능 • 텍스트 뷰어 • 할 것 • …
- 14. Demo 🔬
- 15. Skeleton 💀
- 16. app.jsx <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 17. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 18. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 19. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 20. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 21. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 22. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 23. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 24. Skeleton <Window> <Header subj={subj} /> <Content> <PaneGroup> <Sidebar /> <Contents subj={subj} /> <Viewer subj={subj} /> </PaneGroup> </Content> <Footer /> </Window>
- 25. Details • import Rx from ‘rxjs/Rx’; • import electron from ‘electron’; • electron.ipcMain; • electron.ipcRenderer;
- 26. IPC ADB
- 27. ipcRenderer // In renderer process (web page). const ipcRenderer = require('electron').ipcRenderer; componentDidMount() { ipcRenderer.on('on-add-device', (event, arg) => { var devices = this.state.devices; devices[arg.id] = arg; this.setState({ devices: devices }); }); ipcRenderer.on('on-change-device', (event, arg) => { var devices = this.state.devices; devices[arg.id] = arg; this.setState({ devices: devices }); }); ipcRenderer.on('on-remove-device', (event, arg) => { var devices = this.state.devices; delete devices[arg.id]; this.setState({ devices: devices }); }); ipcRenderer.send('check-devices'); }
- 28. ipcMain // In main process. const ipcMain = require('electron').ipcMain; ipcMain.on('check-devices', function (event, arg) { const devices = client.trackDevices(); Rx.Observable.fromPromise(devices) .subscribe(tracker => { tracker.on('add', device => { event.sender.send('on-add-device', device); }); tracker.on('change', device => { event.sender.send('on-change-device', device); }); tracker.on('remove', device => { event.sender.send('on-remove-device', device); }); }, error => { console.log(error); }); });
- 31. Subject Update viewer Send data Viewer
- 32. Troubleshooting
- 33. Cannot resolve module 'electron' ERROR in ./app/header.jsx Module not found: Error: Cannot resolve module 'electron' in /path/to/app @ ./app/header.jsx 15:16-35 ERROR in ./app/sidebar.jsx Module not found: Error: Cannot resolve module 'electron' in /path/to/app @ ./app/sidebar.jsx 15:16-35 … …
- 34. [webpack] config var path = require('path'); var webpack = require('webpack'); module.exports = { entry: …, output: …, target: 'electron', module: { loaders: [ … … webpack… 싫음
- 35. Conclusion
- 36. Conclusion • 정말 앱 같이 보이긴 함 • photon에 의존적이어서 콤포넌트가 부족함 • 웹 개발자가 아니어도(Native 개발자?) 도전해볼만 함 ¯_(ツ)_/¯
- 38. Thank you 🌷