How to make a mobile app?

/in , , , /by

cordova-logo

In this tutorial I’m going to explain you step by step how I make phone apps using Cordova (Phonegap/Ionic) and Ubuntu.

1) Install Cordova

For those who don’t know anything about Cordova, it is an opensource platform for building multiple platforms applications using HTML, CSS and JavaScript. The main different between Cordova and Phonegap is that the second one gets the Cordova code and redistributes with some Adobe rights, now it’s free but maybe tomorrow who knows, my recommendation is to use Cordova that apart of this is always more updated!

So, first step you have to install Cordova, open a shell in Ubuntu and type:

$ sudo npm install -g cordova

Any problems? See the Cordova documentation.

2) Install Platform

After that you need to install a platform, in this example we are going to develop an Android app so you have to install the Android SDK.

I recommend you to install Android Studio that brings you the SDK and many extra tools in an user friendly access. Get Android Studio.

Once you download it and unzipped it, you have to run it the first time to install everything. If you set android-studio in your home folder, it will create an Android folder with the SDK.

3) Add Android SDK to your “PATH”

Make Android SDK accessible in your environment (system)

Open a shell and type:

$ nano ~/.bashrc

Then you need to add to your “PATH” variable where your SDK and Gradle are.

export ANDROID_SDK_ROOT=~/Android/Sdk
export PATH=${PATH}:~/Android/Sdk/tools:~/Android/Sdk/platform-tools:~/android-studio/gradle/gradle-5.1.1/bin

After that, reload bashrc, if not it will not have any effect.

$ source ~/.bashrc

Note: you need to set your own path and names for the Android SDK, I used my “home” folder and default Android Studio’s folders.

4) Install Text Editor / IDE

Use the one you feel more confortable, my favorites are: Atom and VSCodium.

5) Create your App

$ cordova create myApp
$ cd myApp
$ cordova platform add android
$ cordova run --debug --device

Now you can start programming! HTML, CSS and JavaScript files are in the “www” folder.

Remember you need to activate developer options in your Android phone.

If you have any access problem (EACCES)  to your android-studio folder.

$ chmod 777 -R ~/android-studio/

Enjoy 🙂

Here if you want you can download my Cordova logo and use it for free: Cordova logo

Academyth idea infographic

/in /by

Academyth-by-gengns

Infographic and idea created from scratch using Inkscape for Interfaces Hombre Máquina Avanzados.

Avoid switch statement when you don’t need logic

/in /by

Arrays are faster when you don’t need logic, you can also use an string but it’s a little more triky.

// JS
var array = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", 
"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

$("div").text(months_array.indexOf("Febrero") + 1);

See a real example:

Avoid Navbar in Bootstrap from collapsing

/in /by

Create a simple Bootstrap Navbar without collapsing in cell phones and tablet devices.

<!-- Simple Bootstrap Navbar without collapsing -->
<header class="navbar navbar-default container-fluid">
    <ul class="nav navbar-nav navbar-left">
        <li><a class="navbar-brand">My App</a></li>
        <li><a>Tasks</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a>12/12/99</a></li>
        <li><a href="#">@</a></li>
    </ul>
</header>

You just need to add this code to your style.css

/* Avoid Navbar from collapsing (Bootstrap override) */
.navbar-nav>li, .navbar-nav {
    float: left !important;
}

.navbar-right {
    float: right !important;
}

See a real example:

Unhide automatically one topic per week in Moodle

/in /by

automatic-unhide-moodle

We can hide and unhide manually topics in Moodle but we cannot do it automatically, maybe it will be developed in next versions but till then you can do it by yourself easily. Using Weekly format with Bootstrap default theme you can get “Current Week Class” (current), so the only thing you have to do it’s just hide every week after that one.

:not(.editing) .weeks>li.current ~ li {
    display: none;
}

.editing .weeks>li.current ~ li {
    display: inline;
}

It’s working since Moodle 2.7.1 up to 2.9.1+.

See a real example:

Furthermore, if you want to have different students in different weeks in the same course (e.g. John in the second week and Jennifer in the last one) you can use “Self enrolment” to make courses start depending on when the students want to start the course and “Cohort” to avoid “Self enrolment” access to some courses.