This repositry is dedicated to the course webtech2 of within the program of Interactive multimedia design at Thomas More.
We had 6 assignments and a Final project. 5 of them you can find in this repositry. The first assignment was a groups task an can be found here
It could be that it's necessary to switch branches to see a certain assignment.
Everything is being developed on the developement branch, which consists of a few subbranches for each lab.
In the first week we learned how to work with GIT. Once you get the hang of how it works it becomes a routine and is very usefull. There are some things you need to take in consideration when working with git.
- Always keep your
masterbranch clean. This branch can only contain code that is ready to be published online. - Always commit small pieces, every little part that works or doesn't crash, commit it to your feature branch so you won't lose it.
- Ofcourse, don't forget to push atleast at the end of the day.
- Give a logical name to your branch. Don't use your own name.
Good example
MasterDevelop
Feature1Feature2
We've learned to work with command lines for git but over time I've started to work with sourcetree which makes working with even easier and faster.
For LAB1 we had to do 2 things.
- Work in paires of 3 and commit a recipe of choise to your branch. Then push it in the master. This assignment can be found in the repositry of Thierry Scholberg.
- Add a link of your own portfolio repositry and the repositry of LAB1 to this repositry with a pull request.
In the second week we've learned to work with flexbox.
A new css technique that replaces float.
When using it in the beginning you need to keep the wits on where you declare your flex statement.
The display: flex; should always be used on the parent item.
Example: When you have an
ulwith 3liitems with each an image in them, and you want them to float next to each other, you usedisplay: flex;in yourul. This way theliitems will float nex to each other.
To learn how to work with flexbox we had a fun not required assignment, Flexbox froggy.
This is a fun excersize to get familiar with flexbox.
These are screenshots of the finished excersize:
Here you can find the 2 exercises of LAB2. There were 2 exercises. Both the same yet a bit different. Just to test and learn how to work with flexbox.
The 3th week we got some advanced lessons of Javascript. Simple javascript was never really my strong suite... Advanced javascript even less. My brain understands the logic's of Php, Java, AS and such very well but there is something about JS that just won't get in.
We learned how to make our own little framework and create prototypes.
For LAB 3 we had to create a todo list where you can add items and check them as done. You can find this assignment here.
This is where the fun part starts ...
This lesson started with a guest lesson of District01. They introduced us to node.js , what it is , how it works and how to get started. The next week this lesson was repeated during class.
Important packages to remember!
- Express.js -> Base to start working with a node server
- Mongoose -> Used to connect your node.js app with a mongoDB server.
Node.js is specially handy with apps that require live data.
####Assignment This weeks assignment was to complete the next part of the exercise we were making during the guest lesson. You can find the assignment here.
####What we've learned. Socket.io is the package of node.js that is used to stream live data from client to server and from server to client. This package will be needed to be implemented in our final assignment.
This assignment is currently stated in the lab5 branch of the repo. We had to create sort of a mood button, when clicked on the mood, the circle representing that mood will grow, live without refreshing on your screen and on the screen of someone else using the app at that moment.
###LAB6 - API ####What we've learned. Using javascript we've learned how to use API's with the example of the forcast.io. We've created a little simple weather app. ####Assignment Using the example we made we needed to create a weather app that shows the weather of a few days. For this exercise I didn't only use the api of forecast, but also the api of Flickr to implement a picture on the background linked to your current location.
As an extra assignment I took the MongoDB university course for node developers.
This course ended on May the 10th.
I will post my final assignment to this repositry a few days after the course ended.
But until then, here is a screenshot of my final scoure of this course.
This is a Live Q&A app made as a final project for the course Webtechnologie2 2016 of Thomas More.
With the usage of Express.js, Node.js, Socket.io and MongoDB.
At the moment everything is still on the "developement" branch since it's not ready to be published yet.
download the developement branch and install the modules with
npm install
Then you can run the app with
node app.js
or
nodemon
When in developement run with
gulp
The app will be running on localhost:3000.
When surfing to localhost:3000 you'll get a login page with the option to create an account. When the account is created you will be redirected to the login page again and you van login now. When logged in you'll see a page that list all the discussions. In the head navigation you'll see an option to create a new one or log out. When clicking on a discussion you can read the full discussion topic and all te posted questions and answers or ask/answer a new one. You can share a topic on Facebook (Doesn't work on localhost) You can see how many users are active in a topic. You get yout location on the first page.
Todo
- make questions and awsners realtime
- view which discussions are nearby
- make the creator of the discussion the moderator
- give moderator option to delete or edit their posts.
- able to upload images in post.
Documentation list
- Express validate https://github.com/ctavan/express-validator
- passport
http://code.tutsplus.com/tutorials/authenticating-nodejs-applications-with-passport--cms-21619 http://passportjs.org