wikipedia_构建一个Wikipedia搜索应用程序

wikipedia

by Ayo Isaiah

通过Ayo Isaiah

构建一个Wikipedia搜索应用程序 (Building a Wikipedia Search App)

I just finished Free Code Camp’s Wikipedia Viewer app, where you pull articles side-by-side from Wikipedia using the MediaWiki Web API.

我刚刚完成了Free Code Camp的Wikipedia Viewer应用程序，您可以在其中使用MediaWiki Web API从Wikipedia并排提取文章。

The agile user stories were:

敏捷的用户故事是：

• Users can type queries in a search box and view the resulting Wikipedia entries.
  用户可以在搜索框中键入查询，并查看生成的Wikipedia条目。
• Users can view random Wikipedia articles by clicking a button.
  用户可以通过单击按钮查看随机的Wikipedia文章。

I finished this project rather quickly, because I knew exactly what to do after looking at the MediaWiki API, which was perhaps thanks to my experience from the Weather Project.

我相当快地完成了这个项目，因为在查看MediaWiki API之后我确切地知道该怎么做，这也许要归功于我从Weather Project的经验。

设计 (Design)

While thinking up design ideas for this project, I decided to lookup Google’s homepage and its search results page to see how they handled things. I ended up taking most of my design inspiration from them, as you’ll see.

在考虑该项目的设计思路时，我决定查找Google的主页及其搜索结果页，以了解它们的处理方式。 如您所见，我最终从他们那里获得了大部分设计灵感。

First up, the homepage has the headline, search box and buttons at the centre of the page. The “I’m Feeling Lucky” button sends you to a random Wikipedia Page which fulfilled the second user story.

首先，首页的标题，搜索框和按钮位于页面中心。 “我很幸运”按钮会将您发送到一个随机的Wikipedia页面，该页面满足了第二个用户故事。

When the page loads, focus is given to the search box so that the user can begin typing their query immediately, thanks to the following JavaScript:

页面加载时，将焦点放在搜索框上，以便用户可以借助以下JavaScript立即开始输入查询：

window.onload = function() { document.getElementById("wiki-search-input").focus();};

One thing I experimented with a bit is getting the results page to show up as soon as you start typing in the search box, imitating this feature on Google search.

我尝试过的一件事是，在您开始在搜索框中输入内容时就会显示结果页，从而在Google搜索中模仿该功能。

I was able to replicate this on my app, but I wasn’t sure how it was going to function on touch screens because, in my tests, the page didn’t respond to keypresses on my phone.

我可以在我的应用程序上复制它，但是我不确定它在触摸屏上的工作方式，因为在我的测试中，该页面没有响应手机上的按键。

So to avoid unexpected behavior, I ditched this idea and showed the results page only when the query was fully entered, and the “search” button or enter key was pressed. This worked fine across all the mobile and desktop platforms I tested.

因此，为了避免意外行为，我放弃了这个想法，仅在完全输入查询并按下“搜索”按钮或Enter键时才显示结果页面。 在我测试的所有移动和台式机平台上，此方法均能正常工作。

Overall, my design is nothing revolutionary, but so long as it scales properly on all device types, it’s good enough for me.

总体而言，我的设计并没有带来革命性的变化，但是只要能够在所有设备类型上正确缩放，对我来说就足够了。

逻辑 (Logic)

Diving into the code that pulled the results from Wikipedia, it wasn’t all that hard to use the API to be honest.

深入研究从Wikipedia获取结果的代码，说实话，使用API​​并不难。

I tried to tackle this challenge using the jQuery $.getJSON method to make the API call as I did with the Open Weather API, but it returned an error message concerning Cross Origin Resource Sharing (CORS).

我尝试使用jQuery $ .getJSON方法来解决此挑战，就像我使用开放天气API一样，但是它返回了有关跨源资源共享(CORS)的错误消息。

On further investigation, I found another jQuery method $.ajax() on Stack Overflow which worked. Apparently, I had to specify the dataType as “JSONP” (JSON with Padding) to get it to work.

在进一步调查中，我在Stack Overflow上找到了另一个可行的jQuery方法$ .ajax() 。 显然，我必须将dataType指定为“ JSONP”(带有填充的JSON)才能使它工作。

function ajax (keyword) {  $.ajax({     url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + keyword + "&prop=info&inprop=url&utf8=&format=json",    dataType: "jsonp",   success: function(response) {       console.log(response.query);       if (response.query.searchinfo.totalhits === 0) {         showError(keyword);       }

else {         showResults(response);       }  },

error: function () {    alert("Error retrieving search results, please refresh the page");   }  });

}

I discovered that the URL and title of each page were almost exactly the same. The only difference was that spaces in the title were replaced by underscores in the url.

我发现每个页面的URL和标题几乎完全相同。 唯一的区别是标题中的空格被url中的下划线代替。

So “JavaScript Libraries” becomes “JavaScript_Libraries” in the url.

因此，URL中的“ JavaScript库”变为“ JavaScript_Libraries”。

Simply by grabbing each title, I replaced the spaces with underscores using a bit of Regex (which admittedly I don’t know very well yet) and affixed it to the corresponding search result.

只需抓住每个标题，我就使用一些正则表达式(用公认的，我还不太清楚)用下划线替换了空格，并将其附加到相应的搜索结果中。

var title = callback.query.search[m].title;var url = title.replace(/ /g, "_");

$(".title-" + m).html("<a href=’https://en.wikipedia.org/wiki/" + url + "' target='_blank'>" + callback.query.search[m].title + "</a>");

The last thing I did was to make an error function so that if a user’s query does not match any results, it will simply display a few tips on the page to help the user improve search.

我做的最后一件事是创建一个错误函数，以便如果用户的查询不匹配任何结果，它将仅在页面上显示一些提示来帮助用户改善搜索。

As you can see, Free Code Camp’s open source community doesn’t have a Wikipedia article yet (despite having more than 300,000 members). If you’re a frequent Wikipedia contributor, here’s the outstanding article request for you to create one.

如您所见，Free Code Camp的开源社区尚无Wikipedia文章(尽管拥有30万以上的成员)。 如果您是Wikipedia的经常撰稿人，那么以下是出色的文章请求，供您创建。

So that was pretty much it for this project. You can view the final result on Codepen.

因此，这个项目就差不多了。 您可以在Codepen上查看最终结果。

下一步是什么 (What’s next)

I’m halfway done with the Twitch API Project as I write this. Most of the design is done, only need to figure out a few things with the API.

在撰写本文时，我已经完成了Twitch API项目的一半工作。 大部分的设计都完成了，只需要用API弄清楚几件事即可。

As a new semester at my University kicks off this week, things may become a bit slower with Free Code Camp, but nonetheless it shouldn’t stop me from putting a few hours in everyday.

随着本周大学新学期的开始，“免费代码营”可能会变得有点慢，但是尽管如此，这也不应阻止我每天花几个小时。

If you want to reach out or connect with me, you can find me on Twitter or email me.

如果您想联系我或与我联系，可以在Twitter上找到我或给我发送电子邮件 。

Thanks for reading.

谢谢阅读。

A version of this post was originally published on my personal blog.

这篇文章的一个版本最初发布在我的个人博客上 。

翻译自: https://www.freecodecamp.org/news/building-a-wikipedia-search-engine-project-4d84de3841d2/

wikipedia