Hi Dulanga,
we already talked on irc and you already talked to Alex regarding
features for our dashboard. That's great!
Some topics will repeat in this mail, but I also would like the ML to
follow our project and additionally add some more in-depth
informations.
Recap & additons
=====
As discussed we will work in an iterative approach and add widget
after widget so if we run out of time, we will have something to
deliver and don't have to throw everything away.
Have you seen the "database" tab or the "config" tab in the sidebar on the left?
Those are modules that we can hook into the Fauxton build, by
configuration. I think the idea is to create a tab "dashboard" which
is the default one after opening Fauxton in the browser. So you would
build the dashboard for Fauxton as part of Fauxton.
Alex ideas so far:
```
17:34:13 <+Kxepal> about from what to start...in issue there are some
points about showing stats and log - forget these (: _stats isn't
available for
cluster iface and _log is removed. but recently
visited databases, active tasks and _users/_replicator quick
management is what could
be really handy.
17:34:56 <+Kxepal> link to the user profile is also not relevant
anymore after backporting some cloudant features
17:35:11 <+Kxepal> but still may be handy if you find a way how (:
17:36:54 <+Kxepal> if the implementation is a set of widgets, I
believe you could make some builtin and leave a template one to let
the end users create
their own if they're able/would like to. in future
these are could be fauxton plugins or something.
17:39:15 <+Kxepal> cluster quick-management is also nice idea for a hot widget.
17:39:56 <+robertkowalski> good idea - i can definitely help with that
(add custom widgets on build time) - the build is complicated, but
once explained
it should be easy
```
So we have "custom widgets", "cluster quick-management", " recently
visited databases", "active tasks" and "_users/_replicator quick
management"
I think two good widgets for starting are active tasks and recently
visited databases.
For active tasks we have some nice docs:
https://couchdb.readthedocs.org/en/1.6.1/api/server/common.html#get--_active_tasks
They have an own dedicated page in Fauxton (see
http://localhost:8000/#/activetasks) but a short quick condensed list
is probably very interesting to users.
For the recently visited databases we would have to store that somewhere.
If you want, you can take an existing page in Fauxton and just modify
the markup for a design mockup how the widget view may look like. But
feel also free to use pen/paper or other tools if you like that the
most.
For the mango feature I am currently working on, I took the "edit
view" template on modified the markup using the Chrome inspector of my
browser to collect some first feedback from the project members and my
team (https://cloudup.com/c26xgbWb6Ur). It does not have any
functionality, but gives other folks a rough idea what my idea for the
feature is.
the framework and react
As I already mentioned we are using React.js.
It would be nice if you can finish the tutorial at
https://github.com/ryanflorence/react-training/tree/gh-pages/lessons
until next friday by following the steps and writing that code. After
that, read
https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e
to get a first impression how the Flux pattern works that we are
using.
After that (if you still have time left) take a look on a component
that Garren, my coworker refactored from Backbone.js to React:
https://github.com/apache/couchdb-fauxton/commit/8cbf95d34a191770cfaadf7df98e07b5652e7602
Please take a look how the data flows from the Components, using the
Actions, to the dispatcher at the Store. Feel free to litter
everything in the code with console.log to see how state changes and
how the data flows.
Hint: it is that element: https://cldup.com/4eCHVt9HHt.png
If you still have time, just try to create another menu item, called
"Dashboard". Take a look at:
https://github.com/apache/couchdb-fauxton/blob/master/settings.json.default#L8
https://github.com/apache/couchdb-fauxton/tree/master/app/addons/config
to get a first idea how to do that. Some background information:
base.js - the starting point of our module. basic configuration is done here
Question: what is `base.js` used for in the case of the config module?
routes.js - takes care that functions injecting the view into the
layout are called depending on the url given
Question: What happens if I call `http:localhost:8000/_config` and
what happens if you remove the function `apiUrl`?
views.js - contains our views - this file contains still a lot
backbone views, which we are currently migrating to react. maybe it
makes more sense to take a look at one of our react components:
https://github.com/apache/couchdb-fauxton/tree/master/app/addons/documents/changes
and how they are used currently (as we are migrating to react currently):
https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/routes-documents.js#L195
https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/views-changes.js#L31
The Objects are injected into the closures using AMD:
https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/views-changes.js#L13-24
assets folder:
contains our less which is compiled to css
templates folder:
contains old backbone.js templates, you will not need them
tests folder:
contains unit and integration tests, every PR must have unit tests and
integration tests. If you never wrote tests, we will explain it to you
- it is easy once you wrote your first few ones. Basically you are
testing each time that if you put something into a function, the
expected result happens. Or that if you take an action, a state has
changed.
You can run the unit tests using `grunt test`
Single tests are run by:
```
grunt test --file="./app/addons/documents/tests/headerSpec.react.js"
```
or in the browser by test group:
```
file:///Users/robert/apache/couchdb-fauxton/test/runner.html?grep=Header%20Controller
```
(change path to your fauxton directory)
The corresponding code is:
https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/tests/headerSpec.react.jsx
and these tests are a good example how to write a simple test for the
hello world/hello from dulanga-component:
https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/tests/headerSpec.react.jsx#L43-61
First steps:
Create a module `dashboard` that gets displayed in the sidebar. The
route http://localhost:8000/dash will render a small React component
that display "Hello World".
If you click on the "Hello World" it ill change the content to: "Hello
from Dulanga"
While we will throw the small component away afterwards we will build
upon the other code you created. If you have time left, add a test
that the component changes the content.
Meeting Wednesday:
Feel free to join us on our weekly couchdb meeting:
http://mail-archives.apache.org/mod_mbox/couchdb-dev/201503.mbox/%3CCAJ1bcfEKOh4nvoxUqvcAcUFgg96w-JqHEefpi%2BWzazKFUPXNCg%40mail.gmail.com%3E
I will be around at least one hour before so we can chat. Contact me
if you would like to chat earlier/later. I am also around the other
days on IRC / the mailinglist and feel free to contact me in
#couchdb-dev at any time. If I am not around I will answer you once I
got online again, as I read the backlog.
Our checklist at Wednesday (lets see how far we'll get)
- check out the active tasks api (linked on top of this mail)
- a mockup showing some widgets and how they could look like
- code React tutorial & read about Flux
- take a look how we are using React
- create another menu item, called "Dashboard", try to answer the
questions to route.js et al
- get familiar how we test our code
- write an hello world / hello from dulanga component that is
rendered into a screen when opening http://localhost:8000/dash or by
clicking on "dashboard" in the sidebar
That was a lot of content and please don't feel discouraged if you
don't get that far until Wednesday. We will have to find a speed which
is perfect for you and this time I tried to give enough informations
that you are not blocked until Wednesday by waiting for next steps. If
you are at the last step before Wednesday, drop me a line and I will
prepare the next steps :)
I know that you all have important exams, these are definitely more
important! Don't feel pressured by the amount of work / the amount of
informations, getting good results in the exams should be your first
priority.
Best,
Robert
On Sat, Mar 14, 2015 at 9:14 PM, Dulanga Sashika <wadsash...@gmail.com> wrote:
> Hi Robert,
>
> I went through the guidelines you provided and successfully installed and
> configured as you said. Everything works find and I played around it by
> creating a database and documents. I think I am ready for the next step and
> we can start it if you are ok :)
>
> Thank You
>
> On Sun, Mar 15, 2015 at 12:03 AM, Robert Kowalski <r...@kowalski.gd> wrote:
>
>> You're welcome.
>>
>> I also hang out in the couchdb-dev channel for around 1-3hrs if you get
>> stuck!
>>
>> On Sat, Mar 14, 2015 at 7:29 PM, Dulanga Sashika <wadsash...@gmail.com>
>> wrote:
>> > Hi Robert,
>> >
>> > Thank you very much for the quick reply. I will go through the guidelines
>> > and contact you if I have any issue with them.
>> >
>> > Thank you
>> >
>> > On Sat, Mar 14, 2015 at 11:46 PM, Robert Kowalski <r...@kowalski.gd>
>> wrote:
>> >
>> >> Hi Dulanga,
>> >>
>> >> glad you found your way to the CouchDB mailing list. Welcome :)
>> >>
>> >> CouchDB is a database written in Erlang with an HTTP API - that makes
>> >> it a great fit for web applications that don't need a server side
>> >> layer with a database driver in between. Our Project Fauxton (like a
>> >> modern PHP MyAdmin) makes use of that fact.
>> >>
>> >> Many of us hang out in freenode in #couchdb-dev including myself.
>> >> Whenever you get stuck, feel free to ask - if no one is online (e.g. I
>> >> was travelling this week) feel free to ask on the dev ML.
>> >>
>> >> We are all happy to help each other in the project :)
>> >>
>> >> If you are using windows: I am not a Windows expert - you will
>> >> probably have to use a bash emulator like "git bash" to boot the dev
>> >> environment.
>> >>
>> >> Getting started:
>> >>
>> >> For this project you will need to install at least CouchDB 1.x, an
>> >> Ubuntu package (with installation instructions) is at
>> >> https://launchpad.net/~couchdb/+archive/ubuntu/stable
>> >>
>> >> Additionally you need to install Node.js 0.10 or 0.12 (install from
>> >> https://nodejs.org)
>> >>
>> >> Booting Fauxton and first steps (type without the $):
>> >>
>> >> booting CouchDB:
>> >> $ sudo couchdb
>> >>
>> >> in another terminal, clone the admin interface:
>> >> $ git clone https://github.com/apache/couchdb-fauxton
>> >>
>> >> go to Fauxton:
>> >> $ cd couchdb-fauxton
>> >>
>> >> install dependencies:
>> >> $ npm install
>> >> $ npm install -g grunt grunt-cli
>> >>
>> >> boot the app:
>> >> $ grunt dev
>> >>
>> >> Then open your browser and go to http://localhost:8000 - you should
>> >> see a red/gray/black interface
>> >>
>> >>
>> >> That was a lot of input and especially if you are using Linux the
>> >> first time and followed the instructions you have archived a lot!
>> >>
>> >> As first step, try to create a database and a document now using the
>> >> web interface (PS we are happy about any usability feedback). :)
>> >>
>> >> I think you have your dev environment for CouchDB ready now.
>> >>
>> >> What's next:
>> >> If everything works we will take a look at Fauxtons code structure and
>> >> how it works. We will also talk about the features of the dashboard.
>> >> Let's find a date for a chat after you took a first look how Fauxton
>> >> looks like.
>> >>
>> >> We are having our weekly meeting this Wednesday, 20:00GMT
>> >> (http://arewemeetingyet.com/UTC/2015-03-14/20:00) in IRC on freenode
>> >> (see
>> >>
>> http://mail-archives.apache.org/mod_mbox/couchdb-dev/201503.mbox/%3CCAJ1bcfEKOh4nvoxUqvcAcUFgg96w-JqHEefpi%2BWzazKFUPXNCg%40mail.gmail.com%3E
>> >> )
>> >> . Feel free to join us! I will be around 1hr before if you want to
>> >> chat with me before.
>> >>
>> >>
>> >> Looking forward to work with you,
>> >> Robert
>> >>
>> >> On Sat, Mar 14, 2015 at 7:55 AM, Dulanga Sashika <wadsash...@gmail.com>
>> >> wrote:
>> >> > Hi all,
>> >> >
>> >> > I am Dulanga Sashika and I am a final year undergraduate student at
>> >> > Computer Science and Engineering department at University of Moratuwa,
>> >> Sri
>> >> > Lanka. I am really interested in java, java script, web applications,
>> >> > algorithms, data mining and machine learning. I have 6 months of
>> training
>> >> > experience at Proavos (pvt) Ltd. and in there I worked on a web
>> >> application
>> >> > that used java, JEE and Spring Framework. My final year project also a
>> >> web
>> >> > related application and I used same technologies I mentioned above for
>> >> > that. I am really interested in this project because I have a good
>> >> > experience with web applications and I love work with javascript. I am
>> >> > looking forward to contribute to this project in this summer. I like
>> to
>> >> > know more detail about this project and if you can, please guide me to
>> >> > start working on this project.
>> >> >
>> >> > Thank you.
>> >> >
>> >> > W. A. Dulanga Sashika,
>> >> > Undergraduate Student,
>> >> > Department of Computer Science and Engineering,
>> >> > University of Moratuwa.
>> >>
>> >
>> >
>> >
>> > --
>> > W. A. Dulanga Sashika,
>> > Undergraduate Student,
>> > Department of Computer Science and Engineering,
>> > University of Moratuwa.
>>
>
>
>
> --
> W. A. Dulanga Sashika,
> Undergraduate Student,
> Department of Computer Science and Engineering,
> University of Moratuwa.
