如何使用Ionic和Firebase在短短三天内创建冠状病毒跟踪器应用程序
I am really fond of Hybrid App technologies – they help us achieve so much in a single codebase. Using the Ionic Framework, I developed a cross-platform mobile solution for tracking Coronavirus cases in just 3 days.
我真的很喜歡Hybrid App技術(shù)-它們可以幫助我們在一個單一的代碼庫中取得如此多的成就。 使用Ionic Framework，我開發(fā)了一種跨平臺移動解決方案，可在短短3天內(nèi)跟蹤冠狀病毒病例。
In this tutorial, we are going to learn how to develop an Android, iOS, and Progressive Web App to track the cases around us with the latest related news, help, and feedback sections. Brace yourself for a new coding journey! 😃
在本教程中，我們將學習如何開發(fā)Android，iOS和Progressive Web App ，以通過最新的相關(guān)新聞，幫助和反饋部分來跟蹤我們周圍的案例。 為新的編碼之旅做好準備！ 😃
先決條件 (Prerequisites)
The process of hybrid mobile app development is meant for all kinds of developers irrespective of their technology stack. Since we will be using three basic pillars of Web Development – HTML+CSS+JAVASCRIPT – at the core, you can easily understand the process and techniques.
混合移動應(yīng)用程序開發(fā)的過程適用于各種開發(fā)人員，無論其技術(shù)堆棧如何。 由于我們將使用Web開發(fā)的三個基本Struts-HTML + CSS + JAVASCRIPT ，因此您可以輕松地理解其過程和技術(shù)。
Thus this tutorial is for everyone who has just a basic understanding of Web Fundamentals. So, let's begin.
因此，本教程適用于僅對Web基礎(chǔ)知識有基本了解的每個人。 所以，讓我們開始吧。
第0天-構(gòu)思，計劃和工程 (Day 0 - Idea, Plan, and Engineering )
理念 (Idea)
Initially, I was looking for the latest Covid19 cases around me (in March 2020). I got several links that had little difference in numbers.
最初，我一直在尋找周圍的最新Covid19案例(2020年3月)。 我得到了幾個鏈接，它們的數(shù)量幾乎沒有差別。
Then, I realised that data from https://github.com/backtrackbaba/covid-api is regularly updated and more accurate. I decided to develop a universal, small, and handy mobile solution by using data provided by Johns Hopkins University.
然后，我意識到來自https://github.com/backtrackbaba/covid-ap i的數(shù)據(jù)會定期更新且更加準確。 我決定使用約翰·霍普金斯大學提供的數(shù)據(jù)來開發(fā)一種通用，小型且方便的移動解決方案。
計劃 (Plan)
I planned to develop a cross-platform mobile solution that could be universally accessed by everyone. I considered the Ionic framework which would allow me to develop an Android, iOS & Progressive Web App (PWA)📲 by just writing and maintaining a single codebase.
我計劃開發(fā)一種跨平臺的移動解決方案，每個人都可以普遍使用。 我考慮了Ionic框架，該框架將允許我通過編寫和維護單個代碼庫來開發(fā)Android ，iOS和漸進式Web應(yīng)用程序 (PWA) 。
I also wanted to show the COVID19 virus cases across the world and individual countries through various illustrations.
我還想通過各種插圖展示全世界和各個國家的COVID19病毒病例。
工程 (Engineering)
The idea was to develop 5 separate tabs which would be there at the bottom of the app:
這個想法是要開發(fā)5個獨立的標簽，這些標簽將位于應(yīng)用程序的底部：
World — would show the COVID19 Dashboard
世界 -將顯示COVID19信息中心
Country — would allow you to select a country to check the cases
國家(地區(qū))—您可以選擇一個國家來檢查案件
News — would get the latest news regarding the Coronavirus Pandemic
新聞-將獲得有關(guān)冠狀病毒大流行的最新新聞
Guidelines — would allow you to read and watch all advisories and guidelines
準則-允許您閱讀和觀看所有建議和準則
Help — would provide help and feedback.
幫助 -將提供幫助和反饋。
技術(shù)棧 (Technology Stack)
I have developed several websites and apps through Angular and Ionic before. But this time, I wanted to learn and use React.js. The below libraries are required to install using the Node package manager (npm):
之前，我已經(jīng)通過Angular和Ionic開發(fā)了多個網(wǎng)站和應(yīng)用程序。 但是這次，我想學習和使用React.js。 使用Node軟件包管理器( npm )來安裝以下庫是必需的：
React.js includes the latest react-hooks
React.js包含最新的react-hooks
Ionic Framework (version 4) with Capacitor
帶有電容器的 離子框架 (版本4)
Node.js environment to support JavaScript and npm libraries
支持JavaScript和npm庫的Node.js環(huán)境
TypeScript language to write the actual code (.tsx files)
使用TypeScript語言編寫實際代碼(.tsx文件)
Chart.js for various illustrations
Chart.js的各種插圖
Firebase for hosting the content (Progressive Web App)
用于托管內(nèi)容的Firebase ( 漸進式Web應(yīng)用程序 )
工具類 (Tools)
- VS Code VS代碼
- Google Chrome 谷歌瀏覽器
- Android Studio for Android app 適用于Android應(yīng)用的Android Studio
- Xcode for iOS app (Unfortunately only available in Apple computers) 適用于iOS應(yīng)用程序的Xcode(不幸的是，僅適用于Apple計算機)
安裝及腳手架 (Installation & Scaffolding)
We need to install and configure all the above mentioned Software and Frameworks. So, let’s start with the first set of terminal commands (whether it's on Mac, Linux or Windows):
我們需要安裝和配置所有上述軟件和框架。 因此，讓我們從第一組終端命令開始(無論是在Mac，Linux還是Windows上)：
Install ionic with global scope "npm install -g @ionic/cli native-run cordova-res"
在全局范圍內(nèi)安裝ionic “ npm install -g @ ionic / cli native-run cordova-res”
Create react app with Capacitor "ionic start corona-tracker tabs — type=react — capacitor"
使用電容器“離子啟動電暈跟蹤器選項卡—類型=React—電容器”創(chuàng)建react應(yīng)用
Add react hooks and pwa elements "npm install @ionic/react-hooks @ionic/pwa-elements"
添加react掛鉤和pwa元素“ npm install @ ionic / react-hooks @ ionic / pwa-elements”
Open the corona-tracker folder in your default workplace. You should have gotten all the default HTML, CSS and .tsx files with other sub-folders in the proper sequence. Now, go to your app folder and run these 2 commands
在默認工作場所中打開corona-tracker文件夾。 您應(yīng)該已經(jīng)按正確的順序獲取了所有其他子文件夾的默認HTML，CSS和.tsx文件。 現(xiàn)在，轉(zhuǎn)到您的應(yīng)用程序文件夾并運行這兩個命令
cd corona-tracker ionic serve
cd電暈跟蹤儀 離子發(fā)球機
Voilà! 🎉 ?Your Ionic app is now running in a web browser. Click on the localhost option in the terminal to check. 🕺This is your basic app installation and scaffolding.
瞧！ I您的Ionic應(yīng)用程序現(xiàn)在正在網(wǎng)絡(luò)瀏覽器中運行。 單擊終端中的localhost選項進行檢查。 is這是您的基本應(yīng)用安裝和腳手架。
So far, you should be running your ionic-react app in your local browser. Now index.html and index.tsx are your first pages for Single Page Applications (SPAs).
到目前為止，您應(yīng)該在本地瀏覽器中運行離子React應(yīng)用程序。 現(xiàn)在index.html和index.tsx是您的單頁應(yīng)用程序(SPA)的第一頁。
應(yīng)用程序路由 (App Routing)
Let’s add routing to our app which will allow us to visit all 5 different tabs explained above. Open your App.tsx file and add the below router inside <IonReactRouter></IonReactRouter>
讓我們將路由添加到我們的應(yīng)用程序中，這將使我們能夠訪問上面說明的所有5個不同選項卡。 打開您的App.tsx文件，并在<IonReactRouter> </ IonReactRouter>中添加以下路由器
<IonTabs><IonRouterOutlet><Route path="/world" component={WorldTab} exact={true} /><Route path="/country" component={CountryTab} exact={true} /><Route path="/news" component={NewsTab} /><Route path="/guidelines" component={GuidelinesTab} /><Route path="/help" component={HelpTab} /><Route path="/" render={() => <Redirect to="/world" />} exact={true} /></IonRouterOutlet><IonTabBar slot="bottom" ><IonTabButton tab="WorldTab" href="/world"><IonIcon icon={planet} /><IonLabel>World</IonLabel></IonTabButton><IonTabButton tab="CountryTab" href="/country"><IonIcon icon={home} /><IonLabel> Country</IonLabel></IonTabButton><IonTabButton tab="NewsTab" href="/news"><IonIcon icon={newspaper} /><IonLabel> News</IonLabel></IonTabButton><IonTabButton tab="GuidelinesTab" href="/guidelines"><IonIcon icon={informationCircleOutline} /><IonLabel>Guidelines</IonLabel></IonTabButton><IonTabButton tab="HelpTab" href="/help"><IonIcon icon={call} /><IonLabel>Help</IonLabel></IonTabButton></IonTabBar></IonTabs>Basic Ionic routing for our app適用于我們應(yīng)用的基本離子路由Check your app in the browser again, and you should see all these tabs with their respective pages. All tabs should be working smoothly with proper routing.
再次在瀏覽器中檢查您的應(yīng)用程序，您應(yīng)該看到所有這些標簽以及它們各自的頁面。 所有選項卡均應(yīng)通過正確的路由順利運行。
Let me know in case you're stuck with any issues related to installation, compile-time, or run-time errors.如果您 遇到與安裝，編譯時 或運行時錯誤 相關(guān)的任何問題， 請告訴我。This is it for Day 0.🧤
第 0 天就是這樣。🧤
第1天-開發(fā)COVID19的“控制臺”和“安全準則”選項卡 (Day 1 - Developing COVID19 Dashboard and Safety Guidelines tabs)
In this part of the process, we will develop the World and Guidelines tabs for our Ionic React hybrid app. So far, we have done the basic installation and scaffolding of the app. We have also added 5 different tabs to our app with routing.
在此過程的這一部分中，我們將為Ionic React混合應(yīng)用程序開發(fā)“ 世界”和“指南”選項卡。 到目前為止，我們已經(jīng)完成了該應(yīng)用程序的基本安裝和腳手架。 我們還通過路由向我們的應(yīng)用程序添加了5個不同的標簽。
世界標簽：設(shè)計 (World Tab: Design)
Let’s build our home page World tab now. I decided to have 4 different sections on this home tab:
讓我們現(xiàn)在構(gòu)建主頁的“ 世界”選項卡。 我決定在此主頁選項卡上有4個不同的部分：
世界標簽：數(shù)據(jù)和API (World Tab: Data & API)
I have studied the open-source postman API source which contains all Application Programming Interfaces (APIs) related to Corona Cases https://documenter.getpostman.com/view/2568274/SzS8rjbe?version=latest.
我研究了開源的postman API來源，其中包含與Corona Cases相關(guān)的所有應(yīng)用程序編程接口(API) https://documenter.getpostman.com/view/2568274/SzS8rjbe?version=latest 。
First, we will consume the global API with the Axios library to get the total global case count in the world using the useState & useEffect React-hooks.
首先，我們將使用Axios庫使用全局 API，以使用useState＆useEffect React-hooks獲取世界上的總案例總數(shù)。
const [data, setData] = useState<IGLobalCount>(); const [showLoading, setShowLoading] = useState(true);useEffect(() => {const getGlobalData = async () => {//latest global countconst result = await axios('https://covidapi.info/api/v1/global');// console.log(result);setData(result.data);setShowLoading(false);};getGlobalData();}, []);get the total global count in the world獲得世界上的全球總數(shù)Then set the data inside your return block using HTML:
然后使用HTML在返回塊內(nèi)設(shè)置數(shù)據(jù)：
<IonRow class="casesBox"><IonCol class="totalCases">Total <AddNumFunc a={confirmed} b={recovered} c={deaths} /></IonCol><IonCol class="confirmedBox">Confirmed {confirmed?.toLocaleString()}</IonCol><IonCol class="recoveredBox">Recovered {recovered?.toLocaleString()}</IonCol><IonCol class="deathsBox">Deaths {deaths?.toLocaleString()}</IonCol> </IonRow>HTML boxesHTML框Now, we have the first 4 responsive boxes containing total cases, confirmed cases, recovered, and deaths. Install chart.js in your project using npm install react-chartjs-2. Let’s make use of the same data to draw a PieChart.
現(xiàn)在，我們有前4個響應(yīng)框，其中包含總病例數(shù)，確診病例數(shù)，康復(fù)病例和死亡人數(shù)。 使用npm install react-chartjs-2在您的項目中安裝chart.js 。 讓我們利用相同的數(shù)據(jù)繪制PieChart。
import axios from 'axios'; import { Pie } from 'react-chartjs-2';<IonCard class="pieCard"><Pie data={GlobalCasesPieChart}options={{legend: {display: true,position: 'bottom',},plugins: {datalabels: {anchor: 'end',clamp: 'true',align: 'bottom',color: 'black',labels: {title: {font: {weight: 'bold'}}}}}}} /> </IonCard>PieChart餅形圖Now, we have 2 of the 4 sections in the World tab. So next, let’s add a slideshow depicting general health tips.
現(xiàn)在，“ 世界”選項卡中的4個部分中有2個。 接下來，讓我們添加一個幻燈片，描述一般的健康提示。
<IonSlides class="tipsSlides" options={slideOpts}><IonSlide class="slide">Maintain at least 1 metre (3 feet) distance between yourself and anyone who is coughing or sneezing.</IonSlide><IonSlide class="slide">Regularly and thoroughly clean your hands with an alcohol-based hand rub or wash them with soap and water.</IonSlide><IonSlide class="slide">If you have fever, cough and difficulty breathing, seek medical care early.</IonSlide><IonSlide class="slide">Avoid touching eyes, nose and mouth. #StayHomeStaySafe</IonSlide><IonSlide class="slide">WHO Health Alert brings COVID-19 facts to billions via WhatsApp.</IonSlide> </IonSlides>Health Tips Slideshow健康提示幻燈片Now, let’s make a data table for all countries in descending order to depict all kinds of cases. Again, we will consume the latest API with the Axios library to get the total global count for all the countries in the world using the useState & useEffect React-hooks.
現(xiàn)在，讓我們按降序排列所有國家的數(shù)據(jù)表，以描述各種情況。 同樣，我們將使用Axios庫使用最新的 API，以使用useState＆useEffect React-hooks獲取世界上所有國家的全球總數(shù)。
const [countryWiseData, setCountryWiseData] = useState<ICountry[]>([]);useEffect(() => {const getGlobalCountryData = async () => {//latest global country wise countconst result = await axios('https://covidapi.info/api/v1/global/latest');//console.log(result.data.result);let sortedResult = result.data.result;sortedResult.sort((a: Object, b: Object) => {return (Object.values(a)[0].confirmed > Object.values(b)[0].confirmed ? -1 : (Object.values(a)[0].confirmed < Object.values(b)[0].confirmed ? 1 : 0));});setCountryWiseData(sortedResult);};getGlobalCountryData();}, []);to get the total global count for all the countries in the world得到世界上所有國家的全球總數(shù)We have completed the development for our home tab with all 4 sections described above. You can see them below:
我們已經(jīng)完成了上面介紹的所有4個部分的主頁標簽的開發(fā)。 您可以在下面看到它們：
World Tab — Working Emulator Snapshots in PWA, android and iOS“世界”選項卡— PWA，Android和iOS中的工作模擬器快照Now, let’s jump on to develop our next tab — the Guidelines Tab.
現(xiàn)在，讓我們繼續(xù)開發(fā)下一個選項卡－ Guideline s Tab 。
This is just an informative and static tab for various Advisories and Guidelines given by WHO and State Governments. We have added various images and videos here in the HTML:
這只是世衛(wèi)組織和州政府提供的各種咨詢 和指南的信息性和靜態(tài)選項卡。 我們在HTML中添加了各種圖像和視頻：
<IonList><IonCard><iframe title="WHO" width="100%" height="200" src="https://www.youtube.com/embed/5jD2xd3Cv80"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></IonCard><IonCard><IonCardHeader>Symptoms</IonCardHeader><IonImg class="guidlineImages" src="assets/images/Symptoms2.png"></IonImg></IonCard><IonCard><IonCardHeader>Diseases</IonCardHeader><IonImg class="guidlineImages" src="assets/images/Symptoms.png"></IonImg></IonCard><IonCard><IonCardHeader>Myths Busted</IonCardHeader><IonImg class="guidlineImages" src="assets/images/Myth.jpeg"></IonImg></IonCard><IonCard><IonCardHeader>Stress Distraction Tips</IonCardHeader><IonImg class="guidlineImages" src="assets/images/Stress.jpg"></IonImg></IonCard><IonCard><IonCardHeader>Stay Home</IonCardHeader><IonImg class="guidlineImages" src="assets/images/SafeHands.jpeg"></IonImg></IonCard> </IonList>Advisory and Guidelines are given by WHO and State Govts世衛(wèi)組織和州政府提供了咨詢和準則Let me know in case you get stuck with any issues related to installation, compile-time or run-time errors.
如果您遇到任何與安裝，編譯時或運行時錯誤有關(guān)的問題，請告訴我。
This is it for Day 1.🧤
這是第一天。🧤
第2天-發(fā)展中國家和新聞標簽 (Day 2 - Developing Country and News tabs)
In this section we will develop Country and News tabs for our Ionic React hybrid app. So far, we have built World and Guideline tabs in our ionic react app with basic app routing.
在本部分中，我們將為Ionic React混合應(yīng)用程序開發(fā)“ 國家和地區(qū) ”選項卡。 到目前為止，我們已經(jīng)使用基本的應(yīng)用程序路由在離子React應(yīng)用程序中構(gòu)建了“ 世界”和“準則”選項卡。
國家標簽：設(shè)計 (Country Tab: Design)
Let’s build our second page Country tab now. I decided to have 4 different sections on this second tab:
現(xiàn)在，我們來構(gòu)建第二頁的“ 國家/地區(qū)”標簽。 我決定在第二個選項卡上有4個不同的部分：
國家/地區(qū)標簽：數(shù)據(jù)和API (Country Tab: Data & API)
I have studied the open-source postman link which contains all Application Programming Interfaces (APIs) related to Corona Cases https://documenter.getpostman.com/view/2568274/SzS8rjbe?version=latest.
我研究了開源郵遞員鏈接，其中包含與Corona Cases相關(guān)的所有應(yīng)用程序編程接口(API) https://documenter.getpostman.com/view/2568274/SzS8rjbe?version=latest 。
Here, we will consume the country API with the Axios library to get the total count in the selected country using the useState & useEffect React-hooks.
在這里，我們將使用Axios庫使用國家/地區(qū) API，以使用useState＆useEffect React-hooks獲取所選國家/地區(qū)的總數(shù)。
We will store the country the user has selected in local storage for other illustrations to update.
我們會將用戶選擇的國家/地區(qū)存儲在本地存儲中，以供其他插圖更新。
import moment from 'moment'; import axios from 'axios'; import { Doughnut, Bar } from 'react-chartjs-2';const [yourCountry, setYourCountry] = useState<string>('IND');Storage.set({ key: 'yourCountry', value: yourCountry });const [countryData, setcountryData] = useState<ICountryCount>();const [showLoading, setShowLoading] = useState(true);useEffect(() => {const getCountryData = async () => {let result: any = '';const { value } = await Storage.get({ key: 'yourCountry' });if (value) {result = await axios('https://covidapi.info/api/v1/country/' + value + '/latest');} else {result = await axios('https://covidapi.info/api/v1/country/' + yourCountry + '/latest');}// console.log(result);setcountryData(result.data.result);setShowLoading(false);};getCountryData();}, [yourCountry]);Selecting a country using the dropdown使用下拉菜單選擇國家Now, consume the API to get the country-specific data:
現(xiàn)在，使用API??獲取特定國家/地區(qū)的數(shù)據(jù)：
const [countryTimeSeriesData, setcountryTimeSeriesData] = useState<ISeriesCases[]>([]);let endDate: string = new Date().toISOString().split('T')[0];let todaysDate = new Date();let startDate: string = new Date(todaysDate.getTime() - (5 * 24 * 60 * 60 * 1000)).toISOString().split('T')[0];useEffect(() => {const getCountryTimeSeriesData = async () => {const result = await axios('https://covidapi.info/api/v1/country/' + yourCountry + '/timeseries/' + startDate + '/' + endDate);// console.log(result);setcountryTimeSeriesData(result.data.result);setShowLoading(false);};getCountryTimeSeriesData();}, [yourCountry, endDate, startDate]);Consuming API with date range使用日期范圍的APINow, design the Doughnut and Bar trend chart:
現(xiàn)在，設(shè)計“ Donut and Bar”趨勢圖：
<IonCard><Doughnutdata={CountryDoughnutChart}options={{legend: {display: true,position: 'right'},plugins: {datalabels: {anchor: 'bottom',clamp: 'true',align: 'end',color: 'black',labels: {title: {font: {weight: 'bold',size: 10}}}}}}} /></IonCard>Design doughnut chart設(shè)計甜甜圈圖 <Bardata={countryBarChart}options={{scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true}]},title: {display: true,text: 'Cases in the current week',fontSize: 15},legend: {display: true,position: 'bottom'},plugins: {datalabels: { display: false }}}}/>Design Bar chart for the trend of last week上周趨勢的設(shè)計條形圖Now save the file and check it out in the browser. So, finally, we should get the below design:
現(xiàn)在保存文件并在瀏覽器中簽出。 因此，最后，我們應(yīng)該獲得以下設(shè)計：
Country tab — Working Emulator Snapshots in PWA, android and iOS“國家/地區(qū)”選項卡-PWA，Android和iOS中的工作模擬器快照Now, let’s keep going and develop our third tab — the News Tab.
現(xiàn)在，讓我們繼續(xù)開發(fā)第三個標簽- 新聞標簽。
新聞標簽：設(shè)計 (News Tab: Design)
We have added a basic Ionic Card which contains various News resources such as URL, title, image, author and publisher’s details:
我們添加了基本的Ionic卡，其中包含各種新聞資源，例如URL，標題，圖像，作者和發(fā)布者的詳細信息：
<IonList>{data.map((news, idx) => (<IonItem key={idx}><IonCard><IonImg src={news?.urlToImage} class="newsImage" ></IonImg><IonGrid><IonRow class="newsTitle">{news?.title}</IonRow><IonRow class="newsSource"><IonCol>{news?.source?.name}</IonCol><IonCol>{trimSourceDetails(news?.author)}</IonCol>{/* <IonCol text-right>{moment(news?.publishedAt).format('DD MMM YYYY')}</IonCol> */}</IonRow><IonRow class="newsContent">{news?.description}</IonRow></IonGrid></IonCard></IonItem>))} </IonList>News Card with all the details新聞卡的所有詳細信息新聞標簽：數(shù)據(jù)和API (News Tab: Data & API)
To get the news, I used Newsapi.org which is not an open-source 👻Application Programming Interface (API). But with a developer account, I searched news related to the Coronavirus. If you want to use other news APIs you can use them instead.
為了獲得新聞，我使用了Newsapi.org ，它不是開源的 👻ApplicationProgramming Interface(API)。 但是我用開發(fā)者帳戶搜索了與冠狀病毒有關(guān)的新聞。 如果要使用其他新聞API，則可以改用它們。
Here, we will consume the top-headlines API with the Axios library to get the total count in the selected country using the useState & useEffect React-hooks.
在這里，我們將使用Axios庫使用頭條新聞 API，以使用useState＆useEffect React-hooks獲取所選國家/地區(qū)的總數(shù)。
const [data, setData] = useState<IArticles[]>([]);const [showLoading, setShowLoading] = useState(true);useEffect(() => {const getNewsData = async () => {const result = await axios('https://newsapi.org/v2/top-headlines?q=coronavirus&language=en&apiKey=YOUR_OWN_KEY');// console.log(result);setData(result.data.articles);setShowLoading(false);};getNewsData();}, []);Consuming news API消費新聞APINow, save the file and check in the browser. So, finally, we should get the below design:
現(xiàn)在，保存文件并在瀏覽器中簽入。 因此，最后，我們應(yīng)該獲得以下設(shè)計：
News tab — Working Emulator Snapshots in PWA, android and iOS“新聞”選項卡— PWA，Android和iOS中的工作模擬器快照Let me know in case you get stuck with any issues related to codes, compile-time or run-time errors.
如果您遇到任何與代碼，編譯時或運行時錯誤相關(guān)的問題，請告訴我。
This is it for Day 2.🧤
第二天就這樣了。🧤
第3天-開發(fā)幫助標簽和部署 (Day 3 - Developing the Help Tab and Deployment)
In this section - our last one - we will develop the Help tab and learn to use Capacitor to build Android and iOS apps.
在本節(jié)(也是最后一節(jié))中，我們將開發(fā)“ 幫助”選項卡，并學習如何使用Capacitor構(gòu)建 ndroid和iOS應(yīng)用。
So far, we have built the World, Country, News, and Guideline tabs in our ionic react app. Also, will deploy our app to Firebase as a PWA. It is going to be most interesting now. Pull on your socks and be ready to actually see your own app in a real environment.
到目前為止，我們已經(jīng)在離子React應(yīng)用程序中構(gòu)建了“ 世界”，“國家/地區(qū)”，“新聞 ” 和“準則”選項卡。 另外，還將我們的應(yīng)用程序作為PWA部署到Firebase 。 現(xiàn)在將是最有趣的。 穿上襪子，準備好在真實環(huán)境中實際看到自己的應(yīng)用程序。
幫助標簽：設(shè)計 (Help Tab: Design)
First, let’s create the Help and Feedback tab. This is just an informative and static tab for help from the World Health Organization (WHO) that gives feedback to the developer.
首先，讓我們創(chuàng)建“幫助和反饋”選項卡。 這只是世界衛(wèi)生組織(WHO )的有用且靜態(tài)的選項卡，向開發(fā)人員提供反饋。
<IonCard><IonList><IonItem><IonLabel>Call WHO helpline Number</IonLabel><IonButton color='warning' href="tel:+41-22-7912111"><IonIcon slot="start" icon={callOutline} /> Call</IonButton></IonItem><IonItem><IonLabel>Email WHO Team</IonLabel><IonButton color='warning' href="mailto:mediainquiries@who.int"><IonIcon slot="start" icon={mailOutline} /> Email</IonButton></IonItem><IonItem><IonLabel>Text 'Hi' to WHO helpdesk</IonLabel><IonButton color='warning' href="https://api.whatsapp.com/send?phone=41798931892&text=hi&source=&data="><IonIcon slot="start" icon={logoWhatsapp} /> WhatsApp</IonButton></IonItem><IonItem><IonLabel>Donate via WHO website</IonLabel><IonButton color='warning' href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019/donate"><IonIcon slot="start" icon={walletOutline} /> Donate</IonButton></IonItem></IonList></IonCard>Help tab with the phone, WhatsApp options手機的幫助標簽，WhatsApp選項環(huán)境安裝檢查 (Environment Installation Check)
As mentioned in our first (Day 0) section, we should have all the below Software installed in our system:
如第一部分(第0天)所述，我們應(yīng)該在系統(tǒng)中安裝以下所有軟件：
- VS Code VS代碼
- Google Chrome 谷歌瀏覽器
- Android Studio for Android app 適用于Android應(yīng)用的Android Studio
- Xcode for iOS app (Unfortunately only available in Apple computers) 適用于iOS應(yīng)用程序的Xcode(不幸的是，僅適用于Apple計算機)
We need to set the required path, and install the targeted Android (such as Android 9 Pie) and iOS (such as iOS 11) operating system versions.
我們需要設(shè)置所需的路徑，并安裝目標Android(例如Android 9 Pie)和iOS(例如iOS 11)操作系統(tǒng)版本。
Wait, don’t worry if you are very new to this platform setup. Follow the next steps sequentially with all the provided important links in the coming sections.
請稍等，如果您不熟悉此平臺設(shè)置，請不要擔心。 按照后續(xù)步驟的順序執(zhí)行后續(xù)步驟，并在接下來的部分中提供所有重要 鏈接 。
We have already installed Capacitor in our first terminal command while creating the ionic react app. (Check Day 0 for the installation section). Capacitor is the Native Bridge for Cross-Platform Web Apps. It invokes Native SDKs on iOS, Android, and the Web with one codebase.
在創(chuàng)建離子React應(yīng)用程序時，我們已經(jīng)在第一個終端命令中安裝了Capacitor 。 (檢查安裝部分的第0天)。 電容器是跨平臺Web應(yīng)用程序的本機橋。 它使用一個代碼庫在iOS，Android和Web上調(diào)用Native SDK。
// Go to your project directory and run below commands to initialize Capacitor into your project and add the Android and iOS platforms to your app:
//轉(zhuǎn)到您的項目目錄并運行以下命令，以將Capacitor初始化到您的項目中，并將Android和iOS平臺添加到您的應(yīng)用中：
npm install --save @capacitor/core @capacitor/cli npx cap init npx add android npx add ios
npm install --save @ capacitor / core @ capacitor / cli npx cap init npx添加android npx添加ios
應(yīng)用程序圖標和啟動屏幕 (App icons and Splash screens)
For creating android and iOS icons and splash screens, I recommend using https://pgicons.abiro.com/. It will create varied sizes of icons and splashes for all the targeted mobile operating systems.
為了創(chuàng)建android和iOS圖標和啟動屏幕，我建議使用https://pgicons.abiro.com/ 。 它將為所有目標移動操作系統(tǒng)創(chuàng)建各種大小的圖標和啟動畫面。
After creating these, you can directly replace these icons with the default ionic icons and splashes in your targeted platforms folders.
創(chuàng)建這些圖標之后，您可以將這些圖標直接替換為默認的離子圖標，并在目標平臺文件夾中啟動。
漸進式Web應(yīng)用程序(PWA) (Progressive Web App (PWA))
The two main requirements of a PWA are Service Workers and a Web Manifest. Once these files have been added, run ionic build and the build directory will be ready to deploy as a PWA to any hosting platform like Firebase.
PWA的兩個主要要求是服務(wù)人員和Web清單 。 添加這些文件后，運行ionic build ，即可將build目錄作為PWA部署到任何托管平臺(如Firebase)。
Follow the link 👉 https://ionicframework.com/docs/react/pwa for more details.
請訪問👉https : //ionicframework.com/docs/react/pwa以獲取更多詳細信息。
First, create the project in the Firebase Website. You can choose the free plan for now. Enable the hosting option from the left nav. Next, in a terminal, install the Firebase CLI:
首先，在Firebase網(wǎng)站上創(chuàng)建項目 。 您現(xiàn)在可以選擇免費計劃。 從左側(cè)導航欄中啟用托管選項。 接下來，在終端中，安裝Firebase CLI：
npm install -g firebase-tools
npm install -g firebase-tools
It will ask you some default name and folder options for firebase related files. Continue answering all the questions. Now, build your project again with the --prod flag as given below:
它將詢問您與Firebase相關(guān)的文件的一些默認名稱和文件夾選項。 繼續(xù)回答所有問題。 現(xiàn)在，使用--prod標志再次構(gòu)建您的項目，如下所示：
ionic build --prod firebase deploy
ionic build --prod firebase部署
That’s it. 🎆 Go to the link provided by Firebase under the hosting section. It is very simple and straightforward to deploy your app on Firebase. Every time you push your code to your own GitHub repo, just follow those 2 commands to build and deploy the latest changes into your Firebase project.
而已。 to轉(zhuǎn)到Firebase在主機部分下提供的鏈接。 在Firebase上部署應(yīng)用程序非常簡單明了。 每次將代碼推送到自己的GitHub存儲庫中時，只需遵循這兩個命令即可將最新更改構(gòu)建并部署到Firebase項目中。
Android應(yīng)用程式 (Android App)
Android Studio is the IDE for creating native Android apps. It includes the Android SDK, which will need to be configured for use in the command line.
Android Studio是用于創(chuàng)建本機Android應(yīng)用程序的IDE。 它包含Android SDK ，需要對其進行配置以在命令行中使用。
Android Studio is also used to create Android virtual devices, which are required for the Android emulator. Ionic apps can also be launched to a device.
Android Studio還用于創(chuàng)建Android虛擬設(shè)備 ，這是Android仿真器所必需的。 離子應(yīng)用程序也可以啟動到設(shè)備上 。
Use the link for complete setup and installation 👉https://ionicframework.com/docs/developing/android.
使用鏈接進行完整的設(shè)置和安裝👉https : //ionicframework.com/docs/developing/android。
// Run the below commands to sync native plugins and run the native apps: ionic cap copy ionic cap sync ionic capacitor run android ionic cap open android
//運行以下命令以同步本機插件并運行本機應(yīng)用程序： ionic cap復(fù)制ionic cap同步ionic電容器運行android ionic cap打開android
Now, your app will be open in Android Studio where you can check the same folder, your project ID, and other default settings. Also, you can build icons and splash screens for your own app and replace the existing default ionic ones in the project.
現(xiàn)在，您的應(yīng)用程序?qū)⒃贏ndroid Studio中打開，您可以在其中檢查相同的文件夾，您的項目ID和其他默認設(shè)置。 另外，您可以為自己的應(yīng)用程序構(gòu)建圖標和啟動屏幕，并替換項目中現(xiàn)有的默認離子圖標。
Create an Emulator and run the app. You should see your Coronavirus-tracker app in the Android Emulator now. Go to the Build option in the top in Android Studio, and select the Build Bundle(s)/APK(s). For the first time, you need to create the signing key. Then, click next to build apk/bundle option.
創(chuàng)建一個模擬器并運行該應(yīng)用程序。 您現(xiàn)在應(yīng)該在Android模擬器中看到您的Coronavirus-tracker應(yīng)用程序。 轉(zhuǎn)到Android Studio頂部的“ 構(gòu)建”選項，然后選擇“ 構(gòu)建包” /“ APK”。 第一次，您需要創(chuàng)建簽名密鑰。 然后，單擊下一步以構(gòu)建apk /捆綁包選項。
Hurray! 🎉 You have your own Android app now in the build folder which is ready to deploy to Google Play Store (Developer accounts cost USD $25 with lifetime access) and Amazon App Store (free).
萬歲 ！ 🎉您現(xiàn)在在build文件夾中擁有自己的Android應(yīng)用程序，可以將其部署到Google Play商店 (開發(fā)者帳戶的終身使用費為25 美元 )和Amazon App Store (免費)。
iOS應(yīng)用 (iOS App)
Xcode is the IDE for creating native iOS apps. It includes the iOS SDK and Xcode command-line tools. Xcode can be downloaded for free with an Apple account or it can be installed through the App Store.
Xcode是用于創(chuàng)建本機iOS應(yīng)用程序的IDE。 它包括iOS SDK和Xcode命令行工具。 Xcode可以使用Apple帳戶免費下載，也可以通過App Store安裝。
Use the link for complete setup and installation 👉 https://ionicframework.com/docs/developing/ios.
使用該鏈接進行完整的設(shè)置和安裝👉https : //ionicframework.com/docs/developing/ios。
Unfortunately, iOS apps can only be built in Apple Computers with macOS operating systems.
不幸的是，iOS應(yīng)用程序只能在具有macOS操作系統(tǒng)的Ap??ple計算機中構(gòu)建。
// Run the below commands to sync native plugins and run the native apps: ionic cap copy ionic cap sync ionic capacitor run ios ionic cap open ios
//運行以下命令以同步本機插件并運行本機應(yīng)用程序： ionic cap復(fù)制ionic cap同步ionic電容器運行ios ionic cap open ios
Now, your app will be open in Xcode where you can set your project ID and other default settings. Also, create icons and splash screens for your own app and replace the existing default ionic ones in the project.
現(xiàn)在，您的應(yīng)用程序?qū)⒃赬code中打開，您可以在其中設(shè)置項目ID和其他默認設(shè)置。 另外，為您自己的應(yīng)用程序創(chuàng)建圖標和啟動屏幕，并替換項目中現(xiàn)有的默認離子屏幕。
Create an Emulator and run the app. You should see your Coronavirus-tracker app in the iOS Emulator now. If you have an active Apple Developers Account which costs USD $99 annually, you can build your iOS app and deploy it to the App Store.
創(chuàng)建一個模擬器并運行該應(yīng)用程序。 您現(xiàn)在應(yīng)該在iOS模擬器中看到您的Coronavirus-tracker應(yīng)用程序。 如果您有一個有效的Apple Developers帳戶(每年費用為99 美元) ，則可以構(gòu)建iOS應(yīng)用并將其部署到App Store 。
Due to policy issues of the epidemic, Google Play Store, Amazon App Store, and others are not accepting app packages related to the Coronavirus. So until and unless you have authenticity proofs from any Government, Hospitals, or any designated Health Institution, no stores are accepting these apps.
由于流行病的政策問題，Google Play商店，Amazon App Store和其他公司不接受與冠狀病毒有關(guān)的應(yīng)用程序包。 因此，除非您有任何政府，醫(yī)院或任何指定的衛(wèi)生機構(gòu)提供的真實性證明，否則，沒有商店會接受這些應(yīng)用程序。
However, the World Wide Web (WWW) is free to use. So we have deployed our app on the web only for now.
但是，萬維網(wǎng)( WWW )是免費使用的。 因此，我們目前僅在網(wǎng)絡(luò)上部署了我們的應(yīng)用程序。
Finally, our Ionic React app is freely available on the internet for end users – ta-da!
最后，我們的Io??nic React應(yīng)用程序可以在互聯(lián)網(wǎng)上免費提供給最終用戶– ta-da！
CoronaTracker (Use mobile devices for a smooth experience) https://coronatracker-20efc.web.app/world
CoronaTracker (使用移動設(shè)備獲得流暢的體驗) https://coronatracker-20efc.web.app/world
待處理的工作 (Pending Work)
Since writing this article, I have made this project open source on GitHub. You can contribute here by forking the below repo.
自撰寫本文以來，我已將該項目在GitHub上開源。 您可以在此處通過分叉以下存儲庫來做出貢獻。
For the complete code, jump into the GitHub repo. Don’t forget to star and fork in case you would like to add some more cool features to it. For the fork process, follow the steps given in README.MD file.
有關(guān)完整的代碼，請?zhí)罣itHub存儲庫。 如果您想為其添加更多更酷的功能，請不要忘記加星標。 對于派生過程，請按照README.MD文件中給出的步驟進行操作。
kapilraghuwanshi/corona-tracker-appCorona Tracker📊 - Track the latest Corona Virus cases around you. A universal, small-sized and handy cross platform mobile solution (android, iOS and web PWA) to track the COVID19 virus affected c... kapilraghuwanshi / corona-tracker-app CoronaTracker📊-跟蹤您附近的最新Corona病毒案例。 通用，小型且方便的跨平臺移動解決方案(Android，iOS和Web PWA)，用于跟蹤受COVID19病毒影響的計算機。I hope that you found this article useful and it was able to help you learn and build an awesome app today. If you really liked it, please do share it on all social media platforms.
希望本文對您有用，并且可以幫助您今天學習和構(gòu)建出色的應(yīng)用程序。 如果您真的喜歡它，請在所有社交媒體平臺上共享它。
Let’s be connected on LinkedIn (@kapilraghuwanshi) and Twitter (@techygeeeky) for more such tech stories.🤝
讓我們在LinkedIn( @kapilraghuwansh i)和Twitter( @techygeeek y)上建立聯(lián)系，了解更多此類技術(shù)故事。
翻譯自: https://www.freecodecamp.org/news/how-to-create-corona-tracker-app-in-3-days/
總結(jié)
以上是生活随笔為你收集整理的如何使用Ionic和Firebase在短短三天内创建冠状病毒跟踪器应用程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到前任结婚预示什么
- 下一篇： 梦到刀子是什么预兆