Meetup

wp-meetup.md

Hola!

Soy Amit, ~12 años en el mundo www como frofesional, actualmente trabajando como Freelance con TopTal y por mi cuenta. Me pueden encontrar en https://contextive.com y en https://github.com/Obvio.

De que se trara..

El proyecto se trata de una Native App (iOS/Android) que pretende ayudar a los usuarios a dejar de fumar, a travez del uso de un dispositivo que mide CO2 y coaching personal de humanos que esta apoyado por contenidos educativos.

WordPress

La empresa opto por usar WordPress por la facilidad de uso al momento de crear contenidos y, en cierto aspecto, por la agilidad al momento de desarollo del back y front y por no tener que "recompilar y distribuir" versiones nuevas de la app nativa.

Concepto y Solucion

El contenido no estaba de todo desarolaldo/completado y necesitamos un especie de lenguaje comun para poder crear nuevas "actividades educativas", por lo tanto optamos por crear un "bucket" de componentes (atomos) que se puede usar en conjunto de cualquier forma.

En el back es un especie de "builder" y el front recompone los componentes en ReactJS.

Otro punto importante es el uso del NativeApp para comunicar con la Base de datos (Amazon Cognito Sync) - ningun dato de los usuarios esta alamcenado en nuestro servidor WordPress, solo el theme y sus pages.

Tech

• Native App que a su vez lanza un WebView (instancia de "navegador" tipo WebKit) que a su vez carga el sitio WordPress de un servidor remoto.
• wp-admin minimalista con solo un plug-in: Carbon Fields https://carbonfields.net (un especie de ACF pero en codigo/sans-UI)
• Theme: tambien muy sencilla en cuanto al PHP, un page-template que carga los custom fields y la transforma en JSON para el uso de ReactJS.
• ReactJS: esta usando create-react-app https://github.com/facebookincubator/create-react-app que permite estar "up & running" y productivo (para no decir educativo) bastante rapido ya que no hace falta configurar casi nada (webpack/babel/etc.).
• Ventaja gratis: Progressive Web App por defecto!

Demo

🚀..

Software necesario para empesar

• Node.js y NPM https://nodejs.org
• create-react-app https://github.com/facebookincubator/create-react-app
• React Developer Tools - Chrome Extension https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Como hacer un theme secnillo:

• cd wp-content/themes
• create-react-app meetup-demo
• Agregemos el Boilerplate de un theme comun de WordPress (index/header/footer/functions/style)
• editemos public/index.html para tener solo

  <script>window.public_url = "%PUBLIC_URL%";</script>

• Agregmos los scripts de ReactJS en index.php:

  <div id="root"></div>
  
  <?php
      if($_SERVER['HTTP_HOST'] == 'localhost'){
          $bundle_location = 'http://localhost:3000/static/js/bundle.js';
          echo '<script type="text/javascript" src="'.$bundle_location.'"></script>';
      } else {
          $scripts = file_get_contents(get_template_directory_uri() .'/build/index.html');
          echo $scripts;
      }
  ?>

• npm run start dentro de la carpeta de nuestro theme nuevo.
• vemos en el browser.
• wp-json fetch demo/codigo.

import React, {Component} from 'react';

class App extends Component {

    constructor() {
        super();
        this.miDominio = '//wplib.box';
        this.state = {
            posts: [],
            activePost : null
        }
    }

    componentDidMount() {
        fetch( this.miDominio + '/wp-json/wp/v2/posts/' )
            .then((respuesta) => {
                return respuesta.json();
            })
            .then((respuesta) => {
                this.setState({posts: respuesta});
                console.log(respuesta);
            })
            .catch((err) => {
                console.log(err);
            });
    }

    setActivePost(postObject){
        window.history.pushState(postObject.link, postObject.title.rendered, postObject.link);
        this.setState({activePost:postObject});
    }

    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <h2>Hola Meetup!</h2>
                </div>

                <ul>
                    {this.state.posts.map((post, index) => {
                        return (
                            <li key={'id-'+post.id} style={{textAlign:'left'}}>
                                <h4 onClick={()=>{this.setActivePost(post)}}>{post.title.rendered}</h4>
                            </li>);
                    })}
                </ul>

                {
                  this.state.activePost !== null
                  ? <div className="the-post" style={{padding:15, margin:15, background:'pink', border:'1px solid hotpink'}}>
                        <h2>{this.state.activePost.title.rendered}</h2>
                        <div dangerouslySetInnerHTML={{__html: this.state.activePost.content.rendered}}></div>
                    </div>
                  : ''
                }

            </div>
        );
    }
}

export default App;

Preguntas..

🙋