Share
Vous voulez apprendre à utiliser PhoneGap, mais vous ne savez pas par où commencer? Rejoignez-nous pour créer «Sculder», un hommage non seulement à une excellente série télévisée de science-fiction, mais également à une application mobile native à part entière pour le croyant qui vous croit!
Nous nous sommes arrêtés dans le dernier tutoriel de cette série, juste après l'intégration de notre application dans le framework Phonegap et l'attente d'ajouter notre dernière fonctionnalité: la caméra de l'appareil. L'idée derrière ce didacticiel est de permettre à l'utilisateur de prendre une photo avec l'appareil photo, puis de la télécharger sur un serveur. Nous ne couvrirons pas le téléchargement réel de l'image, mais laisserons de l'espace pour que la fonctionnalité soit ajoutée. Vous pouvez trouver de nombreux exemples d'implémentations diverses pour le téléchargement d'images via PHP, Ruby et d'autres langages côté serveur ailleurs en ligne. Au lieu de cela, ce didacticiel se concentrera sur la prise de la photo, l’affichage de la photo prise et la notification à l’utilisateur que la photo a été téléchargée (la fonction que votre serveur peut activer s’il renvoie un message de téléchargement réussi)..
La première chose à faire est d’ajouter un bouton sur notre page:
Ensuite, nous devons ajouter un peu de style au bouton pour le rendre un peu plus joli. Comme nous développons pour des navigateurs décents, nous pouvons tirer parti de certains styles CSS3.
button.camera-control background-color: # f3f3f3; background-image: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, arrêt de couleur (0%, # f3f3f3), arrêt de couleur (50%, #dddddd), arrêt de couleur (50%, # d2d2d2), arrêt de la couleur (100%, #dfdfdf)); background-image: -webkit-linear-gradient (en haut, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); image d'arrière-plan: gradient linéaire (haut, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); border-right: 1px solid #dfdfdf; bord inférieur: 1px solide # b4b4b4; border-right: 1px solid #dfdfdf; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: encart 0 1px 0 0 blanc, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; box-shadow: incrément 0 1px 0 0 blanc, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; couleur: # 666; bloc de visualisation; police: 16px gras "helvetica neue", helvetica, arial, sans-serif; marge: auto 10px; rembourrage: 7px 0; text-shadow: 0 1px 1px #fff; largeur: 150px; button.camera-control: hover background-color: # e5e5e5; background-image: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, arrêt de couleur (0%, # e5e5e5), arrêt de couleur (50%, # d1d1d1), arrêt de couleur (50%, # c4c4c4), arrêt de la couleur (100%, # b8b8b8)); image d'arrière-plan: -webkit-linear-gradient (haut, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); image d'arrière-plan: gradient linéaire (haut, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); -webkit-box-shadow: encart 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; box-shadow: encadré 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; button.camera-control: active -webkit-box-shadow: encart 0 0 30px 0 # 999999, 0 1px 0 0 blanc; encadré: encadré 0 0 30px 0 # 999999, 0 1px 0 0 blanc;
Si vous exécutez et testez votre application (sur le simulateur ou sur un appareil), vous devriez avoir une page comme celle-ci:
Maintenant, nous devons lier la fonctionnalité. Tout d'abord, nous commençons avec le capturePhoto () fonction qui va démarrer la caméra:
fonction capturePhoto () navigator.camera.getPicture (uploadPhoto, null, sourceType: 1, qualité: 60);
La fonction de réussite, envoyer la photo, est le prochain à écrire. Cette fonction téléchargera la photo sur notre serveur, affichera l'image à l'écran et informera également l'utilisateur que l'image a été téléchargée. Commençons par afficher l'image à l'écran:
function uploadPhoto (data) // C'est ici que vous enverriez le fichier image au serveur // image en sortie sur l'écran cameraPic.src = "data: image / jpeg; base64," + data;
L’une des API Phonegap que nous n’avons pas vraiment étudiées auparavant, mais que nous utiliserons ici, est l’API de notification. L’API de notification sert à alerter l’utilisateur d’une action effectuée, telle que la alerte() Fonctionnalité Javascript, mais adaptée au périphérique spécifique sur lequel elle s'exécute. Il peut également émettre un bip, vibrer ou tout simplement afficher et alerter un message de dialogue. Pour cette application, nous allons simplement utiliser le notification.alert (), qui est une boîte de dialogue qui peut accepter certaines options personnalisables. L'utilisation de base est:
navigator.notification.alert (message, alertCallback, [titre], [nom du bouton])
Au sein de notre envoyer la photo fonction, nous allons utiliser le notification.alert () pour afficher un message indiquant que la photo a été téléchargée sur le serveur. Notre code ressemble à ceci:
Accentsconagua
navigator.notification.alert ('Votre photo a été téléchargée', // message correct, // rappel 'Photo téléchargée', // titre 'OK' // nomDuBouton); Nous devons aussi écrire le d'accord fonction pour nous assurer que nous ne rencontrons aucune erreur lorsque nous exécutons notre code. Il peut faire tout ce que vous voulez, mais il est préférable de l’utiliser quand il est connecté au serveur. Pour le moment, la fonction restera vide.
Notre envoyer la photo() La fonction ressemble maintenant à ceci:
function uploadPhoto (data) // C’est là que vous voulez envoyer le fichier image au serveur cameraPic.src = "data: image / jpeg; base64," + data; // Transfert réussi sur le serveur navigator.notification.alert ("Votre photo a été téléchargée", // message correct, // rappel "Photo téléchargée", // titre "OK" // nomDuBouton); // le téléchargement a échoué Échec / * if (failedToUpload) navigator.notification.alert ('Votre photo n'a pas été téléversée', échouée_Désavée, 'Photo non téléchargée', 'OK'); * / function okay () // Faire quelque chose Vous devez maintenant exécuter l'application sur un périphérique, car le simulateur n'a pas accès à une caméra. Après avoir pris une photo, vous recevrez l'alerte suivante:
Notre application est maintenant terminée et nous sommes prêts à l'exporter en tant qu'application opérationnelle et à la soumettre aux magasins.!
Veuillez noter que pour distribuer une application sur l'Apple App Store, vous devez disposer d'un certificat de développeur payé par Apple..
Exporter pour la plate-forme iOS peut être un peu un défi, mais tant que tous vos certificats sont préinstallés et synchronisés avec Xcode (ce que vous auriez dû faire avant de pouvoir tester sur un périphérique), il ne devrait pas être trop difficile après l'avoir fait une fois. Si vous double-cliquez sur votre projet dans Xcode et allez dans les paramètres de construction, assurez-vous que votre identité de signature de code est utilisée pour l'application.
Vous devez maintenant aller à Produit => Archive et envoyez l'application dans les archives (dans la fenêtre de l'organiseur). Il est possible que vous obteniez une erreur le long des lignes de NSAutomaticpool est indisponible, cela est dû au comptage automatique des références (qui est nouveau). PhoneGap ne le prend pas en charge pour le moment. Il suffit donc de le désactiver dans les paramètres de construction du projet. Si vous accédez au paramètre de construction et recherchez -CLANG_ENABLE_OBJC_ARC vous le trouverez et le basculerez sur "non".
Une fois cela fait, vous pouvez vous connecter à iTunes Connect et commencer à y configurer votre application. Une fois connecté, cliquez sur "Gérer les applications" et "Ajouter une nouvelle application". Parcourez l’assistant, ajoutez l’icône iTunes (512x512px) et au moins une capture d’écran de l’application. Il existe d'autres champs obligatoires, tels qu'un numéro de référence (il s'agit d'un numéro de suivi pour vous. J'utilise personnellement 0001 pour commencer et continuer à partir de là) et une description. Une fois le formulaire rempli, cliquez sur Soumettre..
Une fois terminé, il vous sera présenté le suivant
Au début, l'état de vos applications sera "Préparer le téléchargement", vous devez donc cliquer sur "Afficher les détails", puis sur "Téléchargement binaire". Une fois que vous avez traversé cela, votre statut sera maintenant "Prêt pour le téléchargement".
De retour dans l'Organiseur de Xcode, nous pouvons exécuter l'option Valider pour vérifier que notre application peut être soumise à l'App Store. Si tout se passe bien, l'application s'en sortira sans erreur de validation..
Remarque: Sauter dans tous les obstacles présentés par Apple n’est pas une tâche facile à maîtriser. Si vous rencontrez diverses erreurs liées à des générations qui échouent parce que les profils de provisioning n'ont pas pu être trouvés, etc., effectuez une recherche rapide sur Google pour trouver la solution. Il y a 100 scénarios différents avec des certificats mal appariés auxquels j'ai été confronté lors de la création d'une application pour iOS, tous résolus à l'aide de Google. Si vous rencontrez régulièrement des problèmes, n'hésitez pas à laisser un commentaire ci-dessous et je vais essayer d'aider!
Maintenant que notre application est valide, nous pouvons la soumettre à l'App Store. Nous cliquons sur Soumettre, vérifions que notre demande et notre identité sont correctes, puis attendons le téléchargement..
Une fois cela fait, vous pouvez vous connecter à iTunes Connect et voir que l'application est "En attente de révision". Cela peut souvent prendre jusqu'à 14 jours avant que votre application soit dans l'App Store. Attendez-vous donc à attendre un peu..
Heureusement, après toute la douleur que vous avez pu subir avec l'exportation iOS, Android est légèrement plus facile. En supposant que vous utilisiez Eclipse pour votre développement Android, il vous suffit de supprimer toutes les fonctionnalités inutilisées du fichier manifeste, puis de cliquer avec le bouton droit de la souris sur le projet et de descendre à Android Tools => Exporter le package d'application signé. Une fois que vous avez exécuté l'Assistant pour exporter votre package, vous devez vous assurer de créer un magasin de clés. Vous allez vous retrouver avec un .apk fichier, qui est ce que nous allons télécharger sur le marché Android.
Rendez-vous sur le site de l'éditeur Android Market ici et connectez-vous. S'il s'agit de votre première visite ici, vous devrez créer un compte (en utilisant votre compte Google existant), payer 25 USD et créer un compte Google Wallet. Une fois inscrit et connecté, vous pouvez continuer et télécharger votre .apk fichier. C'est un processus beaucoup plus simple que la route iOS. Si vous sentez que le formulaire est écrasant ou si vous n'êtes pas trop sûr de quelque chose, consultez le tutoriel de Shane Conder & Lauren Darcey ici sur les mobiletuts au fur et à mesure de leur progression. Toute leur série sur le développement d'Android mérite d'être lue si vous êtes intéressé à poursuivre votre développement.!
Une fois que vous avez terminé, votre application ne prend pas de temps avant que votre application soit sur le marché et prête à être vendue..
Comme indiqué dans le premier tutoriel de cette série, nous allons tirer parti du système de construction en nuage de PhoenGap disponible sur build.phonegap.com. À long terme, l’utilisation de ce service coûte cher, mais l’autre option consistant à exécuter différents kits de développement logiciel (SDK) sur différents systèmes d’exploitation, puis à transférer l’application sur chacun d’eux peut être plus fastidieuse et fastidieuse que l’argent supplémentaire que coûte l’utilisation du service vaut la peine.
Tout ce dont nous avons besoin est un Zip *: français fichier contenant notre HTML, CSS et JavaScript. Téléchargez-le sur le service et vous serez ensuite redirigé vers un écran "Vos applications" où vous verrez votre application disponible dans ses différents formats:
C'est un simple clic et téléchargement pour obtenir la bonne construction. Pour commencer à utiliser Blackberry, nous devons soumettre notre application à leur "App World". Rendez-vous sur App World ici et cliquez sur "Get Started". Remplissez le formulaire assez simple et attendez.
REMARQUE: Malheureusement, pour le moment (2/8/2012), Blackberry a apparemment un arriéré d'applications "Vendor". J'attendais depuis début janvier d'être approuvé, mais je n'ai pas eu cette chance. Ils organisent actuellement une promotion Playbook pour ceux qui souhaitent convertir leurs applications Android, ce qui provoque un retard. Si vous êtes intéressé à devenir un fournisseur Blackberry, inscrivez-vous dès que possible..
Pour les autres appareils pris en charge par le service de construction en nuage de PhoneGap, il vaut la peine de s'inscrire sur leurs sites de développement pertinents: Nokia et webOS. Ils sont très similaires et regorgent de documentation pour le téléchargement d’applications sur leurs marchés respectifs. Ils suivent le même processus (inscription, téléchargement de l'application, téléchargement des supports marketing, attente) et sont relativement simples à suivre..
Nous avons maintenant terminé notre application, l'avons exportée et téléchargée sur l'App Store iOS ainsi que sur le marché Android. Nous avons également utilisé le service de compilation de PhoneGap pour obtenir une version de notre application sur les autres plates-formes que nous pourrions prendre en charge..
Phonegap est en train de devenir de plus en plus puissant et continue de croître (la version 1.4 vient de paraître). Si vous débutez dans le développement mobile et que vous ne comprenez pas les langages de programmation natifs sous-jacents aux plates-formes Android ou iOS, cela vaut la peine de connaître ce SDK. Espérons que cette série de tutoriels vous a montré comment faire exactement cela!
