Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20190707Ionic_Meetup.pdf

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=47 Yosuke Onoue
July 07, 2019
0
210

 20190707Ionic_Meetup.pdf

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

July 07, 2019
Tweet

More Decks by Yosuke Onoue

See All by Yosuke Onoue
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
2
310
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
1
310
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
1
92
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
23
9.5k
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
4
3.3k
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
0
150
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
2
360
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
15
5.8k
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
1
550

Featured

See All Featured
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.5k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
660
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.6k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.4k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
321
53k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
27k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
35k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
18k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
840k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
86
8.5k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
200
20k

Transcript

  1. ͓ͷ͏͑ʢ!@MJLSʣ *POJD3FBDUGSPN4DSBUDI *POJD.FFUVQ5PLZP +VMZ 

  2. w ඌ্༸հʢ:PTVLF0OPVFʣ w "TTPDJBUF1SPGFTTPSBUUIF%FQBSUNFOUPG*OGPSNBUJPO 4DJFODF $PMMFHFPG)VNBOJUJFTBOE4DJFODFT 
 /JIPO6OJWFSTJUZ w 3FTFBSDI*OGPSNBUJPO7JTVBMJ[BUJPO

    w )PCCZ8FC%FWFMPQNFOU w *POJD#FHJOOFS "CPVU.F

  3. *POJD3FBDU w IUUQTXXXOQNKTDPNQBDLBHF!JPOJDSFBDU w *POJDDPNQPOFOUMJCSBSZGPS3FBDUKT w $VSSFOUMZCFUBSFMFBTF w -BUFTUWFSTJPO EBZTBHP

  4. )PXUPTUBSU*POJD3FBDU w $SFBUFOFXQSPKFDU w JPOJDDMJ SFDPNNFOEFE  w DSFBUFSFBDUBQQ w

    GSPNTDSBUDI w XFCQBDL ˡUPEBZ  w QBSDFM

  5. 1VSQPTFPGUIJTUBML w *OUSPEVDF*POJD3FBDU w -FBSOIPXUPTFUVQ*POJD3FBDU XJUINJOJNBMTFUUUJOHT  w *OUSPEVDFTPNF$PNQPOFOUTJO*POJD3FBDU

  6. $POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ

  7. $POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ

  8. 1SFSFRVJTJUF,OPXMFEHF w /FDFTTBSZCVOEMFSTFUUJOHT w !JPOJDDPSF JOUFSOBMJNQMFNFOUBUJPOPG*POJD 
 OFFETTPNF$44BTTFUT w JPOJDPOTMPBET47(BTTFUTVTJOHJNQPSUTZOUBY

    w JPOJDDMJDSFBUFT3FBDUBQQUFNQMBUFCBTFEPODSFBUF SFBDUBQQ w /FDFTTBSZQBSUPGJUTTFUUJOHTOFFEUPCFVTFE

  9. *OTUBMMBUJPO $ npm init -y $ npm i @ionic/react react

    react-dom \ react-router react-router-dom $ npm i -D @babel/core @babel/preset-react @svgr/webpack \ babel-loader css-loader style-loader url-loader \ webpack webpack-cli webpack-dev-server

  10. XFCQBDLDPOpHKT const path = require('path') const options = { module:

    { rules: [ // write our loader settings here ] }, entry: { bundle: './src/index' }, output: { path: path.join(__dirname, 'public'), filename: '[name].js' }, devServer: { historyApiFallback: true, contentBase: path.join(__dirname, 'public'), port: 8080 }, mode: process.env.NODE_ENV || 'development' } if (process.env.NODE_ENV !== 'production') { Object.assign(options, { devtool: 'inline-source-map' }) } module.exports = options

  11. CBCFM { test: /\.js$/, use: { loader: 'babel-loader', options: {

    presets: ['@babel/preset-react'] } }, include: [path.resolve(__dirname, 'src')] },

  12. -PBEJOH$44 import '@ionic/core/css/core.css' import '@ionic/core/css/ionic.bundle.css' "OE JOZPVSFOUSZQPJOU { test: /\.css$/,

    use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } } ] },

  13. -PBEJOH*DPOT { test: /\.svg$/, use: ['@svgr/webpack', 'url-loader'] } TWHS w

    5SBOTGPSN47(TJOUP3FBDUDPNQPOFOUT
 IUUQTHJUIVCDPNTNPPUIDPEFTWHS w VTFEJODSFBUFSFBDUBQQ import React from 'react' import { IonIcon } from '@ionic/react' import { logoTwitter } from 'ionicons/icons' export const IconExample = () => <IonIcon icon={logoTwitter} /> *OZPVSBQQ

  14. $POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDU w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ

  15. )FMMP 8PSME import React from 'react' import { render }

    from 'react-dom' import { IonApp, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react' const App = () => { return ( <IonApp> <IonPage> <IonHeader> <IonToolbar> <IonTitle>Title</IonTitle> </IonToolbar> </IonHeader> <IonContent className='ion-padding'> <h1>Hello, Ionic React</h1> </IonContent> </IonPage> </IonApp> ) } render(<App />, document.querySelector('#content'))

  16. 3PVUJOH import React from 'react' import { render } from

    'react-dom' import { Route } from 'react-router' import { IonApp, IonPage, IonReactRouter, IonRouterOutlet } from '@ionic/react' import RootPage from './pages/root' const App = () => { return ( <IonApp> <IonReactRouter> <IonPage> <IonRouterOutlet> <Route path='/' component={RootPage} exact /> </IonRouterOutlet> </IonPage> </IonReactRouter> </IonApp> ) } render(<App />, document.querySelector('#content'))

  17. *PO.PEBM const ModalExample = () => { const [showModal, setShowModal]

    = React.useState(false) return ( <> <IonContent> <IonButton onClick={() => { setShowModal(true) }} > Show Modal </IonButton> </IonContent> <IonModal isOpen={showModal}> <IonPage> <IonHeader> <IonToolbar> <IonTitle>Modal Example</IonTitle> <IonButtons slot='end'> <IonButton onClick={() => { setShowModal(false) }} > Close </IonButton> </IonButtons> </IonToolbar> </IonHeader> <IonContent className='ion-padding'> <p>Modal opened</p> </IonContent> </IonPage> </IonModal> </> ) }

  18. 6TJOH3FEVY import React from 'react' import { render } from

    'react-dom' import { Route, Switch } from 'react-router-dom' import { Provider } from 'react-redux' import { IonApp, IonPage, IonReactRouter } from '@ionic/react' import store from './store' import RootPage from './pages/root' const App = () => { return ( <Provider store={store}> <IonApp> <IonReactRouter> <IonPage> <Switch> <Route path='/' component={RootPage} /> </Switch> </IonPage> </IonReactRouter> </IonApp> </Provider> ) } render(<App />, document.querySelector('#content'))

  19. #VJMEJOHJ04"QQXJUI$BQBDJUPS w IUUQTDBQBDJUPSJPOJDGSBNFXPSLDPNEPDTHFUUJOH TUBSUFE $ npm install --save @capacitor/core @capacitor/cli

    $ npx cap init --web-dir public $ npx cap add ios $ npx cap open ios $ npx webpack --mode production $ npx cap copy 1SFQBSBUJPO 3FCVJME

  20. %FNP"QQ w $VUFEPHJNBHFWJFXFS w IUUQTEPHWETMBCKQ w 6TJOH%PH"1*
 IUUQTEPHDFPEPHBQJ w TPVSDFDPEF


    IUUQTHJUIVCDPNMJLSTBOECPYEPHWJFXFS

  21. $POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ

  22. *DPNQMFUFMZVOEFSTUPPE
 *POJD3FBDU

  23. .Z*NQSFTTJPO w &BTZUPMFBSOGPS3FBDUVTFST w 3FBMMZOJDFDPNQPOFOUMJCSBSZ w 6TFGVMGPSCPUIDSFBUJOHOFXBQQBOEFNCFEEJOH FYJTUJOH3FBDUBQQ w #VU

    NBOZCVHTGPSOPX w 8FSFMPPLJOHGPSXBSEUPP⒏DJBMSFMFBTF

  24. 4VNNBSZ w 5IJTUBMLJOUSPEVDFT*POJD3FBDU w *GZPVBSFB3FBDUVTFS MFUTUSZOPX w %FNPTPVSDFDPEF
 IUUQTHJUIVCDPNMJLSTBOECPYEPHWJFXFS w

    4FFBMTP
 ࠷খߏ੒Ͱ࢝ΊΔ!JPOJDSFBDU
 IUUQTRJJUBDPN@MJLSJUFNTB