Tutoriel Cordova : Créer sa première application
HTML-код
- Опубликовано: 6 окт 2024
- Article ► grafikart.fr/t...
Abonnez-vous ► bit.ly/Grafika...
Après la découverte d'[Apache Cordova](www.grafikart.f..., je vous propose de maintenant passer à la pratique avec la création de notre première application.
Soutenez Grafikart:
Devenez premium ► grafikart.fr/p...
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/t...
Merci beaucoup GrafiKart ce tuto m'aidé à démarrer une application android avec angularjs
Merci pour ce tutoriel.
Cela m'a permis de connaitre cordova et déployer mon appli avec cette environnement.
Et connaitre sublim text.
Merci infiniment et bonne continuation
Bravo pour la vidéo de formation, et merci pour avoir pris le temps nécessaire pour tout expliquer. grand merci.
Super tuto celui ci ou celui d'avant !!
Ps: pour ceux qui galère avec cordova 3.4 pour ripple voici ça :
Setting Ripple Emulator Up For Locally Hosted Sites
Vraiment bien fait ce tuto !!!
Clair et simple, surtout une voix qui ne vacille pas :-)
Bonne continuation et Merci.
1er tutoriel vidéo que je regarde après 4ans en école d'informatique (à montpellier d'ailleurs), et je me suis ré-ga-lé !
Meilleur que le meilleur des cours auquel j'ai pu assister dans mon école, vidéo daté de 2ans mais 10x plus au goût du jour que 80% de mon programme scolaire...
Après avoir lu de la doc angular/cordova/phonegap j'ai hâte d'attaquer mon projet d'appli demain matin au boulôt : D
Merci encore, et belle maîtrise de sublime text et ses plugins ! Quel est celui que vous utilisez pour l'autocomplétion des balises style >p tab ?
+Clément Mabileau C'est emmet, il y a un tutoriel à son sujet sur la chaine :)
salut merci beaucoup mais pourrais tu faire un court tuto pour poster une appli terminé sur le playstore merci par avance (la procédure à faire même si c'est payant ou non stp).
Cela m'aiderai beaucoup merci par avance ?
je m'adresse a graphikart
salut pourrais tu faire un tuto pour gérer son stock d'article merci par avance ?
super tuto un bon 9.5/10 parce que on peut toujours faire mieu merci beaucoup de partarger ce savoir gratuitement bonne continuation et bon courage pour la suite
Toujours au top Grafikart... Merci!!
Merci beaucoup pour ton tuto. On sent la maitrise, aussi bien technique que pédagogique. Je me suis effectivement perdu en route, mais tu m'as appris énormément de choses sur Angular avec lequel je me fritte depuis des semaines. En fait expliqué comme tu l'as fait c'est beaucoup plus simple que ça en a l'air. Je vais reprendre ta vidéo autant de fois qu'il le faudra.
Et une question de profane en la matière : quelle différence entre Apache Cordova et Adobe Air ?
Merci encore.
salut grand merci beaucoup pour toit ces tuto que vous faites pour nous
Encore merci pour ce magnifique tuto Jonathan !!
Attention 28:50, ce n'est pas "otherwhise", mais "otherwise" ;)
Avez vous le code css svp j'en ai vraiment besoin :( et merci d'avance ^^
Excellent tutoriel. Merci pour cet excellent partage.
Je met rarement des pouces positifs mais la tu le mérite
Merci beaucoup, les explications sont très claires :)
Moi j'habite a Cournonterral et ma tante a Juvignac
Bref ton tuto est super et bien expliqué
Aujourd'hui, vous utiliser pouvez le service Cloud de Cordova. Vous mettez vos sources sur un Git. Vous linkez ce git avec votre account Adobe. Le service cloud se charge de "compiler" votre appli et vous sors directement vos apk. :)
salut l'ancien^^ merci pour ton tuto. Je promets d'essayer et si je galère trop je resterai en full js. Tant pis pour la gloire d'être publié en apk :))
tu es vraiment fort......
Super tuto, merci
Merci pour cette video
Lorsqu'il montre son CSS déjà préparé à 11:10, comment est-on censé suivre le tuto sans avoir ce fichier?
Dans la description tu clique sur "l'article" puis sur "télécharger source" tu aura tout le code normalement.
Bonjour !
Tout d'abord, je souhaite vous remercier pour ce tuto !
J'aurai une petite question. Dans le tuto, on voit que vous utilisez compass, mais comment le configurer vous ?
Faites vous la commande "sass --watch filetoscss:filetocss" ou un "compass create" pour configurer vote application pour qu'elle marche avec compass ?
Merci de votre réponse.
Grand merci pour cette vidéo :-)
Pourrais-tu me dire quel est le nom du color scheme que tu utilises ?
Merci ! :-)
tu aurais du laisser le css et autres dans la description parce que tu vas vas tout d'un coup rapidement, je suis melangé
génial ce que tu as fait , mais stp il y a pas un tuto pour développer une simple application de covoiturage ?? Merci
Bonjour,
Merci bcp pour ce super tutoriel.
Est il possible d'expliquer comment vous avez récupérer les icons?
Merci d’avance.
C trop cool merci
merci beaucoup :)
Super tuto comme d'habitude mais qui a le fichier css please ?
Merci
Bonjour j'ai bien aimé votre tutoriel et votre manière d'expliquer les choses, chapeau pour le côté pédagogique.
J'aurais une question d'ordre général, quelle est la meilleure solution pour qu'une application mobile hybride (cordova html5...) puisse être affichée correctement sur la plupart des téléphones (même avec des résolutions différentes et des tailles d'écrans différents) ? Comment tenir compte de cette contrainte lors du développement.
J'attends votre réponse.
Très cordialement.
Twitter Bootstrap 3 fonctionne très bien au niveau de la gestion des différentes résolutions
Merci, merci et encore merci !!!
Une seule question se pose : Y aura-t-il d'autres tutos sous Cordova ?
mercii
Bonjour,
Merci encore pour ces supers tutos.
Toutefois je bloque sur l'erreur de récupération du json :Refused to connect to 'api.openweathermap.org...' because it violates the following Content Security Policy directive:
L'extension Ripple n'y change rien et je n'ai rien trouver de clair sur Internet.
Quelqu'un aurait-il une solution svp ? (Si possible sans extension, j'aimerais que mes futures applis marchent également en desktop)
bnjs stp ma quetion peut parétre stupide mai comme je débute dans tts ces chose la, je voudrai savoire, comment tu fait pr lancer lapli sur le localhost se qui te permet apré de métre lémulateur , moi jarrive pas elle souvre que avec le navigateur pas en localhost, alor lemulateur ne marche pas , merci de me repondre ... Merci pr le tuto vraiment bien fait continue comme sa
Tu peux utiliser mamp sur mac ou wamp sur pc
trop cool ce tuto ,Grafikart j'aimerai savoir si les appli cree avec Cordova gere les notification si oui comment cela ce passe
Merci pour vos services
Une petite question (peut être bête mais on ne sait jamais !) : où trouves tu la librairie d'angular ? Pour moi, ce que j'ai téléchargé est en HTML... Bizarre non ? Merci d'avance !
Et au passage, super tuto ! Merci de ta contribution :)
Autant pour moi j'ai parlé trop vite. Problème résolu :)
bonjour.est il possible avec Cordova de convertir en IOS , une application Android que j'ai développée avec MIT app inventor?
Attention pour ceux qui reprennent le code affiché sur la vidéo, il y a parfois des coupures dans le montage.
FAUTE d'orthographe "otherwise" et pas "otherwhise", cette erreur est corrigé comme par magie par exemple
je voulais savoir si les application créer de cette façon est spécialement consacré au ios si non comment créer l'effet scrolling pour android
Merci!
J'ai pas vraiment compris pourquoi être passé en lowercase en chargeant l'icône. SInon très bon tuto.
Peut-on se fier aux émulateurs pour développer pour iOS sans avoir de matériel apple pour tester mon application ?
"phonegap c'est l'ancien nom de cordova" ?
hum, d'après ce que j'ai compris, il y a le projet Cordova à la base puis PhoneGap qui propose des services complémentaires à cordova, comme le build dans le cloud, des apps pour synchroniser un device et donc ne pas avoir à compiler à chaque fois ...
Pour moi, il y a bien 2 projets, phonegap étant une sorte d'extension à cordova avec un support par Adobe pour les entreprises
Mais bon, ça reste un détail, merci pour cette vidéo
Bonjour,
tout d'abord merci pour ce tuto,mais svp Mr j'ai un problème et j'ai pas trouvé une solution.j'ai crée une application avec phonegap/ionic et j'ai la tester avec Ripple(extension google chrome) pour effectuer les modifications sur les valeurs de margin-left et le bottom des éléments HTML par exemple.le problème maintenant est que lorsque je teste mon application sur mon smartphone samsung galaxy S4,tout les dimensions de mon application change(la position des menu,des tabs en dessous n'apparaissent pas dans le smartphone alors qu'ils apparaissent avec Ripple)
qu'est ce que je dois faire pour résoudre ce problème,avez vous une idée??merci
le fichier css chargé au debut de la video on le prend ou ?
merci beaucoup pour ce tutoriel ca ma beaucoup aider
mais j'ai encore un probleme lors de la compilation de mon application j'obtient l'erreur suivante "Error: Could not find or load main class org.gradle.wrapper.GradleWrapperMain" et j'arrive pas le resoudre j'ai besion d'aide svp
Je suis bloqué sur les icones associées aux différentes empératures, j'aimerais savoir si possible comment vous avez fait merci de bien vouloir répondre...
Bonjour Svp Comment je peux recupere les icon et mrc bcp d'avance
HELP
Bonjour quand je veux faire controller.js et mets cette fanction suite la video ('function NavCtrl($scope){
$scope.menu = "home";
}")
il s'affiche cette message d'erreur :
angular.js:13920 Error: [ng:areq] Argument 'NavCtrl' is not a function, got undefined
bonjour grafikart!! merci pour le tuto dabor, ma kestion e la suivante: g envi de developper une appli hybrid basé sur le webTRC, et g windows 10, comment pourrai faire avec cordova, et p ton osi melangé cordova avec du php pour gerer les sessions par exemple!! g vrema hate de votre reponse. merci
Bonjour , j'ai un projet de création d'une application mobile multiplateforme au boulot , j'ai une question concernant la technologie que je vais utiliser , es-que ce serai d'utiliser Cordova Html Css Js et Php ou bien utilisé le framework ionic ??????
ionic est mieux je pense ou react native
Bonsoir, j'ai besoin de votre aide pour mon application !
Comment puis je comparer ma position avec d'autres ? je donne mon exemple : un client veut localiser le taxi le plus proche de sa position , Merci pour l'aide !
Très bon tutoriel, très claire. J'suis nouveau sur cordova, je n'arrive pas à lancer l'émulateur ripple avec la page hello world d'apache cordova. J'ai remarqué que localhost n'apparait pas dans l'url y a que le chemin avec d:///file..../www/.... Quel est le problème please !
c'est pas un vrai émulateur, c'est du code html (fais ctrl+u tu verras le source).
Si tu as installé l'extension Ripple sur Google Chrome et que tu l'as activée il n'y a pas de raison que tu ne puisse pas le voir (tu peux faire bouton droit>Ripple>enable).
Bon courage
Merci M HESSAS pour ton aide, avec d'autre pas ça marche sans problème mais avec celle de l'index apache cordova ça ne marche pas. Je ne sais pas si y a quelque chose que je n'ai pas installer
Pour afficher Ripple sur le navigateur tu n'as pas besoin de cordova, c'est lorsque tu souhaite déployer sur un vrai téléphone (à partir d'Eclipse par exemple) que tu en auras besoin, dans ce cas il faut télécharger cordova, apache ant, nodejs, le jre et le jdk, les installer et configurer la variable d'environnement path.
voilà, j'espère t'avoir aidé.
Si tu rencontre des problèmes ou des messages d'erreur tu peux exposer ici
Chrome n'active pas par défaut l'accès aux URL fichier (du type file://) aux extensions. Il faut que tu ailles dans la pages des extensions chrome que tu regardes celle de Ripple et en dessous tu devrais avoir une checkbox "Activer l'accès aux URL fichier". Tu la coches tu redémares ton navigateur, et "voilà" =)
Merci Chainlist, ça marche à present. Maintenant je peux m'attaquer au tutoriel :)
Possible to add english subtitles?
Colette Prepont Learn French ! Haha XD
Salut et merci pour ta vidéo, je souhaite créer une petite application pour ma femme qui gère les consommations de base du foyer, mais je voudrais savoir si c’est réalisable ou non, et comprendre comment je peux faire.
De base j’y connais rien parce que je travaille essentiellement sur Excel.
Mais je veux faire le nécessaire pour développer ce projet de façon simple et ergonomique sur nos téléphones. Voilà.
Peux tu m’aiguiller vite fait stp?
Merci beaucoup
Je vous conseil d'apprendre en premier les langages html et css puis après apprendre les autres langages plus complexe , je n'ai pas encore creer d'application mais j'ai appris ces langages (html et css) prochainement je compte apprendre le js (java script).
Je pense ce projet réalisable mais avec des efforts d'apprentissage.
c'est un magbifique tuto, et j'ai bien aimer mais je suis en besoin d'avoir le CSS.. SVP je vous demande de nous donner ce fichier et Merciiiiiiiiiii
Bonjour, très bon tuto, cependant il y a un problème que je ne peux résoudre : Le panel right est visible quand on swipe doucement vers la droite. Cela n'affiche pas le header et la nav, mais cela amène pas mal d'autres problèmes. Avez vous eu ce soucis, et comment cela peut il se résoudre? Impossible de trouver de réponses sur le net..
merci
Exactement le même problème, aussi aucune solution sur internet :/ Si quelqu'un a une solution ?
Edit : j'ai trouvé une solution :
.view{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow-x: hidden;
}
.panel{
position: absolute;
top: 60px; left: 0; right: 0; bottom: 60px;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
@include transition-duration(.5s);
}
Pour moi ça marche :)
Bonjour,
A l'étape des chargements de dates, températures... tout fonctionne bien si ce n'est pour les icons des nuages, je n'en ai aucune. Comment chercher ces icons?
De plus, pourrions-nous avoir plus d'explications sur la liaison entre notre application et le site de la météo, de où tu prends les classes "t."..., j'aimerai mieux comprendre cette partie pour pouvoir décliner l'application et en faire un localisateur de magasin.
Mais pour le moment j'ai du mal à comprendre les liaisons.
Merci de votre aide.
Les images tu ne les a pas car il faut les télécharger/récupérer quelque part.
Ensuite pour les informations de la météo, il précise dans le tutoriel qu'il utilise une API afin de récupérer les informations. Ces informations sont stockées et transmises au format json (un article très complet sur le JSON/Ajax ... : www.alsacreations.com/article/lire/1161-json-ajax-jquery-jsonp-getjson.html ). Pour récupérer et parcourir ces données il faut inspecter la structure du fichier (ie comment est structurer l'objet que l'on reçoit en JSON). Installe l'extension json viewer ou un truc dans le genre pour chrome et ouvre ce lien (mon lien json pour la météo) : api.openweathermap.org/data/2.5/forecast/daily?q=Toulon&mode=json&units=metric&cnt=10%22
Tu peux normalement voir toute la structure de l'objet avec notamment la partie city comme utilisé dans le tutoriel...
Au niveau de notre code HTML/AngularJS, il faut pouvoir parcourir ce fichier pour y récupérer les données stockées. Penche toi sur la partie la plus simple tout d'abord du tuto la section où l'on gère la ville et le pays : weather représente l'ensemble des données du fichier et on le parcours en faisait weather.truc.bidule pour avoir la valeur de bidule. Dans ce cas on cherche la ville donc (en inspectant la structure du fichier json) on cherche dans l'arbre ou se trouve la ville et on écrit le "chemin" pour y arriver : weather.city.name => donne la valeur de name.
Enfin pour la partie "t" je l'ai appelé personnellement jour pour des raisons de compréhension qui me sont propre. j'utiliserais donc jour dans mes explications.
- ng-repeat="jour in weather.list => cela permet de parcourir le tableau weather.list (qui contient 10 jours) et de créer des éléments du même type que celui dans laquelle cette instruction se trouve. ex : div class="row" ng-repeat="jour in weather.list"> va créer autant de div que la taille du tableau weather.list. De plus, à chaque itération, les objets du tableau sont attribués a la variable jour. jour = weather.list.[0] puis weather.list.[1] etc... on peut directement s'en servir et accéder aux valeurs stockées dans le Json. D'où jour.temp.day == weather.list.[0].temp.day mais nous voulons le faire sur tous les éléments du tableau et donc nous nous servons de la variable jour pour chaque "case" du tableau.
Ca te fait un peu de lecture ... j'espère avoir éclairci un peu tes idées. a+
quelqu'un sait quel est le plugin de sublime text qui permet d'importer jquery?
Salut,
On pourrait avoir le code CSS? parceque chez moi rien n'apparait puisqu'il avait tout fait avant.
Bonsoir à tous, j'ai un projet d'application mobile auquel j'y crois, mais je n'ai pas les moyens pour passer par une agence ou un tiers pour la developper. Donc seule option que j'ai et de la développer moi même. Malheureusement, je ne sais pas par où commencer. Quelqu'un peut-il m'aider, s'il vous plait, juste avec des conseils:
1-Quel langage de programmation dois-je apprendre pour la coder?
2-dois-je opter pour une application hybride ou web mobile?
Et tout autre conseil sera le bienvenu :)
Merci infiniment
Comme notre cher guide l'a dit pendant ce tutoriel, ta question 1 dépend directement de ta deuxième question.
Tout dépend également de ce que tu veux faire et sur quelle plateforme !
Tu peux très bien utiliser le langage natif du système (Java pour Android, Swift pour IOS et C++ pour Windows Phone il me semble), mais cette solution t'oblige à coder en autant de fois que de plateformes désirées pour ton application. C'est cependant très souvent bon en performances, puisque tu utilises directement les fonctionnalités natives du téléphone.
Une autre solution te pousserais peut être à t'orienter vers une application mobile web. C'est, selon moi, la meilleure solution si tu veux rendre ton appli multi-plateformes sans pour autant devoir recoder des pages et des pages. Le langage est "relativement facile" à apprendre (HTML, css, js), mais il est très dense (selon le choix d'API). Une appli mobile t'offre la possibilité d'utiliser des fonctionnalités liés au web, et donc t'ouvre une immense quantité de possibilités puisque le web regorge d'API riches (rien que chez Google ça envoie). Un des avantages est qu'il existe des frameworks complets, simples d'utilisations, bien documentés et avec une communauté active (comme Cordova tiens tiens ;) ).
La dernière solution serait l'application hybride, mais malheureusement je ne peux pas vraiment t'en dire plus car je suis pas trop familier avec cette techno ^_^'
Bon développement ! (Même si tu as déjà commencé)
@@Kouros13118 whatsapp elle est hybride ou quoi pour etre aussi performant
Merci. Je sais que l'on peut developper des app pour mobiles sans Cordova (en utilisant uniquement HTML5). Alors pourquoi utiliser Cordova SVP ? Merci
Compilation + gestion des plateformes + architecture du projet de base sans rien faire : utile pour démarrer rapidement sans se prendre la tête.
Thomas Bianchini Merci!
slt les mecs! jst un question: si g veu créer un appli de reconaissance facial, sur kel technologie ou langage dois g morrienter? merci a tous!!
Pour ce genre d'appli.
Il serait preferable de coder sur du natif.
Java pour android exemple
+coolbeatz Mutombo Je te conseille d'utiliser la librairie OpenCV pour tout ce qui est détection d'éléments dans une vidéo. Après, je ne sais pas si c'est vraiment adapté pour mobile.
Bonjour, merci pour le tuto,
Vous n'expliquez pas ou peut être que si mais je n'ai pas compris , à quoi correspond les "@include"
quand j'utilise include ca ne fonctionne pas je dois écrire -webkit-transform:translate3D etc.. pour que cela fonctionne
Il utilise sass, mais tu peux utiliser Less.
cookpro Merci,
J'ai une autre question:
Dans ses tutos il utilise deux déclaration de controlleur, une comme :
app.controller('CommentsController', function( etc..)
l'autre il déclare juste le nom de la fonction en tant que controlleur : function Nom_du_Controlleur($scope){
c'est quoi le mieux?
J'ai le même problème, impossible de faire le rooting comme tu le montre. J'ai tout essayé : reprendre exactement ce que tu fais avec la même version d'angular, rien à faire, ça ne fonctionne pas. Même avec d'autre tuto sur le net, impossible, ça marche pas, je deviens fou xD
Salut, t'a trouvé depuis ?
HELP
Bonjour stp jeveux savoir pourquoi mointre moi cette erreur ?? et jarrive pas charger les page home.html et about.html
Aviez-vous déjà resolue le problème?
trés bon tuto merci , mais je trouve le code de angular aberrant , est ce que jquery mobile peut le remplacer ? j'ai pas encore eu le temps de le tester ...
oui tu n'as pas besoin d'angularJS, mais bon tu va a voir beaucoup de code en plus.
Bonne chance
cookpro merci pour l'info :)
Très intéressant mais je n'ai jamais réussi à installer ce Cordova ahahah toujours ce même problème malgré vos précédentes vidéos.
salut tout le monde , j ai un project a creer une kisoque , quelqu un peut m aider a entamner
je me demande pourquoi t'as toujours pas créé une appli mobile pour tes tutos à part... Afin qu'on soit notifié à chaque upload... j'ai playstoré mais rien.
Question : est-ce-que t'as déjà fait un tuto qui parle de jasperreport ?
je me **et garder le file...
Bonsoir à tous, j'ai aimée le tutoriel est j'ai bien voulue travailler sur ça mais le problème est que je suis bloqué au niveau de angularjs avec le ng-view(30:00). J'ai tout fait comme sur le tuto mais rien ne marche. J'ai besoin de votre precieux aide. Please
Salut, j'avais le même problème que toi de mon côté. J'ai cherché un peu dans la doc de AngularJS et j'ai trouvé comment régler le problème.
En fait, depuis la version 1.2 de AngularJS, ngRoute dont se sert grafikart dans le tuto est devenu un module à part que tu peux télécharger ici : code.angularjs.org/1.2.0rc1/angular-route.js
Ensuite, tu dois l'appeler dans ton index bien entendu ET dans la variable "app" comme ceci : var app = angular.module('app', ['ngRoute']); tu pourras d'ailleurs y mettre d'autres modules si tu en as besoin.
En effet, l'auteur dit un moment "je n'ai pas besoin de modules donc je laisse vide "[]", ici, vu que nous utilisons une version plus récente de AngularJS, nous avons besoin d'expliciter l'utilisation de ngRoute :)
A+
***** Merci pour ton aide :D je m'y mets tout de suite :)
kim kayna Bon courage :)
***** après avoir telecharger le module j'ai essayé d'appliquer le angular.module dans ma page index. y a juste le une petite modification dans l'url (le slash avant about ) file:///D:/site/lab/Weather/www/index.html#/about mais le texte qui est dans about.html et home.html n’apparaît pas dans l'index.html. Quel est le problème. J'ai essayé de chercher sur le net mais ça n'a rien donnée.
kim kayna Tu ne dois pas appeler tes modules dans ton index mais dans ton app.js. quand tu initialises la variable app.
ca fait de mémoire : var app = angular.module('app',['ngRoute']);
Mais pour que ça fonctionne il faut bien que tu appelles le module ngRoute dans ton index.
Ensuite à toi de bien vérifier tes routes. Tiens moi au courant ! :)
Tuto ne fonctionne plus vraiment, Cetrtaine variable ne fonctionne pas et ecrase le scope.
A partir du binding, c'est pas la peine.
EDIT:
Par contre je travail dessus et je vais mettre le code sur GitHub.
Es-tu d'accord ?
salut cookpro , est ce possible de partager avec nous le lien du projet gitHub?
petit soucis avec t. weather.0.main.toLowerCase()
quelqu'un peut m'aider svp!
+DvYanis J'avais le même souci,
ma solution : t.weather[0].main.toLowerCase()
:)
+Nicolas BEHRA Génial mec merci
Elle ttres coule c'set tutoriel
excuser moi, c est kiosque
Excellent tutoriel. Merci pour cet excellent partage.