Download - Electron + WordPress = ❤
![Page 1: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/1.jpg)
Electron + WordPress = Tomasz Dziuda
❤
![Page 2: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/2.jpg)
Dlaczego?
![Page 4: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/4.jpg)
w WordPressy trochę też ...
![Page 5: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/5.jpg)
coraz bardziej cenię swoją prywatność
![Page 6: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/6.jpg)
Czego użyjemy?
![Page 7: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/7.jpg)
![Page 8: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/8.jpg)
Przyśpieszony Kurs Electrona
![Page 11: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/11.jpg)
=
Przyśpieszony Kurs Electrona
![Page 12: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/12.jpg)
=
Przyśpieszony Kurs Electrona
![Page 13: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/13.jpg)
= +
Przyśpieszony Kurs Electrona
![Page 14: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/14.jpg)
= + +
Przyśpieszony Kurs Electrona
![Page 15: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/15.jpg)
Przyśpieszony Kurs Electrona cz.2
Wątek główny
![Page 16: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/16.jpg)
Przyśpieszony Kurs Electrona cz.2
Wątek główny
API systemu
![Page 17: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/17.jpg)
Przyśpieszony Kurs Electrona cz.2
...Wątki renderujące
Wątek główny
API systemu
![Page 18: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/18.jpg)
Przyśpieszony Kurs Electrona cz.2
...Wątki renderujące
Wątek główny
API systemu
IPC IPC IPC
![Page 19: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/19.jpg)
Przyśpieszony Kurs Electrona cz.3
Build cross platform desktop apps with JavaScript, HTML, and CSS
![Page 20: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/20.jpg)
Przyśpieszony Kurs Electrona cz.3
Build cross platform desktop apps with JavaScript, HTML, and CSS
XSS
![Page 21: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/21.jpg)
Przyśpieszony Kurs Electrona cz.4
Brak możliwości ukrycia kodu źródłowego
![Page 22: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/22.jpg)
Dlaczego WordPress?
![Page 23: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/23.jpg)
Gotowe REST API
{REST API}GET POST PUT DELETE
![Page 24: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/24.jpg)
Gotowy panel zarządzania
![Page 26: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/26.jpg)
Połowa pracy za nami a jeszcze nie zaczęliśmy ;-)
![Page 27: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/27.jpg)
1 WordPress = wiele aplikacji
![Page 28: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/28.jpg)
Dlaczego React?
![Page 29: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/29.jpg)
JSX
<App> <Header /> <Content /> <Footer /> <Sidebar /></App>
![Page 30: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/30.jpg)
Ekosystem
![Page 31: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/31.jpg)
Używają go w Automattic ;-)Źródło: https://developer.wordpress.com/calypso/
![Page 32: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/32.jpg)
Przydatne narzędzia...mi pomogły ;-)
![Page 35: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/35.jpg)
Założenia
![Page 36: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/36.jpg)
WP Notes
![Page 37: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/37.jpg)
WP Notes• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek
![Page 38: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/38.jpg)
WP Notes• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek
![Page 39: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/39.jpg)
WP Notes• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek
![Page 40: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/40.jpg)
WP Notes• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek
![Page 41: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/41.jpg)
WP Notes• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek
![Page 42: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/42.jpg)
Implementacja
![Page 43: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/43.jpg)
Składowe
![Page 44: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/44.jpg)
Składowe
Odpowiednie endpointy REST API Plugin + CPT
![Page 45: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/45.jpg)
Składowe
Odpowiednie endpointy REST API
Autoryzacja komunikacji
Plugin + CPT
JWT
![Page 46: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/46.jpg)
Składowe
Odpowiednie endpointy REST API
Autoryzacja komunikacji
Aplikacja napisana w Electronie
Plugin + CPT
JWT
Electron + React
![Page 47: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/47.jpg)
Endpointy i CPT
![Page 48: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/48.jpg)
Plugin dla aplikacji
![Page 49: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/49.jpg)
Plugin dla aplikacji
• Tworzy dedykowany Custom Post Type dla danych
• Tworzy potrzebne endpointy
• Modyfikuje istniejące endpointy
![Page 50: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/50.jpg)
Plugin dla aplikacji
• Tworzy dedykowany Custom Post Type dla danych
• Tworzy potrzebne endpointy
• Modyfikuje istniejące endpointy
![Page 51: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/51.jpg)
Plugin dla aplikacji
• Tworzy dedykowany Custom Post Type dla danych
• Tworzy potrzebne endpointy
• Modyfikuje istniejące endpointy
![Page 52: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/52.jpg)
Dlaczego Custom Post Type?
![Page 53: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/53.jpg)
Dlaczego Custom Post Type?
• Możemy na jednym WordPressie oprzeć kilka aplikacji
• CPT mogą mieć własne endpointy
• Możemy te endpointy bez obaw dostosować do swoich potrzeb
![Page 54: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/54.jpg)
Dlaczego Custom Post Type?
• Możemy na jednym WordPressie oprzeć kilka aplikacji
• CPT mogą mieć własne endpointy
• Możemy te endpointy bez obaw dostosować do swoich potrzeb
![Page 55: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/55.jpg)
Dlaczego Custom Post Type?
• Możemy na jednym WordPressie oprzeć kilka aplikacji
• CPT mogą mieć własne endpointy
• Możemy te endpointy bez obaw dostosować do swoich potrzeb
![Page 56: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/56.jpg)
Endpointy
![Page 57: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/57.jpg)
/wp-json/wp/v2/wp-notes
$args = array(// ...'show_in_rest' => true,'rest_base' => 'wp-notes'
);
register_post_type( 'wp_notes', $args );
![Page 58: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/58.jpg)
/wp-json/wp-notes/v1/notes?author=X
[ { "id": 36, "modificationDate": 1495370276000 }, ... { "id": 13, "modificationDate": 1495295589000 }, { "id": 9, "modificationDate": 1495368831000 }]
https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/
![Page 59: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/59.jpg)
Posty prywatne są przydatne ;)
![Page 60: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/60.jpg)
Pobieranie prywatnych postów
1) Musimy być autoryzowani jako twórca wpisu
2) W URL-u REST API dodajemy:
wp-json/wp/v2/wp-notes/?status=private
![Page 61: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/61.jpg)
Pamiętajmy o strefach czasowych
CEST UTC
:-(
![Page 62: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/62.jpg)
[ { ... "date_gmt": "2017-05-21T12:37:56", ... "modified_gmt": "2017-05-21T12:37:56", ... }]
new Date().getTime() // Zwraca czas UTC
![Page 63: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/63.jpg)
Modyfikacje endpointów
![Page 64: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/64.jpg)
function dziudek_wp_notes_use_raw_content( $data, $post, $request ) { $data->data['content']['plaintext'] = $post->post_content; $data->data['title']['plaintext'] = $post->post_title; $data->data['modified_gmt'] = strtotime($post->post_modified_gmt . ' UTC') * 1000; return $data;}
add_filter( 'rest_prepare_wp_notes', 'dziudek_wp_notes_use_raw_content', 10, 3 );
![Page 65: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/65.jpg)
function dziudek_wp_notes_use_raw_content( $data, $post, $request ) { $data->data['content']['plaintext'] = $post->post_content; $data->data['title']['plaintext'] = $post->post_title; $data->data['modified_gmt'] = strtotime($post->post_modified_gmt . ' UTC') * 1000; return $data;}
add_filter( 'rest_prepare_wp_notes', 'dziudek_wp_notes_use_raw_content', 10, 3 );
![Page 66: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/66.jpg)
function dziudek_wp_notes_use_raw_content( $data, $post, $request ) { $data->data['content']['plaintext'] = $post->post_content; $data->data['title']['plaintext'] = $post->post_title; $data->data['modified_gmt'] = strtotime($post->post_modified_gmt . ' UTC') * 1000; return $data;}
add_filter( 'rest_prepare_wp_notes', 'dziudek_wp_notes_use_raw_content', 10, 3 );
![Page 67: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/67.jpg)
function dziudek_wp_notes_use_raw_content( $data, $post, $request ) { $data->data['content']['plaintext'] = $post->post_content; $data->data['title']['plaintext'] = $post->post_title; $data->data['modified_gmt'] = strtotime($post->post_modified_gmt . ' UTC') * 1000; return $data;}
add_filter( 'rest_prepare_wp_notes', 'dziudek_wp_notes_use_raw_content', 10, 3 );
![Page 68: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/68.jpg)
Autoryzacja
![Page 71: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/71.jpg)
Dane w tokenie NIE SĄ szyfrowane
![Page 72: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/72.jpg)
Przy komunikacji z REST API korzystaj z połączenia SSL
![Page 73: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/73.jpg)
Źródło: https://pl.wordpress.org/plugins/jwt-authentication-for-wp-rest-api/
![Page 74: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/74.jpg)
Gdy JWT nie działają dodaj w .htaccess:
RewriteEngine onRewriteCond %{HTTP:Authorization} ^(.*)RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
Czasem może też być potrzebne dodanie:
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
![Page 75: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/75.jpg)
Autoryzacja - krok 1Wysyłamy zapytaniem POST do endpointa /wp-json/jwt-auth/v1/token login i hasło użytkownika, którego chcemy autoryzować:
{ username: 'admin', password: 'password'}
![Page 76: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/76.jpg)
Autoryzacja - krok 1Wysyłamy zapytaniem POST do endpointa /wp-json/jwt-auth/v1/token login i hasło użytkownika, którego chcemy autoryzować:
{ username: 'admin', password: 'password'}
{ "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ...", "user_display_name": "admin", "user_email": "[email protected]", "user_nicename": "admin"}
Gdy dane są poprawne otrzymujemy token i dane użytkownika:
![Page 77: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/77.jpg)
Autoryzacja - krok 2
Do każdego zapytania wymagającego autoryzacji dodajemy nagłówek:
Authorization: Bearer WARTOŚĆ_TOKENA
![Page 78: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/78.jpg)
Aplikacja
![Page 79: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/79.jpg)
Struktura aplikacji
<App>
![Page 80: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/80.jpg)
Struktura aplikacji
<App>
<Editor><Sidebar>
![Page 81: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/81.jpg)
Struktura aplikacji
<App>
<Editor><Sidebar>
<Search>
<List><ReactMarkdown>
![Page 82: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/82.jpg)
Struktura aplikacji
<App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>
![Page 83: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/83.jpg)
Komunikacja pomiędzy komponentami
![Page 84: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/84.jpg)
Wzorzec obserwatoraclass EventEmitter extends React.Component { dispatch(event, data) { ... } subscribe(event, callback) { ... } unsubscribe(event, callback) { ... }}
![Page 85: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/85.jpg)
Wzorzec obserwatoraclass EventEmitter extends React.Component { dispatch(event, data) { ... } subscribe(event, callback) { ... } unsubscribe(event, callback) { ... }}
![Page 86: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/86.jpg)
Wzorzec obserwatoraclass EventEmitter extends React.Component { dispatch(event, data) { ... } subscribe(event, callback) { ... } unsubscribe(event, callback) { ... }}
![Page 87: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/87.jpg)
Wzorzec obserwatoraclass EventEmitter extends React.Component { dispatch(event, data) { ... } subscribe(event, callback) { ... } unsubscribe(event, callback) { ... }}
![Page 88: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/88.jpg)
Wzorzec obserwatoraclass EventEmitter extends React.Component { dispatch(event, data) { ... } subscribe(event, callback) { ... } unsubscribe(event, callback) { ... }}
class App extends React.Component
class App extends EventEmitter
![Page 89: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/89.jpg)
Wzorzec obserwatoraclass EventEmitter extends React.Component { dispatch(event, data) { ... } subscribe(event, callback) { ... } unsubscribe(event, callback) { ... }}
class App extends React.Component
class App extends EventEmitter
![Page 90: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/90.jpg)
<App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>
![Page 91: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/91.jpg)
<App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>
![Page 92: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/92.jpg)
<App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>
subscribe('delete-item', callback)
![Page 93: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/93.jpg)
<App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>
distpatch('delete-item', itemID)
![Page 94: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/94.jpg)
Przechowywanie danych
![Page 95: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/95.jpg)
Przechowywanie danychuser_ID_1 1.md 2.md 3.md files.json
user_ID_2 4.md 5.md files.json
![Page 96: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/96.jpg)
Przechowywanie danychuser_ID_1 1.md 2.md 3.md files.json
user_ID_2 4.md 5.md files.json
![Page 97: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/97.jpg)
[ {
id: 10, title: "Post title", modificationDate: 123049044
}, {
id: 10, title: "Post title", modificationDate: 123049044
}, ...
]
Przechowywanie danychfiles.jsonuser_ID_1
1.md 2.md 3.md files.json
user_ID_2 4.md 5.md files.json
![Page 98: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/98.jpg)
Synchronizacja danych
![Page 99: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/99.jpg)
Pobranie danych z endpointa synchronizacji
dziudek-wp-notes/1/ 1.md 2.md 3.md files.json
[{"id": 1,"modificationDate": 102
}, {"id": 4,"modificationDate": 105
}]
wp-json/wp-notes/v1/notes?author=1
![Page 100: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/100.jpg)
Porównanie dat modyfikacji postów
[{"id": 1,"modificationDate": 102
}, {"id": 4,"modificationDate": 105
}]
[{"id": 1,"modificationDate": 101
}, {"id": 2,"modificationDate": 102
},{"id": 3,"modificationDate": 103
}]
Lokalnie Zdalnie
![Page 101: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/101.jpg)
Usunięcie nieistniejących plików
dziudek-wp-notes/1/ 1.md 2.md 3.md files.json
[{"id": 1,"modificationDate": 102
}, {"id": 4,"modificationDate": 105
}]
![Page 102: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/102.jpg)
Pobranie i zaktualizowanie zmienionych wpisów
dziudek-wp-notes/1/ 1.md 4.md files.json
[{"id": 1,"modificationDate": 102
}, {"id": 4,"modificationDate": 105
}]
![Page 103: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/103.jpg)
Zaktualizowanie pliku files.json
dziudek-wp-notes/1/ 1.md 4.md files.json
[{"id": 1,"modificationDate": 102
}, {"id": 4,"modificationDate": 105
}]
![Page 104: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/104.jpg)
Pobieranie danych: node-fetch
Źródło: https://github.com/bitinn/node-fetch
Fetch API: https://developers.google.com/web/updates/2015/03/introduction-to-fetch
fetch('http://httpbin.org/post', { method: 'POST', body: stream }) .then(res => res.json()) .then(json => console.log(json));
![Page 105: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/105.jpg)
Edytor
Źródło: https://github.com/JedWatson/react-md-editor
render: function() {return <Editor
value={this.state.code} options={configObject} onChange={this.updateCode} />
}
![Page 107: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/107.jpg)
Skróty klawiaturoweimport {remote} from 'electron';
const template = [{ label: "Edit", submenu: [{ label: "Zapisz zmiany", accelerator: "CmdOrCtrl+S", click: function() { // .. } ]}];
const menu = remote.Menu.buildFromTemplate(template);remote.Menu.setApplicationMenu(menu);
![Page 108: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/108.jpg)
DEMO
![Page 109: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/109.jpg)
![Page 110: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/110.jpg)
Co dalej?
![Page 111: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/111.jpg)
Offline mode
![Page 112: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/112.jpg)
Generowanie PDF-ówlet win = new BrowserWindow({width: 800, height: 600})win.loadURL('file://file-to-load.html')
win.webContents.on('did-finish-load', () => { win.webContents.printToPDF({}, (error, data) => { fs.writeFile('/tmp/print.pdf', data, (error) => { console.log('Write PDF successfully.') }); });});
![Page 113: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/113.jpg)
Bezpieczne przechowywanie tokenów
![Page 114: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/114.jpg)
node-keytar
Źródło: http://atom.github.io/node-keytar/
Natywny moduł do przechowywania haseł z użyciem Keychain (macOS),
Credential Vault (Windows) i libsecret (Linux)
![Page 115: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/115.jpg)
Do przejrzenia
• https://nodesource.com/blog/fifteen-essential-packages-to-get-started-with-electron/
• https://openfin.co/2016/11/04/openfin-slashes-electron-memory-78/
• http://blog.atom.io/2017/04/18/improving-startup-time.html
• https://openfin.co/2016/02/17/openfin-addressing-security-and-performance-challenges-with-electron/
• https://github.com/pojala/electrino
• https://github.com/MacGapProject/MacGap1
Plugin: https://github.com/dziudek/WordCampPolska-WP-Notes-Plugin
Aplikacja: https://github.com/dziudek/WordCampPolska-WP-Notes-App
Artykuły warte uwagi:
![Page 116: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/116.jpg)
Pytania?
![Page 117: Electron + WordPress = ❤](https://reader034.vdocuments.site/reader034/viewer/2022050613/5a649fe07f8b9a3b568b5095/html5/thumbnails/117.jpg)
@dziudek
http://dziudek.pl
http://www.slideshare.net/dziudek
Tomasz Dziuda