Codelab about Go and React

1. GO and REACT
CODELAB

2. Conduct
https://developers.google.com/programs/c
ommunity/gdg/resources/

3. Facts about You
Build a Go and React APP
@aljesusg

4. Picking up Go
Why 01
Code
Install
Sample & Run
Build
Conclusion
02
03
04
05
06

5. WHY

6. 01
Go is a modern,
general purpose
language.
01. BACKGROUND
WHAT IS GO?

7. 02
Compiles to native
machine code
(32-bit and 64-bit
x86, ARM).
WHAT IS GO?
01. BACKGROUND

8. 03
Lightweight syntax.
WHAT IS GO?
01. BACKGROUND

9. Debugging is twice as hard as writing the
code in the first place. Therefore, if you
write the code as cleverly as possible,
you are, by definition, not smart enough
to debug it.
BRIAN KERNIGHAN

10. ROB PIKE
Go's purpose is to
make its designers'
programming lives
better.

11. Go’s Values
01. WHY
● Thoughtful
● Simple
● Efficient
● Reliable
● Productive
● Friendly

12. Go ROCKS
01. WHY
● Docker
● Juju
● Dropbox
● Google
● MercadoLibre
● MongoDB
● Netflix
● SoundCloud
● Uber

13. Go Guide
01. WHY
https://tour.golang.org/

14. TYPES & METHODS
02. CODE
type Abser interface {
Abs() float64
}
Interfaces specify behaviors.
An interface type defines a set
of methods:
Types implement interfaces implicitly. There is no “implements” declaration.
func PrintAbs(a Abser) {
fmt.Printf("Absolute value:
%.2fn", a.Abs())
}
PrintAbs(MyFloat(-10))
PrintAbs(Point{3, 4})
A type that implements those
methods implements the
interface:

15. Setup
03. INSTALL
● https://golang.org/doc/install
● Install
○ Linux, Mac OS X, and FreeBSD tarballs
■ tar -C /usr/local -xzf go$VERSION.$OS-$ARCH.tar.gz
■ export PATH=$PATH:/usr/local/go/bin

16. Hello GDGGranada
04. SAMPLE & RUN
package main
import “fmt”
func main() {
fmt.Printf(“hello, gdgn”)
}
Make dir src/hello in your
workspace, and create file
named hello.go
cd $HOME/go/src/hello
go run hello.go

17. Hello GDGGranada
04. BUILD
env GOOS=target-OS GOARCH=target-architecture go build
env GOOS=windows GOARCH=386 go build
go build
How many OS and Arch?

18. OS & ARCH
04. BUILD

19. CONCLUSION
05. CONCLUSION
https://benchmarksgame.alioth.debian.org/u64
q/compare.php?lang=go&lang2=python3

20. Ready Backend
Backend API
Use a router
go get github.com/gorilla/mux

21. Ready Backend
Backend API
import (
"log"
"net/http"
"fmt"
"github.com/gorilla/mux"
)
func main() {
fmt.Println("Hello,gdgn")
router := mux.NewRouter()
log.Fatal(http.ListenAndServe(":8000", router))
}

22. Ready Backend
Backend API
import (
"log"
"net/http"
"fmt"
"github.com/gorilla/mux"
)
func main() {
fmt.Println("Hello,gdgn")
router := mux.NewRouter()
router.HandleFunc("<url>", <function>).Methods(<method>)
log.Fatal(http.ListenAndServe(":8000", router))
}

23. Ready Backend
Backend API
func <name>(w http.ResponseWriter, r *http.Request) {
w.Write([]byte("OK"))
}

24. Ready Backend
Backend API
type Etsiitiano struct {
Name string
Hobbies []string
}
func <name>(w http.ResponseWriter, r *http.Request) {
etsiitian := Etsiitiano{"Alex", []string{"snowboarding",
"programming"}}
js, err := json.Marshal(etsiitian)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/json")
w.Write(js)
}

25. Ready Backend
Backend API
func <name>(w http.ResponseWriter, r *http.Request) {
etsiitian := Etsiitiano{"Alex", []string{"snowboarding",
"programming"}}
x, err := xml.MarshalIndent(etsiitian, "", " ")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/xml")
w.Write(x)
}

26. Ready Backend
Backend API
func <name>(w http.ResponseWriter, r *http.Request) {
etsiitian := Etsiitiano{"Alex", []string{"snowboarding", "programming"}}
if r.Header.Get("Type") == "xml"{
result, err := xml.MarshalIndent(etsiitian, "", " ")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/xml")
w.Write(result)
}else{
result, err := json.Marshal(etsiitian)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/json")
w.Write(result)
}
}

27. Ready Backend
Backend API
func GetOutput(result interface{}, w http.ResponseWriter, r *http.Request){
if r.Header.Get("Type") == "xml"{
response, err := xml.MarshalIndent(result, "", " ")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/xml")
log.Print("Returned in XMl format")
w.Write(response)
}else{
response, err := json.Marshal(result)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
log.Print("Returned in JSON format")
w.Header().Set("Content-Type", "application/json")
w.Write(response)
}
}

28. Ready Backend
Backend API
func GetOutput(result interface{}, w http.ResponseWriter, typ string){
w.Header().Set("Content-Type", "application/" + typ)
log.Print("Returned in " + typ + " format")
var response []byte;
var err error;
switch typ {
case "xml":
response, err = xml.MarshalIndent(result, "", " ")
case "json":
response, err = json.Marshal(result)
default:
log.Print("Error no type " + typ)
return
}
if err != nil {
log.Fatal("Error in marshal")
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Write(response)
}

29. Ready Backend
Backend API
Students

30. Ready Backend
Backend API
type Etsiitiano struct {
ID string `json:"id,omitempty"`
Name string `json:"name,omitempty"`
Hobbies []string `json:"hobbies,omitempty"`
Address Address `json:"address,omitempty"`
}
type Address struct {
City string `json:"city,omitempty"`
State string `json:"state,omitempty"`
}

31. Ready Backend
Backend API
func GetStudents(w http.ResponseWriter, r *http.Request) {
GetOutput(students, w, r.Header.Get("Type"))
}

32. Ready Backend
Backend API
func GetStudent(w http.ResponseWriter, r *http.Request) {
params := mux.Vars(r)
for _, item := range students {
if item.ID == params["id"] {
GetOutput(item, w, r.Header.Get("Type"))
return
}
}
GetOutput(&Etsiitiano{}, w, r.Header.Get("Type"))
}

33. Ready Backend
Backend API
func CreateStudent(w http.ResponseWriter, r *http.Request) {
params := mux.Vars(r)
var person Etsiitiano
error := json.NewDecoder(r.Body).Decode(&person)
if error != nil{
log.Fatal(error)
}
person.ID = params["id"]
students = append(students, person)
GetOutput(students, w, r.Header.Get("Type"))
}

34. Ready Backend
Backend API
func DeleteStudent(w http.ResponseWriter, r *http.Request) {
params := mux.Vars(r)
for index, item := range students {
if item.ID == params["id"] {
students = append(students[:index], students[index+1:]...)
break
}
GetOutput(students, w, r.Header.Get("Type"))
}
}

35. Ready Backend
Backend API
curl -X GET localhost:8000/students -H "type: json"
curl -X POST localhost:8000/student/3 -H "type: json" -d '{"name":"Alberto"}'
curl -X DELETE localhost:8000/student/3 -H "type: json"

36. Ready Backend
Backend API
curl -X GET localhost:8000/students -H "type: json"
curl -X POST localhost:8000/student/3 -H "type: json" -d '{"name":"Alberto"}'
curl -X DELETE localhost:8000/student/3 -H "type: json"

37. REACT TIME

38. npx create-react-app my-app

39. yarn build

40. fileServerHandler := http.FileServer(http.Dir("my-app/build"))
router.PathPrefix("/").Handler(fileServerHandler)

41. npm install --save react react-dom
npm install --save react-bootstrap

42. Rock Boostrap

43. npm install --save axios

44. npm install --save axios

45. "proxy": "http://localhost:8000/",

46. constructor(props) {
super(props);
this.fetchServiceDetails()
}
fetchServiceDetails() {
axios({
method: 'GET',
url: '/students',
headers: {'type':'json'}
})
.then(response => {
let data = response['data'];
console.log(data)
})
.catch(error => {
console.log(error)
});
};

47. {this.state.students && (
<table>
<thead>
<tr><td>Name</td></tr>
</thead>
<tbody>
{ this.state.students.map( stu => (
<tr><td>{stu.name}</td></tr>
))}
</tbody>
</table>
)}

48. TRY TO DO REFRESH STUDENTS

49. TRY TO DO DELETE STUDENT

50. EXPERIENCES

51. REAL APP

52. Don't be shy about asking

53. Don't be shy about asking
“Don't be shy about asking for
help when you need it”