B6 Cargobike: Finalise Content, still need to update presentation vid…

…eo of highest resolution (#68)

* first commit: clone project folder

* first commit: clone folder

* B6 content added

* Revert "B6 content added"

This reverts commit 9a73d9f.

* upstream merge and final content

* Revert "upstream merge and final content"

This reverts commit 097f810.

* add text content

* add images

* move submodule themes head back to 827fa1

content/ws20/bachelor/b6-cargobike-adventures/_index.md

@@ -3,19 +3,54 @@ title = "Cargobike Adventures"
 project_id = "B6"
 
 # Properties for displaying the project in the project list
-card_image = "project_image.png"
-card_description = "Cargobike Adventures is a one way stop for your next adventure, it makes road trips easier, healthier, and more eco-friendly. Aspiring bikers had to gathered information and proper gears themselves. With Cargobike Adventures, we not only curate information for you but also provide an array of top-notch e-bikes and camping gears ready for you to rent. Working with a new and rising startup company in Berlin, our team created an e-bike and camping gear rental web app for future adventurers to get all kinds of information and equipments needed for an e-bike road trip."
-
+card_image = "project_image4.png"
+card_description = "Do you have cabin fever and crave for an adventure? Don't want to purchase expensive gears that will just accumulate dust and take up space afterwards, or carry heavy backpacks, or give up on road trips because you have young kids? This web app is the one way stop for your next e-cargobike tour, it makes road trips easier, healthier, and more environmentally aware!"
 
 # These properties may be removed if you don't need them
-source_link = "https://github.com/htw-imi-showtime/showtime-website/"
-demo_link = "https://htw-imi-showtime.github.io/"
-website_link = "https://htw-berlin.de/"
 
-team = ["Hasan Al Mohamad",
+website_link = "https://www.cargobike-adventures.de/"
+
+team = ["Dustin Reimann",
 "Chung-Fan Tsai",
-"Dustin Reimann",
-"Ngoc Huong Phan"]
+"Ngoc Huong Phan",
+"Hasan Al Mohamad"
+]
 
-supervisor = ["Johannes Weyers","Patrick Zagajewski"]
+supervisor = "Johannes Weyers, Patrick Zagajewski"
 +++
+Cargobike Adventures is an operating e-commerce web app that solves a problem that a lot of us are experiencing in this pandemic. In a time when booking flights is irresponsible, and even taking public transportation is risky, more and more people are drawn to taking road trips. But for those without a driver license or those who are **health and environment conscious**, an **e-cargobike trip** is the best option out there! Through the site, users gain access to top-notch e-bikes that were remodeled with a cargo to fit either camping gears or safely bring young kids along. Users can customize your rental order by choosing the add-ons provided by us, be it quick inflatable tent, cooking gear, SUP board, slack line, or the insurance plan that suits you best. That's not it, users can also check out **recommended routes, write an inquiry message, or purchase a gift card** for their adventurous loved ones.
+
+
+{{<section title="Promo Video">}}
+<h6>
+Disclaimer:
+
+No biker nor copyright was harmed in the production of this video, the images and footage were either provided by Cargobike Adventures or sourced from Pixabay that doesn't require attributions. And here is the credit for the copyright free music in the video:
+
+Song: [Jarico - Retrovi (Vlog No Copyright Music) 
+Music promoted by Vlog No Copyright Music.](https://youtu.be/2w9P1yvAkBw)
+
+Song: [Simon More - You (Vlog No Copyright Music)
+Music promoted by Vlog No Copyright Music.](https://youtu.be/lMJCoZoVpHY)
+</h6>
+{{</section>}}
+{{<mediathek id="6184bc97bd29ec40bd3d5f7c1a2a78f0">}}
+
+{{<section title="Our Goals">}}
+As developers, we set out to satisfy both the users and business owners. For the users, we built a simple, informative, responsive, and safe e-commerce site that provides as many features as it can to help them plan an e-bike tour. For the business owners, this online platform that is customized to their needs, scalable, and could be easily maintained by themselves.  
+{{</section>}}
+
+
+{{<section title="The Team">}}
+We are not only providing a solution for COVID traveling but we ourselves are also overcoming remote team work. Thanks to amazing collaboration tools, we were able to hold meetings at least twice a week and actively participate in planning, designing, and revising. Our team consists of 4 members and 2 project leaders, it is small yet ambitious. As for job assignment, we started out with a clear role assignment, but as time went on, we worked as a team and have helped each other out with different tasks, so everyone has dipped their toes in different fields and contributed whatever they could to our project. 
+{{</section >}}
+
+{{<gallery>}}
+{{<team-member image="portrait_johannes.jpg" name="Johannes Weyers">}}
+{{<team-member image="portrait_patrick.jpg" name="Patrick Zagajewski">}}
+{{<team-member image="portrait_fan.png" name="Chung-Fan Tsai">}}
+
+{{<team-member image="portrait_hasan.jpg" name="Hasan Al Mohamad">}}
+{{<team-member image="portrait_huong.jpg" name="Ngoc Huong Phan">}}
+{{<team-member image="portrait_dustin.jpg" name="Dustin Reimann">}}
+{{</gallery>}}

content/ws20/bachelor/b6-cargobike-adventures/features.md

@@ -2,3 +2,14 @@
 title = "Features"
 weight = 1
 +++
+
+{{<section title="Customizable UI">}}
+Having built our own customized theme, the site not only meets all the requirements from the business owner but also make it extremely easy to maintain. Through templates and adding php code to each and every UI element on the site, non-programmer admins log in then use customizer to edit image, text, style, layout, hyperlink, adjust navigation, change site info and so on. This of course prolong the frontend development process, but in the long run, it'll save the start-up resources to modify even something as small as a punctuation, and since UI maintaining becomes as easy as it gets, business owners could easily change content up on the Live site without the users seeing any of the changes before publishing them.
+{{</section>}}
+
+{{<image src="feature_1.png" alt="An Essential Functionality" caption="">}}
+
+{{<section title="E-Commerce: Gift card Purchase & Booking System">}}
+Since we are working with a real start up company, it is important to keep in mind that the site is a platform for them to not just get digital exposure but also serve as an e-commerce site for users to rent out their inventories. We started out designing a booking system, constructing the database structure for their e-bikes and gears, including information like product names, number of units, description, price for different rental period and combination, and their availability. But working with a real world company means there are also real world events that may help marketing the site, which was why we also incorporated a gift card purchase feature on the site for the festive gift giving Christmas and New Year time. With the gift card purchase feature, users can select gift cards of different amounts, pay online, then receive the digital gift card from their designated email address. On the backend side, when a purchase is made, a new gift card is generated and stored in the database, including information like its unique serial number, amount, payment method, email, expiration date, and so on. On the other hand, business owners could also view the purchased voucher and their status, and manage them in the admin as well.
+{{</section>}}
+

content/ws20/bachelor/b6-cargobike-adventures/future.md

@@ -2,3 +2,25 @@
 title = "Future"
 weight = 4
 +++
+
+
+
+{{<section title="Future features">}}
+As this app will keep being developed and improved even after the project course is completed, we do have a few ideas of what could be added to it to make it even truer as the one way stop for anything e-bike tour. 
+{{</section>}}
+
+{{<section title="Feature 1: Create user account with tour posts & plan assistant">}}
+{{<image src="future_feature_1.png" alt="Alt text for image" caption="">}}
+Besides the site’s recommended tours, we thought that it’d enrich the site to let users create an account and add favorite routes under their profile, and also create their own route and planning similar to blog posts.
+
+Another thing we found could be really useful for users are letting them plan a tour under their account by letting them plan each day’s progress, start, and destination, and by entering the date and location of that day, together with Weather API and Google API, showing them the essential weather information (wind gust, humidity) and bike route and height variation so that they could easily start the day and being directed to google navigation, which could be helpful for bikers who use a phone holder or listens to navigation instructions. 
+{{</section>}}
+
+{{<section title="Feature 2: Route sharing & Socializing">}}
+{{<image src="future_feature_2.png" alt="Alt text for image" caption="">}}
+The third feature we thought that’s built on the basis of the first two features, if users can write about their tour and plan and make daily plans, we thought it’d be very exciting for them to share the plan on the site for other users to view and use it as a reference. It would also be nice for the viewers with an account to comment on that route post,  follow another user, and send each other private messages to build a community of Cargobike Adventurers.
+{{</section>}}
+
+{{<section title="">}}
+* all images are owned and granted permission to use by [Cargobike Adventures](http://cargobike-adventures.de/) 
+{{</section>}}

content/ws20/bachelor/b6-cargobike-adventures/process.md

@@ -3,6 +3,43 @@ title = "Process"
 weight = 2
 +++
 
-{{<section title="The development process">}}
+In the past few months, our project has gone through various phases, and they could be roughly divided into the following segments:
+
+* Kicking off
+* Preparation & Planning 
+* Database Structure & Website Blueprint
+* Go Live!
+* Booking System Prototyping
+
+
+{{<section title="Kicking off">}}
+
+Fortunately, we decided to meet in person very early on and got to do it before the lock down, we went to the start-up company--Cargobike Adventurer’s site at **MotionLab Berlin**, a coworking, or co-building, space for entrepreneurs and aspiring inventors. In this first kick off meeting, we got to know the origin of the start-up and also experience the top quality cargo bikes they were building and improving firsthand. And it was in this first session that we were informed of what sort of web app would help promoting, marketing, and operating the business. 
+{{</section>}}
+
+{{<section title="Preparation & Planning">}}
+Having learned about the needs of the business, we understood that this project could become a real product that’s being used by real users, meaning it has a heavier impact and higher stack. With that in mind, we wanted to understand the product and its target users together with the start-up company we were working with, so that there we were on the same page and knew exactly what we were building and who we were building it for. And in order to have a good understanding of whom the target users are, we started out by conducting user researches into user personas, user stories, and use cases.
+{{<image src="process_1.png" alt="tech stack visualized" caption="">}}
 
 {{</section>}}
+
+{{<section title="Database Structure & Website Blueprint">}}
+Now that we had a more concrete image of what the site should do,  an e-commerce site for users to select a tour date and its corresponding available items to rent, so we must be clear of how the data should be structured and related to make it easier for our site to interact with the database:
+{{<image src="process_2.png" alt="tech stack visualized" caption="">}}
+In addition to designing the database structure, we also started on the website blueprint to understand the most intuitive and functional way to users to navigate the site. And once we had a concrete idea of what pages were needed and their hierarchy, we applied our findings in user research and built a mock-up for the site:
+{{<image src="process_3.png" alt="tech stack visualized" caption="">}}
+
+{{</section>}}
+
+
+{{<section title="Go Live!">}}
+Just like any project, changes are inevitable, and we must always embrace them. As in the middle of the project, we decided to go live for the Christmas season, we first finished the first version of our customized theme that made every element on the site customizable by the business owner, then we built another feature---voucher booking, letting users purchase gift vouchers for themselves or their loved ones in this festive time. This event also gave us a first insight into how companies manage their digital orders and sort out errors in the process.
+Furthermore, now that the site had to be online, we had to build a test environment for us to makes changes to before deploying them live so that users won’t be seeing the incomplete test environment.
+{{</section>}}
+
+
+{{<section title="Booking System Prototyping ">}}
+After going live and making sure the orders were going through and functioning appropriately. We went back to prototyping our booking system that allows users to select when their tours will be and what add-on gears they need to rent. 
+{{<image src="process_4.png" alt="tech stack visualized" caption="">}}
+
+{{</section>}}

content/ws20/bachelor/b6-cargobike-adventures/tech-stack.md

@@ -1,4 +1,41 @@
+
 +++
 title = "Tech Stack"
 weight = 3
 +++
+
+{{<image src="techstack_and_tools.png" alt="tech stack visualized" caption="">}}
+
+Throughout the whole project, we’ve used many tools alongside with our stack, and they can be organized into the following categories:
+
+{{<section title="Figma & Miro">}}
+Working on a real world project that has real users and product owners as stakeholders, preparation and  planning are indispensable. We started out by using various templates from Miro, the perfect collaboration tool to conduct Product Vision, use cases, user stories, user personas researches. We then draw out our web page layouts, agreed on the color scheme and design elements that fit our product, and created a few UI drafts on the collaborative UI design tool Figma. 
+{{</section>}}
+
+{{<section title="WordPress">}}
+In the beginning, We had a long discussion on which stack to choose. On one hand, we had just learned the MERN stack, and most of us are more familiar with JAVA and JS. But on the other hand, we are working on a real world project that will be used by real users and admins, knowing that the admins are from a fairly new startup not having a tech position yet, and that we have to think about what’s the easiest way for them to maintain the site themselves, we’ve decided to create a WordPress web app, but instead of simply installing theme and plugins, we have written our own customizable theme and plugins.
+{{</section>}}
+
+
+{{<section title="HTML & CSS & JS & PHP">}}
+To create our own theme, we not only utilized what we learned about web programming using HTML, CSS, and JS, but also embraced the chance to learn the very popular web development language PHP. Part of the reason why we decided on the stack was to learn new tools and languages during the process, and where else to start other than the language used by almost 80% of the websites (according to W3Tech) for the server side.
+
+{{</section>}}
+
+{{<section title="SQL & MySQL">}}
+Running the web app using a virtual machine in Docker container makes our lives easier running, testing, and working on the project on different machines. Because the environment is isolated, we don’t need to worry about the app performing differently on different machines that have different versions of supporting tools.
+
+{{</section>}}
+
+{{<section title="Agile Development">}}
+Applying Scrum, an agile framework, to the project process makes tasks much more manageable and their status fairly transparent to each and every member. And Trello by Atlassian is a perfect tool for visualization and sprint planning.  We were also able to adapt to changes to the plan or the features by having a shorter sprint cycle. Of course, communication tools like slack, discord, and zoom, makes it possible to work remotely in the pandemic. Furthermore, we also used Google Drive and doc to share contents and files necessary for our project.
+{{</section>}}
+
+{{<section title="Docker">}}
+In the beginning, We had a long discussion on which stack to choose. On one hand, we had just learned the MERN stack, and most of us are more familiar with JAVA and JS. But on the other hand, we are working on a real world project that will be used by real users and admins, knowing that the admins are from a fairly new startup not having a tech position yet, and that we have to think about what’s the easiest way for them to maintain the site themselves, we’ve decided to create a WordPress web app, but instead of simply installing theme and plugins, we have written our own customizable theme and plugins.
+{{</section>}}
+
+{{<section title="GitHub & Filezilla">}}
+Sharing and collaborating on the same codes are made possible by using GitHub, git also allows us to work on different branches without constantly being overwritten or clashed. Having the changes tracked also make errors less frightening as we can also revert to the working version. In addition, we could also use GitHub to host test versions so that our changes do not immediately affect our live version. And at the end of each sprint, the changes that have been tested and reviewed were copied to the live code we host on FileZilla and being staged.
+
+{{</section>}}