Code For Civic Hacker Group

Code ForA Creative Approach to Solving Civic Problems.

Civic HackingCivic hacking is the new civic engagement using technology, design, and creative ideas to improve the processes and sys-tems of government for all

How Can Do ThatTechnology, and design to

make where we live better.

Contacthttp://codeforall.org/about

Code For Incheon ProjectFirst Project: Restroom Rating Service

01How Can I Use Public Data ?

There Is Many Useful Public Data. So, I started to use public data Recklessly…I Found Restroom Data. Then, I Decided to create App.

01I want to Make App … But First Time to Develop App

Web Development Skill + IONIC = Hybrid Application + Study Angular + Study Parse = Nice Application

0110000 More Restroom Public Data !

There is 10000 More Restroom Data in App.Citizen can add to restroom.I Want To Save More restroom Data In App

Using Development Skill

Web Skill Ionic Angular ngCordovaHTML5JS, CSS

Hybrid Framework

Front End Framework

Angular + Cor-dova = ngCor-

dovaStandard Web Development Skill WEB, IOS, Android Hybrid Frame-

workNative App UI

Web App

Front End Framework Two Way Data Binding

MVC ModelRouter

GeolocationCamera, Contact Permission

Get Device ID

Map FrameworkMap Box

Customize Map

OPTION 01If a picture paints a thousand words, then why can`t I paint you The words will never show the

Layer, Fast, QualityBeauty Layer

Fast Loading Speed for MobileNice Quality

Have Many Developing ToolsDirectionGood for Data Visualization

FunctionSimple But Useful.

Web IOS

Review, Star

Android

Direction

IE, Chrome, Safari, OperaMobile WebResponsible

IOS 8+Beauty :)Fast

Add Comment to Loca-tionRating Star

Android 4.0 ~ 6.0Fast

Get Geolocation From ng-CordovaGet Direction

Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS CSS components, gestures, and tools for building interactive apps. Built with Sass and optimized for Angular JS.

Add New Re-stroomIf you want to Add New Restroom, Add New Loca-tion.Then, Admin review That Location and Add Loca-tion.

Design For Developer !Simple Is Best

STEP 01Simple

STEP 02Color

STEP 03Material

STEP 04Component

필요없는 기능은 다 빼자 .Simple Is Best 를 모토로 개발 매번 혼자 개발할때 난잡하고 예뻐보이는 색상을 집어넣어 어지러워 보이는 색감이 있어서 색감을 통일하기로함 .

Material, Flat 한 디자인이 유행이므로 대세에 맞춰서 , 디자인가이드를 참조하여 개발예뻐보이는 컴포넌트는 직접 아무리 만들어 보려고 해도 안 예뻐지는 개발자의 흙손 . 예뻐보이는 컴포넌트를 가져다 쓰기로 결정

01

02

03

04

ApplicationDetail

4 21

3

1

23

4 Detail Page Main Page

Navigation PageMarker Page

Thank you

Codeforincheon.orgfacebook.com/codeforincheonwww.meetup.com/Civic-Hackers-Incheon

Code For Incheon Co-Organizer 유호균yoohoogun114@naver.com