2021年4月25日 星期日

「網管筆記」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


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

feed-service.service.ts


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

strip-html-tags.pipe.ts


9.建立 model 資料夾 

feed-items.ts


feed.ts





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

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

沒有留言:

張貼留言

歡迎大家一起留言討論!