UltronEle User Guide
Created at: March 20, 2019
UltronEle's mission is to build the world's fastest e-learning system with the lowest cost and in the most simple way, here's a complete user manual to describe how to do this from the ground.
- Learning Procedures - for Content Learner Role
- Tech Support
To run UltronEle in your local machine, a couples of tools required:
- Nodejs/NPM: local running and build environment
- Gatsbyjs: website content compilation tool
- git cli/github account: repository for code and content host
- netlify account: web application build and host service
UltronEle is created on the basis of Gatsbyjs, the most sexy open source CMS framework currently, and running in nodejs evnironment. While an ultronele copy is downloaded in user local machine, added new contents, to preview the new look of the site, nodejs/gatsby intallation is a must. Furthermore, if you want to deply these content to internet, then Github and its client, as well as Netlify account are also necessary. All this tools and service are free to use.
Official nodejs/npm installation address is HERE, click and select an installer for your OS, download installation package to run and install.
to check your installation complete, open your console or terminal and run: $ node -v $ npm -v if you see the version number, that means a successful installation. if it reports error please recheck the installation process. in windows, console can be opened through `WIN` key -> input `cmd`, press `Enter` key to popup. in MacOS, terminal can be seached by `terminal` .
To quickly install gatsbyjs, you may begin with get started page. Open your console/terminal window, and run:
$ npm install -g gatsby-cli
in MacOS, you may need to use sudo to install gatsby-cli tool.
First, sign up a new accout in GitHub.
we need a client to synchonize code and content with github central repository, the client have two forms, cli and desktop GUI. For a developer, a complete installation guidance is in here. For a general user, a desktop version is more suitable.
for MacOS, git client is built-in, have a try on Mavericks (10.9) or above in terminal : $ git --version
git client installation doc is here, once you installed client, you can follow the guidance doc metioned above to setup github account.
Visit Netlify to sign up a new accout. Netlify is an excellent platform for you deploy and build your website/application automatically even with no fee.
As an innovation to the traditional elearning CMS software, we're striving to simplify the process of software deployment and content creation/publication by getting rid of Database, using content generator, automated deployment. Belowing are steps with which how we software works.
Note: commands used below are in MacOS as default.
For v1, ultronele runs as a starter project, which means you can download it with command then modify the contents in this starter, deloy it, experience the whole use process.
To download(clone) ultronele, open your console, run command(for MacOS as an example):
$ cd my-work-path
$ gatsby new my-ultronele https://github.com/runbytech/ultron-ele
gatsby we installed before? Here we use it as download tool,
new means that we'll create a new site in a directory named
my-ultronele, sure, you can name it anyone you like. the http.... is the address where ultron-ele is hosted.
Copy the whole line from after the $ character, then paste to you console, Enter to execute.
For v2, we'll use ultronele as an independent theme to install...
Once you downloaded the ultornele copy in your directory, you can enter your own ultronele then start it by:
$ cd my-ultronele
$ npm i
$ gatsby develop
The seconde command
npm i means using npm to install the dependencies of the project,
gatsby develop means start the dev server. Once you saw the belowing console output, we say server started, then open browser and visit:
One of the great features ultronele is to create elearning content including category, tutorial, quiz by command line(cli) in console/terminal window. Three generators are available, cagegory generator, tutorial generator, quiz generator, let's see how to use them.
Open a new console window, and enter your newly created ultronele application, then execute generate command:
$ npm run generate
It will produce following results:
The prompt default points to the first option,
C-ategory generate, we use this option to create a category. Press Enter key to start the generation. Input the new category name you'v planned like
World History after the prompt words
Category Name Please:, Press Enter key to confirm.
It prompts us if the newly created
World History shows in the first position of homepage gallary. If we agree this suggestion, press
Enter key. If we don't care about this just press
Here we just ignore the option by press Enter key, then the
World History category created.
Now let's see what we've achieved:
World History card in the gallery that red arrow points to? Click on the
World History card, you will see the default category content.
You may wonder what on earth did we create in our project, let's have a look at the source change:
c-world-history folder and the
index.md file? That's we just created with category generator. The
index.md file includes the default category content which you'd seen after clicked the
World History card.
Back to the console which created the category and rerun the generate command:
$ npm run generate
This time we select the second generator
T-utorial-generate by pressing
Down Arrow Key in your keyboard:
Enter key to start the tutorial generation dialog:
Follow each step to input the necessary info like the sample above, while come to the
Step 4/5 , we use
Down Arrow key to select
c-world-history and press
Enter to enter this directory:
c-world-history directory will hold all the tutorials, so, we must make sure that we are UNDER THIS DIRECTORY and select
choose this directory to put the new turoial in it. Press
Enter key to confirm this.
Note: there would be another tutorial under this category next time you execute tutorial generator, while you enter the c-world-history directory you would see other tutorial directory like a-brief-history-of-europe and such, how to do next? move up or donw arrow key to select `choose this directory` and press Enter key to use the c-world-history directory.
In step 5, the generator suggest us to add a question to unlock BONUS:
it's a good practice do this, so, we press
Enter to accept it and finish the tutorial creation like this:
What we've done under the hood? It's simple, we just created three default/dummy tutoiral section files under a directory by name of you input as a new tutorial title. Have a look at the source change: (a new directory and three .md file in it)
Want to know how's your new tutorial look like? Just restart the develop server and refresh the category page.
Switch back to the console/terminal window you've run `gatsby develop`, press `ctr+c` combo key to stop it. Then execute this command: $ rm -rf .cache && gatsby develop this is a wholly new start server running command removed all the cache before. Note: `rm -rf` is a MacOS command, if you're in Window, delete the .cache folder mannualy, and just rerun `gatsby develop`
then, refresh the
World History category page which URL is:
you will see a new tutorial card appeared at the bottom of this page rather than the text you saw before you refresh this page:
Want to see your new tutorial details? just click on
Learn More... in the card. Everything is ready for you to modify and update. All you have to do is to review those
.md file and make what you want.
Quiz usually is not necessary for a normal reader, but if you want recognize some students achievement, and issue a certificate to him/she, quiz will come in handy. Let's see how to create a quiz.
Again, execute the generate command:
$ npm run generate
This time we move
Down Arrow key to select
Enter key start creating a template quiz, title can by igonre by the second
Then we come to the category selection step, the cursor stop at the
business directory, move down to select
c-world-history directory which was created in previous step:
Enter in this category, now the only tutorial we've created
t-a-brief-history-of-europe is selected:
Note: Please make sure you select the RIGHT tutorial directory to Enter in, if select wrongly you may override previously created quiz content while you have multiple tutorials in one category.
Enter in this tutorial, we'll put new quiz content in a tutorial folder since we assign a test to a tutorial conventionally.
choose this directory option which represents the tutorial directory
Enter key to complete a quiz template creation.
Let's have a look at what's added in the source file tree?
test.md file created at the tutorial directory, when you open the file you'll find it including 4 dummy single choice questions as a start point for your own quiz. In the Learning Procedures we'll explain where to use this quiz.
In deployment phase, we divide this process into two big steps, in one step we upload our ultronele code and content to github, in another step we make netlify pull our ultronele repository hosted github, then netflify would deploy and start it as a new website.
Our custom ultronele may by precious so we need keep it for a long time. Github is a good place to save your code/docs/files, as well as a cloud service for you to host and syncronize code with other service like netlify.
Note: if you dont want the project name hello-world, you can name it my-ultronele or other cool name.
First, follow the official github help to Create a repo in 6 step. But, we DONT need the 5th step to Initialize this repository with a README. for we already had one in our ultronele.
Then, in your console window which just created tutorial/quiz, using the following commands to upload our ultronele to github:
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/RobinLi/hello-world.git
$ git push -u origin master
Note: in the 4th command we add origin ...RobinLi..., here we need to replace RobinLi with your github account name! Besides, if you name your new github repository as `my-ultronele` rather than `hello-world`, then you need to match the name with the one in this command before `.git`.
Now that our website is ready to launch, then we use netlify to build and bring it to alive online. Let's have a look at how to do it.
For users in China, netlify service is inaccessible, so, Github Pages is an alternative to netlify, follow the steps after the netlify deployment procedure to publish your ultronele.
In prerequisites phase, you created a netlify account. Now, login your netlify apps: https://app.netlify.com/
The configuration of menus displayed in navigation bar lies in the
gatsby-config.js file which is the main entrance of the whole site:
name property is displayed in navigation bar, the
url property is corresponding to the
.md file name directly under the
To add or modify your own menu item, just edit the file, and create a new page file using page generator:
$ npm run generate
Move Down Arrow Key to select
Enter key to input page name like this:
Enter to finish the page completion, you'll get a new template page under the content directory:
Now, let's add this new page to navigation bar:
Switch to browser, you'll see the newly added menu item
TEST at the right side of navbar, click on it, test page content will present to you like this:
Website logo image is an important part for site owner to setup a visual identification and brand. We recommend our user to provide a custom logo image to replace the default one, no more than 2 colors in image, with a dimension of 400x120 pixels, like this:
To assign a custom website logo:
- put a new well-designed png image into
- modify the
logoImgvalue in gatsby-config.js file to correspond to your file name
Favico is the shortcut icon for website, so, a concise and eye-catching icon is a must to have. By means of gatsby manifest plugin, what we need to do only is to put a 512x512 pixels image into
src/images, then, modify the
icon value in
gatsby-plugin-manifest section of
Often a website need some static text info to identify itself, here's how the website metadata come. Ultronele use configuration file
gatsby-config.js to store the
siteMetadata, which includes website
title, site owner
signiture, logo image
logoImg, as well as navigation menu
You can feel free to modify the six fields to your intent, once you made a modification to the
siteMetadata section, switch back to the browser in
develop mode, you'll see the change immediately, for gatsby reflects the config change in realtime.
IF NO change occurs First, check if your ultronele project is running from: gatsby develop Then, ctrl+c to close the server, and restart by: gatsby develop
Footer in HOME page can also by changed from the source. It's lies in
src/components/footer.js, you can modify the company name/url address in the file, redesign your footer style as you wish.
Ultronele use green color as primary theme by default, this does not mean you cannot change it. If you want to change to another color you need to do the following 3 steps:
- First, open
--currentTheme, as you see it use
- Then, if you want to try other theme, like
--cooltheme, just replace the
- Last, if the built-in themes still cannot meet your desire, add your theme for example
--mytheme: #7A67EE, then fill into the var() like:
For ultronele v1.x, the upcoming new features and bugs fix would update through github. So, if you start use ultronele from v1.0, you'd better do NOT touch anything under
src directory. Or your local version would conflict with the remote version while execute code merge.
From v2.x, ultronele will be packaged as an independant theme of Gatsby, since then, you'd focus on your content, and would have a good experience in product upgrade.
Compared with ultronele setup procedures, usage procedures from a learner's view might be much easier and interesting. Except for the great simplification of ultronele, enjoyment is also the big feature of this product. In each section you're encouraged to answer a question to unlock next section, if you succeed, you'll be rewarded a confetti bonus. Once you completed a quiz, you'll get a certificate of that course.
Let's see how we learn knowledge by fun.
Click on the avatar icon in the right of navigation bar, switch to the
http://localhost:8000/profile. It's the client side login module to save your username, email and fullname locally.
Switch back to
HOME module, select a category from top
Topics and Skills gallery. For example, you click on the first category
Data Science, enter the category page, like this:
The bottom card list is the courses under this category
Data Science. Each card can be drilled down to the detail page through
Learn More.... Right column is the features item which outlines current category.
While you complete one section of each course/tutorial, you'd be asked to answer a 4 options question to unlock the new knowledge. When you selected the right option, you'll unlock a confetti bonus, and the new section content.
NOTE: This unlock/bonus idea is borrowed from https://www.howtographql.com/
Reading through the content of a course is relatively easy to do, how do you convince yourself understood the concepts and principles or best practices in the content? Ultronele offers a configurable quiz after the course content to help reader better understand those of knowledge points.
Take Business category for example, both
Business essence and
TAKE QUIZ entrance.
In Quiz for Business Essence page, click on
Yes, Start button to begin your quiz, while finished, click on
Done, to check results button, if you successfully answered > 60% questions, you'll win a downloadable certicficate which may like this:
That marks you scuccessfully completed the course! For more your learning report/path, please visit profile module.
Q: What purpose is this software used for?
A: This software is designed for tutors, educational institutes, small enterprises which have little technical resources or limited budget, wish to own a easy-use training platform.
Q: Can I use it for free?
A: Absolutely, if you're teacher/students/NGO members, you'd get full tech support totally with no fee. Ultronele's mission is to help as manay people as possible to access knowledge in the easiest way and the lowest cost.
Q: What if I made some custom development and want to sell to my client?
A: It's OK, this product use MIT license, so you should include LICENSE file of this product.
Q: Our company need commercial support, can you provide?
A: Sure, we recommend you purchase our Premium membership, and if you have more requirements we can talk in depth.
Email: firstname.lastname@example.org, response in 24hrs
Twitter: https://twitter.com/runbytech, response in 6hrs
WhatsApp: +1 (902) 237-7065
Mobile Phone: +1 (902) 237-7065
Photo by Daria Nepriakhina on Unsplash