文件列表:

assets/ (0, 2022-06-24)
assets/pull-to-refresh-823x1024.png (231414, 2022-06-24)
assets/swipe-illustration.png (347934, 2022-06-24)
assets/tutorial.png (312314, 2022-06-24)
package-lock.json (1179346, 2022-06-24)
package.json (1078, 2022-06-24)
projekt-UI/ (0, 2022-06-24)
projekt-UI/Archive.png (83850, 2022-06-24)
projekt-UI/Archive@2x.png (274580, 2022-06-24)
projekt-UI/Colors.png (79432, 2022-06-24)
projekt-UI/Colors@2x.png (226321, 2022-06-24)
projekt-UI/Fonts.png (45314, 2022-06-24)
projekt-UI/Fonts@2x.png (151511, 2022-06-24)
projekt-UI/Inbox.png (70033, 2022-06-24)
projekt-UI/Inbox@2x.png (222651, 2022-06-24)
projekt-UI/Settings.png (31741, 2022-06-24)
projekt-UI/Settings@2x.png (87540, 2022-06-24)
projekt-UI/newsbox-UI.xd (2628363, 2022-06-24)
projektdokumentation.md (1281, 2022-06-24)
public/ (0, 2022-06-24)
public/index.html (922, 2022-06-24)
public/robots.txt (67, 2022-06-24)
src/ (0, 2022-06-24)
src/App.css (564, 2022-06-24)
src/App.js (1892, 2022-06-24)
src/App.test.js (246, 2022-06-24)
src/components/ (0, 2022-06-24)
src/components/Article.js (1700, 2022-06-24)
src/components/BodyCard.js (629, 2022-06-24)
src/components/HeadingCard.js (1355, 2022-06-24)
src/components/Navbar.js (3525, 2022-06-24)
src/components/PopUp.js (1783, 2022-06-24)
src/components/Search.js (932, 2022-06-24)
src/components/SectionHeader.js (1661, 2022-06-24)
src/components/SettingsItem.js (2154, 2022-06-24)
src/components/SettingsList.js (1302, 2022-06-24)
... ...

## Praktik opgave newsbox! I denne praktikperiode skal I udvikle en nyheds webapplikation som er optimeret til den mobile skrm. I applikationen skal der listes nyheder fra The New York Times i et kategoriseret nyhedsoverblik. Det skal vre muligt at vlge(klikke p) en nyhed i listen, hvorefter brugeren vil blive sendt videre til den fulde artikel p nytimes.com.

Nyhedsartikler skal ogs kunne gemmes i et privat nyhedsarkiv. Gem funktionen bliver synlig nr der swipes til venstre [se illustration](https://github.com/rts-cmk-opgaver/praktik-projekt-newsbox/blob/master/assets/swipe-illustration.png "swipe illustration") p en nyhed. Fra det private nyhedsarkiv kan ligeledes tilgs artikler og artikler kan slettes. Slet funktionen bliver synlig nr der swipes til venstre [se illustration](https://github.com/rts-cmk-opgaver/praktik-projekt-newsbox/blob/master/assets/swipe-illustration.png "swipe illustration") p en arkiveret nyhed.

Fra settings panelet skal brugeren have mulighed for at administrere det kategoriserede nyhedsoverblik ved at sl visning til eller fra for nyhedskategorier. Fra settings panelet skal brugeren ogs kunne skifte mellem lyst og mrkt tema.
### **Varighed:** I har 15 arbejdsdage til praktik projektet. Praktik projektet skal senest vre frdigt og afleveret onsdag d. 26/5 kl. 15:10. ### **Mlet med opgaven er:** * At arbejde med automatisering i din udviklingsproces. * At arbejde med modularisering af css. * At f erfaring med data konvertering s I kan prsentere data fra tredjepart services som ikke leverer data i JSON format. * At arbejde med lagring af indstillinger og data. * At optimere brugeroplevelsen gennem microinteractions og animationer. ## Applikations tech stack HTML(structure)
JavaScript(logic / data collection)
Animate.css(Animations)
Gulp(build system)
Sass(css preprocessor)
Netlify(host)
## Opgavebeskrivelse og materiale ### **User Interface:** Se XD fil (og billeder) i mappen projekt-UI. ## Oblikatoriske opgaver: 1. **Projekt planlgning**
Dit projekt skal planlgges i et Kanban board som er tilknyttet dit projekt p GitHub. Se hvordan du stter Kanban op p dit Github projekt her: https://www.youtube.com/watch?v=1mnUlnQCkxs&list=PLX4-t8Zdi_Xp7E8v2S8fmLXPqYSvxK3nC&index=1 2. **Datakonvertering**
The New York Times nyheder er tilgngelige i RSS-feed https://archive.nytimes.com/www.nytimes.com/services/xml/rss/index.html Et RSS-feed er en [XML](https://developer.mozilla.org/en-US/docs/Glossary/XML)-fil der distribueres af TNYT's webserver. Nyhedsdata leveres alts ikke i JSON format og det er derfor ndvendigt at f konvateret data fra XML- til JSON format for at I kan arbejde med data-prsentation som i plejer. **Her er lidt ressourcer som kan hjlpe jer:** 1. https://developer.mozilla.org/en-US/docs/Web/API/DOMParser 2. https://dev.to/niinpatel/converting-xml-to-json-using-recursion-2k4j **TIP:** Opret et sandbox milj hvor du kan ekspermantere med at konvertere data fra XML til JSON fr du implementerer i projektet. 3. **Automatisering**
Din udviklingsproces skal automatiseres med gulp. Du skal opstte tasks til at flytte og behandle de filer du udvikler til en "dist"-mappe i din udviklingsproces og en "build"-mappe nr dit projekt deployes til Netlify. Der skal vre processer som: * flytter html filer. * behandler og sammenskriver sass-filer til en samlet css fil. * behandler javascript filer med Babel, og sammenskriver dem til én fil. * vrige processer tilfjes efter behov. 4. **Animationer**
En nyhedskategori kan vre "ben", s de relaterede artikler fremgr af en liste herunder. En nyhedskategori kan ogs vre "lukket", sdan at det kun er nyhedskategorien som fremgr af listen men ikke de relaterede artiker. Det er din opgave at animere overgangen mellem "ben" / "lukket" tilstand p en lkker mde. I settingspanelt kan man "tnde og slukke" for nyhedskategorier. Det er din opgave at animere "kontakternes/switches" overgang fra "tndt" til "slukket". 5. **Funktioner**
I settings-panelet skal brugeren have mulighed for at administrere det kategoriserede nyhedsoverblik ved at sl visning til og fra p udvalgte nyhedskategorier. Det skal ogs vre muligt at skifte mellem lyst og mrkt tema fra settings panelt og applikationen skal "huske" indstillingerne. Nyhedsartikler skal ogs kunne gemmes i et privat nyhedsarkiv. Gem funktionen bliver synlig nr der swipes til venstre [se illustration](https://github.com/rts-cmk-opgaver/praktik-projekt-newsbox/blob/master/assets/swipe-illustration.png "swipe illustration") p en nyhed. Fra det private nyhedsarkiv kan ligeledes tilgs artikler og artikler kan slettes. Slet funktionen bliver synlig nr der swipes til venstre [se illustration](https://github.com/rts-cmk-opgaver/praktik-projekt-newsbox/blob/master/assets/swipe-illustration.png "swipe illustration") p en arkiveret nyhed.

6. **Deploy on Netlify**
Din webapplikation skal udgives p Netlify. ## Nice to have opgaver Husk at 'nice-to-have' opgaverne **ikke** er valgfrie opgaver! Jeg forventer at du begynder at udvikle nedenstende fetures, nr du er frdig med de oblikatoriske opgaver. Husk ogs at jo flere features du har med i projektet, jo federe er det at vise frem i sit portfolio. 1. Tilfj Swipe-down to refresh p nyhedsliste: [se illustraion](https://github.com/rts-cmk-opgaver/praktik-projekt-newsbox/blob/master/assets/pull-to-refresh-823x1024.png "swipe-down") 2. Feature tutorial frste gang webapplikationen bruges: [se illustration](https://github.com/rts-cmk-opgaver/praktik-projekt-newsbox/blob/master/assets/tutorial.png "tutorial") 3. Gr det muligt at redigere rkkeflgen p kategorier i settings. Rkkeflgen skal have indflydelse p den rkkeflge kategorierne listes i nyhedslisten. ## Aflevering og evaluering Opgaven skal vre frdig senest onsdag d. 26/5 kl. 15:10. Dvs. at det sidste push inden sluttidspunktet udgr din aflevering (husk at merge dit sidste commit til main/master, s det deployes til Netlify). Dit projekt vil blive testet p en telefon (iPhone 11), s det er vigtigt at du ogs tester p din telefon, og ikke udelukkende tester i browserens emulator. ### **Projektdokumentation** I filen der hedder projektdokumentation.md skal du dokumentere dit projekt og de vrktjer du bruger, samt din proces. Rigtig god arbejdslyst

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：