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技术-它们可以帮助我们在一个单一的代码库中取得如此多的成就。 使用Ionic Framework，我开发了一种跨平台移动解决方案，可在短短3天内跟踪冠状病毒病例。
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! 😃
在本教程中，我们将学习如何开发Android，iOS和Progressive Web App ，以通过最新的相关新闻，帮助和反馈部分来跟踪我们周围的案例。 为新的编码之旅做好准备！ 😃
先决条件 (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.
混合移动应用程序开发的过程适用于各种开发人员，无论其技术堆栈如何。 由于我们将使用Web开发的三个基本Struts-HTML + CSS + JAVASCRIPT ，因此您可以轻松地理解其过程和技术。
Thus this tutorial is for everyone who has just a basic understanding of Web Fundamentals. So, let's begin.
因此，本教程适用于仅对Web基础知识有基本了解的每个人。 所以，让我们开始吧。
第0天-构思，计划和工程 (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月)。 我得到了几个链接，它们的数量几乎没有差别。
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的数据会定期更新且更加准确。 我决定使用约翰·霍普金斯大学提供的数据来开发一种通用，小型且方便的移动解决方案。
计划 (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.
我计划开发一种跨平台的移动解决方案，每个人都可以普遍使用。 我考虑了Ionic框架，该框架将允许我通过编写和维护单个代码库来开发Android ，iOS和渐进式Web应用程序 (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:
这个想法是要开发5个独立的标签，这些标签将位于应用程序的底部：
World — would show the COVID19 Dashboard
世界 -将显示COVID19信息中心
Country — would allow you to select a country to check the cases
国家(地区)—您可以选择一个国家来检查案件
News — would get the latest news regarding the Coronavirus Pandemic
新闻-将获得有关冠状病毒大流行的最新新闻
Guidelines — would allow you to read and watch all advisories and guidelines
准则-允许您阅读和观看所有建议和准则
Help — would provide help and feedback.
帮助 -将提供帮助和反馈。
技术栈 (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):
之前，我已经通过Angular和Ionic开发了多个网站和应用程序。 但是这次，我想学习和使用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环境
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)
用于托管内容的Firebase ( 渐进式Web应用程序 )
工具类 (Tools)
- VS Code VS代码
- Google Chrome 谷歌浏览器
- Android Studio for Android app 适用于Android应用的Android Studio
- Xcode for iOS app (Unfortunately only available in Apple computers) 适用于iOS应用程序的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"
在全局范围内安装ionic “ npm install -g @ ionic / cli native-run cordova-res”
Create react app with Capacitor "ionic start corona-tracker tabs — type=react — capacitor"
使用电容器“离子启动电晕跟踪器选项卡—类型=React—电容器”创建react应用
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文件夹。 您应该已经按正确的顺序获取了所有其他子文件夹的默认HTML，CSS和.tsx文件。 现在，转到您的应用程序文件夹并运行这两个命令
cd corona-tracker ionic serve
cd电晕跟踪仪 离子发球机
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应用程序现在正在网络浏览器中运行。 单击终端中的localhost选项进行检查。 is这是您的基本应用安装和脚手架。
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).
到目前为止，您应该在本地浏览器中运行离子React应用程序。 现在index.html和index.tsx是您的单页应用程序(SPA)的第一页。
应用程序路由 (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>
让我们将路由添加到我们的应用程序中，这将使我们能够访问上面说明的所有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>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.
再次在浏览器中检查您的应用程序，您应该看到所有这些标签以及它们各自的页面。 所有选项卡均应通过正确的路由顺利运行。
Let me know in case you're stuck with any issues related to installation, compile-time, or run-time errors. 如果您 遇到与安装，编译时 或运行时错误 相关的任何问题， 请告诉我。
This is it for Day 0.🧤
第 0 天就是这样。🧤
第1天-开发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混合应用程序开发“ 世界”和“指南”选项卡。 到目前为止，我们已经完成了该应用程序的基本安装和脚手架。 我们还通过路由向我们的应用程序添加了5个不同的标签。
世界标签：设计 (World Tab: Design)
Let’s build our home page World tab now. I decided to have 4 different sections on this home tab:
让我们现在构建主页的“ 世界”选项卡。 我决定在此主页选项卡上有4个不同的部分：
- 4 different boxes to show actual numbers: Total, Active, Recovered and Deaths 4个不同的框来显示实际数字：总数，活动，已恢复和死亡
- A Pie Chart depicting the number of cases 描绘案件数量的饼图
- Slideshows for basic health tips 基本健康提示的幻灯片显示
- All countries listed with these categories in descending order. 所有国家/地区均以降序排列。
世界标签：数据和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相关的所有应用程序编程接口(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获取世界上的总案例总数。
const [data, setData] = useState<IGLobalCount>();
const [showLoading, setShowLoading] = useState(true);
useEffect(() => {
const getGlobalData = async () => {
//latest global count
const result = await axios('https://covidapi.info/api/v1/global');
// console.log(result);
setData(result.data);
setShowLoading(false);
};
getGlobalData();
}, []);Then set the data inside your return block using HTML:
然后使用HTML在返回块内设置数据：
<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>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.
现在，我们有前4个响应框，其中包含总病例数，确诊病例数，康复病例和死亡人数。 使用npm install react-chartjs-2在您的项目中安装chart.js 。 让我们利用相同的数据绘制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>Now, we have 2 of the 4 sections in the World tab. So next, let’s add a slideshow depicting general health tips.
现在，“ 世界”选项卡中的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>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.
现在，让我们按降序排列所有国家的数据表，以描述各种情况。 同样，我们将使用Axios库使用最新的 API，以使用useState＆useEffect React-hooks获取世界上所有国家的全球总数。
const [countryWiseData, setCountryWiseData] = useState<ICountry[]>([]);
useEffect(() => {
const getGlobalCountryData = async () => {
//latest global country wise count
const 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();
}, []);We have completed the development for our home tab with all 4 sections described above. You can see them below:
我们已经完成了上面介绍的所有4个部分的主页标签的开发。 您可以在下面看到它们：
Now, let’s jump on to develop our next tab — the Guidelines Tab.
现在，让我们继续开发下一个选项卡－ 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:
这只是世卫组织和州政府提供的各种咨询 和指南的信息性和静态选项卡。 我们在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>Let me know in case you get stuck with any issues related to installation, compile-time or run-time errors.
如果您遇到任何与安装，编译时或运行时错误有关的问题，请告诉我。
This is it for Day 1.🧤
这是第一天。🧤
第2天-发展中国家和新闻标签 (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混合应用程序开发“ 国家和地区 ”选项卡。 到目前为止，我们已经使用基本的应用程序路由在离子React应用程序中构建了“ 世界”和“准则”选项卡。
国家标签：设计 (Country Tab: Design)
Let’s build our second page Country tab now. I decided to have 4 different sections on this second tab:
现在，我们来构建第二页的“ 国家/地区”标签。 我决定在第二个选项卡上有4个不同的部分：
- Country Dropdown to select the country of your choice 国家下拉菜单选择您选择的国家
- 4 different boxes to show actual numbers: Total, Active, Recovered and Deaths in the selected country 4个不同的框来显示实际数字：所选国家/地区的总数，活跃，已恢复和死亡
- A Doughnut Chart depicting the number of cases in the selected country 甜甜圈图，显示所选国家/地区的病例数
- Weekly Trend for the cases in the selected country. 所选国家/地区案件的每周趋势。
国家/地区标签：数据和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相关的所有应用程序编程接口(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库使用国家/地区 API，以使用useState＆useEffect React-hooks获取所选国家/地区的总数。
We will store the country the user has selected in local storage for other illustrations to update.
我们会将用户选择的国家/地区存储在本地存储中，以供其他插图更新。
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]);Now, consume the API to get the country-specific data:
现在，使用API获取特定国家/地区的数据：
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]);Now, design the Doughnut and Bar trend chart:
现在，设计“ Donut and Bar”趋势图：
<IonCard>
<Doughnut
data={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><Bar
data={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 }
}
}}
/>Now save the file and check it out in the browser. So, finally, we should get the below design:
现在保存文件并在浏览器中签出。 因此，最后，我们应该获得以下设计：
Now, let’s keep going and develop our third tab — the News Tab.
现在，让我们继续开发第三个标签- 新闻标签。
新闻标签：设计 (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，标题，图像，作者和发布者的详细信息：
<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>新闻标签：数据和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)。 但是我用开发者帐户搜索了与冠状病毒有关的新闻。 如果要使用其他新闻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获取所选国家/地区的总数。
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();
}, []);Now, save the file and check in the browser. So, finally, we should get the below design:
现在，保存文件并在浏览器中签入。 因此，最后，我们应该获得以下设计：
Let me know in case you get stuck with any issues related to codes, compile-time or run-time errors.
如果您遇到任何与代码，编译时或运行时错误相关的问题，请告诉我。
This is it for Day 2.🧤
第二天就这样了。🧤
第3天-开发帮助标签和部署 (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.
在本节(也是最后一节)中，我们将开发“ 帮助”选项卡，并学习如何使用Capacitor构建 ndroid和iOS应用。
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.
到目前为止，我们已经在离子React应用程序中构建了“ 世界”，“国家/地区”，“新闻 ” 和“准则”选项卡。 另外，还将我们的应用程序作为PWA部署到Firebase 。 现在将是最有趣的。 穿上袜子，准备好在真实环境中实际看到自己的应用程序。
帮助标签：设计 (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.
首先，让我们创建“帮助和反馈”选项卡。 这只是世界卫生组织(WHO )的有用且静态的选项卡，向开发人员提供反馈。
<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>环境安装检查 (Environment Installation Check)
As mentioned in our first (Day 0) section, we should have all the below Software installed in our system:
如第一部分(第0天)所述，我们应该在系统中安装以下所有软件：
- VS Code VS代码
- Google Chrome 谷歌浏览器
- Android Studio for Android app 适用于Android应用的Android Studio
- Xcode for iOS app (Unfortunately only available in Apple computers) 适用于iOS应用程序的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.
我们需要设置所需的路径，并安装目标Android(例如Android 9 Pie)和iOS(例如iOS 11)操作系统版本。
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.
请稍等，如果您不熟悉此平台设置，请不要担心。 按照后续步骤的顺序执行后续步骤，并在接下来的部分中提供所有重要 链接 。
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.
在创建离子React应用程序时，我们已经在第一个终端命令中安装了Capacitor 。 (检查安装部分的第0天)。 电容器是跨平台Web应用程序的本机桥。 它使用一个代码库在iOS，Android和Web上调用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:
//转到您的项目目录并运行以下命令，以将Capacitor初始化到您的项目中，并将Android和iOS平台添加到您的应用中：
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
应用程序图标和启动屏幕 (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.
为了创建android和iOS图标和启动屏幕，我建议使用https://pgicons.abiro.com/ 。 它将为所有目标移动操作系统创建各种大小的图标和启动画面。
After creating these, you can directly replace these icons with the default ionic icons and splashes in your targeted platforms folders.
创建这些图标之后，您可以将这些图标直接替换为默认的离子图标，并在目标平台文件夹中启动。
渐进式Web应用程序(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的两个主要要求是服务人员和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网站上创建项目 。 您现在可以选择免费计划。 从左侧导航栏中启用托管选项。 接下来，在终端中，安装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相关的文件的一些默认名称和文件夹选项。 继续回答所有问题。 现在，使用--prod标志再次构建您的项目，如下所示：
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转到Firebase在主机部分下提供的链接。 在Firebase上部署应用程序非常简单明了。 每次将代码推送到自己的GitHub存储库中时，只需遵循这两个命令即可将最新更改构建并部署到Firebase项目中。
Android应用程式 (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是用于创建本机Android应用程序的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还用于创建Android虚拟设备 ，这是Android仿真器所必需的。 离子应用程序也可以启动到设备上 。
Use the link for complete setup and installation 👉https://ionicframework.com/docs/developing/android.
使用链接进行完整的设置和安装👉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
//运行以下命令以同步本机插件并运行本机应用程序： ionic cap复制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.
现在，您的应用程序将在Android Studio中打开，您可以在其中检查相同的文件夹，您的项目ID和其他默认设置。 另外，您可以为自己的应用程序构建图标和启动屏幕，并替换项目中现有的默认离子图标。
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.
创建一个模拟器并运行该应用程序。 您现在应该在Android模拟器中看到您的Coronavirus-tracker应用程序。 转到Android Studio顶部的“ 构建”选项，然后选择“ 构建包” /“ APK”。 第一次，您需要创建签名密钥。 然后，单击下一步以构建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).
万岁 ！ 🎉您现在在build文件夹中拥有自己的Android应用程序，可以将其部署到Google Play商店 (开发者帐户的终身使用费为25 美元 )和Amazon App Store (免费)。
iOS应用 (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是用于创建本机iOS应用程序的IDE。 它包括iOS SDK和Xcode命令行工具。 Xcode可以使用Apple帐户免费下载，也可以通过App Store安装。
Use the link for complete setup and installation 👉 https://ionicframework.com/docs/developing/ios.
使用该链接进行完整的设置和安装👉https : //ionicframework.com/docs/developing/ios。
Unfortunately, iOS apps can only be built in Apple Computers with macOS operating systems.
不幸的是，iOS应用程序只能在具有macOS操作系统的Apple计算机中构建。
// 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
//运行以下命令以同步本机插件并运行本机应用程序： ionic cap复制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.
现在，您的应用程序将在Xcode中打开，您可以在其中设置项目ID和其他默认设置。 另外，为您自己的应用程序创建图标和启动屏幕，并替换项目中现有的默认离子屏幕。
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.
创建一个模拟器并运行该应用程序。 您现在应该在iOS模拟器中看到您的Coronavirus-tracker应用程序。 如果您有一个有效的Apple Developers帐户(每年费用为99 美元) ，则可以构建iOS应用并将其部署到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和其他公司不接受与冠状病毒有关的应用程序包。 因此，除非您有任何政府，医院或任何指定的卫生机构提供的真实性证明，否则，没有商店会接受这些应用程序。
However, the World Wide Web (WWW) is free to use. So we have deployed our app on the web only for now.
但是，万维网( WWW )是免费使用的。 因此，我们目前仅在网络上部署了我们的应用程序。
Finally, our Ionic React app is freely available on the internet for end users – ta-da!
最后，我们的Ionic React应用程序可以在互联网上免费提供给最终用户– ta-da！
CoronaTracker (Use mobile devices for a smooth experience) https://coronatracker-20efc.web.app/world
CoronaTracker (使用移动设备获得流畅的体验) 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上开源。 您可以在此处通过分叉以下存储库来做出贡献。
- Desktop Responsiveness 💻 (Currently works well for Mobile and Tablets) 桌面响应度💻(当前适用于移动设备和平板电脑)
- Unit test cases. 单元测试用例。
- There is always formatting and indentation.😜 总是有格式和缩进。😜
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.
有关完整的代码，请跳至GitHub存储库。 如果您想为其添加更多更酷的功能，请不要忘记加星标。 对于派生过程，请按照README.MD文件中给出的步骤进行操作。
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.
希望本文对您有用，并且可以帮助您今天学习和构建出色的应用程序。 如果您真的喜欢它，请在所有社交媒体平台上共享它。
Let’s be connected on LinkedIn (@kapilraghuwanshi) and Twitter (@techygeeeky) for more such tech stories.🤝
让我们在LinkedIn( @kapilraghuwansh i)和Twitter( @techygeeek y)上建立联系，了解更多此类技术故事。
翻译自: https://www.freecodecamp.org/news/how-to-create-corona-tracker-app-in-3-days/
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
