39
MOOC: Python and Web as Architecture Rizky Ariestiyansyah Python Conference Malaysia 2016

MOOC: Python & Web as Architecture

Embed Size (px)

Citation preview

Page 1: MOOC: Python & Web as Architecture

MOOC: Python and Web as Architecture

Rizky Ariestiyansyah Python Conference Malaysia 2016

Page 2: MOOC: Python & Web as Architecture

Hi!Mozilla Tech Speaker CTO at IndonesiaX (Indonesia’s Premier E-learning Platform) 22 Years old feel like TEEN!

Page 3: MOOC: Python & Web as Architecture
Page 4: MOOC: Python & Web as Architecture

What is MOOC?

Page 5: MOOC: Python & Web as Architecture
Page 6: MOOC: Python & Web as Architecture
Page 7: MOOC: Python & Web as Architecture
Page 8: MOOC: Python & Web as Architecture

MOOC

Massive

Student number can be 100.000+

Open Online Course

Study any course, anywhere at any time

Blended course Learning units in an academic subject, life skill.

Page 9: MOOC: Python & Web as Architecture

MOOC with Python Stack

Page 10: MOOC: Python & Web as Architecture

Why Python?

- Minimal Setup

- Hierarchical Module System

- Available Libraries

Page 11: MOOC: Python & Web as Architecture

@app.route('/')

def home():

courses_list = courses.list_courses()

return render_template('index.html', courses_list =

courses_list)

app.py

Page 12: MOOC: Python & Web as Architecture

@app.route('/course/<course_id>')

def course(course_id=None):

course_lecs = lectures[course_id]

args = {

'course_id': course_id,

'course_name': course_map[course_id],

'lectures': course_lecs,

}

return render_template('course.html', args = args);

app.py

Page 13: MOOC: Python & Web as Architecture

@app.route('/course/<course_id>/<int:lec_no>')

def player(course_id, lec_no):

args = {

'course_name': course_map[course_id],

'course_id': course_id,

'lec_no': lec_no,

'lec_path': lectures[course_id][lec_no],

'total_lectures': len(lectures[course_id]),

}

return render_template('player.html', args = args)

app.py

Page 14: MOOC: Python & Web as Architecture

def lectures():

lectures = dict()

for course_id in course_map:

exts = ['mp4', 'webm', 'ogg']

vid_files = []

for ext in exts:

search_exp = 'static/courses/%s/*.%s' % (course_id, ext)

vid_files.extend(glob(search_exp))

vid_files = sorted(vid_files)

course_lecs = dict((n+1, str(x)) for n,x in

enumerate(vid_files))

lectures[course_id] = course_lecs

return lectures

course.py

Page 15: MOOC: Python & Web as Architecture

def list_courses():

courses = []

for course_path in glob('static/courses/*'):

course_id = os.path.basename(course_path)

courses.append((course_id,

course_map[course_id]))

return courses

course.py

Page 16: MOOC: Python & Web as Architecture

<body>

<h1 id='brand' style="text-align:center;">PyMOOC</h1>

<h3 id='tagline' style="text-align:center;">Simple MOOC Platform</

h3> <p>Welcome to <b>PyMOOC</b></p>

<h2>Courses</h2>

<ol>

{% for course_id, course_name in courses_list %}

<li><a href='{{ url_for('course',

course_id=course_id) }}'>{{ course_name }}</a></li>

{% endfor %}

</ol>

index.html

Page 17: MOOC: Python & Web as Architecture

<body>

<h1 id='course_name'>{{ args["course_name"] }}</h1>

<h3>Lectures</h3>

<ul id='lectures'>

{% for lec_no in args["lectures"] %}

<li><a href='{{ url_for('player', course_id =

args["course_id"], lec_no = lec_no) }}'>

Lecture {{ lec_no }}

</a></li>

{% endfor %}

</ul>

</body>

course.html

Page 18: MOOC: Python & Web as Architecture

<body>

<h3 style="text-align:center;">Lecture {{ args["lec_no"] }}</h3>

<h2 style="text-align:center;">{{ args["course_name"] }}</h2>

<div id='player'>

<video width='100%' src='/{{ args["lec_path"] }}' controls autoplay>

</video>

<div id='controls'>

{% if args["lec_no"] > 1 %}

<a href='{{ url_for("player", course_id = args["course_id"], lec_no = args["lec_no"] -

1) }}' class='navbutton' id='prev_button'>&larr; Previous</a>

{% endif %}

{% if args["lec_no"] < args["total_lectures"] %}

<a href='{{ url_for("player", course_id = args["course_id"], lec_no = args["lec_no"] +

1) }}' class='navbutton' id='next_button'>&rarr; Next</a>

{% endif %}

</div>

</body>

player.html

Page 19: MOOC: Python & Web as Architecture

Extend the Architecture

Page 20: MOOC: Python & Web as Architecture

Architecture

Page 21: MOOC: Python & Web as Architecture

Focus: MySQL

Company

Process Username Port Function

mysqld mysql 3306 Database

● DB for: user profile, course enrollment, certificate

● Authentication and Autorization data as well

Page 22: MOOC: Python & Web as Architecture

Focus: MongoDB

Company● Easy to scale ● Storing course data ● NoSQL DB Backend

Process Username Port Function

mongodb mongo 27017 Database

Page 23: MOOC: Python & Web as Architecture

Focus: Memcached

Company● High speed distributed key-value (KV) store for object caching

● Cache user session, course structure info, ect..

Process Username Port Function

memcached memcache 11211 KV store

Page 24: MOOC: Python & Web as Architecture

Focus: Nginx

Company● Web Server. ● Provided proxied. ● Load Balanced access to static and

dynamic assets. ● Stateless and horizontally scalable.

Process Username Worker Port Function

nginx www-data 4 80 Course

nginx www-data 4 8010 Course Manager

Page 25: MOOC: Python & Web as Architecture

Focus: Gunicorn

Company● Dynamic worker management. ● Stateless and horizontally scalable.

Process Username Worker Port Function

gunicorn

www-data 4 8000 Course

gunicorn

www-data 4 8010 Course Manager

Page 26: MOOC: Python & Web as Architecture

Focus: RabbitMQ

Company● Large jobs are run through queue. ● Coordinated by celery ● It is a software where queues can be

defined, applications may connect to the queue and transfer a message onto it.

Process Username Port Function

beam.smp rabbitmq * :5672 Message Queue

beam.smp rabbitmq 15672 Message Queue

epmd rabbitmq 4369 Port Mapper

Page 27: MOOC: Python & Web as Architecture

Extend with WEB

Page 28: MOOC: Python & Web as Architecture
Page 29: MOOC: Python & Web as Architecture

WebGL

Page 30: MOOC: Python & Web as Architecture

WebRTC

Page 31: MOOC: Python & Web as Architecture

WebSockets

Page 32: MOOC: Python & Web as Architecture

SVG

Page 33: MOOC: Python & Web as Architecture

MathML

Page 34: MOOC: Python & Web as Architecture

MathML

Page 35: MOOC: Python & Web as Architecture

WebVTTWEBVTT

00:01.000 --> 00:04.000

Original posting to alt.sources.

00:05.000 --> 00:09.000

- Micro changes only

- Added file "patchlevel.h"

Page 36: MOOC: Python & Web as Architecture

WebVR

Page 37: MOOC: Python & Web as Architecture
Page 38: MOOC: Python & Web as Architecture

Final

MOOC Python Web

Page 39: MOOC: Python & Web as Architecture

Thank You!Rizky Ariestiyansyah

See You!