deploy a produccion vue.js

Deploy to Production

Vue  nos permite realizar un build listo para optimizar nuestro código y publicarlo en producción,  con el comando “npm run build” , esto crea la carpeta dist donde tendremos nuestro código minificado y optimizado listo.

tip:

luego copiar lo que se genere en la carpeta DIST. a la raiz del proyecto en el que se quiera deployar

en index.hml se genera mal la url hacia los archivos que se encuentran en la carpeta static, entonces buscar "/static" por "./static"

http://danywalls.com/2017/03/04/hola-vue-cli/

vue.js 2 api rest usando NYTimes API

https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/

<!-- ./index.html -->
<div class="columns medium-3" v-for="result in results">
  <div class="card">
    <div class="card-divider">
      {{ result.title }}
    </div>
    <div class="card-section">
      <p>{{ result.abstract }}.</p>
    </div>
  </div>
</div>

// ./app.js

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
    .then(response => {this.results = response.data.results})
  }
});

como resolver Access-Control-Allow-Origin en symfony3

https://ourcodeworld.com/articles/read/291/how-to-solve-the-client-side-access-control-allow-origin-request-error-with-your-own-symfony-3-api


nelmio_cors:
        defaults:
            allow_credentials: false
            allow_origin: []
            allow_headers: []
            allow_methods: []
            expose_headers: []
            max_age: 0
            hosts: []
            origin_regex: false
        paths:
            '^/api':
                allow_origin: ['*']
                allow_headers: ['*']
                allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
                max_age: 3600

vue.js 2 api rest con axios

https://www.thepolyglotdeveloper.com/2017/10/consume-api-data-http-vuejs-web-application/

vue.js 2 crear todo-list app

https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2

fcm experiencia

https://medium.com/step-up-labs/our-experience-with-firebase-cloud-messaging-318043e667e3

fcm onesignal

https://documentation.onesignal.com/v5.0/docs

What is OneSignal?

OneSignal is a high volume and reliable push notification service for websites and mobile applications. We support all major native and mobile platforms by providing dedicated SDKs for each platform, a RESTful server API, and an online dashboard for marketers to design and send push notifications.

fcm por temas topics

https://firebase.google.com/docs/cloud-messaging/js/topic-messaging

Respuesta HTTP del tema

//Success example:
{
  "message_id": "1023456"
}
//failure example:
{
  "error": "TopicsMessageRateExceeded"
}

fcm php backend

http://sab99r.com/blog/firebase-cloud-messaging-fcm-php-backend/

OK Lets start coding… For easy implementation I created a function named sendMessage with two parameters data and target. here is the function.

	<?php
	/*
	Parameter Example
	$data = array('post_id'=>'12345','post_title'=>'A Blog post');
	$target = 'single tocken id or topic name';
	or
	$target = array('token1','token2','...'); // up to 1000 in one request
	*/
	public function sendMessage($data,$target){
	//FCM api URL
	$url = 'https://fcm.googleapis.com/fcm/send';
	//api_key available in Firebase Console -> Project Settings -> CLOUD MESSAGING -> Server key
	$server_key = 'PASTE_YOUR_SERVER_KEY_HERE';
	$fields = array();
	$fields['data'] = $data;
	if(is_array($target)){
	$fields['registration_ids'] = $target;
	}else{
	$fields['to'] = $target;
	}
	//header with content_type api key
	$headers = array(
	'Content-Type:application/json',
	'Authorization:key='.$server_key
	);
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_POST, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
	$result = curl_exec($ch);
	if ($result === FALSE) {
	die('FCM Send Error: ' . curl_error($ch));
	}
	curl_close($ch);
	return $result;
	}

5 maneras de hacer HTTP request en node.js

5 Ways to Make HTTP Requests in Node.js

https://www.twilio.com/blog/2017/08/http-requests-in-node-js.html

hosting gratuitos

https://blog.patricktriest.com/host-webapps-free/

firebase chat codelab

https://codelabs.developers.google.com/codelabs/firebase-web

ver consola en chrome del celular

http://www.desarrollolibre.net/blog/tema/289/navegadores/debugging-de-paginas-web-con-google-chrome-y-android#.WmJdv6jibIU

convertir curl en php

https://incarnate.github.io/curl-to-php/


ejemplo:
script curl:

curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send


convertido a php:

$ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "https://fcm.googleapis.com/fcm/send"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, "{\n \"notification\": {\n \"title\": \"New chat message!\",\n \"body\": \"There is a new message in FriendlyChat\",\n \"icon\": \"/images/profile_placeholder.png\",\n \"click_action\": \"http://localhost:5000\"\n },\n \"to\": \"YOUR_DEVICE_TOKEN\"\n }"); curl_setopt($ch, CURLOPT_POST, 1); $headers = array(); $headers[] = "Content-Type: application/json"; $headers[] = "Authorization: key=YOUR_SERVER_KEY"; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $result = curl_exec($ch); if (curl_errno($ch)) { echo 'Error:' . curl_error($ch); } curl_close ($ch);

instalar cUrl para usar por consola

https://help.zendesk.com/hc/en-us/articles/229136847-Installing-and-using-cURL