Prezentacja o tym jak zgrać WordPressowe REST API z aplikacją desktopową opartą na Electronie

1. Electron + WordPress =
Tomasz Dziuda
❤

2. Dlaczego?

3. Umiem w Electrony...
Źródło: https://getpublii.com

4. w WordPressy trochę też ...

5. coraz bardziej cenię swoją prywatność

6. Czego użyjemy?

8. Przyśpieszony Kurs Electrona

9. Źródło: https://atom.io/

10. Źródło: https://desktop.github.com/

11. =
Przyśpieszony Kurs Electrona

12. =
Przyśpieszony Kurs Electrona

13. = +
Przyśpieszony Kurs Electrona

14. = + +
Przyśpieszony Kurs Electrona

15. Przyśpieszony Kurs Electrona cz.2
Wątek główny

16. Przyśpieszony Kurs Electrona cz.2
Wątek główny
API systemu

17. Przyśpieszony Kurs Electrona cz.2
...
Wątki renderujące
Wątek główny
API systemu

18. Przyśpieszony Kurs Electrona cz.2
...
Wątki renderujące
Wątek główny
API systemu
IPC IPC IPC

19. Przyśpieszony Kurs Electrona cz.3
Build cross platform desktop apps with
JavaScript, HTML, and CSS

20. Przyśpieszony Kurs Electrona cz.3
Build cross platform desktop apps with
JavaScript, HTML, and CSS
XSS

21. Przyśpieszony Kurs Electrona cz.4
Brak możliwości ukrycia
kodu źródłowego

22. Dlaczego WordPress?

23. Gotowe REST API
{REST API}
GET POST PUT DELETE

24. Gotowy panel zarządzania

25. Źródło: https://www.contentful.com/

26. Połowa pracy za nami a
jeszcze nie zaczęliśmy ;-)

27. 1 WordPress = wiele aplikacji

28. Dlaczego React?

29. JSX
<App>
<Header />
<Content />
<Footer />
<Sidebar />
</App>

30. Ekosystem

31. Używają go w Automattic ;-)
Źródło: https://developer.wordpress.com/calypso/

32. Przydatne narzędzia
...mi pomogły ;-)

33. Postman
Źródło: https://www.getpostman.com/

34. Devtron
Źródło: https://electron.atom.io/devtron/

35. Założenia

36. WP Notes

37. WP Notes
• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek

38. WP Notes
• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek

39. WP Notes
• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek

40. WP Notes
• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek

41. WP Notes
• Synchronizacja notatek po uruchomieniu/zalogowaniu
• Obsługa wielu użytkowników
• Edytor Markdown
• Możliwość dodawania, edycji i usuwania notatek
• Wyszukiwarka notatek

42. Implementacja

43. Składowe

44. Składowe
Odpowiednie endpointy REST API Plugin + CPT

45. Składowe
Odpowiednie endpointy REST API
Autoryzacja komunikacji
Plugin + CPT
JWT

46. Składowe
Odpowiednie endpointy REST API
Autoryzacja komunikacji
Aplikacja napisana w Electronie
Plugin + CPT
JWT
Electron + React

47. Endpointy i CPT

48. Plugin dla aplikacji

49. Plugin dla aplikacji
• Tworzy dedykowany Custom Post Type dla danych
• Tworzy potrzebne endpointy
• Modyfikuje istniejące endpointy

50. Plugin dla aplikacji
• Tworzy dedykowany Custom Post Type dla danych
• Tworzy potrzebne endpointy
• Modyfikuje istniejące endpointy

51. Plugin dla aplikacji
• Tworzy dedykowany Custom Post Type dla danych
• Tworzy potrzebne endpointy
• Modyfikuje istniejące endpointy

52. Dlaczego Custom Post Type?

53. 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

54. 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

55. 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

56. Endpointy

57. /wp-json/wp/v2/wp-notes
$args = array(
// ...
'show_in_rest' => true,
'rest_base' => 'wp-notes'
);
register_post_type( 'wp_notes', $args );

58. /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/

59. Posty prywatne są przydatne ;)

60. 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

61. Pamiętajmy o strefach czasowych
CEST UTC
:-(

62. [
{
...
"date_gmt": "2017-05-21T12:37:56",
...
"modified_gmt": "2017-05-21T12:37:56",
...
}
]
new Date().getTime() // Zwraca czas UTC

63. Modyfikacje endpointów

64. 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
);

65. 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
);

66. 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
);

67. 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
);

68. Autoryzacja

69. Źródło: https://jwt.io/

70. Źródło: https://jwt.io/

71. Dane w tokenie NIE SĄ
szyfrowane

72. Przy komunikacji z REST API
korzystaj z połączenia SSL

73. Źródło: https://pl.wordpress.org/plugins/jwt-authentication-for-wp-rest-api/

74. Gdy JWT nie działają dodaj w .htaccess:
RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
Czasem może też być potrzebne dodanie:
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

75. Autoryzacja - krok 1
Wysył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'
}

76. Autoryzacja - krok 1
Wysył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": "admin@localhost.dev",
"user_nicename": "admin"
}
Gdy dane są poprawne otrzymujemy token i dane użytkownika:

77. Autoryzacja - krok 2
Do każdego zapytania wymagającego
autoryzacji dodajemy nagłówek:
Authorization: Bearer WARTOŚĆ_TOKENA

78. Aplikacja

79. Struktura aplikacji
<App>

80. Struktura aplikacji
<App>
<Editor><Sidebar>

81. Struktura aplikacji
<App>
<Editor><Sidebar>
<Search>
<List>
<ReactMarkdown>

82. Struktura aplikacji
<App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>

83. Komunikacja pomiędzy
komponentami

84. Wzorzec obserwatora
class EventEmitter extends React.Component {
dispatch(event, data) { ... }
subscribe(event, callback) { ... }
unsubscribe(event, callback) { ... }
}

85. Wzorzec obserwatora
class EventEmitter extends React.Component {
dispatch(event, data) { ... }
subscribe(event, callback) { ... }
unsubscribe(event, callback) { ... }
}

86. Wzorzec obserwatora
class EventEmitter extends React.Component {
dispatch(event, data) { ... }
subscribe(event, callback) { ... }
unsubscribe(event, callback) { ... }
}

87. Wzorzec obserwatora
class EventEmitter extends React.Component {
dispatch(event, data) { ... }
subscribe(event, callback) { ... }
unsubscribe(event, callback) { ... }
}

88. Wzorzec obserwatora
class EventEmitter extends React.Component {
dispatch(event, data) { ... }
subscribe(event, callback) { ... }
unsubscribe(event, callback) { ... }
}
class App extends React.Component
class App extends EventEmitter

89. Wzorzec obserwatora
class EventEmitter extends React.Component {
dispatch(event, data) { ... }
subscribe(event, callback) { ... }
unsubscribe(event, callback) { ... }
}
class App extends React.Component
class App extends EventEmitter

90. <App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>

91. <App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>

92. <App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>
subscribe('delete-item', callback)

93. <App>
<Editor><Sidebar>
<Search>
<List>
<Item>
<ReactMarkdown>
<Item>
<Item>
distpatch('delete-item', itemID)

94. Przechowywanie danych

95. Przechowywanie danych
user_ID_1
1.md
2.md
3.md
files.json
user_ID_2
4.md
5.md
files.json

96. Przechowywanie danych
user_ID_1
1.md
2.md
3.md
files.json
user_ID_2
4.md
5.md
files.json

97. [
{
id: 10,
title: "Post title",
modificationDate: 123049044
},
{
id: 10,
title: "Post title",
modificationDate: 123049044
},
...
]
Przechowywanie danych
files.jsonuser_ID_1
1.md
2.md
3.md
files.json
user_ID_2
4.md
5.md
files.json

98. Synchronizacja danych

99. 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

100. 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

101. 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
}]

102. Pobranie i zaktualizowanie zmienionych wpisów
dziudek-wp-notes/1/
1.md
4.md
files.json
[{
"id": 1,
"modificationDate": 102
},
{
"id": 4,
"modificationDate": 105
}]

103. Zaktualizowanie pliku files.json
dziudek-wp-notes/1/
1.md
4.md
files.json
[{
"id": 1,
"modificationDate": 102
},
{
"id": 4,
"modificationDate": 105
}]

104. 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));

105. Edytor
Źródło: https://github.com/JedWatson/react-md-editor
render: function() {
return <Editor
value={this.state.code}
options={configObject}
onChange={this.updateCode} />
}

106. Źródło: https://codemirror.net/

107. Skróty klawiaturowe
import {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);

108. DEMO

110. Co dalej?

111. Offline mode

112. Generowanie PDF-ów
let 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.')
});
});
});

113. Bezpieczne przechowywanie tokenów

114. 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)

115. 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:

116. Pytania?

117. tomasz@dziuda.com
@dziudek
http://dziudek.pl
http://www.slideshare.net/dziudek
Tomasz Dziuda