8 навучальных праектаў

«Майстар робіць больш памылак, чым пачатковец — спроб»

Прапануем 8 варыянтаў праектаў, якія можна зрабіць "па фане", каб атрымаць рэальны вопыт распрацоўкі.

Праект 1. Клон Trello

Клон Trello ад Indrek Lasn.

Што вы асвоіце:

• Арганізацыя маршрутаў апрацоўкі запытаў (Routing).
• Перацягнуць.
• Як ствараць новыя аб'екты (дошкі, спісы, карткі).
• Апрацоўка і праверка ўваходных даных.
• З боку кліента: як выкарыстоўваць лакальнае сховішча, як захоўваць дадзеныя ў лакальным сховішчы, як чытаць дадзеныя з лакальнага сховішча.
• З боку сервера: як выкарыстоўваць базы дадзеных, як захоўваць дадзеныя ў базе, як чытаць дадзеныя з базы.

Тут прыклад рэпазітара, зробленага на React+Redux.

Праект 2. Панэль адміна

Github Repository.

Прасценькае CRUD дадатак, ідэальна падыходзіць для вывучэння асноў. Навучымся:

• Стварыць карыстальнікаў, кіраваць карыстальнікамі.
• Узаемадзейнічаць з базай дадзеных - ствараць, чытаць, рэдагаваць, выдаляць карыстальнікаў.
• Праверка ўводу і праца з формамі.

Праект 3. Трэкер криптовалют (натыўнае мабільнае прыкладанне)

Github рэпазітары.

На чым заўгодна: Swift, Objective-C, React Native, Java, Kotlin.

Вывучым:

• Як працуюць натыўныя прыкладанні.
• Як здабываць дадзеныя з API.
• Як працуюць натыўныя макеты старонак.
• Як працаваць з мабільнымі сімулятарамі.

Паспрабуйце вось гэта API. Знойдзеце лепш - напішыце ў каментах.

Калі цікава, вось тут тутарыял.

Праект 4. Наладзіць уласны канфіг webpack з нуля

Тэхнічна, гэта не дадатак, але вельмі карысная задача, каб зразумець як працуе webpack знутры. Зараз гэта будзе не «чорная скрыня», а зразумелая прылада.

патрабаванні:

• Кампіляваць es7 у es5 (асновы).
• Кампіляваць jsx у js - ці - .vue у .js (давядзецца вывучыць загрузнікі)
• Наладзіць webpack dev server і hot module reloading. (vue-cli and create-react-app з дапамогай both)
• Выкарыстоўваць Heroku, now.sh або Github, навучыцца разгортваць webpack праекты.
• Наладзіць свой любімы прэпрацэсар, каб кампіляваць css - scss, less, stylus.
• Вывучыць як выкарыстоўваць выявы і svgs з webpack.

Тут узрушаны рэсурс для поўных пачаткоўцаў.

Праект 5. Клон Hackernews

Кожны джэдай абавязаны зрабіць свой уласны Hackernews.

Што вы асвоіце па дарозе:

• Як узаемадзейнічаць з hackernews API.
• Як стварыць аднастаронкавая дадатак.
• Як рэалізаваць такія фічы, як прагляд каментароў, асобных каментароў, профіляў.
• Арганізацыя маршрутаў апрацоўкі запытаў (Routing).

Праект 6. Тудушачка

TodoMVC.

Сур'ёзна? Тудушка? Іх жа тысячы. Але паверце, ёсць прычына такой папулярнасці.
Туды-дадатак - гэта выдатны спосаб пераканацца, што разумееш асновы. Паспрабуйце напісаць адно прыкладанне на ванільным Javascript і адно на сваім любімым фрэймворку.

Навучыцеся:

• Ствараць новыя задачы.
• Правяраць запаўненне палёў.
• Фільтраваць задачы (завершаная, актыўная, усё). Выкарыстоўвайце filter и reduce.
• Разумець асновы Javascript.

Праект 7. Сартаваны drag and drop спіс

Github рэпазітары.

Вельмі карысна, каб зразумець drag and drop api.

Навучымся:

• Drag and drop API
• Ствараць rich UIs

Праект 8. Клон месэнджэра (натыўнае дадатак)

Вы будзеце разумець як працуюць і вэб прыкладанні і натыўныя прыкладанні, што вылучыць вас з шэрай масы.

Што вывучым:

• Web sockets (імгненныя паведамленні)
• Як працуюць натыўныя прыкладанні.
• Як працуюць шаблоны ў натыўных дадатках.
• Арганізацыя маршрутаў апрацоўкі запытаў у натыўных дадатках.

Гэтага вам хопіць на месяц-другі.

Пераклад выкананы пры падтрымцы кампаніі EDISON Software, якая прафесійна займаецца распрацоўкай прыкладанняў і сайтаў на PHP для буйных заказчыкаў, а таксама распрацоўкай хмарных сэрвісаў і мабільных прыкладанняў на Java.

Крыніца: habr.com