sábado, 21 de abril de 2018

This is my way to mockup and build/write react native applications.


2) Make a basic mokup of your app. You can use MOCKUP PLUS PROTOTYPER or you can use JUST IN MIND PROTOTYPER

3)Go into your project folder and install the following libraries:

npm install redux@3.7.2 --save . It's a model layer for react
npm install react-redux@5.0.7 --save . It's a model layer for react
npm install redux-thunk@2.2.0 --save . For asynchronous transactions. Make your actions can return functions... Dispatch.
npm install react-native-router-flux@3.35.0 --save . Deal with navigation.
Optional for maps install: npm react-native-maps --save
If you got any problem with a library you can delete it from package.json and use the command npm prune.
4) Open your folder app with Atom IDE to start work on code. Each time you save your files, the project will reload and show changes by default.

5) Install Nuclide package atom for many development features including debug.

6) Create a components folder into your root app folder, go inside this one, and create another folder called common.

7) Import or create into common folder all .js files that you must have to reuse, like Buttons, Inputs, Header, Footer, Spinners, etc..., Those must have an index.js file that make export * to your project.

8) Create an action folder into your root folder, then inside create an index.js, for each operation or module you must create a new file and import to index.

9) Create a reducers folder into your root folder, then inside create an index.js, for each operation or module you must create a new file and import to index.

5) Open your App.js file and add the following lines:
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import LoginForm from './components/LoginForm';

Add This new render, return lines to work with redux:

render() { return ( ); }

Que me disculpe el español pero prefiero escribir en inglés todo el artículo...

Follow this steps to get a hello world project fastly, running on a windows os.

- Windows OS.
- Free internet without proxies (if not installation packages must fail).


1) Get a good windows console program like CMDER full with Github. Rememember to open Cmder as admin.

2) Install NODEJS last version. Verify it after installation by console with: node -v

3) Install NPM version 4 (it must be compatible with expo, so just install 4 for now) by console:
npm install -g npm@4
Verify it after installation with: npm -v

4) Install Expo from Facebook by console with:

npm install exp --global

Remember to check node or nodejs, npm and exp to be included into your PATH variable.

If all ok you should be allowed to type exp on console with this result:

5) Create an EXPO ACCOUNT. You must have internet without proxies or this registration could fail.

6) Install EXPO CLIENT into your mobile device.

7) For write code get a good IDE like ATOM IDE, then install react, react-redux and other atom packages if you like.

8) On your explorer create a workspace folder, then go to your Cmder console and type:

exp init MY-APP

9) Preview your React Native App typing on your console (inside your app folder):

exp start

Then you must open your expo android/ios application on your device, then select scan QR, and just get that code on your pc... then it will start automatically if you have done all steps ok.

sábado, 4 de noviembre de 2017

React-Native es una plataforma desarrollada por Facebook, open source para el desarrollo de aplicaciones móviles cross-platform completamente nativas utilizando React y por lo tanto nuestro amado JavaScript ;).

Para instalar react native en un entorno windows por favor sigue los siguientes pasos:

1) Instalar Nodejs 6+
2) Instalar python 2.7+
3) Instalar JDK java 8+
4) Instalar Android studio, versión compatible con jdk.
5) npm install -g react-native-cli
6) react-native init "NOMBRE APP"
7) Install emulator device avd android, con api 23 o el que pide react-native al abrir el proyecto en AndroidStudio.
8) Iniciar el emulador desde android studio.
9) System settings, environment variables.
- Add JAVA_HOME (arriba)
- Add a Path -> C:\Users\Laptop\AppData\Local\Android\sdk\platform-tools (DEBES REESCRIBIR LAPTOP POR TU USUARIO EN EL PC)
10) En la carpeta de tu proyecto ejecutar: react-native run-android

miércoles, 27 de septiembre de 2017

El mejor tutorial para configurar la página web en tu apache2 de ubuntu se encuentra en el siguiente enlace:


Referencias personales de utilidad
Agregar al archivo etc/apache2/apache2.conf tu carpeta contenedora de la página web como lo muestra el ejemplo:

<Directory home="" ites="" iweb="" workspace="">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted

Al archivo /etc/apache2/sites-available/000-default.conf modificar parametros, ejemplo:
ServerName www.javadoh.com
ServerAlias *.javadoh.com
ServerAdmin webmaster@localhost
DocumentRoot /home/workspace/Sites/MiWeb
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

Recomiendo seguir el tutorial del enlace paso a paso y será muy fácil configurar tu web.

miércoles, 5 de julio de 2017

Si te encuentras con errores al instalar paquetes (librerías) npm en tu pc y visualizas mensajes de este tipo: self_signed_cert_in_chain...

Debes ejecutar el siguiente código en tu consola:

npm config set registry="http://registry.npmjs.org/"

Inmediatamente vuelve a ejecutar tu npm install y verás que corre sin problemas...

viernes, 1 de julio de 2016

Google Play Services with Android 6.0 Marshmallow and Genymotion

Google Play Services with Android 6.0 Marshmallow and Genymotion

So, I think you want to install the Google Play Store & Services with an Android 6.0 Marshmallow Emulator?

To do that, follow either the long or the short version.

You need the following three files:

Short version:

  • Download all three files.
  • Create an emulator with the Nexus 5X image and start it.
  • Flash Genymotion-ARM-Translation_v1.1.zip and reboot.
  • Flash gapps-L-4-21-15.zip and reboot.
  • Sign into your Google Account.
  • Flash benzo-gapps-M-20151011-signed-chroma-r3.zip and reboot.
  • You are finished!

Long version:

Then start GenyMotion and add an emulator with the preset !! PREVIEW - Google Nexus 5X - 6.0.0 - API 23 - 1080x1920. Start it and wait until you see the homescreen.

The next step is to flash the Genymotion-ARM-Translation_v1.1.zip. To do that, just drap & drop the .zip file onto the emulator.

Turn the emulator off with the power button and wait until it is powered off. Then turn it on again.

Now repeat the last two steps with gapps-L-4-21-15.zip (flash, reboot).

If you are finished with that, sign into your Google account (you can do that when opening the Play Store). If you are successfully logged in, flash the benzo-gapps-M-20151011-signed-chroma-r3.zip file and reboot again.

Have fun with your working Google Play Store!

Source: gist.github.com

jueves, 30 de junio de 2016

Create Android Project

Make sure you have an up to date version of Android Studio. I am using version 1.4.1

Open Android Studio and create a New Project, naming it as you wish. Click Next, choose Minimum API level 17 and click Next again. Choose Blank Activity as the first activity, name it LoginActivity and click Finish.

Add Internet permissions to AndroidManifest.xml:

    <uses-permission android:name="android.permission.INTERNET" />

Next we add another blank activity to the project. Right Click the package and select New -> Activity -> Blank Activity. Leave its name as default and click finish.

The final project for this article can be found on Github. Make sure you change the Facebook API details to match you own.

Creating Facebook App ID

To use the Facebook API we have to add an app entry to our Facebook Developer Apps dashboard. You will need a Facebook developer account if you don’t have one already. Choose a random category and click Create App ID.

On the next page, scroll down to the bottom and complete both fields with the project packages names.

Package Names

Click Next.

Now we need to add a Development Key Hash. There are two ways of generating one. The first option is using the command line.


keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64


keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Open Facebook’s My Apps section and copy the App ID:

App ID

Open strings.xml in your project and add this line of code:

<string name="app_id">{Your App ID here}</string>

Setting up Facebook SDK

Open build.gradle (Project) and add mavenCentral() to both repository sections. Then open build.gradle (Module) and add the SDK library by adding this line to `dependencies:

 compile 'com.facebook.android:facebook-android-sdk:4.6.0'

Adding dependencies

Now sync gradle.

Activities and Layouts

Open AndroidManifest.xml and make these changes.

Change the MainActivity label:

      android:label="@string/app_name"            android:theme="@style/AppTheme.NoActionBar" >

Add these tags:

    android:value="@string/app_id" />


<provider              android:authorities="com.facebook.app.FacebookContentProvider"                 android:name="com.facebook.FacebookContentProvider"

Now we are going to work with Java classes and layouts.

First we are going to work with LoginActivity.java. This class opens an authenticated connection to the Facebook API and gets data from it.

Add these lines before the onCreate method inside the class:

private CallbackManager callbackManager;
private AccessTokenTracker accessTokenTracker;
private ProfileTracker profileTracker;

//Facebook login button
private FacebookCallback<LoginResult> callback = new FacebookCallback<LoginResult>() {
    public void onSuccess(LoginResult loginResult) {
        Profile profile = Profile.getCurrentProfile();
    public void onCancel() {        }
    public void onError(FacebookException e) {      }

Here we create a FacebookCallback called callback. This executes the next action after we get a response from the Facebook API and the method for that is onSuccess().

Inside the onSuccess method we create a new Facebook Profile and get data for that profile. Later we will create a simple function called nextActivity() that will switch our activity.

We do not need the code for the FloatingActionButton so we will replace it. We are going to initialize the Facebook SDK so we can use its functions and methods. Inside onCreate() add these lines:

callbackManager = CallbackManager.Factory.create();
accessTokenTracker = new AccessTokenTracker() {
    protected void onCurrentAccessTokenChanged(AccessToken oldToken, AccessToken newToken) {

profileTracker = new ProfileTracker() {
    protected void onCurrentProfileChanged(Profile oldProfile, Profile newProfile) {

Next we need to show the famous Facebook Log in button. We don’t need to make it from scratch as it exists inside the SDK’s libraries and can be called in our layout.

So we will edit our LoginActivity’s layout. It’s name should be content_login.xml. In fact, the latest version of Android Studio creates two default .xml files for every activity we create. The other layout file is called activity_login.xml.

In activity_login.xml delete the code for the floating button as we wont need it.

In content_login.xml there is only a TextView element. We will remove it and create a new LinearLayout that is horizontally oriented. Inside that layout we will add the log in button. Paste the code below to replace the current contents of content_login.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"



I added some padding at the top and bottom and centered the horizontal linear layout. Let’s return to the Login class and create the button.

Login with Facebook

Inside the onCreate() method before the closing bracket, add the code below:

LoginButton loginButton = (LoginButton)findViewById(R.id.login_button);
callback = new FacebookCallback<LoginResult>() {
    public void onSuccess(LoginResult loginResult) {
        AccessToken accessToken = loginResult.getAccessToken();
        Profile profile = Profile.getCurrentProfile();
        Toast.makeText(getApplicationContext(), "Logging in...", Toast.LENGTH_SHORT).show();    }

    public void onCancel() {

    public void onError(FacebookException e) {
loginButton.registerCallback(callbackManager, callback);

Here we create a connection between the button in content_login.xml and the Facebook SDK libraries.

There are some @Overrided methods that we need inside LoginActivity.java. Add the lines below:

protected void onResume() {
    //Facebook login
    Profile profile = Profile.getCurrentProfile();

protected void onPause() {


protected void onStop() {
    //Facebook login

protected void onActivityResult(int requestCode, int responseCode, Intent intent) {
    super.onActivityResult(requestCode, responseCode, intent);
    //Facebook login
    callbackManager.onActivityResult(requestCode, responseCode, intent);


The last function in this class is nextActivity() which will switch activities and pass data to the next activity.

private void nextActivity(Profile profile){
    if(profile != null){
        Intent main = new Intent(LoginActivity.this, MainActivity.class);
        main.putExtra("name", profile.getFirstName());
        main.putExtra("surname", profile.getLastName());
        main.putExtra("imageUrl", profile.getProfilePictureUri(200,200).toString());

We need the first and last name of the profile and a 200 by 200 pixel profile picture. At this stage we only get its Uri. These three strings will be used as extras in our next activity.

MainActivity Class

First we will create a logout button on the right hand side of the app’s toolbar.

public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_login, menu);
    return true;

public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;

    return super.onOptionsItemSelected(item);

We will create the logout() function later. Replace the contents of menu_login.xml with the following:

    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"   tools:context="com.example.theodhor.facebookintegration.MainActivity">
    // Replace with your package name

    <item android:id="@+id/action_settings"

Change the current value of action_settings in strings.xml:

<string name="action_settings">LogOut</string>

The nextActivity() function in the LoginActivity class passed some strings to our next activity. Now we use them by creating three other strings inside the onCreate() method of the MainActivity class and storing the passed data in them:

Bundle inBundle = getIntent().getExtras();
String name = inBundle.get("name").toString();
String surname = inBundle.get("surname").toString();
String imageUrl = inBundle.get("imageUrl").toString();

To display this data we need to change the content_main.xml layout. The code below adds the elements we need to display the data. Add this code inside the RelativeLayout tags:


To display the profile name add the code below to the onCreate() method of the MainActivity class:

TextView nameView = (TextView)findViewById(R.id.nameAndSurname);
nameView.setText("" + name + " " + surname);

Next we want to display the profile picture. From the last activity we have the picture Uri as a string. We can use this Uri to download the picture as a Bitmap file.

Create a new class, and add the code below:

public class DownloadImage extends AsyncTask<String, Void, Bitmap> {
    ImageView bmImage;

    public DownloadImage(ImageView bmImage) {
        this.bmImage = bmImage;

    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon11 = null;
        try {
            InputStream in = new java.net.URL(urldisplay).openStream();
            mIcon11 = BitmapFactory.decodeStream(in);
        } catch (Exception e) {
            Log.e("Error", e.getMessage());
        return mIcon11;

    protected void onPostExecute(Bitmap result) {

To display the profile picture in our app, add the line below inside the onCreate() method of the MainActivity class, after the last line added.

new DownloadImage((ImageView)findViewById(R.id.profileImage)).execute(imageUrl);

It uses the imageUrl string, downloads the image and displays it inside the content_main.xml layout.

Profile information

Now that displaying data is complete, we will add a share dialog to the floating action button so the app can post to Facebook.

Open activity_main.xml and change:




Change the button color by editing the color values in colors.xml. I used this color:

<color name="colorAccent">#5694f7</color>

Next to make the button do something.

Declare a private ShareDialog variable in the MainActivity class:

private ShareDialog shareDialog;

Inside the onCreate() method create this dialog:

shareDialog = new ShareDialog(this);

We want to show this dialog when we click the floating button. Replace the Snackbar code in the OnClick method with the code below:

ShareLinkContent content = new ShareLinkContent.Builder().build();

Our app can now post to Facebook, but we are not finished yet, the Logout function is missing.

First the app needs to understand if it is logged in. Initialize the Facebook SDK as we did in LoginActivity by adding this line of code inside the onCreate() method:


Add the logout() function:

public void logout(){
    Intent login = new Intent(MainActivity.this, LoginActivity.class);

Share to Facebook

Now you can run your app and post to Facebook! Please let me know in the comments below if you have any problems or questions.

jueves, 5 de mayo de 2016

Subscribe to RSS Feed Sígueme en twitter!