Ca curious coder_crash_course

What is an app and
how do I make one?
Coding for the Curious Crash Course
Andy Carnahan andrew@craftacademy.se
@CraftAcademySE #CuriousCoder #CrashCourse

First, fill out this form:
https://ca-address-book.herokuapp.com/
Your information will be shared with everyone
in this room, but we’ll delete all your info in a
couple days so nobody else gets it.

Apps vs. Websites:
It’s complicated
A short summary: if you can log in, it’s an app. If
you see the same information as every other
visitor, it… may not be an app.

Static sites. No forms. Primarily for showing
information, not accepting it.
Websites

APIs: sending and receiving information
between computer systems
Application
Programming
Interface

{
contacts:
[
{
name: "Thomas Ochman",
email: "thomas@craftacademy.se",
company: "CraftAcademy",
role: "Managers",
twitter: "thomasochman",
location: "Gothenburg",
info: "Nothing...",
image: "https://ca-address-book.herokuapp.com/images/desert.jpg"
},
{
name: "Raoul",
email: "diraulo@craftacademy.se",
company: "Craft Academy",
role: "Chief computer wizard ;-)",
twitter: "diraulo",
location: "Pretoria",
info: "Yeah well, you know... All round badass ",
image: "https://ca-address-book.herokuapp.com/images/ocean.jpg"
}
]
}
Our API
https://ca-address-book.herokuapp.com/api/contacts

Consuming our API
with Angular!
● Do you have Node? In your
terminal, type:
$ node -v
● Now try:
$ npm -v
● If those two commands gave
you numbers, great! If not:
https://nodejs.org/en/download/

We need a text
editor, too
www.atom.io

Run these commands in your terminal:
$ npm install -g @angular/cli
When that finishes (you’ll get a prompt back with a $):
$ ng new address-book
When that one finishes (it will take a while):
$ cd address-book
Now open up Atom, navigate to the address-book folder and you
should see a bunch of files. We’re almost ready to get coding!

IGNORE:Everything that is not in the /src/app folder

DELETE:/src/app/app.component.spec.ts

Fire up your server!
Type in your
terminal:
ng serve
Visit in your
browser:
localhost:4200

Get in the steering wheel.
Open up /src/app/app.component.ts
On line 9, you’ll see
title = ‘app’
Look familiar?
Change the text in quotes to anything
your heart desires for instance “all
workshop participants“
Now go back to your browser - you have
just written code.

Now, we’ll write some HTML.
<ng-container class="container">
<div class="card">
<div class="image">
<img src="#"/>
</div>
<div class="content">
<div class="location">Gothenburg</div>
<h1>Nils Magnusson</h1>
<h2>CEO, NM.com</h2>
<p>Nils is a great made-up guy.</p>
nils@nils.com |
<a href="http://www.twitter.com/nilsmagnusson">@nilsmagnusson</a>
</div>
</div>
</ng-container>
Put this into /src/app/app.component.html

import { Component } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
data = {};
private apiUrl =
'https://ca-address-book.herokuapp.com/api/contacts';
constructor(private http: Http) {
this.getContacts().subscribe(data => {
console.log(data);
});
}
getContacts() {
return this.http.get(this.apiUrl)
.map((res: Response) => res.json());
}
}
Let’s do this. We need to edit
/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}

If you just installed @angular/cli you also need to
edit /app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { BrowserModule } from
'@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Let’s remove the placeholders and grab real info in
/src/app/app.component.html
<ng-container *ngFor="let contact of data.contacts" class="container">
<div class="card">
<div class="image">
<img src="{{contact.image}}"/>
</div>
<div class="content">
<div class="location">{{contact.location}}</div>
<h1>{{contact.name}}</h1>
<h2>{{contact.role}}, {{contact.company}}</h2>
<p>{{contact.info}}</p>
{{contact.email}} |
<a
href="http://www.twitter.com/{{contact.twitter}}">@{{contact.twitter}}<
/a>
</div>
</div>
</ng-container>

What happened?
Something awesome...

One more line.
In app.component.ts, on a
new line after line 17 (the one
with console.log on it), make
a new line:
this.data = data;

COPY / PASTE:
Head to this URL and copy everything:
http://bit.ly/2q9f8h0
Now paste it into /src/app/app.component.css

Well done!
And that my friends, is that!

Thank you!
Andy Carnahan
andrew@craftacademy.se

Ca curious coder_crash_course

Recommended

Recommended

More Related Content

Similar to Ca curious coder_crash_course

Similar to Ca curious coder_crash_course (20)

Recently uploaded

Recently uploaded (20)

Ca curious coder_crash_course