«Бастаушы әрекеттен гөрі шебер көп қателеседі»
Біз нақты даму тәжірибесін алу үшін «қызық үшін» жасауға болатын жобаның 8 нұсқасын ұсынамыз.
Жоба 1. Trello клоны
Нені үйренесіз:
- Сұраныстарды өңдеу маршруттарын ұйымдастыру (Routing).
- Жылжыту.
- Жаңа объектілерді құру жолы (тақталар, тізімдер, карточкалар).
- Енгізілген деректерді өңдеу және тексеру.
- Клиент тарапынан: жергілікті жадты қалай пайдалану керек, деректерді жергілікті жадқа қалай сақтау керек, жергілікті жадтан деректерді қалай оқу керек.
- Сервер жағынан: мәліметтер қорын қалай пайдалану керек, мәліметтер базасында деректерді сақтау, мәліметтер қорынан деректерді оқу.
, React+Redux жүйесінде жасалған.
Жоба 2. Басқару тақтасы
Қарапайым CRUD қолданбасы, негіздерді үйренуге өте ыңғайлы. Үйренейік:
- Пайдаланушыларды жасаңыз, пайдаланушыларды басқарыңыз.
- Мәліметтер қорымен әрекеттесу – пайдаланушыларды жасау, оқу, өңдеу, жою.
- Енгізілген деректерді тексеру және пішіндермен жұмыс істеу.
Жоба 3. Криптовалюта трекері (жергілікті мобильді қосымша)
Кез келген нәрсе: Swift, Objective-C, React Native, Java, Kotlin.
Оқып көрейік:
- Жергілікті қолданбалар қалай жұмыс істейді.
- API-ден деректерді алу жолы.
- Негізгі бет макеттері қалай жұмыс істейді.
- Мобильді тренажерлармен қалай жұмыс істеу керек.
. Егер сіз жақсы нәрсені тапсаңыз, түсініктемелерде жазыңыз.
Егер сізді қызықтырса, міне .
Жоба 4. Жеке веб-пакет конфигурациясын нөлден бастап орнатыңыз
Техникалық тұрғыдан бұл қолданба емес, бірақ бұл веб-пакеттің ішінен қалай жұмыс істейтінін түсіну үшін өте пайдалы тапсырма. Енді бұл «қара жәшік» емес, түсінікті құрал болады.
талаптар:
- es7-ден es5-ке дейін құрастырыңыз (негіздер).
- jsx файлын js - немесе - .vue үшін .js құрастырыңыз (жүктеушілерді үйренуіңіз керек)
- Webpack dev серверін және ыстық модульді қайта жүктеуді орнатыңыз. (vue-cli және create-react-app екеуін де пайдаланады)
- Heroku, now.sh немесе Github пайдаланыңыз, веб-пакет жобаларын қолдану жолын үйреніңіз.
- CSS - scss, less, стилус компиляциялау үшін сүйікті препроцессорыңызды орнатыңыз.
- Веб-пакетпен кескіндерді және svg файлдарын қалай пайдалану керектігін біліңіз.
Жоба 5. Hackernews клоны
Әрбір Джеди өзінің Hackernews жасауы керек.
Жолда не үйренесіз:
- Hackernews API интерфейсімен қалай әрекеттесуге болады.
- Бір беттік қосымшаны қалай жасауға болады.
- Түсініктемелерді қарау, жеке пікірлер, профильдер сияқты мүмкіндіктерді қалай жүзеге асыруға болады.
- Сұраныстарды өңдеу маршруттарын ұйымдастыру (Routing).
Жоба 6. Тудушечка
Шынайы ма? Тудушка? Олардың мыңдағаны бар. Бірақ маған сеніңіз, бұл танымалдылықтың себебі бар.
Tudu қолданбасы - негіздерді түсінгеніңізге көз жеткізудің тамаша тәсілі. Бір қолданбаны ванильді Javascript тілінде және біреуін таңдаулы фреймворкте жазып көріңіз.
Үйреніңіз:
- Жаңа тапсырмаларды жасаңыз.
- Өрістердің толтырылғанын тексеріңіз.
- Тапсырмаларды сүзгілеу (орындалды, белсенді, барлығы). Қолдану
filterиreduce. - Javascript негіздерін түсіну.
Жоба 7. Сұрыпталатын апарып тастау тізімі
Түсінуге өте пайдалы .
Үйренейік:
- API сүйреп апарыңыз
- Бай пайдаланушы интерфейсін жасаңыз
Жоба 8. Messenger клоны (төл қолданба)
Сіз веб-қосымшалардың да, жергілікті қолданбалардың да қалай жұмыс істейтінін түсінесіз, бұл сізді сұр массадан ажыратады.
Біз нені зерттейміз:
- Веб-розеткалар (жедел хабарламалар)
- Жергілікті қолданбалар қалай жұмыс істейді.
- Үлгілер жергілікті қолданбаларда қалай жұмыс істейді.
- Жергілікті қолданбаларда сұрауды өңдеу маршруттарын ұйымдастыру.
Бұл сізге бір-екі айға жетеді.
Аударма компанияның қолдауымен жүзеге асырылды кім кәсіби түрде айналысады ірі тұтынушылар үшін, сондай-ақ .
Ақпарат көзі: www.habr.com