RapidinhasCode | Pedacinhos de ajuda para quem bate código!: 2015

quinta-feira, 3 de dezembro de 2015

ionic | Um exemplo de como passar dados com um .factory

Aqui fica um exemplo simples e prático para o ionic de como passar dados entre vistas recorrendo ao .factory.

http://codepen.io/calendee/pen/HFEBG?editors=001

Outro:

http://codepen.io/anon/pen/VvVgZY?editors=100

Outros, estes recorrendo a .service:

http://plnkr.co/edit/6pqT0F?p=preview
http://codepen.io/lizz/pen/bNKNey?editors=011

quarta-feira, 2 de dezembro de 2015

ionic | Como alterar um campo input com um botão?

Uma forma simples de alterar um campo input com um botão:

<div ng-app="app" ng-controller="MainCtrl">
    <input name="widget.title" ng-model="widget.title">
    <button ng-click="set('fooooo')">set to foo</button>
</div>

angular.module('app', [])
    .controller('MainCtrl', function($scope) {
        $scope.widget = {title: 'abc'};

        $scope.set = function(new_title) {
            this.widget.title = new_title;
        }
    });

Fonte e exemplo:

http://jsfiddle.net/terebentina/9mFpp/

ionic | Duas colunas no ionic

Um exemplo de como ter duas colunas numa mesma vista. Neste exemplo conseguem scroll independente da coluna e adapta-se ao tamanho do ecran.

http://codepen.io/brandyshea/pen/eNdyKN

terça-feira, 1 de dezembro de 2015

ionic | Passar um valor do .state para o controller

#State

    .state('app.detalhes', {
        url: '/detalhesDoc/:itemId',
        cache: false,
        views: {
          'menuContent': {
            templateUrl: 'templates/detalhesDoc.html',
            controller: 'detalhesDocCtrl',

             resolve: {
               valor: function () {
                 return 'Valor para passar';
               }
             }

          }
        }
      })

# Controller
.controller('detalhesDocCtrl', function($scope, $state, $cordovaSQLite, $stateParams, username) {

    $scope.valor = valor;
    alert($scope.valor); //Mostra o valor
    alert($stateParams.itemId); //Mostra o itemId

    })

domingo, 29 de novembro de 2015

ionic | Factory vs Service

Aqui ficam alguns sítios que explicam a diferença entre usar Factory ou Service no ionic e quando devemos usar um ou outro.

AngularJS : When to use service instead of factory:

http://stackoverflow.com/questions/18939709/angularjs-when-to-use-service-instead-of-factory

Angular service or factory?

http://iffycan.blogspot.com.ar/2013/05/angular-service-or-factory.html

The old Factory vs Service question
https://forum.ionicframework.com/t/the-old-factory-vs-service-question/17678

sexta-feira, 20 de novembro de 2015

Passos para publicar uma APP na loja da Apple

- XCode -> Product -> Archive

- Enviar

No itunnesconnect:

- Criar um perfil para uma nova APP

- Preencher todos os campos

- Selecionar a APP enviara a partir do XCode

Se for uma atualização:

Envia-se da mesma forma. No itunnesconnect.com, na APP já publicada seleciona-se a nova versão enviada.

ionic | Passar dados entre vistas, com menu lateral

Um bom exemplo de como podem passar dados de uma vista ou view para outra.

http://plnkr.co/edit/6pqT0F?p=preview

sexta-feira, 6 de novembro de 2015

ionic | Instrução para ir para um tab dentro de um controlador

Se precisarem dentro de um controller darem instrução para ir para um separador/tab podem faze-lo da seguinte forma:

$state.go('app.inicio');

E se ao mesmo tempo quiserem reiniciar o separador, ou seja, obrigar a um reload de dados, funciona assim:

$state.transitionTo('app.inicio', null, {'reload':true});

quinta-feira, 22 de outubro de 2015

ionic | Missing Push Notification Entitlement

Pode acontecer se desenvolveram a vossa APP em Ionic, receberam a seguinte recomendação da depois de publicar na loja da APPLE:

Missing Push Notification Entitlement - Your app appears to include API used to register with the Apple Push Notification service, but the app signature's entitlements do not include the "aps-environment" entitlement. If your app uses the Apple Push Notification service, make sure your App ID is enabled for Push Notification in the Provisioning Portal, and resubmit after signing your app with a Distribution provisioning profile that includes the "aps-environment" entitlement. See "Provisioning and Development" in the Local and Push Notification Programming Guide for more information. If your app does not use the Apple Push Notification service, no action is required. You may remove the API from future submissions to stop this warning. If you use a third-party framework, you may need to contact the developer for information on removing the API.

Podem não fazer nada, mas se realmente quiserem resolver o aviso (warning) executem o comando:

sed -i "" -e "s/ifndef DISABLE_PUSH_NOTIFICATIONS/if 0/" {caminho para a pasta da vossa APP}/platforms/ios/{Nome da APP}/Classes/AppDelegate.m

Fonte:

http://forum.ionicframework.com/t/missing-push-notification-entitlement/5436/32

ionic | Problemas a descarregar um objecto JSON através de HTTP no IOS 9

"ionic can't http.get on ios 9"

"App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file."

O problema que tive aconteceu apenas no IOS 9 em IOS 8 ou Android funcionava impecavelmente. A dificuldade foi não conseguir descarregar dados JSON de um HTTP em que para isso usualmente uso o método http.get. Pelas pesquisas que fiz isto acontece realmente em endereços HTTP, se fosse HTTPS não haveria esse problema, mas de qualquer forma não testei.

Então para resolver é fazer o seguinte:

- No Xcode vão ao vosso projecto e editam o ficheiro "NomeDaAPP-info.plist" que no meu caso estava em NomeDaAPP -> Resources.

- Acrescentam:

key>NSAppTransportSecurity</key>  
     <dict>  
          <key>NSAllowsArbitraryLoads</key><true/>  
     </dict>

Fonte:

http://stackoverflow.com/questions/31216758/how-can-i-add-nsapptransportsecurity-to-my-info-plist-file

quarta-feira, 21 de outubro de 2015

ionic | Mostrar um Loading Animation enquanto pesquisa um sitio JSON

Este pedaço de código mostra uma animação quando está a aceder a um URL para ler dados JSON. Se não encontrar esconde a animação e mostra uma mensagem "Sem Dados". Se encontrar esconde a animação e mostra os dados.

JS:

.controller('qualquercoisaController', function($scope, $http, $timeout, $ionicLoading) {

$scope.click = function() {
    $scope.hidden_test = !$scope.hidden_test;
};

   $ionicLoading.show({
     content: 'Loading',
     animation: 'fade-in',
     showBackdrop: true,
     maxWidth: 200,
     showDelay: 0
   });

   $timeout(function () {

     $http.get("http://qualquerCoisaComo_umUrl_jason.pt")

     .success(function(response) {
           $scope.qualquercoisa = response;
           $ionicLoading.hide();})
     .error(function(NULL) {    //Se for NULL mostra a msg Sem dados
           $scope.hidden_test = !$scope.hidden_test;
           $ionicLoading.hide();
        });
   }, 10); //tempo de delay

})

HTML:
<p ng-if="hidden_test" ng-show="!qualquercoisa.length">Sem Dados!</p>

Fonte:

http://ionicframework.com/docs/api/service/$ionicLoading/

http://codepen.io/calendee/pen/oryBz

http://stackoverflow.com/questions/27514976/get-null-response-in-http-get-ionic

http://codepen.io/gnomeontherun/pen/EAmqD?editors=101

http://codepen.io/anon/pen/BoJwLW?editors=101

http://codepen.io/anon/pen/ojLLEE?editors=101

http://www.ngroutes.com/questions/180474b/ionic-framework-displaying-two-ionicloading-dialogs-after-one-another.html

http://ionicframework.com/docs/api/directive/ionSpinner/

ionic | Um exemplo de Infinite Scroll

Deixo-vos aqui um exemplo de uma APP com scroll infinito, ou seja, à media que se vai andando para baixo na página vão aparecendo novos itens.

http://codepen.io/d4dilip/pen/rkxyA

segunda-feira, 5 de outubro de 2015

ionic | Plugins que dão muito jeito

Aqui fica uma lista de plugins que podem usar no ionic:

http://www.gajotres.net/useful-cordova-plugins-for-your-ionic-application-examples/

ios | Parâmetros do Apple Maps para usar em código

Aqui fica uma boa hiperligação sobre os parâmetros a usar, tais com zoom, centrar, etc.

https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html#//apple_ref/doc/uid/TP40007899-CH5-SW1

ionic | Icons com fundo transparente

Segundo alguns fóruns que li a Apple rejeita icons com fundo transparente.

Podem usar um fundo cinza claro que fica bem. Ao gerar o icon com ionic resources --icon este vai ficar automaticamente com os cantos arredondados.

Fonte:

http://stackoverflow.com/questions/22858501/ios-app-icon-with-transparent-background-showing-black-background-on-device

5 razões que podem levar a Apple a rejeitar a tua APP móvel

Aqui ficam 5 razões que podem levar a Apple a rejeitar a tua APP móvel:

http://www.joshmorony.com/5-reasons-apple-might-reject-your-html5-mobile-app/

ionic | Tremeliques em transições entre views no IOS

Descarregar e guardar em js/
https://gist.github.com/IgorMinar/863acd413e3925bf282c

index.html
<script src="js/angular-ios9-uiwebview.patch.js"></script>

app.js
angular.module('myapp', ['ionic', 'ngMap', 'ngIOS9UIWebViewPatch'])

Fontes:

https://gist.github.com/IgorMinar/863acd413e3925bf282c

http://blog.ionic.io/preparing-for-ios-9/

http://blog.ionic.io/ios-9-potential-breaking-change/

http://forum.ionicframework.com/t/ios9-and-ion-nav-view-app-is-totally-broken/32968

http://forum.ionicframework.com/t/ios-9-beta-slide-menu-app-transition-issue/30768

domingo, 4 de outubro de 2015

ionic | Devolver mensagem em caso de lista vazia

<li ng-repeat="event in events">{{event.title}}</li>
<li ng-show="!events.length">No events</li>

Fonte:

http://jsfiddle.net/C29As/

ionic | Mensagem "Sem ligação à Internet!"

Plugin:

cordova plugin add org.apache.cordova.network-information

Código:

angular.module('myApp', ['ionic'])

.run(function($ionicPlatform, $ionicPopup) {
  $ionicPlatform.ready(function() {

    // Check for network connection
    if(window.Connection) {
      if(navigator.connection.type == Connection.NONE) {
        $ionicPopup.confirm({
          title: 'No Internet Connection',
          content: 'Sorry, no Internet connectivity detected. Please reconnect and try again.'
        })
        .then(function(result) {
          if(!result) {
            ionic.Platform.exitApp();
          }
        });
      }
    }

  });
})

Fonte:

http://www.fizerkhan.com/blog/posts/Showing-No-internet-connection-message-in-Ionic-application.html

sexta-feira, 2 de outubro de 2015

ionic | Alguns comandos para o ionic para ter à mão

ionic info

ionic start MinhaAPP
ionic start MinhaAPP [modelo]

ionic templates -> Ver modelo disponiveis

ionic platform add [plataforma]

ionic platform remove [plataforma]

ionic emulate [plataforma]

ionic build [plataforma]

ionic run [plataforma]

ionic prepare [plataforma]

ionic run ios --device

npm install -g ionic -> Atualizar o Ionic

ionic lib update

ionic share [email]

domingo, 13 de setembro de 2015

Lentidão com Android ADB Emulator

Sigam estes passos se o vosso emulator de Android for muito lento. No meu caso resolvi instalando a imagem do Atom x86.

http://stackoverflow.com/questions/1554099/why-is-the-android-emulator-so-slow-how-can-we-speed-up-the-android-emulator

segunda-feira, 7 de setembro de 2015

Angular | Alguns sítos web para começarem a aprender Angular

Deixo-vos aqui alguns endereços onde explicam de forma simplificada o que é a framework AngularJS e como ela funciona:

https://leanpub.com/livro-angularJS/read#leanpub-auto-o-que--angularjs

http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/

quarta-feira, 5 de agosto de 2015

ionic | Exemplos de slides menu (menus laterais)

Aqui ficam algun exemplos de menus laterais ou slide menus:

http://codepen.io/calendee/pen/Kbpyg

http://codepen.io/weareburo/pen/cnCBi

http://codepen.io/anon/pen/fiJyx

http://codepen.io/StevenIseki/pen/winLd?editors=101

http://codepen.io/calendee/pen/JdtuG

ionic | Uma forma com CSS de centrar tudo

Aqui está uma forma de colocar tudo centrado, i.e., horizontalmente e verticalmente.

.centrado{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

Exemplo: http://codepen.io/mhartington/pen/tAeJg