Flask를 사용하여 뉴스 응용 프로그램 만들기
거푸집
템플릿은 응용 프로그램에서 HTML 페이지를 제공하는 데 사용될 HTML 파일입니다.previous blog에서 논의한 바와 같이 이 파일들은 templates 패키지의 core 디렉터리에 존재할 것이다.그러면 templates 패키지에 core 디렉터리를 만듭니다.또한 index.html 디렉터리에 templates 파일을 만듭니다.
$ mkdir core/templates
$ touch core/templates/index.html
응용 프로그램에서 HTML 파일을 사용할 경우 Bootstrap을 사용하지 않는 이유는 무엇입니까?Bootstrap 응답이 빠른 모바일 퍼스트 사이트를 신속하게 디자인하고 맞춤형으로 제작하는 데 도움을 줍니다.여기서 Bootstrap에서 제공한 starter template로 이동하여 복사하여 index.html 파일에 붙여넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Hello, {{ user.name }}!</title>
</head>
<body>
<h1>Hello, {{ user.name }}!</h1>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
Bootstrap에서 제공하는 간단한 시작 템플릿입니다.Bootstrap에서 제공하는 CSS와 Javascript를 포함합니다.만약 네가 그것을 열면 그것은 단지 하나의 소식만을 나타낼 것이다.우리는 Hello World 메시지를 맞춤형으로 만들고 싶지 않습니다.그래서 우리는 Hello, {{ user.name }}를 사용했고 Jinja2 템플릿 엔진을 사용했다.이제 Flask를 사용하여 이 페이지를 제공하는 방법을 살펴보겠습니다.
from core import app
from flask import render_template # Add this line
@app.route('/')
def say_hello():
user = {"name": "Ashutosh"}
return render_template("index.html", user=user) # Modify this line
flask 프로그램에서 HTML 페이지를 보여주기 위해서, 우리는 flask 자체가 제공하는 render_template() 방법을 사용합니다.이 방법은 템플릿 파일 이름과 템플릿 매개 변수의 변수 목록을 받아들여 같은 템플릿을 되돌려주지만, 그 중의 모든 자리 차지 문자는 실제 값으로 바꿉니다.render_template() 방법은 Flask 프레임워크와 연결된 Jinja2 템플릿 엔진을 호출합니다.Jinja2는 {{ ... }} 호출에서 제공한 매개 변수에 해당하는 값으로 render_template() 블록을 대체합니다.
이제 서버를 실행하여 출력이 어떻게 되는지 봅시다.
보셨습니까? 우리가 user 사전에서 어떤 이름을 전달하든지 간에 우리는 출력에서 같은 이름을 가지고 있습니다.이것이 바로 그것의 작업 원리다.
정적 파일
이제 HTML 템플릿에 정적 파일을 제공하는 방법을 살펴봅니다.정적 파일은 CSS, 자바스크립트, 이미지, 글꼴 등을 포함합니다. Bootstrap에서 제공하는 CSS, 자바스크립트가 있으니 그림을 보여 드리겠습니다.이를 위해 static 패키지에 core 디렉터리를 만들고 이 디렉터리에 images 폴더를 만듭니다.
$ mkdir core/static
$ mkdir core/static/images
모든 이미지를 이미지 폴더에 넣을 수 있습니다.예를 들어, 이미지demo.jpg를 사용합니다.이것은 HTML 템플릿에서 정적 파일을 사용하는 방법입니다.
<img src="{{ url_for('static', filename='images/demo.jpg') }}" alt="">
Flask는 URL을 동적으로 생성하는url_for 함수를 제공합니다.우리는 images/demo.jpg 폴더의 static 파일을 인용하고 있습니다.이 줄을 Hello 메시지 아래에 놓읍시다.다음은 우리의 출력 결과입니다.
뉴스 API
이제 프로그램의 주요 부분인 뉴스 제목을 어떻게 얻을 것인가로 넘어가자.이를 위해 News API를 사용하겠습니다.무료 계정을 등록하고 뉴스 API에서 API 키를 받습니다.API 키를 획득한 후 최상위 디렉토리에 .env 파일을 만들고 API 키를 다음과 같이 저장합니다.
NEWS_API_KEY=YOUR-API-KEY-HERE
환경 변수에 대한 자세한 정보here를 확인할 수 있습니다.환경 변수를 사용하기 위해 python-decouple라는 외부 라이브러리를 사용했습니다.다음과 같이 설치할 수 있습니다.
$ pip install python-decouple
설치 후 utils.py 패키지에 core 파일을 만듭니다.이 파일에서, 우리는 최신 뉴스 제목을 얻을 것이다.뉴스 API에는 newsapi-python라는 파이톤 라이브러리가 있다.그러나 우리는 그것을 사용하지 않고 requests 라이브러리를 사용할 것이다.다음과 같이 설치해야 합니다.
$ pip install requests
this blog 에서 파이톤을 사용하여 API를 사용하는 방법을 배울 수 있습니다.
현재, 우리는 utils.py 파일에서 최신 뉴스 제목을 얻을 수 있도록 모든 것을 준비했다.utils.py 파일을 열고 다음 코드를 추가합니다.
import requests
from decouple import config
NEWS_API_KEY = config('NEWS_API_KEY')
COUNTRY = 'in'
def get_latest_news():
news_data = requests.get(f'https://newsapi.org/v2/top-headlines?country={COUNTRY}&apiKey={NEWS_API_KEY}').json()
return news_data['articles']
위의 스크립트에서 우리는 뉴스를 얻기 위해 두 개의 가져오기 requests 를 가져오고, config 파일에 저장된 환경 변수의 값을 가져옵니다.그런 다음 API 키 값을 변수.env에 저장합니다.우리는 또한 NEWS_API_KEY를 인도에 설치할 것이다.뉴스 API 문서에서 국가 코드를 찾을 수 있습니다.다음에 우리가 해야 할 일은 COUNTRY 함수를 만드는 것이다.여기에는 국가 및 API 주요 매개 변수가 포함된 뉴스 APIhere에 제공된 URL에 대한 GET 요청이 있습니다.응답을 JSON으로 변환하고 있습니다.그것은 이렇게 보인다.
{
"status": "ok",
"totalResults": 38,
"articles": [
{
"source": {
"id": null,
"name": "Sportskeeda"
},
"author": "Aniket Thakkar",
"title": "Latest Free Fire redeem code to get Weapon loot crate today (14 October 2021) - Sportskeeda",
"description": "Gun crates are one of the ways that players in Free Fire can obtain impressive and appealing gun skins.",
"url": "https://www.sportskeeda.com/free-fire/latest-free-fire-redeem-code-get-weapon-loot-crate-today-14-october-2021",
"urlToImage": "https://staticg.sportskeeda.com/editor/2021/10/d0b83-16341799119781-1920.jpg",
"publishedAt": "2021-10-14T03:51:50Z",
"content": null
},
{
"source": {
"id": null,
"name": "NDTV News"
},
"author": null,
"title": "BSF Gets Increased Powers In 3 Border States: What It Means - NDTV",
"description": "Border Security Force (BSF) officers will now have the power toarrest, search, and of seizure to the extent of 50 km inside three newstates sharing international boundaries with Pakistan and Bangladesh.",
"url": "https://www.ndtv.com/india-news/bsf-gets-increased-powers-in-3-border-states-what-it-means-2574644",
"urlToImage": "https://c.ndtvimg.com/2021-08/eglno7qk_-bsf-recruitment-2021_625x300_10_August_21.jpg",
"publishedAt": "2021-10-14T03:44:00Z",
"content": "This move is quickly snowballing into a debate on state autonomy. New Delhi: Border Security Force (BSF) officers will now have the power to arrest, search, and of seizure to the extent of 50 km ins… [+4143 chars]"
},
{
"source": {
"id": "the-times-of-india",
"name": "The Times of India"
},
"author": "TIMESOFINDIA.COM",
"title": "5 health conditions that can make your joints hurt - Times of India",
"description": "Joint pain caused by these everyday issues generally goes away on its own when you stretch yourself a little and flex your muscles.",
"url": "https://timesofindia.indiatimes.com/life-style/health-fitness/health-news/5-health-conditions-that-can-make-your-joints-hurt/photostory/86994969.cms",
"urlToImage": "https://static.toiimg.com/photo/86995017.cms",
"publishedAt": "2021-10-14T03:30:00Z",
"content": "Depression is a mental health condition, but the symptoms may manifest even on your physical health. Unexpected aches and pain in the joints that you may experience when suffering from chronic depres… [+373 chars]"
},
{
"source": {
"id": null,
"name": "The Indian Express"
},
"author": "Devendra Pandey",
"title": "Rahul Dravid likely to be interim coach for New Zealand series - The Indian Express",
"description": "It’s learnt that a few Australian coaches expressed interest in the job, but the BCCI isn’t keen as they are focussing on an Indian for the role, before they look elsewhere.",
"url": "https://indianexpress.com/article/sports/cricket/rahul-dravid-likely-to-be-interim-coach-for-new-zealand-series-7570990/",
"urlToImage": "https://images.indianexpress.com/2021/05/rahul-dravid.jpg",
"publishedAt": "2021-10-14T03:26:09Z",
"content": "Rahul Dravid is likely to be approached by the Indian cricket board to be the interim coach for Indias home series against New Zealand. Head coach Ravi Shastri and the core of the support staff will … [+1972 chars]"
},
{
"source": {
"id": null,
"name": "CNBCTV18"
},
"author": null,
"title": "Thursday's top brokerage calls: Infosys, Wipro and more - CNBCTV18",
"description": "Goldman Sachs has maintained its 'sell' rating on Mindtree largely due to expensive valuations, while UBS expects a muted reaction from Wipro's stock. Here are the top brokerage calls for the day:",
"url": "https://www.cnbctv18.com/market/stocks/thursdays-top-brokerage-calls-infosys-wipro-and-more-11101072.htm",
"urlToImage": "https://images.cnbctv18.com/wp-content/uploads/2019/03/buy-sell.jpg",
"publishedAt": "2021-10-14T03:26:03Z",
"content": "MiniGoldman Sachs has maintained its 'sell' rating on Mindtree largely due to expensive valuations, while UBS expects a muted reaction from Wipro's stock. Here are the top brokerage calls for the day:"
}
]
}
뉴스가 get_latest_news() 라는 목록에 포함되어 있기 때문에, 우리는 함수에서 되돌아올 것이다. articles현재 우리는 이미 우리의 노선에서 이 기능을 사용할 준비가 되어 있다.
뉴스 페이지 디자인
Bootstrap만 사용하여 뉴스 페이지를 디자인할 것입니다.따라서 news_data['articles'] 디렉토리에 news.html 파일을 만들고 다음 코드를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Latest News Headlines</title>
</head>
<body>
<h1 class="text-center mt-4 mb-5">Latest News Headlines</h1>
<div class="row mt-5">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="row">
{% for news in news_articles %}
<div class="col-md-4 mb-5">
<div class="card" style="width: 18rem">
<img src="{{ news.urlToImage }}" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">{{ news.title }}</h5>
<p class="card-text">{{ news.description }}</p>
<a href="{{ news.url }}" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-2"></div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
너는 지금 코드가 매우 익숙하다고 느낄 것이다.템플릿 주체에 제목을 추가했습니다.다음은 Jinja2 for loop를 사용하여 루트 전달의 templates 목록을 교체합니다.우리는 뉴스마다 Bootstrap cards를 사용했다.그것은 전체 뉴스를 읽을 수 있는 이미지, 뉴스 제목, 설명, 단추를 포함한다.위의 예제 응답을 보면 응답news_articles, title, description, URL 및 urlToImage가 표시됩니다.
뉴스 페이지의 루트 만들기
현재 routes.py 파일을 열고 뉴스 페이지의 경로를 만듭니다"/news".
from core import app
from flask import render_template
from .utils import get_latest_news # Add this line
@app.route('/')
def say_hello():
user = {"name": "Ashutosh"}
return render_template("index.html", user=user)
# Add this part
@app.route('/news')
def news_headlines():
news_articles = get_latest_news()
return render_template("news.html", news_articles=news_articles)
위 스크립트에서 get_latest_news() 파일에서 utils.py 함수를 가져왔습니다.그리고 우리는 news_headlines() 장식기를 사용하여 URL"/news"과 비치는 보기 함수@app.route를 만들었습니다.함수 내부에서 우리는 get_latest_news() 변수 중의 news_articles 함수에서 데이터를 얻는데 이 변수는 단지 하나의 목록일 뿐이다.그리고 우리는 news.html 파일을 보여 주었고 news_articles 목록을 통과했다.
이제 서버를 실행하고 출력을 볼 준비가 되었습니다.
이거 신기해 보이죠?우리는 방금 Flask로 첫 번째 뉴스 프로그램을 만들었다.
결론
이 블로그에서 우리는 뉴스 프로그램을 만들었다.탐색News API Documentation 및 더 많은 API 엔드포인트 탐색사용자 정의 CSS를 사용하면 페이지를 더욱 매력적으로 보일 수 있습니다.네가 이 강좌를 좋아하길 바란다.당신은 이곳에서 완전한 응용 프로그램 코드를 찾을 수 있습니다: https://github.com/ashutoshkrris/Flask-News-Application
Reference
이 문제에 관하여(Flask를 사용하여 뉴스 응용 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ashutoshkrris/creating-a-news-application-using-flask-k2j
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ mkdir core/templates
$ touch core/templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Hello, {{ user.name }}!</title>
</head>
<body>
<h1>Hello, {{ user.name }}!</h1>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
from core import app
from flask import render_template # Add this line
@app.route('/')
def say_hello():
user = {"name": "Ashutosh"}
return render_template("index.html", user=user) # Modify this line
이제 HTML 템플릿에 정적 파일을 제공하는 방법을 살펴봅니다.정적 파일은 CSS, 자바스크립트, 이미지, 글꼴 등을 포함합니다. Bootstrap에서 제공하는 CSS, 자바스크립트가 있으니 그림을 보여 드리겠습니다.이를 위해
static 패키지에 core 디렉터리를 만들고 이 디렉터리에 images 폴더를 만듭니다.$ mkdir core/static
$ mkdir core/static/images
demo.jpg를 사용합니다.이것은 HTML 템플릿에서 정적 파일을 사용하는 방법입니다.<img src="{{ url_for('static', filename='images/demo.jpg') }}" alt="">
url_for 함수를 제공합니다.우리는 images/demo.jpg 폴더의 static 파일을 인용하고 있습니다.이 줄을 Hello 메시지 아래에 놓읍시다.다음은 우리의 출력 결과입니다. 뉴스 API
이제 프로그램의 주요 부분인 뉴스 제목을 어떻게 얻을 것인가로 넘어가자.이를 위해 News API를 사용하겠습니다.무료 계정을 등록하고 뉴스 API에서 API 키를 받습니다.API 키를 획득한 후 최상위 디렉토리에 .env 파일을 만들고 API 키를 다음과 같이 저장합니다.
NEWS_API_KEY=YOUR-API-KEY-HERE
환경 변수에 대한 자세한 정보here를 확인할 수 있습니다.환경 변수를 사용하기 위해 python-decouple라는 외부 라이브러리를 사용했습니다.다음과 같이 설치할 수 있습니다.
$ pip install python-decouple
설치 후 utils.py 패키지에 core 파일을 만듭니다.이 파일에서, 우리는 최신 뉴스 제목을 얻을 것이다.뉴스 API에는 newsapi-python라는 파이톤 라이브러리가 있다.그러나 우리는 그것을 사용하지 않고 requests 라이브러리를 사용할 것이다.다음과 같이 설치해야 합니다.
$ pip install requests
this blog 에서 파이톤을 사용하여 API를 사용하는 방법을 배울 수 있습니다.
현재, 우리는 utils.py 파일에서 최신 뉴스 제목을 얻을 수 있도록 모든 것을 준비했다.utils.py 파일을 열고 다음 코드를 추가합니다.
import requests
from decouple import config
NEWS_API_KEY = config('NEWS_API_KEY')
COUNTRY = 'in'
def get_latest_news():
news_data = requests.get(f'https://newsapi.org/v2/top-headlines?country={COUNTRY}&apiKey={NEWS_API_KEY}').json()
return news_data['articles']
위의 스크립트에서 우리는 뉴스를 얻기 위해 두 개의 가져오기 requests 를 가져오고, config 파일에 저장된 환경 변수의 값을 가져옵니다.그런 다음 API 키 값을 변수.env에 저장합니다.우리는 또한 NEWS_API_KEY를 인도에 설치할 것이다.뉴스 API 문서에서 국가 코드를 찾을 수 있습니다.다음에 우리가 해야 할 일은 COUNTRY 함수를 만드는 것이다.여기에는 국가 및 API 주요 매개 변수가 포함된 뉴스 APIhere에 제공된 URL에 대한 GET 요청이 있습니다.응답을 JSON으로 변환하고 있습니다.그것은 이렇게 보인다.
{
"status": "ok",
"totalResults": 38,
"articles": [
{
"source": {
"id": null,
"name": "Sportskeeda"
},
"author": "Aniket Thakkar",
"title": "Latest Free Fire redeem code to get Weapon loot crate today (14 October 2021) - Sportskeeda",
"description": "Gun crates are one of the ways that players in Free Fire can obtain impressive and appealing gun skins.",
"url": "https://www.sportskeeda.com/free-fire/latest-free-fire-redeem-code-get-weapon-loot-crate-today-14-october-2021",
"urlToImage": "https://staticg.sportskeeda.com/editor/2021/10/d0b83-16341799119781-1920.jpg",
"publishedAt": "2021-10-14T03:51:50Z",
"content": null
},
{
"source": {
"id": null,
"name": "NDTV News"
},
"author": null,
"title": "BSF Gets Increased Powers In 3 Border States: What It Means - NDTV",
"description": "Border Security Force (BSF) officers will now have the power toarrest, search, and of seizure to the extent of 50 km inside three newstates sharing international boundaries with Pakistan and Bangladesh.",
"url": "https://www.ndtv.com/india-news/bsf-gets-increased-powers-in-3-border-states-what-it-means-2574644",
"urlToImage": "https://c.ndtvimg.com/2021-08/eglno7qk_-bsf-recruitment-2021_625x300_10_August_21.jpg",
"publishedAt": "2021-10-14T03:44:00Z",
"content": "This move is quickly snowballing into a debate on state autonomy. New Delhi: Border Security Force (BSF) officers will now have the power to arrest, search, and of seizure to the extent of 50 km ins… [+4143 chars]"
},
{
"source": {
"id": "the-times-of-india",
"name": "The Times of India"
},
"author": "TIMESOFINDIA.COM",
"title": "5 health conditions that can make your joints hurt - Times of India",
"description": "Joint pain caused by these everyday issues generally goes away on its own when you stretch yourself a little and flex your muscles.",
"url": "https://timesofindia.indiatimes.com/life-style/health-fitness/health-news/5-health-conditions-that-can-make-your-joints-hurt/photostory/86994969.cms",
"urlToImage": "https://static.toiimg.com/photo/86995017.cms",
"publishedAt": "2021-10-14T03:30:00Z",
"content": "Depression is a mental health condition, but the symptoms may manifest even on your physical health. Unexpected aches and pain in the joints that you may experience when suffering from chronic depres… [+373 chars]"
},
{
"source": {
"id": null,
"name": "The Indian Express"
},
"author": "Devendra Pandey",
"title": "Rahul Dravid likely to be interim coach for New Zealand series - The Indian Express",
"description": "It’s learnt that a few Australian coaches expressed interest in the job, but the BCCI isn’t keen as they are focussing on an Indian for the role, before they look elsewhere.",
"url": "https://indianexpress.com/article/sports/cricket/rahul-dravid-likely-to-be-interim-coach-for-new-zealand-series-7570990/",
"urlToImage": "https://images.indianexpress.com/2021/05/rahul-dravid.jpg",
"publishedAt": "2021-10-14T03:26:09Z",
"content": "Rahul Dravid is likely to be approached by the Indian cricket board to be the interim coach for Indias home series against New Zealand. Head coach Ravi Shastri and the core of the support staff will … [+1972 chars]"
},
{
"source": {
"id": null,
"name": "CNBCTV18"
},
"author": null,
"title": "Thursday's top brokerage calls: Infosys, Wipro and more - CNBCTV18",
"description": "Goldman Sachs has maintained its 'sell' rating on Mindtree largely due to expensive valuations, while UBS expects a muted reaction from Wipro's stock. Here are the top brokerage calls for the day:",
"url": "https://www.cnbctv18.com/market/stocks/thursdays-top-brokerage-calls-infosys-wipro-and-more-11101072.htm",
"urlToImage": "https://images.cnbctv18.com/wp-content/uploads/2019/03/buy-sell.jpg",
"publishedAt": "2021-10-14T03:26:03Z",
"content": "MiniGoldman Sachs has maintained its 'sell' rating on Mindtree largely due to expensive valuations, while UBS expects a muted reaction from Wipro's stock. Here are the top brokerage calls for the day:"
}
]
}
뉴스가 get_latest_news() 라는 목록에 포함되어 있기 때문에, 우리는 함수에서 되돌아올 것이다. articles현재 우리는 이미 우리의 노선에서 이 기능을 사용할 준비가 되어 있다.
뉴스 페이지 디자인
Bootstrap만 사용하여 뉴스 페이지를 디자인할 것입니다.따라서 news_data['articles'] 디렉토리에 news.html 파일을 만들고 다음 코드를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Latest News Headlines</title>
</head>
<body>
<h1 class="text-center mt-4 mb-5">Latest News Headlines</h1>
<div class="row mt-5">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="row">
{% for news in news_articles %}
<div class="col-md-4 mb-5">
<div class="card" style="width: 18rem">
<img src="{{ news.urlToImage }}" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">{{ news.title }}</h5>
<p class="card-text">{{ news.description }}</p>
<a href="{{ news.url }}" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-2"></div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
너는 지금 코드가 매우 익숙하다고 느낄 것이다.템플릿 주체에 제목을 추가했습니다.다음은 Jinja2 for loop를 사용하여 루트 전달의 templates 목록을 교체합니다.우리는 뉴스마다 Bootstrap cards를 사용했다.그것은 전체 뉴스를 읽을 수 있는 이미지, 뉴스 제목, 설명, 단추를 포함한다.위의 예제 응답을 보면 응답news_articles, title, description, URL 및 urlToImage가 표시됩니다.
뉴스 페이지의 루트 만들기
현재 routes.py 파일을 열고 뉴스 페이지의 경로를 만듭니다"/news".
from core import app
from flask import render_template
from .utils import get_latest_news # Add this line
@app.route('/')
def say_hello():
user = {"name": "Ashutosh"}
return render_template("index.html", user=user)
# Add this part
@app.route('/news')
def news_headlines():
news_articles = get_latest_news()
return render_template("news.html", news_articles=news_articles)
위 스크립트에서 get_latest_news() 파일에서 utils.py 함수를 가져왔습니다.그리고 우리는 news_headlines() 장식기를 사용하여 URL"/news"과 비치는 보기 함수@app.route를 만들었습니다.함수 내부에서 우리는 get_latest_news() 변수 중의 news_articles 함수에서 데이터를 얻는데 이 변수는 단지 하나의 목록일 뿐이다.그리고 우리는 news.html 파일을 보여 주었고 news_articles 목록을 통과했다.
이제 서버를 실행하고 출력을 볼 준비가 되었습니다.
이거 신기해 보이죠?우리는 방금 Flask로 첫 번째 뉴스 프로그램을 만들었다.
결론
이 블로그에서 우리는 뉴스 프로그램을 만들었다.탐색News API Documentation 및 더 많은 API 엔드포인트 탐색사용자 정의 CSS를 사용하면 페이지를 더욱 매력적으로 보일 수 있습니다.네가 이 강좌를 좋아하길 바란다.당신은 이곳에서 완전한 응용 프로그램 코드를 찾을 수 있습니다: https://github.com/ashutoshkrris/Flask-News-Application
Reference
이 문제에 관하여(Flask를 사용하여 뉴스 응용 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ashutoshkrris/creating-a-news-application-using-flask-k2j
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
NEWS_API_KEY=YOUR-API-KEY-HERE
$ pip install python-decouple
$ pip install requests
import requests
from decouple import config
NEWS_API_KEY = config('NEWS_API_KEY')
COUNTRY = 'in'
def get_latest_news():
news_data = requests.get(f'https://newsapi.org/v2/top-headlines?country={COUNTRY}&apiKey={NEWS_API_KEY}').json()
return news_data['articles']
{
"status": "ok",
"totalResults": 38,
"articles": [
{
"source": {
"id": null,
"name": "Sportskeeda"
},
"author": "Aniket Thakkar",
"title": "Latest Free Fire redeem code to get Weapon loot crate today (14 October 2021) - Sportskeeda",
"description": "Gun crates are one of the ways that players in Free Fire can obtain impressive and appealing gun skins.",
"url": "https://www.sportskeeda.com/free-fire/latest-free-fire-redeem-code-get-weapon-loot-crate-today-14-october-2021",
"urlToImage": "https://staticg.sportskeeda.com/editor/2021/10/d0b83-16341799119781-1920.jpg",
"publishedAt": "2021-10-14T03:51:50Z",
"content": null
},
{
"source": {
"id": null,
"name": "NDTV News"
},
"author": null,
"title": "BSF Gets Increased Powers In 3 Border States: What It Means - NDTV",
"description": "Border Security Force (BSF) officers will now have the power toarrest, search, and of seizure to the extent of 50 km inside three newstates sharing international boundaries with Pakistan and Bangladesh.",
"url": "https://www.ndtv.com/india-news/bsf-gets-increased-powers-in-3-border-states-what-it-means-2574644",
"urlToImage": "https://c.ndtvimg.com/2021-08/eglno7qk_-bsf-recruitment-2021_625x300_10_August_21.jpg",
"publishedAt": "2021-10-14T03:44:00Z",
"content": "This move is quickly snowballing into a debate on state autonomy. New Delhi: Border Security Force (BSF) officers will now have the power to arrest, search, and of seizure to the extent of 50 km ins… [+4143 chars]"
},
{
"source": {
"id": "the-times-of-india",
"name": "The Times of India"
},
"author": "TIMESOFINDIA.COM",
"title": "5 health conditions that can make your joints hurt - Times of India",
"description": "Joint pain caused by these everyday issues generally goes away on its own when you stretch yourself a little and flex your muscles.",
"url": "https://timesofindia.indiatimes.com/life-style/health-fitness/health-news/5-health-conditions-that-can-make-your-joints-hurt/photostory/86994969.cms",
"urlToImage": "https://static.toiimg.com/photo/86995017.cms",
"publishedAt": "2021-10-14T03:30:00Z",
"content": "Depression is a mental health condition, but the symptoms may manifest even on your physical health. Unexpected aches and pain in the joints that you may experience when suffering from chronic depres… [+373 chars]"
},
{
"source": {
"id": null,
"name": "The Indian Express"
},
"author": "Devendra Pandey",
"title": "Rahul Dravid likely to be interim coach for New Zealand series - The Indian Express",
"description": "It’s learnt that a few Australian coaches expressed interest in the job, but the BCCI isn’t keen as they are focussing on an Indian for the role, before they look elsewhere.",
"url": "https://indianexpress.com/article/sports/cricket/rahul-dravid-likely-to-be-interim-coach-for-new-zealand-series-7570990/",
"urlToImage": "https://images.indianexpress.com/2021/05/rahul-dravid.jpg",
"publishedAt": "2021-10-14T03:26:09Z",
"content": "Rahul Dravid is likely to be approached by the Indian cricket board to be the interim coach for Indias home series against New Zealand. Head coach Ravi Shastri and the core of the support staff will … [+1972 chars]"
},
{
"source": {
"id": null,
"name": "CNBCTV18"
},
"author": null,
"title": "Thursday's top brokerage calls: Infosys, Wipro and more - CNBCTV18",
"description": "Goldman Sachs has maintained its 'sell' rating on Mindtree largely due to expensive valuations, while UBS expects a muted reaction from Wipro's stock. Here are the top brokerage calls for the day:",
"url": "https://www.cnbctv18.com/market/stocks/thursdays-top-brokerage-calls-infosys-wipro-and-more-11101072.htm",
"urlToImage": "https://images.cnbctv18.com/wp-content/uploads/2019/03/buy-sell.jpg",
"publishedAt": "2021-10-14T03:26:03Z",
"content": "MiniGoldman Sachs has maintained its 'sell' rating on Mindtree largely due to expensive valuations, while UBS expects a muted reaction from Wipro's stock. Here are the top brokerage calls for the day:"
}
]
}
Bootstrap만 사용하여 뉴스 페이지를 디자인할 것입니다.따라서
news_data['articles'] 디렉토리에 news.html 파일을 만들고 다음 코드를 추가합니다.<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Latest News Headlines</title>
</head>
<body>
<h1 class="text-center mt-4 mb-5">Latest News Headlines</h1>
<div class="row mt-5">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="row">
{% for news in news_articles %}
<div class="col-md-4 mb-5">
<div class="card" style="width: 18rem">
<img src="{{ news.urlToImage }}" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">{{ news.title }}</h5>
<p class="card-text">{{ news.description }}</p>
<a href="{{ news.url }}" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-2"></div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
templates 목록을 교체합니다.우리는 뉴스마다 Bootstrap cards를 사용했다.그것은 전체 뉴스를 읽을 수 있는 이미지, 뉴스 제목, 설명, 단추를 포함한다.위의 예제 응답을 보면 응답news_articles, title, description, URL 및 urlToImage가 표시됩니다.뉴스 페이지의 루트 만들기
현재 routes.py 파일을 열고 뉴스 페이지의 경로를 만듭니다"/news".
from core import app
from flask import render_template
from .utils import get_latest_news # Add this line
@app.route('/')
def say_hello():
user = {"name": "Ashutosh"}
return render_template("index.html", user=user)
# Add this part
@app.route('/news')
def news_headlines():
news_articles = get_latest_news()
return render_template("news.html", news_articles=news_articles)
위 스크립트에서 get_latest_news() 파일에서 utils.py 함수를 가져왔습니다.그리고 우리는 news_headlines() 장식기를 사용하여 URL"/news"과 비치는 보기 함수@app.route를 만들었습니다.함수 내부에서 우리는 get_latest_news() 변수 중의 news_articles 함수에서 데이터를 얻는데 이 변수는 단지 하나의 목록일 뿐이다.그리고 우리는 news.html 파일을 보여 주었고 news_articles 목록을 통과했다.
이제 서버를 실행하고 출력을 볼 준비가 되었습니다.
이거 신기해 보이죠?우리는 방금 Flask로 첫 번째 뉴스 프로그램을 만들었다.
결론
이 블로그에서 우리는 뉴스 프로그램을 만들었다.탐색News API Documentation 및 더 많은 API 엔드포인트 탐색사용자 정의 CSS를 사용하면 페이지를 더욱 매력적으로 보일 수 있습니다.네가 이 강좌를 좋아하길 바란다.당신은 이곳에서 완전한 응용 프로그램 코드를 찾을 수 있습니다: https://github.com/ashutoshkrris/Flask-News-Application
Reference
이 문제에 관하여(Flask를 사용하여 뉴스 응용 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/ashutoshkrris/creating-a-news-application-using-flask-k2j
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
from core import app
from flask import render_template
from .utils import get_latest_news # Add this line
@app.route('/')
def say_hello():
user = {"name": "Ashutosh"}
return render_template("index.html", user=user)
# Add this part
@app.route('/news')
def news_headlines():
news_articles = get_latest_news()
return render_template("news.html", news_articles=news_articles)
이 블로그에서 우리는 뉴스 프로그램을 만들었다.탐색News API Documentation 및 더 많은 API 엔드포인트 탐색사용자 정의 CSS를 사용하면 페이지를 더욱 매력적으로 보일 수 있습니다.네가 이 강좌를 좋아하길 바란다.당신은 이곳에서 완전한 응용 프로그램 코드를 찾을 수 있습니다: https://github.com/ashutoshkrris/Flask-News-Application
Reference
이 문제에 관하여(Flask를 사용하여 뉴스 응용 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ashutoshkrris/creating-a-news-application-using-flask-k2j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
