สร้างแอพมือถือด้วย Ionic และ React

Ionic เพิ่งเพิ่มการรองรับ React; ดังนั้นตอนนี้ นักพัฒนา React สามารถใช้ประโยชน์จาก Ionic เพื่อสร้างแอพมือถือไฮบริดและเว็บแอพโปรเกรสซีฟ (PWAs) ในโพสต์นี้ เราจะแสดงวิธีเริ่มต้นใช้งาน Ionic พร้อม React โดยการสร้างแอปสาธิตอย่างง่ายตั้งแต่เริ่มต้น

ข้อกำหนดเบื้องต้น

เพื่อให้เป็นไปตามบทช่วยสอนนี้อย่างถูกต้อง คุณจะต้องมีข้อกำหนดเบื้องต้นต่อไปนี้:

• Node.js และ npm เวอร์ชันล่าสุดที่ติดตั้งบนระบบของคุณ
• ความรู้เกี่ยวกับการทำงานของ TypeScript และ React

คุณสามารถตรวจสอบว่าคุณมี Node.js เวอร์ชันล่าสุด (v10) ติดตั้งอยู่โดยเรียกใช้คำสั่งต่อไปนี้:

 $ node -v

ขอแนะนำ React And Ionic

เริ่มต้นด้วยการแนะนำสั้น ๆ เกี่ยวกับทั้ง React และ Ionic

ตามเว็บไซต์อย่างเป็นทางการ:

“React เป็นไลบรารี JavaScript ที่เปิดเผย มีประสิทธิภาพ และยืดหยุ่นสำหรับการสร้างส่วนต่อประสานผู้ใช้ ช่วยให้คุณสามารถเขียน UI ที่ซับซ้อนจากโค้ดขนาดเล็กและแยกส่วนที่เรียกว่า 'ส่วนประกอบ'”

React มุ่งเน้นไปที่การสร้าง UI และไม่มีเครื่องมือในตัวสำหรับงานทั่วไปที่จำเป็นในการพัฒนาเว็บ เช่น การดึงข้อมูลระยะไกลและการกำหนดเส้นทาง ดังนั้น คุณจะต้องใช้ไลบรารีของบุคคลที่สามที่มีอยู่สำหรับงานเหล่านี้

ตามเว็บไซต์ Ionic:

“Ionic Framework เป็นชุดเครื่องมือ UI มือถือโอเพนซอร์ซฟรีสำหรับการพัฒนาแอพข้ามแพลตฟอร์มคุณภาพสูงสำหรับ iOS, Android และเว็บ ทั้งหมดนี้มาจากฐานรหัสเดียว”

โดยพื้นฐานแล้ว มันเป็นชุดของส่วนประกอบ UI ที่คุณสามารถใช้กับ JavaScript ธรรมดาหรือเฟรมเวิร์กส่วนหน้าหรือไลบรารี่ยอดนิยม เช่น Angular, React หรือ Vue เพื่อสร้างแอพมือถือไฮบริดและ PWA

ในบทช่วยสอนนี้ เราจะเห็นและใช้ส่วนประกอบ Ionic UI บางอย่างดังต่อไปนี้:

• IonMenu: ด้วยวิธีนี้ ลิ้นชักการนำทางจะเลื่อนเข้ามาจากด้านข้างของมุมมองปัจจุบัน
• IonToolbar: แถบด้านบนเหล่านี้จะอยู่ด้านบนหรือด้านล่างของเนื้อหา
• IonHeader: องค์ประกอบหลักนี้ถือองค์ประกอบแถบเครื่องมือ
• IonContent: คอมโพเนนต์นี้จัดเตรียมพื้นที่เนื้อหา พร้อมวิธีการควบคุมพื้นที่ที่เลื่อนได้และสิ่งอื่น ๆ คุณต้องมีองค์ประกอบเนื้อหาเพียงองค์ประกอบเดียวในมุมมองเดียว
• IonList: คอมโพเนนต์นี้มีรายการที่มีเนื้อหาข้อมูลคล้ายกัน เช่น รูปภาพและข้อความ ประกอบด้วยวัตถุ IonItem
• IonItem: ส่วนประกอบนี้อาจมีข้อความ ไอคอน รูปแทนตัว รูปภาพ อินพุต และองค์ประกอบดั้งเดิมหรือองค์ประกอบที่กำหนดเองอื่นๆ
• IonButton: ส่วนประกอบนี้มีองค์ประกอบที่คลิกได้ ซึ่งสามารถใช้ในแบบฟอร์มหรือที่ใดก็ได้ที่ต้องการฟังก์ชันปุ่มมาตรฐานที่เรียบง่าย
  

การติดตั้ง Ionic CLI v5

อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Ionic เวอร์ชัน 5 รองรับการสร้างโปรเจ็กต์ Ionic ตาม React เริ่มต้นด้วยการติดตั้งเครื่องมือจาก npm

เปิด CLI และเรียกใช้คำสั่งต่อไปนี้:

 $ npm install -g ionic

ในขณะที่เขียน CLI v5.2.3 ของ Ionic เป็นเวอร์ชันล่าสุด

หมายเหตุ : *ตามวิธีที่คุณติดตั้ง Node.js ในระบบของคุณ คุณอาจต้องเพิ่ม sudo ก่อนคำสั่งของคุณใน macOS หรือ Linux หรือเรียกใช้พรอมต์คำสั่งในฐานะผู้ดูแลระบบใน Windows หากคุณได้รับข้อผิดพลาดในการอนุญาต คุณยังสามารถแก้ไขการอนุญาต npm ของคุณหรือใช้เครื่องมือ เช่น nvm.*

ถัดไป ติดตั้ง Cordova Resources (ซึ่งใช้เพื่อสร้างทรัพยากร Cordova ในเครื่อง) และ Native Run (ใช้เพื่อปรับใช้ไบนารีของแอปกับอุปกรณ์):

 $ npm install -g cordova-res native-run

สิ่งเหล่านี้จำเป็นเฉพาะในกรณีที่คุณต้องการทดสอบแอปพลิเคชันของคุณบนอุปกรณ์พกพาหรือโปรแกรมจำลอง

การสร้างโปรเจ็กต์อิออนและปฏิกิริยา

ตอนนี้ มาสร้างโครงการตาม React กัน กลับไปที่เทอร์มินัลของคุณ ตรวจสอบให้แน่ใจว่าคุณอยู่ในไดเร็กทอรีการทำงานของคุณ และรันคำสั่งต่อไปนี้:

 $ ionic start myApp --type=react

เราใช้ --type=react เพื่อสร้างโครงการตาม React คุณจะต้องเลือกเทมเพลตเริ่มต้นจากเทมเพลตที่มีอยู่ มาเลือก sidemenu ด้านข้างสำหรับเทมเพลตเริ่มต้นพร้อมเมนูด้านข้างและการนำทางกัน

หลังจากสร้างโปรเจ็กต์และติดตั้งการพึ่งพา คุณสามารถให้บริการแอปของคุณในเครื่องโดยใช้คำสั่งต่อไปนี้:

 $ cd ./myApp $ ionic serve

แอปของคุณจะพร้อมใช้งานจากที่อยู่ https://localhost:8100 และคุณสามารถใช้เว็บเบราว์เซอร์ของคุณเพื่อเริ่มเล่นกับมันได้

Ionic เรียกว่าไฮบริดโมบายเฟรมเวิร์กเพราะใช้เทคโนโลยีเว็บที่เดิมออกแบบมาเพื่อสร้างเว็บแอปพร้อมกับคอนเทนเนอร์เนทีฟ (Cordova หรือ Capacitor) เพื่อสร้างแอปมือถือโดยไม่ใช้เทคโนโลยีดั้งเดิมสำหรับแพลตฟอร์มเป้าหมายเช่น Java หรือ Kotlin สำหรับ Android หรือ Swift สำหรับ iOS

เนื่องจากแอปมือถือของคุณเป็นเว็บแอปพลิเคชัน คุณสามารถทำการพัฒนาส่วนใหญ่ได้โดยการทดสอบในเว็บเบราว์เซอร์โดยไม่ต้องใช้โปรแกรมจำลองหรืออุปกรณ์มือถือจริง ยกเว้นการทดสอบคุณสมบัติของอุปกรณ์ดั้งเดิม เช่น กล้องหรือที่เก็บข้อมูล SQLite ในกรณีที่คุณ เคยใช้ในแอปของคุณ ในความเป็นจริง เป็นไปได้ที่จะใช้เทคนิคบางอย่างเพื่อเลียนแบบปลั๊กอินที่มีคุณลักษณะดั้งเดิมและทำการทดสอบทั้งหมดในระหว่างการพัฒนาในเว็บเบราว์เซอร์ของคุณ

ทำความสะอาดโครงการของเรา

เรามีโครงสร้างพื้นฐานของแอป โดยมีสองหน้า (หน้าแรกและรายการ) และเมนู ลบหน้ารายการเพราะมันเป็นแค่รหัสสำเร็จรูป

ขั้นแรก ให้ลบไฟล์ src/pages/List.tsx จากนั้นเปิดไฟล์ src/App.tsx และลบรายการสำหรับหน้ารายการออกจากอาร์เรย์ appPages :

 const appPages: AppPage[] = [ { title: 'Home', url: '/home', icon: home } ];

นอกจากนี้ ให้ลบการนำเข้าหน้ารายการออกจากไฟล์:

 import List from './pages/List';

ถัดไป ลบ <Route path="/:tab(home)/list" component={List} exact={true} /> ออกจากองค์ประกอบ App :

 const App: React.FunctionComponent = () => ( <IonApp> <IonReactRouter> <IonSplitPane content> <Menu appPages={appPages} /> <IonPage> <IonRouterOutlet> <Route path="/:tab(home)" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonPage> </IonSplitPane> </IonReactRouter> </IonApp> ); export default App;

คอมโพเนนต์ของ App คือคอมโพเนนต์รูทที่แอปพลิเคชันของเราแสดงผล หากคุณเปิดไฟล์ src/index.tsx คุณจะพบโค้ดต่อไปนี้:

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

เมธอด render() ใช้เพื่อเรนเดอร์องค์ประกอบ React เป็น DOM ในองค์ประกอบ root ทที่ให้มา

ธีมแอพ

หลังจากสร้าง ใช้งาน และทำความสะอาดโปรเจ็กต์ Ionic แล้ว มาดูกันว่าเราจะเปลี่ยนสีของ UI ให้ดูเป็นมืออาชีพมากขึ้นได้อย่างไร

มาเริ่มกันที่เมนูด้านข้างกัน เปิดไฟล์ src/components/Menu.tsx และเพิ่มแอตทริบิวต์ color ที่มีค่า primary ให้กับ IonToolbar , IonContent , IonList และ IonItem UI:

 const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> ); const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );

Ionic ให้สีเริ่มต้น (หลัก รอง ตติยภูมิ สำเร็จ การเตือน อันตราย แสง กลาง และมืด) ที่สามารถใช้เปลี่ยนสีของส่วนประกอบ UI ได้ สามารถใช้สีกับองค์ประกอบอิออนเพื่อเปลี่ยนสีเริ่มต้นโดยใช้แอตทริบิวต์ color ดู "สี" สำหรับข้อมูลเพิ่มเติม

สีเหล่านี้มีค่าเริ่มต้น แต่คุณสามารถปรับแต่งสีเหล่านี้ได้โดยใช้ตัวแปร CSS ที่กำหนดไว้ล่วงหน้า ดู "การปรับเปลี่ยนสี"

นี่คือภาพหน้าจอของเมนูของเรา:

ต่อไปเรามาเปลี่ยนสีโฮมเพจกัน เปิดไฟล์ src/pages/Home.tsx และตั้งค่าแอตทริบิวต์ color ของส่วนประกอบ IonToolbar และ IonContent เป็น primary :

 const HomePage: React.FunctionComponent = () => { return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > </IonContent> </> ); };

นี่คือภาพหน้าจอของหน้า:

การติดตั้ง Axios และการใช้ REST API

เราจะดูวิธีการติดตั้ง Axios และใช้ RESTful API ของบริษัทอื่นในแอปพลิเคชันของเรา และเราจะดูวิธีแสดงข้อมูลที่ดึงมาโดยใช้การ์ด Ionic และส่วนประกอบรายการ

เมื่อกำหนดธีมของแอปพลิเคชันแล้ว มาดูวิธีดึงข้อมูลโดยใช้ Axios กัน เราจะใช้ API ของบุคคลที่สามที่มีอยู่ใน NewsAPI.org

อันดับแรก เราต้องคว้าคีย์ API เพื่อให้เราสามารถสื่อสารกับ API ได้ ไปที่หน้าลงทะเบียน ป้อนข้อมูลของคุณ และลงทะเบียนบัญชี คุณจะได้รับคีย์ API รับทราบและไปต่อ

กลับไปที่เทอร์มินัลแล้วรันคำสั่งต่อไปนี้เพื่อติดตั้ง Axios:

 $ npm install axios --save

ถัดไป เปิดไฟล์ src/pages/Home.tsx และเริ่มต้นด้วยการนำเข้า Axios และ IonButton :

 import { IonButton } from '@ionic/react'; import axios from 'axios';

ถัดไป กำหนดตัวแปรคงที่ API_KEY และ URL :

 const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

ในตัวแปร URL เราจะเพิ่มจุดสิ้นสุดเพื่อรับหัวข้อข่าวเด่นจากแหล่งที่มา TechCrunch ของเรา คุณสามารถใช้แหล่งใดก็ได้ที่คุณต้องการจากแหล่งที่มีอยู่

หมายเหตุ : อย่าลืมใส่คีย์ API ของคุณเองในตัวแปร API_KEY

ถัดไป กำหนด fetchArticles() ดังนี้:

 const fetchArticles = () => { return axios({ url: URL, method: 'get' }).then(response => { console.log(response); return response.data; }) };

เราเพียงแค่เรียก axios() เพื่อส่งคำขอ GET ไปยังจุดสิ้นสุดของข่าวสาร และผลลัพธ์จากวิธีนี้คือคำมั่นสัญญาที่ต้องแก้ไขเพื่อให้ได้ข้อมูลข่าวสาร

ถัดไป อัปเดตองค์ประกอบ HomePage ดังต่อไปนี้เพื่อเรียก fetchArticles() และแก้ไขคำสัญญาที่ส่งคืน:

 const HomePage: React.FunctionComponent = () => { const [articles, setArticles] = React.useState([]); const items: any[] = []; React.useEffect(() => { fetchArticles().then(data => setArticles(data.articles)); }, []); return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > <IonList color="primary"> { articles.map(a => { return ( <IonItem> {a['title']} <IonButton href={a['url']} color="primary" slot="end">Read</IonButton> </IonItem> ); }) } </IonList> </IonContent> </> ); };

ในองค์ประกอบฟังก์ชันของเรา ก่อนอื่นเราเรียก useState() hook ของ React เพื่อสร้างตัวแปรสถานะ articles ซึ่งจะเก็บบทความข่าวหลังจากที่เราดึงมาจาก API

useState() คืนค่าตัวแปรสถานะซึ่งมีอาร์เรย์ว่างเป็นค่าเริ่มต้นและฟังก์ชันที่เราสามารถใช้เปลี่ยนค่าของตัวแปรได้ เราใช้การกำหนดโครงสร้างเพื่อแยกค่าจากคู่ที่ส่งคืนออกเป็นตัวแปรที่แตกต่างกัน (เช่น articles และ setArticles() )

ต่อไป เราเรียก useEffect() hook เพื่อทำผลข้างเคียงในส่วนประกอบของเรา ในกรณีของเรา ผลข้างเคียงคือการดึงข้อมูลจาก news API โดยใช้ fetchArticles() ซึ่งส่งคืนสัญญา เมื่อคำมั่นสัญญาได้รับการแก้ไข เราจะเรียก setArticles() เพื่อกำหนดข้อมูลข่าวสารให้กับตัวแปร articles

ทั้ง useState() และ useEffect() เป็นตะขอ React ในตัวที่ได้รับการแนะนำใน React 16.8; มันให้คุณใช้สถานะและคุณสมบัติ React อื่น ๆ โดยไม่ต้องเขียนคลาส useEffect() เทียบเท่ากับการเรียกเมธอด componentDidMount , componentDidUpdate และ componentWillUnmount รวมอยู่ในส่วนประกอบแบบคลาส

สุดท้าย ในเทมเพลตมุมมอง เราวนซ้ำอาร์เรย์ articles โดยใช้เมธอด map() และแสดงชื่อบทความข่าวแต่ละรายการภายในองค์ประกอบ IonItem ขององค์ประกอบ IonList และปุ่มที่นำเราไปยังหน้าของ บทความเต็ม

นี่คือภาพหน้าจอของหน้า:

คุณสามารถค้นหาซอร์สโค้ดได้ในที่เก็บ GitHub นี้

บทสรุป

ในบทช่วยสอนนี้ เราได้เริ่มใช้ทั้ง Ionic และ React และใช้เพื่อสร้างแอปพลิเคชันมือถืออย่างง่ายที่ดึงและแสดงข้อมูลข่าวสารจาก API บุคคลที่สามโดยใช้ไคลเอ็นต์ Axios เราได้เห็นวิธีการใช้ hooks ใน React เช่น useState() และ useEffect() hooks เพื่อสร้างสถานะและแสดงผลข้างเคียงภายในส่วนประกอบฟังก์ชัน React ด้วย Ionic เราได้เห็นแล้วว่าการสร้างโปรเจ็กต์โดยใช้ React นั้นง่ายเพียงใด และเราจะกำหนดธีมของแอปพลิเคชันโดยใช้แอตทริบิวต์สีของส่วนประกอบได้อย่างไร