「網管筆記」Angular + Firebase + Rss 學習筆記

前置作業

1.下載安裝 https://nodejs.org/en/ 

2.開啟 終端機 輸入 npm install -g @angular/cli  安裝 Angular

2-1.下載安裝裝編輯器 Virtual Studio Code

3.建立 Angular 專案 ng new my-app(專案名稱可自行命名) 

y

y

css

4.開啟終端機 進入目錄 ---> cd my-app(剛剛建立的專案稱)  

5.啟用專案 ---> ng serve --open 

6.建立元件 ---> ng g c componet/bulletin (bulletin 可自行命名)

bulletin.component.html

<div fxLayout="row wrap" fxlayoutalign="center center" > <div fxFlex=90 fxFlex.gt-sm=33 fxFlexAlign="start"> <div class="list-title">最新消息</div> <div *ngFor="let item of bulletinItems"> <a href="{{item.link}}" target="_blank"> <div class="hvr-bounce-to-right list-style"> <div>{{item.title}}</div> <div fxLayout="row" fxlayoutalign="space-around center" class="list-res"><span fxFlex="30">公告單位：{{item.author}}</span> <span fxFlex="60">更新日期：{{item.pubDate}}</span></div> </div> </a> </div> <a href="https://groups.google.com/a/csps.chc.edu.tw/g/論壇名稱" target="_blank"> <div fxLayout="row" fxLayoutAlign="center space-around" class="list-more hvr-outline-in"> 更多公告訊息 </div> </a> </div> </div>

7.建立 Serviec ---> ng g service service/feed-service 

feed-service.service.ts

import { Injectable } from '@angular/core'; import { map } from "rxjs/operators"; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class FeedService { private rssToJsonServiceBaseUrl: string = 'https://rss2json.com/api.json?rss_url='; feed: any; constructor( private http: HttpClient ) { } getFeedContent(url: string) { return this.http.get(this.rssToJsonServiceBaseUrl + url) .pipe( map( res => this.feed = res ) ); } }

8.建立 Pipe ---> ng g pipe pipe/strip-html-tags 

strip-html-tags.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'stripHtmlTags' }) export class StripHtmlTagsPipe implements PipeTransform { tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*'; transform(value: unknown, ...args: unknown[]): unknown { return null; } tagOrComment = new RegExp( '<(?:' // Comment body. + '!--(?:(?:-*[^->])*--+|-?)' // Special "raw text" elements whose content should be elided. + '|script\\b' + this.tagBody + '>[\\s\\S]*?</script\\s*' + '|style\\b' + this.tagBody + '>[\\s\\S]*?</style\\s*' // Regular name + '|/?[a-z]' + this.tagBody + ')>', 'gi'); removeTags(html) { var oldHtml; do { oldHtml = html; html = html.replace(this.tagOrComment, ''); } while (html !== oldHtml); return html.replace(/</g, '<'); } }

9.建立 model 資料夾 

feed-items.ts

export interface FeedItems { title: string; pubDate: Date; link: string; guid: string; author: string; thumbnail: string; description: string; content: string; enclosure: Enclosure; categories: string[]; } export interface Enclosure { link: string; type: string; length: number; duration: number; thumbnail: string; }

feed.ts

import { FeedItems } from './feed-items' import { from } from 'rxjs'; export interface Feed { status:string; feed:{ author: string; description: string; image: string; link: string; title: string; url: string; }; items:FeedItems[]; }

10.建立滑鼠效果 ---> npm install hover.css --save

    觀看相關滑鼠效果 https://ianlunn.github.io/Hover/

rss to json

https://rss2json.com/#rss_url=https%3A%2F%2Fgithub.com%2Fexpressjs%2Fexpress%2Freleases.atom

論壇 RSS 網址

https://groups.google.com/a/網域名稱/forum/feed/論壇名稱/topics/rss_v2_0.xml

修改 bulletin.component.ts

bulletinFeedUrl: string='https://groups.google.com/a/網域名稱/forum/feed/論壇名稱/topics/rss_v2_0.xml&api_key=xxxxxxxxxxxxxxxxxx&order_dir=desc&count=5';

11.ng build --prod 打包專案(路徑：dist/資料夾)

發布 Firebase 

1.登入 Firebase - 建立專案名稱

2.sudo npm install -g firebase-tools

3.sudo firebase logout

4.sudo firebase login -->點選網站認證帳號

5.sudo firebase init  

-->Hosting:Configure files for Firebase Hosting and ....

-->空白鍵

Please select an option:-->Use an existing project

Select a default Firebase project for this directory-->選擇 firebase 上的專案名稱

What do you want to use as your public directory? 路徑更改--> dist/資料夾名稱

Configure as a single-page app (rewrite all urls to /index.html)? (y/N) -->N

Set up automatic builds and deploys with GitHub? (y/N) -->N

6.sudo firebase deploy

後記：真的真的特別感謝 澎湖中正國小 項志偉 老師無私分享