RESTful APIs for Free

JavaScript CodeLabs
json-server : RESTful APIs for Free
http://eueung.github.io/js-stuff/json-server

Transcript

1.  json-server RESTful APIs for Free Eueung Mulyana http://eueung.github.io/js/json-server JS CodeLabs | Attribution-ShareAlike CC BY-SA 1 / 20
2. Agenda json-server Angular.JS Todo App 2 / 20
3.  json-server 3 / 20
4. json-server $ > j s o n - s e r v e r - - w a t c h d b - 0 1 . j s o n \ { ^ _ ^ } / h i ! L o a d i n g d b - 0 1 . j s o n D o n e R e s o u r c e s h t t p : / / l o c a l h o s t : 3 0 0 0 / p o s t s h t t p : / / l o c a l h o s t : 3 0 0 0 / c o m m e n t s h t t p : / / l o c a l h o s t : 3 0 0 0 / a l b u m s h t t p : / / l o c a l h o s t : 3 0 0 0 / p h o t o s h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s h t t p : / / l o c a l h o s t : 3 0 0 0 / t o d o s H o m e h t t p : / / l o c a l h o s t : 3 0 0 0 T y p e s + e n t e r a t a n y t i m e t o c r e a t e a s n a p s h o t o f t h e d a t a b a s e W a t c h i n g . . . Sample GET Reqs h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s ? i d = 1 & i d = 2 h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s / 1 / p o s t s h t t p : / / l o c a l h o s t : 3 0 0 0 / p o s t s ? u s e r I d = 1 h t t p : / / l o c a l h o s t : 3 0 0 0 / p o s t s / 1 / c o m m e n t s h t t p : / / l o c a l h o s t : 3 0 0 0 / p o s t s / 1 1 / c o m m e n t s ? _ l i m i t = 2 h t t p : / / l o c a l h o s t : 3 0 0 0 / t o d o s ? u s e r I d _ l t e = 2 h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s / 1 / a l b u m s ? _ l i m i t = 2 h t t p : / / l o c a l h o s t : 3 0 0 0 / p h o t o s ? a l b u m I d _ l t e = 2 h t t p : / / l o c a l h o s t : 3 0 0 0 / a l b u m s / 2 / p h o t o s ? _ l i m i t = 3 4 / 20
5. 5 / 20
6. db-01.json { " p o s t s " : [ { " u s e r I d " : 1 , " i d " : 1 , " t i t l e " : " s u n t a u t f a c e r e r e p e l l a t p r o v i d e n t o c c a e c a t i e x c e p t u r i o p t i o r e p r e h e n d e r i t " " b o d y " : " q u i a e t s u s c i p i t \ n s u s c i p i t r e c u s a n d a e c o n s e q u u n t u r e x p e d i t a e t c u m \ n r e p r e h e n d e r i t m o l e s t i a e u t u t q u a s t o t a m \ n n } , . . . ] , " c o m m e n t s " : [ { " p o s t I d " : 1 , " i d " : 1 , " n a m e " : " i d l a b o r e e x e t q u a m l a b o r u m " , " e m a i l " : " E l i s e o @ g a r d n e r . b i z " , " b o d y " : " l a u d a n t i u m e n i m q u a s i e s t q u i d e m m a g n a m v o l u p t a t e i p s a m e o s \ n t e m p o r a q u o n e c e s s i t a t i b u s \ n d o l o r q u a m a u t e m q u a s i } , . . . ] , " a l b u m s " : [ { " u s e r I d " : 1 , " i d " : 1 , " t i t l e " : " q u i d e m m o l e s t i a e e n i m " } , . . . ] , } " p h o t o s " : [ { " a l b u m I d " : 1 , " i d " : 1 , " t i t l e " : " a c c u s a m u s b e a t a e a d f a c i l i s c u m s i m i l i q u e q u i " u r l " : " h t t p : / / p l a c e h o l d . i t / 6 0 0 / 9 2 c 9 5 2 " , " t h u m b n a i l U r l " : " h t t p : / / p l a c e h o l d . i t / 1 5 0 / 3 0 a c 1 7 " } , . . . ] , " u s e r s " : [ { " i d " : 1 , " n a m e " : " L e a n n e G r a h a m " , " u s e r n a m e " : " B r e t " , " e m a i l " : " S i n c e r e @ a p r i l . b i z " , " a d d r e s s " : { . . . } } , " p h o n e " : " 1 - 7 7 0 - 7 3 6 - 8 0 3 1 x 5 6 4 4 2 " , " w e b s i t e " : " h i l d e g a r d . o r g " , " c o m p a n y " : { . . . } } , . . . ] , " t o d o s " : [ { " u s e r I d " : 1 , " i d " : 1 , " t i t l e " : " d e l e c t u s a u t a u t e m " , " c o m p l e t e d " : f a l s e } , . . . ] 6 / 20
7. Let's Do This HTTP Method URI Endpoint Action GET /users users Retrieve list of users POST /users users Create a new user GET /users/:id user Retrieve a user PUT /users/:id user Update an existing user PATCH /users/:id user Patch an existing user DELETE /users/:id user Delete a user 7 / 20
8. db-02.json { " u s e r s " : [ { " n a m e " : " u n y i l " , " p a s s w o r d " : " 1 1 1 " , " j o b " : " c o d e r " , " i d " : 1 } , { " n a m e " : " u c r i t " , " p a s s w o r d " : " 2 2 2 " , " j o b " : " d e s i g n e r " , " i d " : 2 } , { " n a m e " : " u s r o " , " p a s s w o r d " : " 3 3 3 " , " j o b " : " o p i s b o y " , " i d " : 3 } ] } json-server --watch db-02.json 8 / 20
9. GET /users $ . a j a x ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s ' , { m e t h o d : ' G E T ' } ) . t h e n ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( d a t a ) ; } ) ; [ O b j e c t , O b j e c t , O b j e c t ] POST /users $ . a j a x ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s ' , { m e t h o d : ' P O S T ' , d a t a : { n a m e : ' o t o n g ' , p a s s w o r d : ' a b c ' , j o b : ' n g u s e u p ' } } ) . t h e n ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( d a t a ) ; } ) ; O b j e c t { n a m e : " o t o n g " , p a s s w o r d : " a b c " , j o b : " n g u s e u p " , i d : 9 / 20
10. GET /users/1 $ . a j a x ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s / 1 ' , { m e t h o d : ' G E T ' } ) . t h e n ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( d a t a ) ; } ) ; O b j e c t { n a m e : " u n y i l " , p a s s w o r d : " 1 1 1 " , j o b : " c o d e r " , i d : 1 GET /users/10 G E T h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s / 1 0 4 0 4 ( N o t F o u n d ) 10 / 20
11. PUT /users/4 $ . a j a x ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s / 4 ' , { m e t h o d : ' P U T ' , d a t a : { n a m e : ' t o t o n g ' , j o b : ' r a j a n g u s e u p ' } } ) . t h e n ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( d a t a ) ; } ) ; O b j e c t { n a m e : " t o t o n g " , j o b : " r a j a n g u s e u p " , i d : 4 } PATCH /users/4 $ . a j a x ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s / 4 ' , { m e t h o d : ' P A T C H ' , d a t a : { p a s s w o r d : ' t o n g h i l a p ' } } ) . t h e n ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( d a t a ) ; } ) ; O b j e c t { n a m e : " t o t o n g " , j o b : " r a j a n g u s e u p " , i d : 4 , p a s s w o r d : 11 / 20
12. DELETE /users/4 $ . a j a x ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s / 4 ' , { m e t h o d : ' D E L E T E ' } ) ; DELETE /users/10 D E L E T E h t t p : / / l o c a l h o s t : 3 0 0 0 / u s e r s / 1 0 4 0 4 ( N o t F o u n d ) 12 / 20
13.  Angular.JS Todo App Example #6 @ Angular.JS Tutorial 13 / 20
14. The APIs HTTP Method URI Endpoint Action GET /todos todos Retrieve list of todos POST /todos todos Create a new todo PATCH /todos/:id todo Patch an existing todo 14 / 20
15. db-03.json { " u s e r s " : [ { " n a m e " : " u n y i l " , " p a s s w o r d " : " 1 1 1 " , " j o b " : " c o d e r " , " i d " : 1 } , { " n a m e " : " u c r i t " , " p a s s w o r d " : " 2 2 2 " , " j o b " : " d e s i g n e r " , " i d " : 2 } , { " n a m e " : " u s r o " , " p a s s w o r d " : " 3 3 3 " , " j o b " : " o p i s b o y " , " i d " : 3 } ] , " t o d o s " : [ { " u s e r I d " : 1 , " i d " : 1 , " d o n e " : f a l s e , " t e x t " : " T o d o U n y i l 1 1 1 1 " } , { " u s e r I d " : 1 , " i d " : 2 , " d o n e " : f a l s e , " t e x t " : " T o d o U n y i l 2 2 2 2 " } , { " u s e r I d " : 1 , " i d " : 3 , " d o n e " : f a l s e , " t e x t " : " T o d o U n y i l 3 3 3 3 " } ] } json-server --watch db-03.json 15 / 20
16. t o d o L i s t . t o d o s = [ ] ; $ h t t p . g e t ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / t o d o s ' ) . s u c c e s s ( f u n c t i o n ( d a t a ) { t o d o L i s t . t o d o s = d a t a ; c o n s o l e . l o g ( d a t a ) ; } ) . e r r o r ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( ' E r r o r : ' + d a t a ) ; } ) ; t o d o L i s t . a d d T o d o = f u n c t i o n ( ) { $ h t t p . p o s t ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / t o d o s ' , J S O N . s t r i n g i f y ( { t e x t : t o d o L i s t . t o d o T e x t , d o n e : . s u c c e s s ( f u n c t i o n ( d a t a ) { t o d o L i s t . t o d o s . p u s h ( { t e x t : d a t a . t e x t , d o n e : d a t a . d o n e , i d : d a t a . i d } ) ; t o d o L i s t . t o d o T e x t = ' ' ; c o n s o l e . l o g ( d a t a ) ; } ) . e r r o r ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( ' E r r o r : ' + d a t a ) ; } ) ; } ; angular-todo.js t o d o L i s t . u p d D o n e = f u n c t i o n ( i d x ) { $ h t t p . p a t c h ( ' h t t p : / / l o c a l h o s t : 3 0 0 0 / t o d o s / ' + t o d o L i s t . t o . s u c c e s s ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( d a t a ) ; } ) . e r r o r ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( ' E r r o r : ' + d a t a ) ; } ) ; } ; 16 / 20
17. angular-todo.html < ! d o c t y p e h t m l > < h e a d > < s c r i p t s r c = " h t t p s : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / a n g u l a r < s c r i p t s r c = " a n g u l a r - t o d o . j s " > < / s c r i p t > < l i n k r e l = " s t y l e s h e e t " h r e f = " a n g u l a r - t o d o . c s s " > < / h e a d > < b o d y > < h 2 > T o d o < / h 2 > < d i v n g - c o n t r o l l e r = " T o d o L i s t C o n t r o l l e r a s t o d o L i s t " > < s p a n > { { t o d o L i s t . r e m a i n i n g ( ) } } o f { { t o d o L i s t . t o d o s . l e n g t [ < a h r e f = " " n g - c l i c k = " t o d o L i s t . a r c h i v e ( ) " > a r c h i v e < / a < u l c l a s s = " u n s t y l e d " > < i n p u t t y p e = " c h e c k b o x " n g - m o d e l = " t o d o . d o n e " n g - c l i c k < s p a n c l a s s = " d o n e - { { t o d o . d o n e } } " > { { t o d o . t e x t } } < / s p a n < / l i > < / u l > < f o r m n g - s u b m i t = " t o d o L i s t . a d d T o d o ( ) " > < i n p u t t y p e = " t e x t " n g - m o d e l = " t o d o L i s t . t o d o T e x t " s i z e p l a c e h o l d e r = " a d d n e w t o d o h e r e " > < i n p u t c l a s s = " b t n - p r i m a r y " t y p e = " s u b m i t " v a l u e = " a d d " < / f o r m > < / d i v > < / b o d y > < / h t m l > < h t m l n g - a p p = " t o d o A p p " > < l i n g - r e p e a t = " t o d o i n t o d o L i s t . t o d o s t r a c k b y $ i n d e x " 17 / 20
18. O b j e c t { t e x t : " L a g i - l a g i m a k a n " , d o n e : f a l s e , i d : 6 } O b j e c t { t e x t : " L a g i - l a g i m a k a n " , d o n e : t r u e , i d : 6 } 18 / 20
19. References 1. typicode/json-server 2. typicode/lowdb 3. typicode/jsonplaceholder 19 / 20
20.  END Eueung Mulyana http://eueung.github.io/js/json-server JS CodeLabs | Attribution-ShareAlike CC BY-SA 20 / 20