The Design of iOS-Trello

Design of iOS-TrelloA general purpose, open-source,

iOS/Objective-C API Wrapper

for the Trello Public API

Vince Mansel

http://slideshare.net/VinceMansel/iostrellotalk2

iOS-Trello

About …

ExperienceSoftware DeveloperNetworking ConsultantSystems Engineer

Past companies/clients Juniper, Cyan, Calix, Minerva, DirecTV, Divicom,

Network Solutions, PacBell, AT&T Bell Labs

Education: MSEE - Georgia Tech, BSEE – Purdue

Fun: music, salsa, travel, hiking, AC, …

Agenda

Drivers

Big Picture

Decision Funnel

Baseline Solution

Software Architecture

Questions

Extra: Code Samples, Software Design and Techniques

http://slideshare.net/VinceMansel/iostrellotalk2

@vincemansel Designing iOS-Trello

3

Driver #1: ShowPlan(iOS Client)


4

Production Design,Planning and ReferenceFor Creative People

#1 Feature:

ARRANGING&SEQUENCING

Driver #2: Trello(web client)


5

Collaboration andTask ManagementWeb Service

(clients available on web, iPhone,Android, etc)

#1 Feature:

CLOUDCOLLABORATION

Big Picture(s)What is the problem that we are solving?

① Social: Bridge idea/design with real-time performance

② Technical: Allow users to share ideas with a mobile client to other clients connected via web services

How can we create a system/tool to transform creative ideas into sharable plans between collaborators?


6

Decision Funnel

Specific: Create a collaborative presence for the App

Use a “reflective” web service with an API

General: Allow developers to write collaborative apps Open-source

Create an API Wrapper Simple, Object-Oriented, Modular Fast & Lightweight Easy to implement & maintain


7

Baseline Solution

ShowPlan:

A ProductionDesign app

iOS-Trello:

An open-sourceAPI Wrapperimplementation

iOS-Trello

Trello:

A collaborationand task managementweb service


8

API Wrapper API

https://github.com/vincemansel/ios-trello

A customized iOSTrello Client

Object Mapping

ShowPlan -> TrelloShowFlow -> BoardScene -> ListElement -> Card

First IterationExport onlyText Only


9

ios-trello app architectureApplication Code

ios-trello

AFNetworkingOAuth

NSURLRequest

NSURLResponseNSURLConnection


10

ios-trello internals[VMTrelloApiClient sharedSession]

connect

ion

managem

ent

credenti

al

stora

ge

Act

ion

Board

Card

Check

list

List

Type

Mem

ber

Noti

fica

tion

… WRAPPERS(Objective-CCategories)

MACROS

SINGLETON


11

Collaboration: Today

Email

Text


12

Collaboration: Next Iteration

Email

Multimedia

Peer to Peer


13

Questions?

Thanks!

@vincemansel

@ShowPlanApp

facebook.com/ShowPlan

Future for ios-trello

Iterate

Develop and test additional API calls in phases

Architect and develop real-time, bi-directional functionality

Expand documentation and use cases


16

Trello Public APIhttps://trello.com/docs/api/index.html


17

trello.com/docs/api


18

Use Case: Create a Trello Board

① User touches “Create Board” button on View

② Controller instantiates a popover with text entry UI

③ User enters some text and touches OK

④ Popover sends text as a message to its delegate (Controller)

⑤ Delegate transforms text to a board name, and sends the name parameter to the POST /1/boards Wrapper

⑥ JSON is asynchronously returned to caller and parsed for name and ID of the created board

⑦ Caller stores board ID in Model and writes “boardName” to a tableView cell.


19

Delegate: send + JSON parse


20

WRAPPER


21

MACROS


22

Design Approach

Choose specific APIs calls and parameters required for current revision of App

Construct API calls in desktop browser

Reverse Engineer & Inspect API behavior (JSON) and network interaction (HTTP)

Code direct API calls in Objective-C

Abstract API methods into Wrapper classes

Test and iterate


23

Create the WRAPPER

https://trello.com/1/members/me?notifications=all&notifications_limit=5&organizations=all&organization_paid_account=true&organization_fields=name

https://trello.com/1/members/me

?

notifications=all&notifications_limit=5&organizations=all&organization_paid_account=true&organization_fields=name

REQUEST

PARAMETERS


24

Additional WRAPPERS

GET

POST

PUT

DELETE


25

Resources

Contribute to the ios-trello projecthttps://github.com/vincemansel/ios-trello

Follow the Trello API developmenthttps://trello.com/api


26

REST

Client-Server ShowPlan < > trello.com

Stateless CoreData store in ShowPlan

Cacheable (Client-side) JSON sent back in response to request

Layered System Server-side implementation

Code on demand (optional) NA

Uniform Interface API, JSON, URIs (board, list, card, member)


27

REST Resources

RESTKit (iOS)https://github.com/RestKit/RestKit

RESTful API Server – Doing it the right wayhttp://blog.mugunthkumar.com/

REST API Design Rulebook (Mark Messe)


28

The Target

ImplementationPerformanceDevelopment

WritersDirectorsPlannersDesignersArchitects

IdeasPlansDesign Phase

ActorsPerformersDevelopersImplementers

“The” Answer, extended

ShowPlan:

A customized iOSTrello Client

iOS-Trello:

An open-sourceAPI Wrapperimplementation

iOS-Trello

ios4trello:

The demo projectfor API Wrapperdev and test

Trello:

A collaborationand task managementweb service


30

API Wrapper

API Wrapper

API

ios4trello (demo test app)


31

API Wrapper Sandbox:Exercise, test and exploreManual test tool

http://showplan.net/ios4TrelloAtGithubhttp://bit.ly/ios4trellohttps://github.com/vincemansel/ios-trello

Open-sourceExtensible

The Trello Tech Stack


32

Source:http://blog.fogcreek.com/the-trello-tech-stack/

The Design of iOS-Trello

Technology

Transcript of The Design of iOS-Trello