Още идеи за проекти за подобряване на вашите умения за кодиране

Преди две седмици публикувах статия, съдържаща 15 идеи за проекти, които можете да изградите, за да подобрите уменията си за кодиране и хората бяха много развълнувани от този ресурс.

Освен това хранилището за идеи за приложения получи почти 3000 звезди, откакто публикувах тази статия. Това е безумно! ?

Благодаря на всички за това! ?

В тази публикация ще разгледаме някои нови проекти, които бяха добавени към хранилището оттогава.

Като кратко напомняне, всички проекти са разделени на три нива въз основа на знанията и опита, необходими за изпълнението им. Вижте описанието на нивата в хранилището.

По-долу ще намерите 2 идеи за начинаещи , 4 средни и 3 напреднали .

1. КАЛКУЛАТОР

Ниво: 1 - Начинаещ

Калкулаторите са не само един от най-полезните налични инструменти, но са и чудесен начин да разберете потребителския интерфейс и обработката на събития в приложение. В този проблем ще създадете калкулатор, който поддържа основни аритметични изчисления върху цели числа.

Стайлингът зависи от вас, така че използвайте въображението си и бъдете креативни! Може също така да ви струва отделеното време да експериментирате с приложението калкулатор на мобилното си устройство, за да разберете по-добре основната функционалност и крайните случаи.

Ограничения

  • Може да не използвате eval()функцията за изпълнение на изчисления

Потребителски истории

  • Потребителят може да види дисплей, показващ текущия въведен номер или резултата от последната операция.
  • Потребителят може да види панел за въвеждане, съдържащ бутони за цифрите 0–9, операции - „+“, „-“, „/“ и „=“, бутон „C“ (за изчистване) и бутон „AC“ (за изчистване на всички).
  • Потребителят може да въведе числа като последователности с дължина до 8 цифри, като щракне върху цифрите в панела за въвеждане. Въвеждането на цифри над 8 ще бъде игнорирано.
  • Потребителят може да кликне върху бутон за операция, за да покаже резултата от тази операция: _ резултатът от предходната операция и последното въведено число ИЛИ _ последните две въведени числа ИЛИ * последното въведено число
  • Потребителят може да щракне върху бутона „C“, за да изчисти последния номер или последната операция. Ако последният запис на потребителите е бил операция, дисплеят ще бъде актуализиран до стойността, която го е предшествала.
  • Потребителят може да щракне върху бутона „AC“, за да изчисти всички вътрешни работни зони и да настрои дисплея на 0.
  • Потребителят може да види „ERR“ на дисплея, ако някоя операция надвишава 8-цифрения максимум.

Бонус функции

  • Потребителят може да щракне върху бутон „+/-“, за да промени знака на номера, който се показва в момента.
  • Потребителят може да види бутон с десетична запетая (.) На панела за въвеждане, който позволява да се въвеждат числа с плаваща запетая до 3 места и да се извършват операции до максималния брой десетични знаци, въведени за всяко едно число.

Полезни връзки и ресурси

  • Калкулатор (Уикипедия)
  • MDN

Примерни проекти

2. РЕЦЕПТ НА ПРИЛОЖЕНИЕ

Ниво: 1 - Начинаещ

Може да не сте осъзнали това, но рецептите не са нищо повече от кулинарни алгоритми. Подобно на програмите, рецептите са поредица от задължителни стъпки, които, ако се следват правилно, водят до вкусно ястие.

Целта на приложението Recipe е да помогне на потребителя да управлява рецепти по начин, който да ги направи лесни за следване.

Ограничения

  • За първоначалната версия на това приложение данните на рецептата могат да бъдат кодирани като JSON файл. След внедряване на първоначалната версия на това приложение можете да го разширите, за да поддържате рецепти във файл или база данни.

Потребителски истории

  • Потребителят може да види списък със заглавия на рецепти
  • Потребителят може да щракне върху заглавието на рецептата, за да покаже карта с рецепта, съдържаща заглавието на рецептата, вида на храненето (закуска, обяд, вечеря или закуска), броя на хората, които обслужва, нивото на трудност (начинаещи, средно напреднали, напреднали), списъка на съставките (включително техните количества), както и етапите на подготовка.
  • Потребителят щраква върху ново заглавие на рецептата, за да замени текущата карта с нова рецепта.

Бонус функции

  • Потребителят може да види снимка, показваща как изглежда артикулът, след като е подготвен.
  • Потребителят може да търси рецепта, която не е в списъка със заглавия на рецепти, като въведе името на ястието в полето за търсене и щракне върху бутон „Търсене“. Всеки API за рецепти с отворен код може да се използва като източник за рецепти (вижте The MealDB по-долу).
  • Потребителят може да види списък с рецепти, съответстващи на условията за търсене
  • Потребителят може да щракне върху името на рецептата, за да покаже нейната карта с рецепти.
  • Потребителят може да види предупредително съобщение, ако не е намерена съответстваща рецепта.
  • Потребителят може да щракне върху бутон „Запазване“ на картите за рецепти, намиращи се през API, за да запази копие в този файл или база данни с рецепти за приложения.

Полезни връзки и ресурси

  • Използване на Fetch
  • Аксиос
  • API на MealDB

Примерни проекти

3. РИСУНКА ПРИЛОЖЕНИЕ

Подреждане: 2 - междинен

Създайте цифрови произведения на изкуството върху платно в мрежата, за да ги споделяте онлайн и също да експортирате като изображения.

Потребителски истории

  • Потребителят може да рисува с canvasпомощта на мишката
  • Потребителят може да промени цвета
  • Потребителят може да промени размера на инструмента
  • Потребителят може да натисне бутон, за да изчисти canvas

Бонус функции

  • Потребителят може да запази произведението на изкуството като изображение ( .png,, .jpgи т.н. формат)
  • Потребителят може да направи различни форми ( rectangle, circle, star, и т.н.)
  • Потребителят може да споделя произведения на изкуството в социалните медии

Полезни връзки и ресурси

  • Научете как да създадете приложение за рисуване с помощта на p5js

Примерни проекти

4. ЕМОЖИ ПРЕВОДАЧ

Подреждане: 2 - междинен

Емоджиите се превърнаха в lingua franca на съвременното общество. Те са забавен и бърз начин за комуникация, но също така и изключително експресивен механизъм за комуникация на емоции и реакции.

Целта на приложението Emoji Translator е да преведе текст, въведен от потребителя, в еквивалентен низ от емотикони, преведени от една или повече думи в оригиналния текст и думи, за които няма съответни емоджи.

Потребителски истории

  • Потребителят може да въведе низ от думи, цифри и пунктуация в текстово поле
  • Потребителят може да щракне върху бутон „Превод“, за да преведе думите от въведения текст в съответните им емотикони.
  • Потребителят може да види предупредително съобщение, ако е щракнато върху „Превод“, но текстовото поле за въвеждане е празно или непроменено от последния превод.
  • Потребителят може да види текстови елементи във въведения текст, преведени на еквивалентните им емоджи в изходно текстово поле. Текстовите елементи, за които няма емоджи, ще останат непроменени.
  • Потребителят може да щракне върху бутон „Изчистване“, за да изчисти текстовите полета за въвеждане и извеждане.

Бонус функции

  • Разработчикът ще внедри функция за синоним на емоджи, за да позволи на приложението да превежда по-голямо разнообразие от думи в емоджи.
  • Потребителят може да избере езика, в който се въвежда въведеният текст, от падащ списък с езици.

Полезни връзки и ресурси

Пълен списък с емоджи v12.0

Примерни проекти

Превод на емоджи

5. ПРИЛОЖЕНИЕ MENE GENERATOR

Подреждане: 2 - междинен

Позволете на потребителите да генерират персонализирани мемове, като добавят текст върху изображение.

Потребителски истории

  • Потребителят може да качи изображение, което ще се появи на платно
  • Потребителят може да добавя текст в горната част на изображението
  • Потребителят може да добавя текст в долната част на изображението
  • Потребителят може да избере цвета на текста
  • Потребителят може да избере размера на текста
  • Потребителят може да запази получения мем

Бонус функции

  • Потребителят може да избере семейството на шрифтовете за текста
  • Потребителят може да споделя мема в социалните медии (twitter, reddit, facebook и т.н.)
  • Потребителят може да плъзга текста наоколо и да го поставя, където пожелае, върху изображението
  • Потребителят може да рисува фигури върху изображението (кръгове, правоъгълници или безплатно рисуване с мишката)

Полезни връзки и ресурси

Работата с платно се улеснява много от библиотеката p5js.

Примерни проекти

Meme Generator от imgflip

6. ТИПОВА ПРАКТИКА

Подреждане: 2 - междинен

Някои неща са толкова очевидни, че могат лесно да бъдат пренебрегнати. Като разработчик способността ви да пишете бързо и точно е един фактор, който влияе върху производителността на вашето развитие. Целта на приложението Typing Practice е да ви предостави практика на писане заедно с метрики, които да ви позволят да измервате напредъка си.

Практиката за въвеждане на текст показва дума, която след това трябва да въведете в рамките на определен интервал от време. Ако думата е въведена неправилно, тя остава на екрана и интервалът от време остава същият. Но когато думата е написана правилно, се показва нова дума и интервалът от време е леко намален.

Надяваме се, че тази повтаряща се практика ще ви помогне да подобрите както скоростта на писане, така и точността.

Потребителски истории

  • Потребителят може да види, че думите за интервал от време трябва да бъдат въведени, показани в прозореца на приложението.
  • Потребителят може да види броя на успешните опити и броя на всички опити в полето за резултати.
  • Потребителят може да щракне върху бутон „Стартиране на практика“, за да започне практическата сесия.
  • Потребителят може да види подсказващата дума, показана в текстово поле.
  • Потребителят може да започне да въвежда думата в полето за въвеждане на текст.
  • Потребителят може да види набраните букви, ако е въведена неправилна буква и полето за въвеждане на текст ще бъде изчистено.
  • Потребителят може да види съобщението в съседство с полето за въвеждане на текст, което показва, че потребителят трябва да опита отново, ако е въведена неправилна буква.
  • Потребителят може да види броя на увеличените общи опити в полето за резултати.
  • Потребителят може да види поздравително съобщение, ако думата е въведена правилно.
  • Потребителят може да види, че думите с времеви интервал трябва да бъдат въведени, намалени с малко количество, ако думата е въведена правилно.
  • Потребителят може да види броя на успешните опити, увеличен в полето за оценка, ако думата е била правилно въведена.
  • Потребителят може да щракне върху бутон „Спиране на практиката“, за да спре практическата сесия.

Бонус функции

  • Потребителят може да чуе уникален звуков сигнал, когато се показва нова дума, думата е въведена правилно или е въведена неправилна буква.
  • Потребителят може да влезе в приложението
  • Потребителят може да вижда кумулативни статистически данни за ефективността във всички свои упражнения.

Полезни връзки и ресурси

  • клавиатура
  • setInterval

Примерни проекти

Учител по писане на Twiddler

7. ЛИФТА

Ниво: 3 - Разширено

Трудно е да се мисли за свят без асансьори. Особено, ако трябва да ходите нагоре и надолу по 20 стълби всеки ден. Но ако се замислите, асансьорите бяха една от оригиналните имплементации на събития и манипулатори на събития много преди уеб приложенията да излязат на сцената.

Целта на приложението Elevator е да симулира работата на асансьор и по-важното е как да се справя със събитията, генерирани, когато обитателите на сградите го използват. Това приложение симулира обитатели, които се обаждат за асансьор от всеки етаж и натискат бутоните вътре в асансьора, за да посочат етажа, който желаят да посетят.

Ограничения

  • Трябва да приложите един манипулатор на събития за бутоните нагоре и надолу на всеки етаж. Например, ако има 4 етажа, трябва да се приложи един манипулатор на събития, а не 8 (два бутона на етаж).
  • По същия начин трябва да се приложи един манипулатор на събития за всички бутони на контролния панел в асансьора, а не уникален манипулатор на събития за всеки бутон.

Потребителски истории

  • Потребителят може да види диаграма на напречното сечение на сграда с четири етажа, асансьорна шахта, асансьор и бутон нагоре на първия етаж, бутони нагоре и надолу на втория и третия етаж и бутон надолу на четвъртия етаж.
  • Потребителят може да види контролния панел на асансьора с бутон за всеки от етажите отстрани на диаграмата.
  • Потребителят може да щракне върху бутона нагоре и надолу на всеки етаж, за да се обади на асансьора.
  • Потребителят може да очаква, че щракването върху бутоните нагоре и надолу на който и да е етаж, за да поиска асансьорът, ще бъде поставено на опашка и обслужвано в последователността, в която са щракнати.
  • Потребителят може да види асансьора да се движи нагоре и надолу по шахтата до пода, към който е бил призован.
  • Потребителят може да щракне върху контролния панел на асансьора, за да избере етажа, до който трябва да пътува.
  • Потребителят може да очаква асансьорът да спре на пауза за 5 секунди в очакване на бутона за пода на контролния панел да бъде щракнат. Ако бутонът на пода не бъде щракнат в рамките на това време, асансьорът ще обработи следващата заявка за повикване.
  • Потребителят може да очаква асансьорът да се върне на първия етаж, когато няма заявки за обработка.

Бонус функции

  • Потребителят може да види предупредително известие, ако броят на заявките за асансьор надвишава максимално разрешения брой. Това ограничение е оставено на разработчика.
  • Потребителят може да чуе звук, когато асансьорът пристигне на пода.
  • Потребителят може да види пътник, който случайно пристига на етаж, за да посочи кога потребителят трябва да щракне върху бутона за повикване нагоре или надолу в асансьора на този етаж.
  • Потребителят може да посочи интервала от време между новите обитатели, пристигащи да се обадят на асансьор.

Полезни връзки и ресурси

Опашка за първи вход, първи изход (Уикипедия)

Примерни проекти

8. БЪРЗО ХРАНИТЕЛЕН СИМУЛАТОР APP

Ниво: 3 - Разширено

Приложението за бързо хранене симулира работата на обикновен ресторант за отнемане и е създадено, за да помогне на разработчика да приложи своите познания за обещанията и принципите на SOLID дизайн.

Това приложение симулира клиенти на ресторант за отнемане, които правят поръчки и изчакват да бъдат подготвени и доставени на гише. След като направи поръчката, клиентът чака поръчката да бъде обявена, преди да я вземе и да продължи към трапезарията.

Потребителските истории, които съставят това приложение, центрират около четири различни роли:

  • Потребител - крайният потребител, използващ приложението
  • Клиент - симулираният Клиент
  • Вземащ поръчки - симулираният Вземащ поръчки
  • Cook - симулираният Cook
  • Сървър - симулираният сървър

Това приложение има доста потребителски истории. Не бъдете претоварени обаче. Отделете време, за да скицирате не само потребителския интерфейс, но как различните участници (роли) си взаимодействат и постепенно изграждат приложението, следвайки Agile принципите.

Ограничения

  • Билетите за поръчки могат да бъдат представени като два различни типа Обещания - един сървърът чака, докато готвачът подготвя поръчката, а друг клиентът чака, докато е в сервиращата линия.
  • Използвайте естествения еквивалент на JS Promises на който и език да изберете да разработите. JS разработчиците трябва да използват естествени Promises, а не async/await.
  • Създайте това приложение, като използвате функции на роден език. НЕ можете да използвате симулационен пакет или библиотека.
  • Новите клиенти пристигат в реда за поръчки за фиксиран интервал от време. С други думи, новите клиенти пристигат с постоянна скорост.
  • Билетите за поръчки се изпълняват и на фиксиран интервал от време. Те се изпълняват с постоянна скорост.

Потребителски истории

Операция на приложението

  • Потребителят може да види зона за въвеждане, която позволява въвеждането на интервала от време за пристигане на клиента и интервал от време за изпълнение на билет за поръчка от готвача.
  • Потребителят може да види персонализирано предупредително съобщение, ако интервалът на пристигане на клиента или интервалът за изпълнение на поръчката е въведен неправилно.
  • Потребителят може да стартира симулацията, като щракне върху бутона Старт.
  • Потребителят може да види областта на реда за поръчки, съдържаща текстово поле, показващо броя на клиентите, чакащи да направят поръчки.
  • Потребителят може да види област за поръчка, съдържаща текстови полета, показващи номера на поръчката, който в момента се взема.
  • Потребителят може да види кухненски бокс, съдържащ текстово поле, показващо номера на поръчката, който се подготвя, и текстово поле, изброяващо последователно нарежданията за чакане, заедно с броя на броя на чакащите поръчки.
  • Потребителят може да види зона за вземане, съдържаща текстово поле, показващо номера на поръчката, който в момента е достъпен за вземане от клиента, и текстово поле, показващо броя на клиентите, чакащи в обслужващия ред.
  • Потребителят може да спре симулацията по всяко време, като щракне върху бутона Стоп.

Бонус функции

  • Потребителят може да посочи колко време отнема на поръчателя да създаде билет за поръчка .
  • Потребителят може да посочи колко време отнема на сървъра да достави поръчка на клиента.
  • Потребителят може да посочи общия период от време, през който да се стартира симулацията след щракване върху бутона Старт.
  • Потребителят може да види анимиран изглед на клиенти и поръчки, докато се движат през работния процес.

Полезни връзки и ресурси

  • Симулатор за бързо хранене - логичен работен процес
  • Agile Manifesto & 12 принципа на Agile Software
  • ТВЪРДИ Принципи, които всеки разработчик трябва да знае
  • Използване на обещания
  • Обещайте

9. ИГРА SHELL

Ниво: 3 - Разширено

Играта Shell е класическа игра на хазарт, която датира от древна Гърция. Играта му изисква три снаряда, грахово зърно, сръчност на ръката от оператора и запалени умения за наблюдение от страна на играча. Това е и класическа измамна игра, тъй като за оператора е лесно да измами играча. Слава богу, последното не е нашето намерение с това приложение.

Тази игра на Shell има за цел да осигури графичен интерфейс към класическата игра с черупки и да осигури на играча честна игра. Нашата игра рисува три черупки върху платното заедно с граховото зърно, премества граховото зърно под една от черупките и разбърква черупките за определен интервал от време. След това потребителят трябва да щракне върху черупката, под която смята, че грахът е скрит. Потребителят може да продължи да гадае, докато се намери граховото зърно.

Потребителски истории

  • Потребителят може да види платното с три черупки и граховото зърно.
  • Потребителят може да щракне върху черупката, под която грахът трябва да бъде скрит.
  • Потребителят може да види граховото движение под черупката, върху която е щракнато.
  • Потребителят може да кликне върху бутон „Разбъркване“, за да започне анимирано разбъркване на черупките за 5 секунди.
  • Потребителят може да щракне върху черупката, под която смята, че грахът е скрит, когато анимацията спре.
  • Потребителят може да види черупката, върху която е щракнато, да се покачи, за да разкрие дали грахът е скрит под него.
  • Потребителят може да продължи да щрака черупки, докато грахът бъде намерен.
  • Потребителят може да види поздравително съобщение, когато се намира граховото зърно
  • Потребителят може да започне нова игра, като щракне върху черупката, под която грахът трябва да бъде скрит (стъпка # 2 по-горе). След това горните стъпки се повтарят.

Бонус функции

  • Потребителят може да види панел с резултати, съдържащ броя на победите и броя на изиграни игри.
  • Потребителят може да види, че броят на изиграни игри се увеличава, когато граховото зърно е скрито под черупка
  • Потребителят може да види увеличения брой печалби, когато грахът бъде намерен при първото предположение.
  • Потребителят може да види обвивката, скриваща граховото зърно, за да анимира (цвят, размер или някакъв друг ефект), когато е щракнат (правилно предположение).

Полезни връзки и ресурси

  • Shell Game (Уикипедия)
  • Javascript HTML DOM анимация
  • p5js Анимационна библиотека

Примерни проекти

Заключение

Не забравяйте да разгледате предишната статия и хранилището, ако искате да намерите повече идеи за приложения / проекти.

Освен това, ако информацията от тази статия и от репо е била полезна за вас по някакъв начин, уверете се, че сте й дали звезда?; по този начин другите могат да го намерят и да се възползват също! Благодаря ти!

Имате ли предложения за това как бихме могли да подобрим този проект като цяло? Осведоми ни! Ще се радваме да чуем вашите отзиви!

Добре дошли сте да допринесете със собствените си идеи! Можем да направим това хранилище ресурс за преминаване към идеи за приложения.

Първоначално публикувано на www.florin-pop.com.